《HTML5+CSS3网页布局和样式精粹 》 -- 读书笔记
第1章 认识HTML和CSS
HTML是英文HyperText Mark-up Language的简称，是根据SGML（Standard Generalized Markup Language）标准定义的。CSS是Cascading Style Sheet的缩写，它是描述文档怎样被呈现的语言。
W3C
World Wide Web Consortium的简称，也就是“万维网联盟”或“万维网协会”。
第2章 HTML文档编写规范与基本结构
基本上用户只要明白了各种标签的用法便算学会了HTML。
对一于一个网站上的网页，如果没有另存文件的话，用将不能改变源文件，这样做是为了避免页面被更改。所以，用户实际查看网页的一个副本文件，而不是网页文件本身。
HTML网页文件可以使用*.html或*.htm两种扩展名，并且这两种扩展名没有本质的区别。主要是因为在某些较旧的系统上不能识别4位的文件扩展名。
HTML文档的基本结构
<!doctype html> <html> <head></head> <body></body> </html>（1）在使用HTML语法编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5标准模式下渲染网页。文档类型的声明如下：
<!doctype html>
HTML语法是不区分大小写的。
（2）html标签对，用来标示HTML文档的开始和结束
（3）head标签对，其间的内容构成HTML文档的开头部分，之间的内容是不会在浏览器的框内显示出来的。
（4）body标签对，其间的内容构成HTML文档的主体部分
HTML5元素和属性
一个HTML网页文件都是由元素构成的，元素由开始标签、结束标签、属性和元素的内容4部分构成。
（1）标签
标签的使用有两种形式：成对出现的标签和单独出现的标签。
（2）属性
与元素相关的特性称为属性，可以为属性赋值。可以有任何数量的“属性-值” 对，并且它们可以以任何的顺序出现，但是，不能在同一个开始标签中定义同名的属性。格式：
<元素 属性=“值”>内容</元素>
<元素 属性=‘值’>内容</元素>
<元素 属性=值>内容</元素>
属性值都是字符串，属性也可以没有值，但必须要有默认值；属性值中空白可以用“%20”替换；当单引号作为属性值时，可以用双引号来包括，也可以用数字字符引用（'）来代替；当双引号作为属性值时，就要使用"或字符实体引用（"）来代替。
元素名和属性都是不区分大小写的。
全局属性
全局属性可以定义在任何元素上
| 属性 | 值 | 描述 |
|---|---|---|
| accesskey | 字符 | 定义访问元素的键盘快捷键 |
| class | 类名 | 定义元素的类名 |
| contenteditable | true, false | 定义是否允许用户编辑元素的内容 |
| contextmenu | menu,id | 定义元素的上下文菜单 |
| dir | ltr, rtl | 定义元素中内容的广文本方向 |
| draggable | true,false,auto | 定义是否允许用户拖动元素 |
| hidden | hidden | 定义元素是否隐藏 |
| id | id | 定义元素唯一的id |
| lang和xml:lang | 自然语言代码 | 定义元素中内容的自然语言代码 |
| spellcheck | true,false | 定义是否必须对元素进行拼写或语法检查 |
| style | 样式定义 | 定义元素的行内样式 |
| tabindex | 数字 | 定义元素的tab键控制次序 |
| title | 文本 | 定义元素的相关描述信息 |
html中的id是用#来识别，class是用.来识别。二者的区别是id在一个网页中只能被用一次，而class类可以被多次引用。
下表中的事件属性也可以定义在任何元素上，因此也是全局属性
| 属性 | 值 | 描述 |
|---|---|---|
| onabort | JavaScript代码 | 当元素的内容被取消加载时触发 |
| onblur | JavaScript代码 | 当元素失去焦点时触发该事件 |
| oncanplay | JavaScript代码 | 当能够进行回放时解发，但还是会要求缓冲 |
| oncanplaythrough | JavaScript代码 | 当能够进行不间断回放时触发，即不要求缓冲就可以顺利播放完 |
| onchange | JavaScript代码 | 当元素的值发生变化时触发 |
| onclick | JavaScript代码 | 当定位设备（如鼠标指针）在一个元素上单击时触发 |
| oncontextmenu | JavaScript代码 | 当鼠标右击该元素打开右键快捷菜单时触发 |
| ondblclick | JavaScript代码 | 当定位设备在一个元素上双击时触发 |
| ondrag | JavaScript代码 | 当元素被拖拽时触发 |
| ondragend | JavaScript代码 | 当元素拖拽状态结束时，即释放时该事件被触发 |
| ondragenter | JavaScript代码 | 当另一个被拖拽的元素进入当前元素时该事件被触发 |
| onfragleave | JavaScript代码 | 当另一个被拖拽的元素离开当前元素时该事件被触发 |
| ondragstart | JavaScript代码 | 当一个对象被放置到当前元素时触发 |
| ondrop | JavaScript代码 | 当元素从拖拽状态结束时，即释放时该事件被触发 |
| ondurationchange | JavaScript代码 | 当duration属性发生改变时触发 |
| onemptied | JavaScript代码 | 当media元素恢复到初始状态时触发 |
| onended | JavaScript代码 | 当播放到结尾时触发 |
| onerror | JavaScript代码 | 当与此元素相关联的对象有错误发生时就会触发该事件 |
| onfocus | JavaScript代码 | 当元素获取焦点时触发 |
| onformchange | JavaScript代码 | 当表单改变时触发 |
| onforminput | JavaScript代码 | 当表单获得用户输入时触发 |
| oninvalid | JavaScript代码 | 当元素无效时触发 |
| onkeydown | JavaScript代码 | 当元素处于焦点状态下按某个键盘键时触发该事件 |
| onkeypress | JavaScript代码 | 当元素处于焦点状态下某个键盘键并释放时触发该事件 |
| onkeyup | JavaScript代码 | 当元素处于焦点状态下释放某个按着的键盘键时触发该事件 |
| onload | JavaScript代码 | 在元素的内容完成加载后被触发 |
| onloadeddata | JavaScript代码 | 当元素失去鼠标指针捕捉时触发 |
| onloadedmetadata | JavaScript代码 | 当media元素的duration属性的元素加载完成时触发，此是可以 读取这些数据 |
| onloadstart | JavaScript代码 | 当开始查找要加载的media数据时触发 |
| onmousedown | JavaScript代码 | 当元素处于焦点状态下在其单击鼠标时触发该事件 |
| onmousemove | JavaScript代码 | 当鼠标指针在该元素上移动时触发该事件 |
| onmouseout | JavaScript代码 | 当鼠标指针离开该元素时触发该事件 |
| onmouseover | JavaScript代码 | 当鼠标指针进入 该元素时触发该事件 |
| onmouseup | JavaScript代码 | 当元素处于焦点状态下在其上释放鼠标按键时触发该事件 |
| onmousewheel | JavaScript代码 | 当元素处于焦点状态下在其上滚动鼠标滚动轮时触发该事件 |
| onpause | JavaScript代码 | 当视频或音频中止播放时触发 |
| onplay | JavaScript代码 | 当调用play()方法开始播放时触发 |
| onplaying | JavaScript代码 | 当视频或音频正在播放时触发 |
| onprogress | JavaScript代码 | 当浏览器正在从服务器接收数据时触发 |
| onratechange | JavaScript代码 | 当media数据的播放速率改变时触发 |
| onreadystatechange | JavaScript代码 | 当元素的准备状态发生变化时触发该事件 |
| onreset | JavaScript代码 | 当表单被重置时触发 |
| onscroll | JavaScript代码 | 当用户滚动该元素内容时触发该事件 |
| onseeked | JavaScript代码 | 当media元素的seeking属性不再为真且定位已结束 时触发 |
| onseeking | JavaScript代码 | 当media元素的seeking属性为真且定位已开始时触发 |
| onselect | JavaScript代码 | 当元素被定时触发 |
| onshow | JavaScript代码 | 当menu元素被显示为上下文菜单时触发 |
| onstalled | JavaScript代码 | 当取回media数据过程中（延迟）存在错误时触发 |
| onsubmit | JavaScript代码 | 当数据被提交时触发 |
| onsuspend | JavaScript代码 | 当已经在获取media数据，但在取回整个media数据之前 中止时触发 |
| ontimeupdate | JavaScript代码 | 当media改变其播放位置时触发 |
| onvolumechange | JavaScript代码 | 当media改变音量或当音量被设置为静音时触发 |
| onwating | JavaScript代码 | 当media已停止播放但打算继续播放时触发 |
虽然这些属性可以应用于所有元素，但是属性并不一定会发生作用。
字符引用
在HTML文档中，某些地方不允许存在某些字符。为了显示内容，HTML提供了字符引，字符引用以and符（&）开头，以分号（；）结尾。有两种类型的字符引用：字符引用（十进制或十六进制）和字符实体引用。
（1）字符数字引用
- 用于十进制引用的语法：&#value
- 用于十注进制引用的语法：&#xvalue
（2）字符实体引用
< ：小于号（<）
>：大于号（>）
&：and符（&）
"：双引号（“）
：不换行空格
注释
<!--单行注释-->
<!--多行注释
-->
第3章 HTML文档的头部和无数据定义
title元素
这可以将网页的标题显示在浏览器的顶部，<title></title>标签只能放在<head></head>标签之间，并且除了全局属性没有其他属性。
元数据
META（元数据）是用来描述HTML文档的信息，它使用meta元素来完成此工作。meta元素的name属性说明数据信息的关键字，content属性用来定义该关键字的值，lang属性用来定义content属性值的语言，dir属性用来定义文字方向，http-equiv属性用来定义HTTP消息报头，charset属性用于定义文档的字符编码。
http-equiv属性用来定义一些实用的元数据，
| http-equiv属性值 | 功能 |
|---|---|
| content-language | 设置网页内容语言 |
| content-type | 网页内容类型和字符集 |
| default-style | 设置默认样式表 |
| refresh | 设置定时跳转 |
| Set-Cookie | 设置网页Cookie |
第4章 段落与文字
段落与行
1.p元素表示一个段落，但不能包含一个”块级元素“，可以省略结束标签
2.br元素强制当前文本行的分行
3.wbr元素实现软换行，也即仅在适合的时候才会换行
4.连字符，HTML中有两种类型的连字符：简单连字符（plain hyphen）和软连字符（soft hyphen）。简单的连字符可以被浏览器理解为简单的字符，而软连字符则可以告诉浏览器在这里换行。软连字符语意学：如果一行被软连字符分开，连字符必须显示于第一行的结尾；如果一行并不在软连字符处换行，浏览器则不显示连字符。HTML中简单连字符是”-“（-，-），而软连字符则是实体引用条目”­"(­,­)
5.pre元素：告诉浏览器处理文本在浏览器中的呈现时，该元素内的文本是预格式化的文本，浏览器必须按照如下的方式对待预格式式文本：
- 原封不动地保留空白区域
- 可以用组合字体来呈现文字
- 禁止自动的单词换行
- 不必禁止双向处理
标记文章改变
ins和del用来标记文章中的哪部分相对于原来版本是插入还是删除了。属性：
（1）cite=url
这个属性的值是一个统一资源定位器（URL）用来指定源文档或者消息来源
（2）datetime=datetime
用来定义改变发生的日期和时间
（3）title
可用来定义注释
基本文字格式
（1）i元素用来呈现斜体
（2）b元素用来呈现加粗体
（3）small元素用来呈现小字体
（4）s元素用来呈现那些不再准确或不再相关的内容，与del元素呈现的视觉效果相同，但语义不同
hr元素在网页中呈现为一条水平分割线。
语义化、结构化的文本
（1）em元素用于强调，strong元素用于强烈的强调
（2）sub元素与sup元素分别用来实现上标和下标
（3）ruby元素是父元素，它由一个或多个字符和一个提供该信息的rt元素组成，还包括可选的rp元素，rp元素定义不支持ruby元素的浏览器所显示的内容。
（4）blockquote元素一般用于引用内容较多的情况下，q元素一般用于引用内容较少情况
（5）cite元素用来标注一个作品的标题，随后的内容是对该作品的描述
（6）abbr元素允许作者清楚标识一个组成缩略语的字符序列
（7）dfn元素允许作者为一个术语做定义，表示这是对一个特定术语的明确说明。注意与abbr元素的区别，abbr元素表示缩写，dfn表示术语的定义，这是语义上的不同。
（8）code元素用来表示呈现的是计算机代码的片断
（9）mark元素定义需要突出显示的文本，以提示用户注意这个文本，与em的strong不同的是，前者主要为了“突出重要性”，后者纯粹为了突出显示
（10）time元素定义日期时间
第5章 建立列表
HTML有3种列表形式：
（1）有序列表
有序列表中每个列表项前标有数字，表示顺序。有序列表由<ol>和</ol>标签对实现，每个列表项由<li>标签开始（结束标签不是必需的）
（2）无序列表
无序列表中采用一个符号标志每个列表项，由元素<ul>和</ul>标签实现
（3）解说列表
通常用于术语的定义，由<dl></dl>标签对实现，包含术语和描述两个部分。术语由<dt>标签开始，术语的解释由<dd>标签实现
自定义有序列表
（1）type属性
| type属性值 | ||
|---|---|---|
| 1 | 阿拉伯数字 | 1，2，3，... |
| a | 小写字母 | a,b,c,... |
| A | 大写字母 | |
| i | 小写罗马字母 | i,ii,iii,... |
| I | 大写罗马字母 |
表示开始的条目序号，默认的开始序号为1
（3）reversed属性
用来表示序列表是否反转序号显示
（4）定制有序列表中的列表项序号的数值
通过li元素的value属性实现
第6章 建立超链接
有两个html元素都可以用来定义链接：
（1）link元素只能出现于HTML文档的头部（作为head元素的内容），它定义了当前文档和另一个资源之间联系
（2）a元素只能出现于文档的主体部分（作为body元素的内容），它定义了当前文档中某个区域与另一个资源之间的联系
a元素
（1）href属性
在a元素内添加href属性后，则元素的起始标签与结束标签之间的文本就会成为网页中的超文本内容
（2）target属性
使用target属性可以定义链接打开的目标窗口或框架
_blank：将链接的文档载入一个新的，未命名的浏览器窗口
_parent：将链接的文档载入包含该链接的框架的父框架集或窗口。如果包含链接的框架没有嵌套，则相当于_top
_self：将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定
_top：将链接的文档载入整个浏览器窗口，从而删除所有框架
（3）title属性
定义链接的提示信息
（4）hreflang属性
使用这个属性允许创作者给用户浏览器提示：链接的另一端的文本语言
（5）ref属性
用来表示当前文档与href属性所指定文档之间的链接关系
| 关键字 | link | a和area | 功能描述 |
|---|---|---|---|
| alternate | 超链接 | 超链接 | 表明链接指向的文档是当文档的一个替代版本 |
| archives | 超链接 | 超链接 | 表明链接所指向的是一组材料的历史归档。出于 向前兼容的考虑，也可以使用archive实现相同的目标 |
| author | 超链接 | 超链接 | 表明链接所指向的是当前文档的作者，或者是最近的父级 article元素内容的作者。 |
| bookmark | 不允许 | 超链接 | 表明链接所指向的是距当前元素最近的父级article元素 的永久链接。如果没有article元素定义，那么指向的是距 当前元素最近的父级分节元素的永久链接 |
| external | 不允许 | 超链接 | 表明链接所指向的文档位于外部站点，与当前文档不位于 同一站点 |
| first | 超链接 | 超链接 | 如果当前文档是一系列文档中的一个，该值就表明链接 指向的文档是第一个文档 |
| help | 超链接 | 超链接 | 表明链接指向的文档是当前文档的帮助和说明，目的是提供 更多信息 |
| icon | 外部资源 | 不允许 | 导入一个图标来标当前文档，常和sizes属性结合使用 |
| index | 超链接 | 超链接 | 表明链接指向的文档是为当前文档提供索引的一个文档 |
| last | 超链接 | 超链接 | 如果当前文档是一系列文档中的一个，该值就表明链接 指向的文档是最后一个文档 |
| license | 超链接 | 超链接 | 表明链接指向的文档是当前文档的版权声明。出于向前兼容的考虑 ，也可以使用copyright实现相同的目标 |
| next | 超链接 | 超链接 | 如果当前文档是一系列文档中的一个，该值就表明链接指向的文档 是当前文档中的下一个文档 |
| nofollow | 不允许 | 注解 | 表明当前文档的原作者或出版者没有批准链接所指向的文档 |
| noreferrer | 不允许 | 注解 | 当用户打开这个超链接时，要求浏览器要不发适HTTP Referer报头 |
| pingback | 外部资源 | 不允许 | 指定一个pingback服务器地址，处理对该文档的pingback |
| prefetch | 外部资源 | 外部资源 | 指定何种目标资源应被预先缓存 |
| prev | 超链接 | 超链接 | 如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是当前 文档的前一个文档 |
| search | 超链接 | 超链接 | 指定一个链接资源，使用该资源事以搜索当前文档的内容及与当前 文档相关联的网页 |
| stylesheet | 外部资源 | 不允许 | 导入一个样式表 |
| sidebar | 超链接 | 超链接 | 指定链接指向的文档应该被显示在浏览器的侧栏，该侧栏一般是使用 iframe元素实现的 |
| tag | 超链接 | 超链接 | 提供一个标记以标示该文档 |
| up | 超链接 | 超链接 | 表明链接指向的文档是当前文档的上下文环境 |
（6）media属性
可以向浏览器提示链接所指向的文档适用的介质
| 介质描述符 | 功能描述 |
|---|---|
| screen | 预定用于非分页的计算机屏幕 |
| tty | 预定用于显示固定宽度字符的介质， |
| tv | 预定用于电视类型的设备 |
| projection | 预定用于投影机 |
| handheld | 预定用于手持设备 |
| 预定用于分页的、不透明的材料 | |
| braille | 预定用于布莱盲文设备 |
| embossed | 预定用于分页的布莱盲文设备 |
| speech | 预定用于语音分成器，通常为视力有残疾的用户准备 |
| all | 适合于所有设备 |
定义书签和链接到书签
使用任何元素的id属性都可以定义一个字符串作为命名锚点，然后就可以在同一个或不同的网页中链接到它，只需要在链接目标的URI并加上井号（#）后跟书签名称。
第7章 链入图片和妴热点区域
GIF、JPEG和PNG是最适合在网页中使用的文件格式，使用img元素可以链入图片
（1）src属性
指定图片的文件的URI地址，可以绝对地址，也可以是相对地址
（2）width和height属性
width属性和height属性分别表示图片宽度和高度的像素值，如果没有指定这两个属性时，图片将以原始大小显示，也可以使用百分比
（3）title属性
对图片的文字说明，如果把鼠标放在图片上稍作停留,title属性值就会以浮动的形式显示出来
（4）alt属性
用于链接的图片存在的情情况，或者一些用户为了提高浏览器速度而关闭图片下载，它的内容会显示在浏览器中。
figure元素和figcaption元素结合用来为图片、视频、表格或者嵌入元素声明标题。figcaption元素应该被置于figure元素的第一个或最后一个直接子元素的位置。
由于img元素是行内级元素，所以可以使用a元素为图片定义超链接。
图像映射
它可以为某个部位创建一个称为“热点”的区域，每个热点就是一个映射，当用户单击不同的热点时就可以跳转到不同的网页。
图像映射分为为在服务器上分析和在客户端浏览器中分析两种。前者被称为客户端图像映射，后者被称为服务端图像映射。可以使用area元素定义图像的热点区域，然后使用map元素将热点区域与img元素关联起来。
第8章 HTML 视频和音频
video元素
<video></video>之间的插入的内容是供不支持video元素的浏览器显示的
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 用来设定视频是否在页面加载后自动播放 |
| controls | controls | 用来设置是否为视频添加控件，如播放、暂停等。如果视频播放器宽度无法展开控件 的长度，那么就会仅显示“播放”、“暂停”两个控件，控件条的外观可以自定义 |
| height | 像素 | 设置视频播放器的高度 |
| loop | loop | 设置视频播是否循环播放 |
| poster | url | 用于指定一张图片（作为预览图），在当前视频数据无效时显示。 视频数据无效可能是视频正在加载，也可能是视频地址错误 |
| preload | 用于定义视频是否预加载。 （1）none：不进行预加载。 （2）metadata：部分预加载 （3）auto：全部预加载 |
|
| src | url | 要播放的视频的URL |
| width | 像素 | 设置视频播放器的宽度 |
source元素
不代表任何含义，不能单独出现，只能位于video元素和audio元素内，用于给video元素和audio元素指定多个可供选择的文件地址（浏览器最终只能选一个），且只能在video元素和audio元素没有定义src属性时使用。
第9章 链入内联框架、对象和其他多媒体元素
iframe
允许在一个网页文本块中插入和显示另一个网页。
（1）src属性
定义框架的所指向的文档资源，可以是一个HTML文档，也可以是一个图片。
（2）name属性
给框架指定一个名称作为该框架的标识
（3）sandbox属性
用来实现沙盒安全限制：通过限制被嵌入内容所允许的操作而提升iframe的安全性。值可以是下面几个关键字：
- allow-same-origin表示允许将iframe中的内容看作是与父页面 同源，可以访问父页面的DOM
- allow-top-navigation表示允许iframe中的内容导航父页面中的内容
- allow-forms表示允许iframe中的表单被提交
- allow-scripts允许iframe中的内容运行其中的脚本
可以在属性值中指中多个关键字，其间使用空格隔开。
（4）seamless属性
是一个逻辑值，表示是否将框架作为包含网页的一部分
使用object元素链入对象
object元素是一个通用的用于链入多媒体内容的元素
第10章 使用表格
使用HTML表格的两个常见原因是：在表格中安排数据，从而用来呈现数据间的关系；或者在网页上组织图形和文本，也就是用于网页布局。
表格的基本语法
（1）table元素用来定义表格，整个表格包含在<table>和</table>标签中
（2）tr元素用来定义表格中的一行
（3）th元素和td元素用来定义单元格，</tr></th></td>都是可以省略的，th元素用来创建头信息单无格，俗成表头，td元素定义普通的单元格
（4）summary属性为表格的目的和结构提供一个开概要的说明
（5）每一个表格可以通过caption元素来对表格的目的作一个简单的说明，并且caption元素必须紧接着table元素开始的标签后被定义
（6）th元素可以定义headers属性和scope属性，scope属性指定该th单元格的内容用于哪些单元格的表头
（7）跨越横行和竖列的数量可以用rowspan和colspan属性来对th或td元素进行设置
表格的按行分组显示
表格中的行可以分开组织成表格头、表格尾和表格主体3部分，thead元素用来定义表格头，tbody元素用来定义表格主体，tfoot元素用来定义表格尾。这三个元素必须位于table元素中，thead元素和tfoot元素在一个表格中都只能有一个，而tbody元素可以有多个
表格的按列分组显示
表格的按列分组可以将表格结构化地分隔成几个部分，每个部分可以应用不同的设置，而同一个组内的部分可以定义相同的设置。每个“列分组”中列的数量可以用两种方式定义，这两种方式是互斥的：
（1）使用colgroup的span属性
（2）使用col元素
- 如果colgroup元素不定义span属性，那么就会创建一个单列分组，它仅包含一个列；如果col元素不定义span属性，那么该col元素也会创建一个列分组，并且也是仅包含一个列
- 如果定义一个正整数N，那么就会创建一个包含N个列的分组
- span属性的值是大于0的整数
- 如果colgroup元素中包含有col元素，那么就会忽略colgroup元素的span属性
第11章 建立HTML5新式表单
form元素
form元素是表单的容器，可以提定下面的内容：
（1）表单的布局
（2）指定处理表单的服务器端程序URI地址，该服务器程序应该可以处理“名称/值”对
（3）数据传送到服务器的方式
（4）表单数据的字符编码
（5）除了包含表单控件，form元素也可以包含其他的文本元素
控件
用户与表单交互是通过控件进行的，控件通过name属性标识，每一个控件有一个初始值，也有一个当前值，值的类型都是字符串。
使用input元素创建表单控件
input元素可以定义大多数类型的控件，控件的类型取决于type的属性值
| type属性值 | 控件类型 |
|---|---|
| button | 表示普通按钮 |
| checkbox | 表示复选框 |
| file | 表示插入一个文件，由一个单行文本框和一个“浏览”按钮组成 |
| hidden | 表示隐藏文本框 |
| image | 表示插入一个图像，作为图形按钮 |
| password | 表示单行显示文本框，但输入的数据用星号表示 |
| radio | 表示单选按钮 |
| reset | 表示重置按钮， |
| submint | 表示提交按钮 |
| text | 表示单行显示文本框 |
HTML5新增的属性值
| type属性值 | 控件类型 |
|---|---|
| color | 调色板控件 |
| date | 日期控件 |
| datetime | 日期和时间控件 |
| datetime-local | 本地日期和时间控件 |
| 一个单行文本行，呈现email | |
| month | 月份控件 |
| number | 表现为一个单行文本框，或带步进按钮 |
| range | 滑动刻度控件 |
| search | 搜索文本框 |
| tel | 一个单行文本框，呈现电话号码 |
| time | 时间控件 |
| url | 一个单行文本框，呈现URL地址 |
| week | 星期控件 |
使用button元素创建按钮
button元素与设置为按钮的input元素非常相似，但是button元素允许更丰富的呈现。
组合框控件和列表框控件
可以在表单中插入两种类型的菜单：一种菜单是用户单击时弹出下拉菜单，这也就是组合框控件，另一种菜单显示一个列有项目的可滚动列表，这也称为列表菜单或者列表框控件。
它们使用select元素和option元素共同来完成，当select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框）；如果使用了属性size和属性multiple中的任意一个，则表单类型显示了列表框
第12章 在网页中使用JavaScript脚本语言实现动态效果
在HTML文档中，有如下3种方式在HTML网页中使用JavaScript
（1）使用script元素定义，其间的脚本代码在文档加载后顺序执行，并且仅执行一次
（2）可以定义在内建事件属性中，当该事件触发，就会执行属性值中的脚本代码
（3）可以位于一个单独的文件中，当位于一个单独的文件中时，在HTML文档中可以使用语句将它动态加载进HTML文档中。
第13章 在网页上实现动态绘图
HTML5新增的canvas元素可以让用户使用javaScript在网页上绘制图像，也可以使用SVG和mathML在网页上绘图，呈现矢量图形和复杂的数学公式
第14章 使用结构元素构建网页布局
HTML5引入了多个新的元素用来更加细致的描述页面及文档结构，包括header、nav、section、article、aside和footer，这几个元素是有语义的。
第19章 CSS语言基础
css可以嵌于HTML代码中，也可以位于外部的文件中。
选择符 {属性名1:属性;属性名2:属性;...}