HTML5基础——笔记

　　近几年来，互联网+、大数据、云计算‘物联网‘虚拟现实‘人工智能、机器学习、移动互联网等IT相关新名词、新概念层出不穷，相关产业发展如火如荼。互联网+移动互联网已经深入到人民日常生活的角角落落，人民已经离不开互联网。为了让用户有更好的互联网体验效果，Web前端开发、移动终端开发相关技术发展迅猛。

　　HTML、CSS、JavaScript、jQuery、Bootstrap、Vue等技术相关配合使用，大大减少了Web前端开发者的工作量，降低了开发成本。本系列主要在帮助读者(我和你)快速掌握目前最前沿技术，使前端设计从外观上变得更炫，在技术上更简易。

　　HTML是Hypertext Markup Language的缩写，中文翻译为：超文本标记语言，使用HTML编写的文档称为网页，目前最新版本是HTML5，而使用最广泛的是HTML4.1版本。

1、1 HTML4 基本语法

　　HTML文档一般都应包含两个部分：头部区域和主体区域。HTML文档基本结构由3个标签页负责组织：<html>、<head>和<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。

<html> <!--语法开始-->
    <head>
            <!--头部信息，如<titile>标签定义的网页标题-->
    </head>
    <body>
            <!--主体信息，包含网页显示的内容-->
    </body>
</html> <!--语法结束-->

　　编写HTML文档时，必须遵循HTML语法规范。HTML文档由标签和信息混合组成，当然这些标签和信息必须遵循一定的组合规则，否则浏览器无法解析的。

　　HTML语言的规范条文不多，从逻辑上分析，这些标签包含的内容就表示一类对象，也可以称为网页元素。从形式上分析，这些网页元素通过标签进行分隔，然后表达一定的语义。具体说明如下：

 1 所有标签包含在"<"和">"起止标识符中，构成一个标签。如<style>、<head>、<body>、<div>等。
 2 在HTML文档中，绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间包含的是元素主体。如<body>和</body>中间包含的就是网页内容主体。
 3 起始标签包含元素的名称以及可选属性，也就是说，元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始，然后附加上元素名称。例如：<tag> 元素主体 </tag>
 4 元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间通过空格进行分隔。例如：<tag a1="v1" a2="v2" a3="v3"……an="vn"> 元素主体 </tag> 
 5 少数元素的属性也可能不包含属性值，仅包含一个属性名称。例如：<tag a1 a2 a3……an> 元素主体 </tag>
 6 一般属性值应该包含在引号内，虽然不加引号，浏览器也能够解析，但是读者应该养成良好的习惯。
 7 属性是可选的，元素包含多少个属性，也是不确定的，这主要根据不同元素而定。不同的元素会包含不同的属性。HTML也为所有元素定义了公共属性，如title、id、class、style等。
 8 虽然大部分标签都成对出现，但是也有少数标签是不成对的，这些孤立的标签，被称为空标签。空标签仅包含起始标签，没有结束标签。例如：<tag>
 9 标签可以相互嵌套，形成文档结构。嵌套必须匹配，不能如<div><span></div></span>这样交错嵌套。合法的嵌套应该是包含或被包含的关系，例如，<div><span></span></div>或<span><div></div></span>
10 HTML文档所有信息必须包含在<html>标签中，所有文档元信息应包含在<head>子标签中，而HTML传递信息和网页显示内容应包含在<body>子标签中。
11 <!-- 单行注释--> 或 <!---------n行---->

1、2 HTML5 基本语法

　　与HTML4相比， HTML5在语法上发生了很大的变化。为了确保兼容性，HTML5根据Web标准，重新定义了一套在现有HTML基础上修改而来的语法，以便各浏览器在运行HTML的时候能够符合通用标准。下面具体介绍在HTML5中语法进行了哪些改变。

　　1、内容类型

　　HTML5的文件扩展名和内容类型保持不变。例如，扩展名仍然为".html"或"htm"，内容类型(ContentType)仍然为"text/html"。

　　2、文档类型

　　DOCTYPE命令声明文档的类型，它是HTML文档必不可少的组成部分，且必须位于代码的第一行。

　　在HTML5中，可以不使用版本说明，一份文档将会适用于所有版本的HTML。在HTML5中，文档类型的声明方法如下：<!DOCTYPE html>

　　当使用工具时，也可以在DOCTYPE声明中假如SYSTEM识别符,声明方法如下：<!DOCTYPE HTML SYSTEM "about:legacy-compat">

　　在HTML5中，DOCTYPE声明方式是不区分大小写的，引号也不区分单引号还是双引号。

　　3、字符编码

　　在HTML5中，继续沿用meta元素定义文档的字符编码，但是简化了charset属性的写法:<meta charset="UTF-8">

　　从HTML5开始，对于文件的字符编码推荐使用UTF-8。

　　4、标记省略

　　在HTML5中，元素的标记可以省略。具体来说，元素的标记分为3种类型: 不允许写结束标记、可以省略结束标记、开始标记和结束标记全部可以省略。下面简单介绍下这3种类型各包括哪些HTML5新元素。

