目前，企业级web开发多采用前后台分离开发模式，这种模式要求前端开发者专注于前端开发，后端开发者专注于后端开发，各自完成自己擅长的任务模块。
HTML被称为超文本标记语言（Hyper Text Markup Language），是构成web世界的一砖一瓦，它定义了网页内容的含义和结构。除HTML以外的其他技术则通常用来描述一个网页的表现与展示效果（如 css），或功能与行为（如 JavaScript）。html、css、JavaScript并称为前端三要素。
HTML本质上是一个在互联网中传递信息的载体的协议，这个协议中规定了我们如何定义网页，如何在网页中定义标题。程序员根据这个协议编写网页代码，浏览器根据协议解析这个代码。网页的出现使得信息的传递更加便捷，解决了传统的报纸传递信息的缺陷，并且网页的功能强大，除了普通文本显示外，还可以显示图片，视频，音频，超级链接，动画等。
文本编辑器：vscode、sublime
浏览器：Firefox、Google Chrome
部署服务器：Apache
（以上软件请到官网下载最新版本）
| 浏览器 | 内核 |
|---|---|
| IE | trident |
| Firefox | gecko |
| Safari | webkit |
| Opera | Blink |
| Google Chrome | Blink |
浏览器内核主要分成两部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。
html5开发和web前端？渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
<!Doctype html5>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html</title></head><body><div>hello world</div></body>
</html>
< !Doctype html5 > 表示文档类型声明，说明该文档为html5文档。
Doctype 标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档，告知浏览器以何种规范解析页面。Doctype 不存在或格式不正确会导致文档以混杂模式呈现。
< html > 表示html文档的根标签，所有的html标签应该位于html标签内部。
html教程。< head> 表示html的头部，包含在头部的内容不会被显示在页面中。
head内部标签主要用于设置或者导入外部文件，一般不直接显示在浏览器视口中，常用的子标签为meta、title、link、script，分别表示元信息设定、文档标题、css、js。
< body> 表示html发的体部，主要用来放网页内容，其内容会显示到浏览器视口中。
<! – 注释内容 -->
注释会被浏览器忽略而不被解析，用户无法看到，注释的作用是让程序员表明代码的含义。
单标签元素：< meta/>、 < img/> 、 < br/> …
html入门教材。双标签元素：< div> < /div>、< a> < /a>、< span> < /span> …
标签可以进行嵌套使用，即可以将一个标签写入到另外一个标签内。
属性：属性应该出现在元素的开始标签内部，属性名和属性值通过 “=” 分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。
在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以 & 符开始，以 ; 结尾。
常见的实体：空格： ；、< ：<；、>：>；、&：&；
所谓 HTML 语义化，就是用恰当的标签去展示恰当的内容，像 HTML5 中新增的 header、nav、footer 等标签。而非什么都用 div 这种不具备语义化的标签来显示。
web网站前端开发？作用：搭建网页结构
特点：
标签：html、body、div、article、h1~h6、ul->li、ol->li、dl->dd/dt、p …
div：无意义的块元素
<div class="content"><div class="header">头部</div><div class="nav">导航</div><div class="left">左侧</div><div class="right">右侧</div>
</div>
article：H5新增的语义化标签
<article><header>logo、页面标题、导航性目录</header><nav>导航链接</nav>文章主体<aside>左边栏</aside><section>第一章节</section><section>第二章节</section><footer>版权信息、法律信息链接、反馈地址</footer>
</article>
h1~h6：标题元素
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
ul->li：无序列表
<ul><li>列表1</li><li>列表2</li><li>列表3</li>
</ul>
前端html5？ol->li：有序列表
<ol><li>列表1</li><li>列表2</li><li>列表3</li>
</ol>
dl->dd/dt、p：段落标签
<dl><dt>WEBUI</dt><dd>html</dd><dd>css</dd><dd>javascript</dd><dt>javaEE</dt><dd>corejava</dd><dd>mysql</dd><dd>servlet/jsp</dd>
</dl>
<p>这是一个段落</p>
作用：在结构中填充网页内容
特点：
标签：span、a、img、audio、video、strong、i、em…
span：无意义的行内元素
<span>行内元素</span>
a：超链接
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="mailto:2797262054@qq.com">发邮件</a>
《java从入门到精通》？img：图片
<img src="../images/photo.jpg" alt="" width="100">
video、audio：音频、视频
<video src="" controls></video>
<audio src="" style="display: none;" autoplay></audio>
strong 、i、em（装饰类）：H5过期的语义化标签
<strong>加粗</strong>
<i>斜体</i>
<em>强调</em>
table标签在Html文档中代表表格，通过二维数据表表示数据。table标签经常需要配合caption、 thead、tfoot、 tbody 、tr、 td、 th、 col、 colgroup一起使用 。
table 属性：
<table border="1" cellspacing="0" width="100%">
<caption>太理移动互联5班（415）</caption>
注意：当学习完CSS就不要使用这些属性了。
web前端开发入门与实战？th 通常位于thead标签中，表示表头中的标题，具有加粗居中的特性。
<thead><tr><th>序号</th><th>姓名</th><th>学号</th><th>在校班级</th></tr>
</thead>
td 通常位于tbody中，表示表体中的普通内容。
td 属性：
<tbody><tr><td>1</td><td>张三</td><td>2017001111</td><td>1722</td></tr><tr><td colspan="4">总人数：</td></tr>
</tbody>
Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。
form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时候表单元素时一般要配合label标签，用于描述其目的。
form 属性：
<form action="" method="get" enctype="multipart/form-data"> </form>
java web入门、input 组件：用于接受来自用户的数据
input 属性：
| 表单类型 | 含义 |
|---|---|
| text | 单行文本框 |
| password | 密码框，输入的内容将会被遮挡 |
| checkbox | 复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中 |
| radio | 单选按钮，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。一个单选按钮组中所有组件都应该具有相同的name值 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
| file | 文件按钮，用于选中文件系统中的某个文件 |
| hidden | 隐藏域，该组件不显示在页面中，但是其值会被提交 |
| image | 图像按钮，必须使用src来加载图片，使用alt来声明替换文本 |
用户名<input type="text" name="username">
密码<input type="password" name="" id="password">
性别
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
爱好
<input type="checkbox" name="hobbies" value="football">足球
<input type="checkbox" name="hobbies" value="run">跑步
<input type="checkbox" name="hobbies" value="swimming">游泳
头像<input type="file" name="file">
<input type="submit" value="提交">
<input type="reset" value="重置">
label 组件：用于表示某一表单组件的标题
label 属性：
性别
<label for="radio_gender_male"><input type="radio" name="gender" id="radio_gender_male" value="male">男
</label>
<label><input type="radio" name="gender" value="female">女
</label>
select 组件：用于表示下拉列表或列表
select 属性：
html前端开发、option 组件：用于表示选项，常包含在 < select >、< optgroup >中
option 属性：
<select name="class"><option value="1">1班</option><option value="2">2班</option><option value="3" selected>3班</option>
</select>
textarea ：用于表示多行文本框，没有value属性，其值被包含在标签内
textarea 属性：
<textarea name="introduce" cols="30" rows="10"></textarea>
progress：表示任务的完成情况，常用于进度条
progress 属性：
<progress value="70" max="100">70%</progress>
版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
![BZOJ 4518: [Sdoi2016]征途 [斜率优化DP]](/upload/rand_pic/2-280.jpg)
