关于Web前端之HTML5，你知道多少？

浏览器内核

IE：trident
谷歌/欧鹏：blink
火狐：gecko
苹果(Safari)：webkit

概念：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息，渲染引擎是兼容性问题出现的根本原因。

URL地址

• 浏览器向服务器发送请求(通过http协议)。
• http协议:超文本传输协议，也就是浏览器和服务端的网页传输数据的约束和规范。
• URL协议:平时我们写的网址就是url地址
• 协议规定格式:scheme://host.domain:port/path/filename
• scheme:定义因特网服务的类型，常见的就是http。
• host:定义域主机（http的默认主机是www）。
• domain:定义因特网域名 比如:w3school.com.cn。
• port:定义端口号（网页默认端口:80）
• path:网页所在服务器上的路径。
• filename:文件名称。

html简介

html（Hyper Text Markup Language）中文译为“超文本标记语言”，主要是通过标记对网页中的文本，图片，声音等内容进行描述。

开发工具

• Adobe Dreamweave：历史悠久，设计师使用。
• Sublime：轻量级，有很多好用的插件。
• Webstorm：重量级，太过智能。

HTML<!DOCTYPE>

• 声明必须是 HTML 文档的第一行，声明是html5的版本。

Web标准构成

• Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
• 结构标准(Structure)：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
• 样式标准(Presentation)：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS。
• 行为标准(Behavior)：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。

字符集：<meta charset="utf-8">

• GB2312：简体中文，包括6763个汉字。
• BIG5：繁体中文，港澳台等专用。
• GBK：包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312。
• UTF-8：则包含全世界所有国家需要用到的字符。

标题标签(熟记)

• 这是一个双标签，有<h1>到<h6>
• 标题标签语义:作为标题使用，并且依据最重要性递减。

注意:h1标签因为很重要，尽量少用，不要动不动就h1，一般h1都是给logo使用。

段落标签(熟记)

• 单词缩写：paragraph，段落
• 在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是<p>文本内容</p>，是html文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签(认识)

• 单词缩写：horizontal，横线
• 在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr/>就是创建横跨网页水平线的标记。其基本语法格式为：<hr/>是单标记。

换行标签(熟记)

• 单词缩写：break 打断，换行
• 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>，这时如果还像在word中直接敲回车键换行就不起作用了。

div span标签(重点)

• <div span>是没有语义的，是我们网页布局主要的两个盒子。
• div就是division的缩写，分割，区分的意思，其实有很多div来组合网页。
• span，跨度，跨距；范围。
• 语法格式:
  <div>这是头部</div> <span>今日价格</span>

文本格式化标签(熟记)

• <b></b>和<strong></strong>文字以粗体方式显示（XHTML推荐使用strong）
• <i></i>和<em></em>文字以斜体方式显示（XHTML推荐使用em）
• <s></s>和<del></del>文字以加删除线方式显示（XHTML推荐使用del）
• <u></u>和<ins></ins>文字以加下划线方式显示（XHTML不赞成使用u）

图像标签img(重点)

• 单词缩写：image 图像
  用法：<img src="图像的URL" />
• <img />标记属性
  

链接标签(重点)

• 单词缩写:anchor的缩写。基本解释锚，铁锚的
  语法结构:<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
• href：用于指定链接目标的URL地址，当为标签应用href属性时，它就具有了超链接的功能。Hypertext Reference的缩写。意思是超文本引用。
• target：用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意:

• 外部链接需要添加http://
• 内部链接直接链接内部页面名称即可，比如<a href="index.html">首页</a>
• 如果当时没有确定链接目标时，通常将href="#"，表示该链接暂时为一个空连接。
• 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以一添加超链接。

锚点定位(难点)

• 通过创建锚点链接，用户能够快速定位到目标内容。
  创建锚点链接分为两步：
• 使用<a href="#id名">链接文本</a>
• 使用相应的id名标注跳转目标的位置。id="id名"

base标签

• base可以设置整体链接的打开状态，此标签放在head中。
  <base target="_blank" />所有链接页面在新窗口中打开。

特殊字符标签(理解)

注释标签

• <!-- 注释的内容 -->
  注意:多写注释是非常好的写代码习惯，团队协作更顺畅。注释是写给队友看的，浏览器是不执行的。

路径(重点,难点)

• 相对路径：
• 图像文件和HTML文件位于同一文件夹，只需要输入图像文件的名称即可，如<img src="logo.gif" />。
• 图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
• ,图像文件位于HTML文件的上一级文件夹，在文件名之前加入"…/"，如果是上两级，则需要使用“…/…/”，以此类推，如<img src="../logo.gif" />。
• 绝对路径：
• “D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.love.com/images/logo.gif”。