不允许写结束标记的元素有: area、base、br、col、command、embed、hr、img、input、keygen、link、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。

1、3 HTML4 元素

　　HTML4共包含91个元素，这些元素都是针对特定内容、结构或特性定义的。具体分为结构元素、内容元素和修饰元素3大类。、

结构元素：结构元素用于构建网页文档的结构，多指块状元素。
内容元素：内容元素定义了元素在文档中表示内容的语义，一般只文本格式化元素，它们多是行内元素。
修饰元素：修饰元素定义了文本的显示效果。

结构元素：

div: 在文档中定义一块区域，即包含框、容器。
span: 在文本行中定义一个区域，即行内包含框。
ol: 根据一定的排序进行列表。
ul: 没有排序的列表。
li: 每条列表项。
dl: 以定义的方式进行列表。
dt: 定义列表中的词条。
dd: 对定义的词条进行解释。
del: 定义删除的文本。
ins: 定义插入的文本。
h1~h6: 标题1~标题6，定义不同级别的标题。
p: 定义段落结构。
hr: 定义水平线。

内容元素：

a: 定义超链接。
abbr: 定义缩写词。
acronym: 定义取首字母的缩写词。
address: 定义地址。
dfn: 定义条目。
kbd: 定义键盘键。
samp: 定义样本。
var: 定义变量。
tt: 定义打印机字体。
code: 定义计算机源代码。
pre: 定义预定义格式文本，保留源代码格式。
blockquote: 定义大块内容引用。
cite: 定义引文。
q: 定义引用短语。
strong: 定义重要文本。
em: 定义文本为重要。

修饰元素：

b: 定义粗体。
i: 定义斜体。
big: 定义文本增大。
small: 定义文本缩小。
sup: 定义文本上标。
sub: 定义文本下标。
bdo: 定义文本显示方向。
br: 定义换行。

以下是已废除的修饰元素:

center: 定义文本居中。
font: 定义文本的样式、大小和颜色。
u: 定义文本下划线。
s: 定义删除线。strike的缩写。

1、4 HTML4 属性

核心属性：为大部分元素所共有
- class：定义类规则或样式规则。
- id：定义元素的唯一标识。
- style：定义元素的样式声明。
语言属性：定义元素的语言类型
- lang:定义元素的语言代码或编码。
- dir:定义文本方向，包括ltr和rtl取值，分别表示从左向右和从右向左。
键盘属性：定义元素的键盘访问方法
- accesskey：定义访问某元素的键盘快捷键。
- tabindex：定义元素的Tab键索引编号。
内容属性：定义元素包含内容的附加信息。
- alt：定义元素的替换文本。
- title：定义元素的提示文本。
- longdesc：定义元素包含内容的大段描述信息。
- cite：定义元素包含内容的引用信息。
- datetime：定义元素包含内容的日期和时间。
延伸属性：定义元素的相关信息
- rel：定义当前页面与其他页面的关系。
- rev：定义其他页面与当前页面的关系。

1、5 HTML5元素

　　HTML5在HTML4的基础上新增了很多新的元素，根据标记内容的类型不同，这些新的元素被分成了如下几种类型。

结构元素
功能元素
表单元素

结构元素: HTML5定义了一组新的语义化机构标记来描述网页内容。

<header>：描述了文档的头部区域，于定义内容的介绍展示区域
<nav>：定义导航链接的部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常包含了一组内容及其标题。
<article>：定义独立的内容。
<aside>：定义页面主区域内容之外的内容（比如侧边栏）。
<figure>：标签规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>：定义 <figure> 元素的标题。
<footer>：述了文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

功能元素: 根据页面内容的功能需要，HTML5又新增了很多专用元素。

hgroup元素：用于对整个页面或页面中一个内容区块的标题进行组合。
figure元素：表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。
video元素：定义视频，比如电影片段或其他视频流。
audio元素：定义音频，比如音乐或其他音频流。
embed元素：用来插入各种多媒体，格式可以是MIDI、WAV、AIFF、AU、MP3等。
mark元素：主要用来在视觉上向用户呈现需要突出显示或高亮显示的文字。
time元素：表示日期或时间，也可以同时表示两者。
canvas元素：表示图形，如图表和其他图像。
output元素：表示不同类型的输出，比如脚本的输出。
source元素：为媒介元素定义媒介资源。
menu元素：表示菜单列表。当希望列出表单控制时使用该标签。
ruby元素：表示ruby注释。
rt元素：表示字符的解释或发音。
rp元素：在ruby解释中使用，以定义不支持ruby元素的浏览器所显示的内容。
wbr元素：表示软换行。
command元素：表示命令按钮，如单选按钮、复选框或按钮。
details元素：表示用户要求得到并且可以得到的细节信息，可与summary 元素配合使用。
datalist元素：可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。
datagrid元素：表示可选数据的列表，它以树形列表的形式来显示。
keygen元素：表示生成密钥。
progress元素：表示运行中的进程，可以使用progress来显示JavaScript中耗费时间的函数的进程。
email：表示必须输入E-mail地址的文本输入框。
url：表示必须输入URL地址的文本输入框。
number：表示必须输入数值的文本输入框。
range：表示必须输入一定范围内数字值的文本输入框。
Date Pickers：HTML5拥有多个可供选取日期和时间的新型输入文本框。

