HTML5学习笔记（一）

XHTML，全称“EXtensible HyperText Mark-up Language（扩展的超文本标记语言）”，它是XML风格的HTML4.01，我们可以称之为更严格、更纯净的HTML4.01。
HTML语法书写比较松散，比较利于开发者编写。但是对于机器如电脑、手机等来说，语法越松散，处理起来越困难。因此，为了让机器更好地处理HTML，才在HTML的基础上引入了XHTML。
HTML指的是HTML4.01，XHTML是XML风格的HTML4.01，它是HTML的过渡版本。而HTML5指的是下一代HTML，也就是HTML4.01的升级版。

html5特点

1．文档类型简写

html>

2．字符编码简写

<meta charset="utf-8" />

3．标签不再区分大小写
4．允许属性值不加引号
5．允许部分属性的属性值省略

<input type="text" readonly/>
<input type="checkbox" checked/>

HTML5除了新增部分标签之外，还增加了大量新技术：
▶ 视频音频
▶ 元素拖放
▶ 本地存储
▶ 文件操作
▶ 地理位置

HTML5使得HTML从一门“标记语言”转变为一门“编程语言”。

新增结构元素

在HTML5中，新增了一组结构元素，以帮助完善页面的语义化SEO（即搜索引擎优化）。
HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer。

header元素一般用于3个地方：页面头部、文章头部（article元素）和区块头部（section元素）。
nav元素一般用于3个地方：顶部导航、侧栏导航和分页导航。
article元素一般只会用于一个地方：文章内容部分。
aside元素一般用于表示跟周围区块相关的内容。
section元素一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题，直接使用div元素就可以了。如果需要标题，则建议使用section元素。
footer元素一般用于两个地方：一个是“页面底部”，另一个是“文章底部”。

表单的扩展

HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展。
▶ 新增input元素类型。
▶ 新增其他表单元素。

新增input元素类型

 当type属性取值为“range”时，我们可以通过拖动滑动条获取某一个范围内的数字。

<input type="range" min="最小值" max="最大值" step="间隔数"/>

number类型跟range类型功能非常相似，都是获取某一个范围内的数字。不过两者的外观不一样，其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。

<input type="number" min="-10" max="10" step="5" value="-10"/>

当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。

<input type="color" value=""/>

value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字（如black）和rgba颜色（如rgba(255, 255, 255, 0.5)）。

当type属性取值为“date”时，我们可以直接使用浏览器自带的日历工具来获取日期（年、月、日）。

"date" value=""/>

新增表单元素

HTML5还新增了3个表单元素：output、datalist、keygen。
我们可以使用output元素来定义表单元素的输出结果或计算结果。

<output>output>

output元素是一个行内元素，只不过它比span元素更具有语义化。output元素一般放在form元素内部，并且配合其他表单元素（如文本框等）来使用。

var output = document.getElementsByTagName("output")[0];

在HTML5中，我们可以使用datalist元素来为文本框提供一个可选的列表。

<input type="text" list="" />
<datalist id="">
  <option label="" value="">option>
  <option label="" value="">option>
  <option label="" value="">option>
datalist>

如果想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id值。

我们可以使用keygen元素来生成页面的密钥。如果表单内部有keygen元素，则提交表单时，keygen元素将生成一对密钥：一个保存在客户端，称为“私密钥（Private Key）”；另一个发送到服务器，称为“公密钥（Public Key）”。

keygen元素主要是作为客户端安全保护的一种方法，不过它在各大浏览器中的兼容性很差。

增加语义化元素

HTML5还增加了大量语义化元素，其中最重要的有以下6个。
▶ address
▶ time
▶ progress
▶ meter
▶ figure和figcaption
▶ fieldset和legend

在HTML5中，我们可以使用更具有语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息（电子邮件或真实地址）。
当address元素应用于整个页面时，它一般放于整个页面的底部（footer元素内部），表示该网站所有者的地址信息。

在HTML5中，我们可以使用更具有语义化的time元素来显示页面中的日期时间信息。datetime属性取值是一个时间，可以省略不写。datetime属性中的时间是提供给搜索引擎看的，而time标签内的时间是提供给用户看的，两者内容可以一样也可以不一样。time元素与datetime属性的关系，有点类似于img元素与alt属性的关系。

<time datetime="时间">time>

在HTML5中，我们可以使用progress元素以进度条的形式来显示某一个任务的完成度，如上传文件、下载文件等。

<progress max="最大值" value="当前值">progress>

在HTML5中，我们可以使用进度条的形式来显示数据所占的比例。

<meter min="最小值" max="最大值" value="当前值">meter>

▶ meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
▶ progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。

HTML5中，引入了figure和figcaption这两个元素来增强图片的语义化。figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。

<figure>
  <img src="" alt=""/>
  <figcaption>figcaption>
figure>

在HTML5中，我们还可以使用fieldset元素来给表单元素进行分组。其中，legend元素用于定义某一组表单的标题。

<fieldset>
  <legend>表单组标题legend>
  ……
fieldset>

使用fieldset和legend有两个作用：增强表单的语义；定义fieldset元素的disabled属性来禁用整个组中的表单元素。

对已有元素的改良

除了新增元素，HTML5还对已有的某些元素进行了改良，其中改良的元素有以下4种。
▶ a
▶ ol
▶ small
▶ script

a元素的新增属性

HTML5为a元素新增了3个属性：

<a href="文件地址" download="新文件名">a>

download属性用于为文件取一个新的文件名。如果download属性值省略，则表示使用旧的文件名。下载该图片，并且图片名字换成新的文件名beauty.png。

<a href="img/princess.png" download="beauty.png">下载图片a>

ol元素的新增属性

HTML5为ol元素新增了一个reversed属性，用于设置列表顺序为降序显示。

small元素

在HTML5中，我们可以使用更具有语义化的small元素来表示“小字印刷体”的文字。small元素一般用于网站底部的免责声明、版权声明等。

<small>你的内容small>

script元素的新增属性

HTML5为script元素新增了两个属性：defer和async。这两个属性的作用都是加快页面的加载速度，两者区别如下。

▶ defer属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等到整个HTML文档加载完成才会执行。
▶ async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。