无序列表ul(重点)

• 无序列表的各个列表之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul >
<li >列表1</li >
<li >列表2</li >
</ul >

注意:

• <ul ></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
• <li></li>之间相当于一个容器，可以容纳所有元素。
• 无序列表会带有自己样式属性，放下那个样式，让css来。

有序列表ol(了解)

• 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，其基本语法如下：

<ol>
<li>列表1</li>
<li>列表2</li>
</ol>

• ol所有特性基本与ul一致，但实际工作中，较少用ol。

自定义列表(理解)

• 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

< dl>
< dt>名词1< /dt>
< dd>名词1解释< /dd>
< dd>名词2解释< /dd>
< /dl>

表格table(会用)

• 创建表格：

<table>
<tr> //确定几行
	 <td>单元格内的文字</td> //确定单元格数量
</tr>
</table>

• 注意：
  <tr></tr>中只能嵌套<td></td>
<td></td>标签，他就像一个容器，可以容纳所有的元素。

表头标签

• 表头一般位于表格的第一行或第一列，其文本加粗居中。设置表头很简单，主需要用表头标签<th></th>替代相应的单元格标签<td></td>即可。

表格结构(了解)

在使用表格进行布局时，可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,因此不再赘述)如下：

• <thead></thead>：用于定义表格的头部。必须位于<table></table>标签中，一般包含网页的logo和导航等头部信息。
• <tbody></tbody>：用于定义表格的主体。位于<table></table>标
  签中，一般包含网页中除头部和底部之外的其他内容。

表格标题

<table>
   <caption>我是表格标题</caption>
</table>

Caption标签必须紧随table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点)

跨行合并：rowspan 跨列合并：colspan
合并单元格的思想:将多个内容合并的时候，就会有多余的东西，把它删除。例如把3个td合并成一个，那就多余了2个，需要删除。公式:删除的个数 = 合并的个数 - 1

总结表格

①表格提供了HTML中定义表格式数据的方法。
②表格中由行中的单元格个组成。
③表格中没有列元素，列的个数取决于行的单元格个数。
④表格不要纠结于外观，那是CSS的作用。

表格的学习要求：能手写表格结构，并且能合并单元格。

表单标签(掌握)

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了tpye属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

label标签(理解)

label标签为input元素定义标注（标签）。

• 作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

如何绑定元素呢？

• 单个表单用lalbel直接进行包裹input就可以了。
  
• 如果label里面有多个表单，想定位到某个可以通过for，id的格式来进行。
  

textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下：

注意：

• 中至少应包含一对。
• 在option中定义selected=“selected”时，当前项即为默认选中项。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

常用属性：

• action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
• method用于设置表单数据的提交方式，其取值为get或者post。
• name用于指定表单的名称，以区分同一个页面中的多个表单。
  注意：每一个表单都应该有自己的表单域。

HTML5新标签与特性

文档类型设定（document）

HTML：sublime，输入html：4s
XHTML：sublime，输入html：xt
HTML5：sublime，输入html：5 <!DOCTYPE html>

• 字符设定
  <meta http-equiv="Content-Type" content="text/html;utf-8">HTML与XHTML中建议这样去写。
  <meta charset="utf-8">HTML5的标签中建议这样去写。
• 常用新标签
• datalist标签定义选项列表。请与input元素配合使用改元素。
  
• fieldset元素可将表单内的相关元素分组，打包，与legend搭配使用。
  
  新增的input type属性值：
  
  
• 常用新属性：
  
  

多媒体embed(会使用)

embed可以用来插入各种多媒体，格式可以是Midi、wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。因为兼容性的问题，这里不多做介绍，后面会说到audio和video视频多媒体。

多媒体audio

HTML5通过<audio>标签来解决音频播放的问题，用法很简单，如下：

• <audio src=“./music/ok.mp3”></audio>

通过附加属性可以更好控制音频播放，如下：

• Autoplay：自动播放
• Controls：是否显示控件
• Loop：循环播放

由于版权等原因，不同的浏览器可以支持播放的格式是不一样的，如下图供参考：

多媒体video

使用方法：<video src=“./video/mv.mp4” controls=“controls”></video>
同样哈，通过附件属性可以更好emmmmm，控制播放咯：
Autoplay：自动播放
Controls：是否显示默认播放控件
Loop：循环播放
Width：设置播放窗口宽度
Height：设置播放窗口的高度