表单元素: 通过type属性，HTML5为input元素新增了很多类型。

tel: 格式<input type="tel"/>, 用于输入电话号码的文本框。
search: 格式<input type="search"/>, 表示搜索文本框。
url: 格式<input type="url"/>, 表示必须输入URL地址的文本框。
email: 格式<input type="email"/>, 表示必须输入电子邮件地址的文本框。
datetime: 格式<input type="datetime"/>, 表示日期和时间文本框。
date: 格式<input type="date"/>, 表示日期文本框。
month: 格式<input type="month"/>, 表示月份文本框。
week: 格式<input type="week"/>, 表示周几文本框。
time: 格式<input type="time"/>, 表示时间文本框。
datetime-local: 格式<input type="datetime-local"/>, 表示本地日期和时间文本框。
number: 格式<input type="number"/>, 表示必须输入数字的文本框。
range: 格式<input type="range"/>, 表示范围文本框。
color: 格式<input type="color"/>, 表示颜色文本框。

　　这些新类型设计用户代理(浏览器)可以提供用户界面，如日历、日期选择器，或整合用户的地址簿，并提交到服务器的格式。它给用户一个更好的经验，因为在发送到服务器之前，进行输入类型检查，这意味着有更少的时间等待反馈。

1.6 HTML5 属性

HTML5 的新的表单属性

本章讲解涉及 <form> 和 <input> 元素的新属性。

新的 form 属性：

autocomplete
novalidate

新的 input 属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

浏览器支持

Input type	IE	Firefox	Opera	Chrome	Safari
autocomplete	8.0	3.5	9.5	3.0	4.0
autofocus	No	No	10.0	3.0	4.0
form	No	No	9.5	No	No
form overrides	No	No	10.5	No	No
height and width	8.0	3.5	9.5	3.0	4.0
list	No	No	9.5	No	No
min, max and step	No	No	9.5	3.0	No
multiple	No	3.5	No	3.0	4.0
novalidate	No	No	No	No	No
pattern	No	No	9.5	3.0	No
placeholder	No	No	No	3.0	3.0
required	No	No	9.5	3.0	No

autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。</p>

</body>
</html>

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
User name: <input type="text" name="user_name" autofocus="autofocus" />
<input type="submit" />
</form>

</body>
</html>

form 属性

form 属性规定输入域所属的一个或多个表单。

注释：form 属性适用于所有 <input> 标签的类型。

form 属性必须引用所属表单的 id：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>

<p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>

Last name: <input type="text" name="lname" form="user_form" />

</body>
</html>

注释：如需引用一个以上的表单，请使用空格分隔的列表。

表单重写属性

表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。

表单重写属性有：

formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

注释：表单重写属性适用于以下类型的 <input> 标签：submit 和 image。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="/example/html5/demo_admin.asp" value="Submit as admin" /><br />
<input type="submit" formnovalidate="true" value="Submit without validation" /><br />
</form>

</body>
</html>

注释：这些属性对于创建不同的提交按钮很有帮助。

height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

注释：height 和 width 属性只适用于 image 类型的 <input> 标签。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
User name: <input type="text" name="user_name" /><br />
<input type="image" src="/i/eg_submit.jpg" width="99" height="99" />
</form>

</body>
</html>

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>

</body>
</html>

min、max 和 step 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

max 属性规定输入域所允许的最大值。

min 属性规定输入域所允许的最小值。

step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。

注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="number" name="points" min="0" max="10" step="3"/>
<input type="submit" />
</form>

</body>
</html>

multiple 属性

multiple 属性规定输入域中可选择多个值。

注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>

<p>当您浏览文件时，请试着选择多个文件。</p>

</body>
</html>

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

</body>
</html>

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。

模式（pattern）是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。

注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>

</body>
</html>

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

</body>
</html>

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>

</body>
</html>

1.7 HTML5 全局属性

　　HTML 属性能够赋予元素含义和语境。下面的全局属性可用于任何 HTML5 元素。

NEW：HTML 5 中新的全局属性。

属性	描述
accesskey	规定访问元素的键盘快捷键
class	规定元素的类名（用于规定样式表中的类）。
contenteditable	规定是否允许用户编辑内容。
contextmenu	规定元素的上下文菜单。
dir	规定元素中内容的文本方向。
draggable	规定是否允许用户拖动元素。
dropzone	规定当被拖动的项目/数据被拖放到元素中时会发生什么。
hidden	规定该元素是无关的。被隐藏的元素不会显示。
id	规定元素的唯一 ID。
lang	规定元素中内容的语言代码。
spellcheck	规定是否必须对元素进行拼写或语法检查。
style	规定元素的行内样式。
tabindex	规定元素的 tab 键控制次序。
title	规定有关元素的额外信息。