入门级-Web程序设计 HTML篇——html5新特征（长期更新）学习笔记

概述

相对于之前的版本，HTML5有着以下优势：
更好的兼容性
更简单的代码
更加突出语义性（结构之美）
增强交互功能
更好的存储技术

基础（语法）

html5兼容原来的版本，在此基础上有很多改良。
1.有些元素的标签可以省略。

分类	对应元素标签
不允许写结束标签的元素	br、hr、img、input、link、area、base、col、command、embed、keygen、meta、param、source、track和wbr。
可以省略结束标记的元素	li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td和th
可以省略全部标记的元素	html、head、body、colgroup和tbody

2.具有布尔值的属性
对于具有boolean值的属性，如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true；如果想要将属性值设为false，可以不使用该属性。另外，要想将属性值设定为true，也可以将属性名设为属性值，或将空字符串设定为属性值。
可以直接看例子：

3.省略引号
属性值两边既可以用双引号，也可以用单引号。HTML5在此基础上做了一些改进，当属性值不包括空字符串、<、>、=、单引号、双引号等字符时，属性值两边的引号可以省略。例如，下面的写法都是合法的。

区块布局（div+css的布局方式）

元素是Web前端开发中最常用的元素，利用<div>元素，可以把整个HTML文档分隔为页眉、侧边面板、导航条等等。 解决div名称定义多样性造成的理解困难，html5引入特点的语义元素。

• nav元素是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。

• footer
  footer元素可以作为其父级内容区块或是一个根区块的脚注。
  footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

• hgroup
  hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1-h6元素进行分组，譬如一个内容区块的标题及其子标题算一组。
  通常，如果文章只有一个主标题，是不需要hgroup元素的，但是文章有主标题，主标题下面有子标题，就需要使用hgroup。

• header
  header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
  一个网页内并未限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素。

• article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。比如博客或报刊中的文章、一篇论坛帖子、一段用户评论等。article元素是可以嵌套使用的。

• address
  address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、网站链接、电子邮箱、真实地址、电话号码等。
  address应该不只是用来呈现电子邮箱或真实地址，还应用来展示跟文档相关联系人的所有联系信息。

• section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。建议在使用section时应该包含标题内容，例如<h1>、<h2>等。

• aside元素主要有以下两种使用方法：
  被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
  在article元素之外使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接，博客中其他文章列表、广告单元等。

音频与视频

音频:audio元素

支持三种音频格式：ACC MP3 Wav

• src：指定媒体数据的URL地址，即播放视频或音频文件的URL地址。
• preload：表明视频或音频文件是否需要进行预加载。
  -none：表示不进行预先加载。
  -metadata：表示只预先加载媒体的元数据，主要包括媒体字节数、第一帧、播放列表、持续时间等信息。
  -auto：表示预加载全部视频或音频，该值是默认值。

写法：<vedio src=“abc.mp4” preload=“auto”></vedio>

视频：video元素

支持三种视频格式：Ogg MPEG4 WebM

属性名和写法都和audio一样。

除了上面写的 还有以下属性：

• volume属性：读取或修改媒体播放的音量，范围为0到1。
• muted属性：读取或修改媒体的静音状态，该属性值为布尔值。
• autoplay：设置或返回音视频是否在加载后即开始播放，属性值为true或false。（新版Chrome、Opera浏览器不支持）
• width和height：video元素的独有属性，指定视频的宽度和高度。
• source元素为<video>和 <audio>定义媒介资源，允许规定可替换的视频/音频文件供浏览器根据自身对媒体类型或者编解码器的支持进行选择。
  -src：指定视频源的URL地址。
  -type：指定视频源的类型。

表单基础

form元素用于声明一个包含表单元素的区域。该元素并不会生成可视部分，却允许用户在该区域中添加可输入信息的表单控件元素。

常用的属性：

• 核心属性：id、style、class等
• 事件属性：onclick等

其他属性

1. action：指定当点击表单内的【确认】按钮时，该表单信息被提交到哪个地址。
2. method：指定提交表单时发送何种类型的请求。————
   GET请求：把表单数据放在URL中，对长度和数据值编码有所限制。
   POST请求：把表单数据放在HTTP请求体中，并且没有长度限制。
3. enctype：可指定表单进行编码时所使用的字符集。
4. name：指定表单的唯一名称。
5. target：指定使用哪种方式打开目标URL。
6. autocomplete属性：用于规定form中所有元素都拥有自动完成功能。当属性用于整个form时，所有从属于该form的元素便都具备自动完成功能，也可为单独元素开启或关闭功能。（默认开启）
7. novalidate属性：用于提交表单时取消整个表单的验证，即关闭对表单内所有的有效性检查，也可单独用在表单中的部分元素。（默认开启有效性检查）
8. datalist元素：用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一预设的项，从而免去输入的麻烦。（支持模糊查询）
9. keygen元素：密钥对生成器（key-pair generator），能够使用户验证更为可靠。（目前很多主流浏览器不支持）
   10.output元素：定义不同类型的输出，必须从属于某个表单。

新增加的input输入类型

1. email类型：专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值。

2. url类型：用于输入url地址等特殊文本的文本框。当提交表单时，若所输入的内容是url地址格式的文本，则会提交数据到服务器；否则，则展示提示信息，并不允许提交数据。

3. number类型：用于输入纯数值的文本框，可以设定对所接受的数字进行限制。

4. range类型：用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。

5. 日期检出器：用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。
   

6. search类型：可提供用于输入搜索关键词的文本框。

7. tel类型：提供专门用于输入电话号码的文本框。

8. color类型：提供专门用于设置文本框的颜色。

9. autocomplete：该属性帮助用户在input类型的输入框中实现自动完成内容输入。某些浏览器中，可能需要首先启用浏览器本身的自动完成功能，才能使属性起作用。

10. autofocus：当进行搜索时，页面中文字输入框如果能够自动获得光标焦点，可方便用户输入搜索关键词，提高用户体验。autofocus属性值是一个布尔值，适用于文本框、复选框、单选按钮和普通按钮等所有input标签的类型控件。