从头开始学习前端
前言
本文章是自我学习的过程总结，如果有错误欢迎多多指正！前端三剑客：HTML，CSS，JavaScript。
我们经常看一些中欧风格的战争番会发现其中有一个不可缺少的角色，那就是铁匠。我把编写前端工程类比为铁匠打铁，铁匠打铁的过程中需要两个重要的属性，一个是锻造材料，一个是锻造工具，html就是锻料，css和js就是用来锻造的工具，我们可以使用css和js去锻造html最终锤炼为锋利的宝剑。
一、HTML的历史进程
我在学习一门新的技术的时候会喜欢先去学习它的历史，因为我们可以从历史中去窥探到事物诞生到毁灭各个节点发生的原因，从而更好地去理解它。
HTML的英文全称是 Hyper Text Marked Language，中文意思为超文本标记语言。
那什么是标记呢？
标记就是用HTML自己的语法规则把我们的文本内容给包裹起来的这个东西就叫做标记。例如
<a>文本</a>其中<a>就是开始标记，</a>就是结束标记
历史车轮
1.HTML1.0
后来，W3C取代IETF的角色，成为HTML的标准组织，1990年代的后半页，HTML的版本被频繁修改，直到1999年的HTML 4.01， 至此，HTML到达了它的第一个拐点。
2. HTML2.0
3. HTML 3.2
4. HTML 4.0
5. HTML 4.01
6. 严格的XHTML1
7. 夭亡的XHTML2
8. HTML 5
二、窥探HTML
1.骨架标签
<html>
<head>
<title>这里就是title啦</title>
</head>
<body>这里就是页面的主体啦</body>
</html>
我们经常看到的骨架结构一般是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
DTD声明
我们会发现代码以<!DOCTYPE html>开头，这一块就是DTD声明，它会告诉浏览器以何种HTML或XHTML规范。
<title>设置浏览器节点展示的内容</title>
<base>为浏览器所有的链接规定一个默认地址</base>
<meta>基本信息配置</meta>
<body>内容主体</body>
<link>引用外部资源</link>
meta标签
meta标签可以配置页面相关的基本信息
配置项如下
1.字符集 charset：计算机是无法识别人类的文字的，所以需要字符集来对字符进行编码，让计算机能够精准的存储和识别各种文字。中文字符集主要有两种，UTF-8和GBK；
- UTF-8：utf-8包含各国语言，比较复杂，更加臃肿，加载过慢。
- GBK：gbk是gb2312的扩展，其中收录了罕见的汉字、古汉字，gb2312仅涵盖了汉字和一些常用的外文，比如说日文偏假名。如果我们更加追求页面的访问速度，可以选择使用gb2312。
2. 视口 viewport：视口就是浏览器显示网页内容的区域，width=device-width ：表示视口宽度等于屏幕宽度。在移动端的时候使用较多。
3.定义“关键词” Keysword：关键词主要是为了搜索引擎更方便快速的找到，提高命中率。
4. 定义“页面描述” Description：是为了优化搜索引擎进行搜索的。(*title标签也是可以优化搜索的)
以上这些属性不需要记，但是要知道存在这些标签，在遇到相关场景的时候要可以想起来html提供了这些能力，但是有一个属性比较特殊，之前看到过的技术文章的作者推荐记住
<meta http-equiv="refresh" content="3;http://www.baidu.com"><!-- 3秒之后跳转到百度-->
2.排版标签
HTML中还有一些标签是用来完成整体页面的排版的，接下来就是排版标签的介绍啦。
p标签
p标签是一个段落标签，举个栗子
<p>第一自然段</p>
<!--align属性可以设置文本对齐方式，参数值有left，center，right-->
<p align="center">第二自然段</p>
这里需要提到，所有的HTML标签都是归类为两种的
- 文本标签，p、span、a、b、i、em…文本标签只能放置文本、图片、表单元素。
- 容器标签，div，h系列标签，li，dd，dt…容器标签可以放置你想放的所有东东。
hr标签
首先说明一下，hr标签并不是人力资源标签：）
言归正传，hr标签就是水平分割线标签，在视觉上将两部分内容以一条水平分割线进行分割，举个栗子
上面这条线就是啦！这样简单的一个标签但是属性却是不少。
<!--
align ： 布局位置
size ： 线条粗细
width ： 线条长度
color ： 线条颜色
noshade ： 去阴影，若没有此属性则默认具有阴影
-->
<hr align="left" size="2" width="500" color="red" noshade/>
br标签
br标签就是换行标签，可以使文本强制换行。
div标签和span标签
div标签可以把内容包装起来分割为单独的区块，单独占据一行；
span标签和div类似但是不会换行；
div和span还有一个区别就是div是个容器级标签，而span是文本级标签；div是有一个属性align，不多介绍了。
div举例：
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="guanggao"></div>
<div class="dongxi"></div>
</div>
<div class="footer"></div>
我们亲切地称这种模式叫做“div+css”：div标签负责布局、结构、分块，css负责样式。
center标签
内容居中标签。
提问：是居于浏览器的中间还是居于浏览器视窗的中间？
pre标签
预定义标签，将保留标签内所有的内容，原原本本的展示出来（空格、换行符）。
3.字体标签和超链接
字体标签：font、b、u、sup、sub超链接：a
在学习字体标签之前我们需要先了解转义字符，我们在使用p标签的时候内容中如果存在特殊字符是无法正常显示出来的，这个时候我们就要使用转义字符，举个栗子：
<!--**我们来看一下直接写<p>可以不可以正常展示**-->
<div>这是一个HTML语言的 <p>标签</div>
<div>这是一个HTML语言的<p>标签</div>
没有转义的<p>会作为p标签作用在HTML页面中，所以此时我们就要使用转义字符。
这里列举一些常用的转义字符：
：空格 （non-breaking spacing，不断打空格）<：小于号（less than）>：大于号（greater than）&：符号&"：双引号'：单引号©：版权©™：商标™绐：文字绐。其实，#32464是汉字绐的unicode编码。
好了接下来正式学习字体标签
u、s、i标签
<u>，下划线标签。
<s>，删除线标签，<del>和<s>等同。
<i>，斜体标签，<em>和<i>等同。
这里扩展一下，<b>以及<strong>两个粗体标签已经被废弃掉了。
font标签
font标签可以设置字体的各种属性
color： 设置color的方式有 单词 / rgb / #ffooccsize： size的取值为1-7，大于7按照7来算，小于1按照1来算，可以通过css来实现更多效果。face="微软雅黑"：设置字体的类型
sup、sub标签
9<sup>2</sop>
9<sub>3</sub>
效果如下：
92
93
a标签
a标签非常重要！！！会也得会，不会也得会
a标签属性同样有很多，我们来一个一个看
href：超文本地址，给我们的直观感受就是可以跳转到其他地方。在这里还有一个知识点，锚点链接
举个栗子
特别说明：name属性在HTML4.0以前使用，id在HTML4.0之后使用，为了向前兼容我们需要把name和id都写上，并且值要求一样
除此之外a标签还可以进行邮件的跳转
<a href="mailto:XXX@XXX.com">
title：悬停文本。name：主要用于设置一个锚点的名称。target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：_self：在同一个网页中显示（默认值）_blank：在新的窗口中打开。_parent：在父窗口中显示_top：在顶级窗口中显示
4.图片标签
img标签可以在页面中显示图像
-
能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
-
不能往网页中插入的图片格式是：psd、ai等。
HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。
img标签属性
src：图片的路径，可以是相对路径也可以是绝对路径。相对路径：相对于当前的位置，./代表当前目录，../代表上级目录。绝对路径：绝对路径一般是两种，一种是带有盘符的本地路径，一种是网络路径。width & height：图像的宽度和高度，在H5中只能是像素，但是在H4中可以是百分比也可以是像素。alt：图片不可用是代替显示的内容。title：鼠标在图片上悬停时显示的内容，这个属性中的内容不应该抱有一定会被用户看到的期望。align：图片和周围文字的相对位置。
举栗子时刻又到了，其中有 彩蛋。
<a alt="美女图片" src="http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg" />
5.其他标签大军
HTML的标签大军行列还有很多实用需要掌握的标签。来让我们一起看看都有什么吧！
列表标签
列表标签可以说在大多数网站都会被使用到，很多场景都需要使用到列表去展示数据。列表标签主要分为三种
无序列表ul：<ul>需要和<li>一起使用，列表中每一项都需要被<li>标签包裹。
ul中的每一项必须是li，li不能单独使用，只能在ul中使用。除此之外，li标签还是个容器标签，也就是说它的里面什么都可以放。
ul和li都具有type属性。
有序列表ol：ol除了语义和ul不一样其他都是一样的，不过多赘述。只介绍一下ol标签的type属性。type属性：ol的type属性默认是阿拉伯数字，可以使用a、i、A、I，并可以结合start属性表示从哪里开始。
定义列表dl：定义列表的作用非常大。
备注：
dl标签中只能有dt&dd标签，dt&dd标签只能在dl标签中。
直接举栗子
可以看出dd是描述dt的。
表格标签
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table就是表格标签，tr是表格内的行标签，td就是行内每列的内容标签。
直接来看属性都有哪些
<table>的属性：
border：边框。像素为单位。style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）width：宽度。像素为单位。height：高度。像素为单位。bordercolor：表格的边框颜色。align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0bgcolor="#99cc66"：表格的背景颜色。background="路径src/..."：背景图片。
背景图片的优先级大于背景颜色。bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色
这两个属性的目的是为了设置3D的效果。dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。
<tr>属性：
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认）rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。height：一行的高度align="center"：一行的内容水平居中显示，取值：left、center、rightvalign="center"：一行的内容垂直居中，取值：top、middle、bottom
<td>属性：
align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。valign：内容的纵向对齐方式。属性值可以填：top middle bottomwidth：绝对值或者相对值(%)height：单元格的高度bgcolor：设置这个单元格的背景色。background：设置这个单元格的背景图片。
caption标签：表格的标题。使用时和tr标签并列
- 属性：
align，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom。
表格的thead标签、tbody标签、tfoot标签
这三个标签有与没有的区别：
- 如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
- 当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
框架标签frameset
如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。
- 注意，框架标签不能放在
<body>标签里面，因为<body>标签代表的只是一个页面，而框架标签代表的是多个页面。于是：<frameset>和<body>只能二选一。- 框架的集合用
<frameset>表示，然后在<frameset>集合里放入一个一个的框架<frame>
补充：frameset和frame已经从 Web标准中删除，建议使用 iframe 代替。
frameset：框架的集合
一个框架的集合可以包含多个框架或框架的集合。属性：
rows：水平分割，将框架分为上下部分。写法有两种：
1、绝对值写法：rows="200,*"其中*代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。
2、相对值写法：rows="30%,*"其中*代表剩余的。这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。
注：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。
cols：垂直分割，将框架分为左右部分。写法有两种：
1、绝对值写法：cols="200,*"其中*代表剩余的。这里其实包含了两个框架：左边的框架占200个像素，右边的框架占剩下的部分。
2、相对值写法：cols="30%,*"其中*代表剩余的。这里其实包含了两个框架：左边的框架占30%，右边的框架占70%。
注：如果你想将框架分成很多列，在属性值里用逗号隔开就行了。
框架frame
一个框架就是单独的页面。
属性：
scrolling="no"：是否需要滚动条。默认值是true。noresize：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。
内嵌框架iframe
内嵌框架用<iframe>表示。<iframe>是<body>的子标记。
内嵌框架inner frame：嵌入在一个页面上的框架(仅仅IE、新版google浏览器支持，可能有其他浏览器也支持，暂不了解)。
属性：
src="subframe/the_second.html"：内嵌的那个页面width=800：宽度height=“150：高度scrolling="no"：是否需要滚动条。默认值是true。name="mainFrame"：窗口名称。公有属性。
框架标签可以让多个页面聚合起来，想要看看是如何聚合的，就动手去写一个demo吧
表单标签
表单标签主要用于收集信息与服务器进行交互。
属性：
name：表单的名称，用于JS来操作或控制表单时使用；id：表单的名称，用于JS来操作或控制表单时使用；action：指定表单数据的处理程序，就是表单将提交到哪里去。method：表单数据的提交方式，一般取值：get(默认)和post
注意：表单和表格嵌套时，是在<form>标记中套<table>标记。
get提交和post提交的区别：
GET方式：
将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?“隔开，每一个表单的"name=value"间用”&"号隔开。
特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
POST方式：
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
Enctype：
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
- Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
- Multipart/form-data：上传附件时，必须使用这种编码方式。
输入文本标签input
用于接收用户输入。其重要程度无需多言了。
属性：
-
type="属性值"：文本类型。属性值可以是：text（默认）password：密码类型radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择。checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type="radio"或者type=checkbox时，可以用这个属性。属性值也是checked，可以省略。hidden：隐藏框，在表单中包含不希望用户看见的信息button：普通按钮，结合js代码进行使用。submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。reset：重置按钮，清空当前表单的内容，并设置为最初的默认值image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。file：文件选择框。
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
-
value="内容"：文本框里的默认内容（已经被填好了的） -
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。 -
readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。 -
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
备注：HTML5中，input的类型又增加了很多（比如date、color，我们在HTML5的时候再去学习）。
下拉列表标签select
<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。
<select>标签的属性：
multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成multiple=""，也可以写成multiple="multiple"。size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
<option>标签的属性：
selected：预选中。没有属性值。
多行文本标签textarea
属性：
rows="4"：指定文本区域的行数。cols="20"：指定文本区域的列数。readonly：只读。
举个栗子
<form>
<textarea name="txtInfo" rows="4" cols="20">不会炒菜做饭的程序猿不是一个好的产品经理。</textarea>
</form>
多媒体标签
多媒体包含：音频、视频、Flash。网页上的多媒体基本都是Flash格式的。
.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
上述格式视频一般文件较大，不利于网络下载播放。
bgsound标签：播放背景音乐
属性：
src="音乐文件的路径"loop="-1"：属性值代表播放次数，-1代表循环播放。
embed标签：播放多媒体文件
主要应用Netscape浏览器，它不是W3C规范。
属性：
src="多媒体文件的路径"loop="-1"：属性值代表播放次数，-1代表循环播放。autostart="false"：打开网页时，禁止自动播放。默认值是true。volume="100"：设置默认的音量大小，测试发现这个值好像不起作用哦。- width：指Flash文件的宽度
- height：指Flash文件的高度
- quality：指Flash的播放质量，质量有高有低 hight low
- pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
- type：指定Flash的文件格式类型
- wmode：指Flash的背景是否可以透明，取值：transparent是透明的
<embed>标签播放音频举例：
<body>
<embed src="王菲 - 清风徐来.mp3"></embed>
</body>
注：在HTML5中新增了<video>标签播放视频。
object标签
主要应用IE浏览器，它是W3C规范。
属性：
classid：指定Flash插件的ID号，一般存在于注册表中。codebase：如果Flash插件不存在，则从codebase指定的地址下载。<param>标签的主要作用：设置具体的详细参数。
总结：在网页中插入Flash时，为了同时兼容多种浏览器，需要将<object>标签和<embed>标签标记一起使用，但使用的顺序是：<object>中嵌套<embed>标记。
marquee滚动字幕标签
这个标签内容的展示像是弹幕一样自动移动。
属性：
-
direction="right"：移动的目标方向。属性值可以是：left（从右向左移动，默认值）、right（从左向右移动）、up（从下向上移动）、down（从上向下移动）。 -
behavior="slide"：行为方式。属性值可以是：slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动）、。
alternate和scroll属性值都是循环移动，区别在于：假设在direction="right"的情况下，behavior="scroll"表示从左到右、从左到右、从左到右···behavior="alternate"表示从左到右、从右到左、从左到右··· -
scrollamount="30"：移动的速度 -
loop="3": 循环多少圈。负值表示无限循环 -
scrolldelay="1000"：移动一次休息多长时间。单位是毫秒。
小结
时至今日，HTML中众多与样式有关的标签基本都被废除了，现在的HTML只负责语义。
以下这些标签其实都已经被废除，之所以还大费周章的介绍，是因为我们需要去了解HTML每个时期的变革，
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<del>删除线</del>
<em>强调</em>
<strong>强调</strong>
<hr />
<br />
但是在做网页的时候，也会经常用到换行，多数情况是因为段落的换行，所以尽量使用p标签，不到万不得已，一定不是使用br标签。br一时爽，填坑火葬场。
三、HTML5时代大冲洗
1.什么是HTML5
W3C执着于XHTML2.0却得不到支持，在2007年接纳了WHATWG的HTML5的前身Web Application。
HTML5的广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。
HTML5不等于 HTML next version。HTML5 包含： HTML的升级版、CSS的升级版、JavaScript API的升级版。
总结：HTML5是新一代开发 Web 富客户端应用程序整体解决方案。包括：HTML5，CSS3，Javascript API在内的一套技术组合。
H5对HTML做出的变革主要如下图所示
2.H5中新增的语义标签
-
<section>表示区块 -
<article>表示文章。如文章、评论、帖子、博客 -
<header>表示页眉 -
<footer>表示页脚 -
<nav>表示导航 -
<aside>表示侧边栏。如文章的侧栏 -
<figure>表示媒介内容分组。 -
<mark>表示标记 (用得少) -
<progress>表示进度 (用得少) -
<time>表示日期
本质上其实新语义标签和div标签，span标签没有什么区别，但是能更表象的定义，使用上和普通标签没有差别。
IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入html5shiv.js文件。
引入时，需要做if判断，具体代码如下：
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
3.HTML5中的新表单标签
普通的表单标签早已无法满足复杂的开发需求，HTML5中针对表单增加了一些新标签。
-
email只能输入email格式。自动带有验证功能。 -
tel手机号码。 -
url只能输入url格式。 -
number只能输入数字。 -
search搜索框 -
range滑动条 -
color拾色器 -
time时间 -
date日期 -
datetime时间日期 -
month月份 -
week星期
注：上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
举个栗子
<form action="">
<fieldset>
<legend>表单类型</legend>
<label for="">
email: <input type="email" name="email" required>
</label>
<label for="">
color: <input type="color" name="color">
</label>
<label for="">
url: <input type="url" name='url'>
</label>
<label for="">
number: <input type="number" step="3" name="number">
</label>
<label for="">
range: <input type="range" name="range" value="100">
</label>
<label for="">
search: <input type="search" name="search">
</label>
<label for="">
tel: <input type="tel" name="tel">
</label>
<label for="">
time: <input type="time" name="time">
</label>
<label for="">
date: <input type="date" name="date">
</label>
<label for="">
datetime: <input type="datetime">
</label>
<label for="">
week: <input type="week" name="month">
</label>
<label for="">
month: <input type="month" name="month">
</label>
<label for="">
datetime-local: <input type="datetime-local" name="datetime-local">
</label>
<input type="submit">
</fieldset>
</form>
解释：
fieldset标签&legend标签不是H5的新内容，fieldset标签代表将表单中的内容打包成一组，legend标签是为fieldset标签里的内容定义标题。
数据列表标签datalist
<input type="text" list="myData">
<datalist id="myData">
<option>本科</option>
<option>研究生</option>
<option>不明</option>
</datalist>
datalist标签中的内容可以和input标签进行绑定。
验证标签keygen
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
度量器标签meter
-
low：低于该值后警告
-
high：高于该值后警告
-
value：当前值
-
max：最大值
-
min：最小值。
HTML5表单的新属性
-
placeholder占位符（提示文字） -
autofocus自动获取焦点 -
multiple文件上传多选或多个邮箱地址 -
autocomplete自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off) -
form指定表单项属于哪个form，处理复杂表单时会需要 -
novalidate关闭默认的验证功能（只能加给form） -
required表示必填项 -
pattern自定义正则，验证表单。
另外还有两个重要的表单事件
-
oninput()：用户输入内容时触发，可用于输入字数统计。 -
oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
4.多媒体
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。
H5里面提供了视频和音频的标签。
音频
HTML5提供的音频标签<audio>
我们可以通过附加属性，来更友好地控制音频的播放，如：
-
autoplay自动播放。写成autoplay或者autoplay = ""，都可以。 -
controls控制条。（建议把这个选项写上，不然都看不到控件在哪里） -
loop循环播放。 -
preload预加载 同时设置 autoplay 时，此属性将失效。
为了做到多浏览器支持，可以采取以下兼容性写法：
<!--推荐的兼容写法：-->
<audio controls loop>
<source src="music/yinyue.mp3"/>
<source src="music/yinyue.ogg"/>
<source src="music/yinyue.wav"/>
抱歉，你的浏览器暂不支持此音频格式
</audio>
视频
HTML5通过<video>标签来解决视频播放的问题。
我们可以通过附加属性，来更友好地控制视频的播放，如：
-
autoplay自动播放。写成autoplay或者autoplay = ""，都可以。 -
controls控制条。（建议把这个选项写上，不然都看不到控件在哪里） -
loop循环播放。 -
preload预加载 同时设置 autoplay 时，此属性将失效。 -
width：设置播放窗口宽度。 -
height：设置播放窗口的高度。
自定义标签
HTML5中可以直接以data-的形式自定义标签。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
<script>
var box = document.querySelector('.box');
//自定义的属性 需要通过 dateset[]方式来获取
console.log(box.dataset["content"]); //打印结果：我是一个div
console.log(box.dataset["myName"]); //打印结果：smyhvae
//设置自定义属性的值
var num = 100;
num.index = 10;
box.index = 100;
box.dataset["content"] = "aaaa";
</script>
</body>
</html>
5.拖拽
在HTML5的规范中，我们可以通过为元素增加 draggable=“true” 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。
拖拽元素的事件监听：（应用于拖拽元素）
-
ondragstart当拖拽开始时调用 -
ondragleave当鼠标离开拖拽元素时调用 -
ondragend当拖拽结束时调用 -
ondrag整个拖拽过程都会调用
当我们想把元素a拖拽到元素b，那么元素b被我们称作目标元素
目标元素的事件监听：（应用于目标元素）
-
ondragenter当拖拽元素进入时调用 -
ondragover当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态） -
ondrop当在目标元素上松开鼠标时调用 -
ondragleave当鼠标离开目标元素时调用
总结：如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。
拖拽的简单应用，感兴趣的可以粘走代码运行看一下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.one > div, .two > div {
width: 98px;
height: 98px;
border: 1px solid #000;
border-radius: 50%;
background-color: red;
float: left;
text-align: center;
line-height: 98px;
}
.two {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
left: 600px;
top: 200px;
}
</style>
</head>
<body>
<div class="one">
<div draggable="true">1</div>
<div draggable="true">2</div>
<div draggable="true">3</div>
<div draggable="true">4</div>
<div draggable="true">5</div>
<div draggable="true">6</div>
<div draggable="true">7</div>
<div draggable="true">8</div>
</div>
<div class="two"></div>
<script>
var boxs = document.querySelectorAll('.one div');
// 临时的盒子 用于存放当前拖拽的元素
var two = document.querySelector('.two');
var temp = null;
// 给8个小盒子分别绑定拖拽事件
for (var i = 0; i < boxs.length; i++) {
boxs[i].ondragstart = function () {
// 保持当前拖拽的元素
temp = this;
console.log(temp);
}
boxs[i].ondragend = function () {
// 当拖拽结束 ，清空temp
temp = null;
console.log(temp);
}
}
// 目标元素的拖拽事件
two.ondragover = function (e) {
// 阻止拖拽的默认行为
e.preventDefault();
}
// 当在目标元素上松开鼠标是触发
two.ondrop = function () {
// 将拖拽的元素追加到 two里面来
this.appendChild(temp);
}
</script>
</body>
</html>
6.历史
我们的js操作并不会被浏览器记住，意味着无法回到之前的状态。
在HTML5中可以通过 window.history 操作访问历史状态，让一个页面可以有多个历史状态
window.history对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
-
window.history.forward(); // 前进
-
window.history.back(); // 后退
-
window.history.go(); // 刷新
-
window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。
-
通过JS可以加入一个访问状态
-
history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)
7.地理定位
HTML5还带来了获取用户地理信息位置的API，让开发者可以基于用户位置开发应用，即基于位置服务 LBS
获取地理信息的姿势
在互联网高度发展的今天，获取一个人地理信息位置已经变得容易很多。主要的方式有
IP地址：网络中的主机会被DHCP服务器动态分配一个IP地址，IP地址可以标识出主机的地理位置信息，这也是为什么网络层不使用MAC地址进行通信的原因，因为MAC地址无法引入逻辑结构。- 三维坐标：
GPS：全球定位系统，相信大家都对其有所了解，目前世界范围内在用或在建的第2代全球卫星导航系统有：-
1.美国 Global Positioning System （全球定位系统） 简称GPS；
-
2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
-
3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；
-
4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
-
5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；
-
6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。
以上6个系统在中国都可以使用。
-
WIFI定位：仅限于室内。手机信号定位：通过运营商的信号塔进行定位。
API
-
navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
-
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
-
position.coords.latitude纬度
-
position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。
3、可选参数 options 对象可以调整位置信息数据收集方式。
8.全屏显示
HTML5规范允许用户自定义网页上任一元素全屏显示。
实现的具体方法：
requestFullscreen() //让元素开启全屏显示
cancleFullscreen() //让元素关闭全屏显示
不过要考虑兼容性问题，所以要根据不同的浏览器加上不同的前缀
webkitRequestFullScreen()
webkitCancleFullScreen()
mozRequestFullScreen()
mozCancleFullScreen()
//关于这个webkit和moz前缀会在浏览器内核中介绍
另外，HTML5还提供了检测当前是否处于全屏的方法
document.fullScreen()
//同样要考虑兼容问题
document.webkitIsFullScreen()
document.mozFullScreen()
当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。
-
:full-screen .box {}
-
:-webkit-full-screen {}
-
:moz-full-screen {}
9.存储
web存储的传统方式一般都是使用document.cookie来进行存储的，但是其大小只有4k，并且解析起来也十分繁琐，并不方便，对于这个问题HTML5同样给出了解决方案。
H5中的存储
1、window.sessionStorage 会话存储：
-
保存在内存中。
-
生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
-
在同一个窗口下数据可以共享。
2、 window.localStorage 本地存储 ：
-
有可能保存在浏览器内存里，有可能在硬盘里。
-
永久生效，除非手动删除（比如清理垃圾的时候）。
-
可以多窗口共享。
Web 存储的特性
（1）设置、读取方便。
（2）容量较大，sessionStorage 约5M、localStorage 约20M。
（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。
常见 API
设置存储内容：
setItem(key, value);
PS：可以新增一个 item，也可以更新一个 item。
读取存储内容：
getItem(key);
根据键，删除存储内容：
removeItem(key);
清空所有存储内容：
clear();
根据索引值来获取存储内容：
key(n);
10.应用缓存
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 cache manifest 缓存清单文件。
其有众多优点：
-
可配置需要缓存的资源；
-
网络无连接应用仍可用；
-
本地读取缓存资源，提升访问速度，增强用户体验；
-
减少请求，缓解服务器负担。
cache manifest 缓存清单文件
缓存清单文件里的内容怎样写：
（1）顶行写CACHE MANIFEST。
（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等。
（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。
（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。
格式举例：
CACHE MANIFEST
#要缓存的文件
CACHE:
images/img1.jpg
images/img2.jpg
#指定必须联网才能访问的文件
NETWORK:
images/img3.jpg
images/img4.jpg
#当前页面无法访问是回退的页面
FALLBACK:
404.html
在需要应用缓存在页面的根元素(html)里，添加属性manifest=“demo.appcache”。路径要保证正确。例如：
<!DOCTYPE html>
<html manifest="01.appcache">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>
</body>
</html>
小结
这部分主要是学习了HTML5的一些新特性，可以更加灵活的解决开发过程中遇到的问题。
四、浏览器内核
学习完了HTML的知识之后，我们已经可以写出稍微复杂一些的页面了，但是在我们将编写出来的HTML文件通过浏览器展示出来的时候，会提出一个问题，浏览器是怎么知道HTML中各种标签的语义并将页面渲染出来的呢？
这个时候就涉及到浏览器的精华所在了-----浏览器内核！
有一篇文章写的已经很全面了，大家可以去看看https://blog.csdn.net/a3192048/article/details/80834027
在这篇文章里再做一些总结！
1.内核的运作
在学习之前，先学习一个概念，什么是浏览器内核？
浏览器内核的英文名字是Rendering Engine ，可以翻译为渲染引擎、解释引擎等。浏览器内核分为两个部分：渲染引擎和JS引擎。渲染引擎顾名思义，就是将HTML页面加以CSS的样式渲染展示出来，当然了网页的内容不止HTML一种形式，渲染的效果根据不同的浏览器内核所决定。JS引擎是负责将JavaScript代码解析出来实现页面的动态效果。还记得最开始的铁匠打铁的比喻吗，在这个过程中浏览器内核所扮演的角色就是铁匠啦。
注：浏览器和浏览器内核是不同的概念，内核主要负责渲染，主要有Webkit、Blink、Gecko、Trident等。浏览器指的是chrome、Firefox、Safari等浏览器Saas应用
工作原理：
- 解析HTML构建的DOM树
- 构建渲染树
- 对渲染树进行布局，定位坐标大小，确定换行、position、overflow、z-index等，是reflow的过程。
- 绘制渲染树，调用系统操作底层API进行绘制。
市场上不同的内核渲染的过程大致相同，但是就如同异父异母的亲兄弟一样，各家有各家的特点。
主流的渲染引擎有：
Chrome浏览器：Blink引擎（webkit的一个分支）Safari浏览器：webkit引擎Firefox浏览器：Gecko引擎opera浏览器：blink引擎（起先是presto引擎）IE浏览器：trident引擎Edge浏览器：EdgeHTML引擎（Trident的一个分支）
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
