HTML5权威指南观后笔记

CSS颜色函数
函数	说明	示例
rgb（r，g，b）	用RGB模型表示颜色	color：rgb（112，128，122）
rbga（r，g，b，a）	用RGB模型表示颜色，外加一个用于表示透明度的值0代表全透明，1代表完全不透明	color:rgba(112,128,122,0.5)
hsl(h,s,l)	用HSL模型表示颜色	color：hsl（120，100%，10%）
hsla（h，s，l，a）	用HSLA模型表示颜色	color：hsla（120，80%，12%，1）

CSS使用的长度单位

单位标志符	说明	单位标志符	说明
in	英寸	em	与元素字号挂钩
cm	厘米	ex	与元素字体的“x高度”挂钩
mm	毫米	rem	与根元素的字号挂钩
pt	磅（1磅等于1/72英寸）	px	CSS像素（假定显示设备的分辨率为96dpi）
pc	pica（1pica等于12磅）	%	另一属性的值的百分比

5.初探JavaScript

6.HTML元素背景知识

元素分类

文档和元素据元素
元素	说明	类型	局部属性	备注
base	设置相对URL的基础，链接的打开方式，表单的提交方式，href可以设置路径，在使用非绝对路径时默认从base属性href中找到相对的路径，否则从当前文档中查找相对路径	元素据	href、target	如果没有设置href属性，则从当前文档路径来解释相对路径，<base href="http://www.baidu.com/"/><a href="2.html">则完整路径为http://www.baidu.com/2.html
body	表示HTML文档的内容	无	无	内容
DOCTYPE	表示HTML文档的开始，外层结构	无	无	<DOCTYPE HTML>
head	包含文档的元素据	无	无	用于声明，设置等非内容元素的开始
html	表示文档中HTML部分的开始	无	manifest	整个网页的根元素
link	定义与外部资源的关系	元数据	href、rel、hreflang、media、type、sizes	href指定link元素指向的资源URL media所适用的设备 hreflang说明所链接资源使用的语言 rel说明文档与链接资源的关系类型 type说明所链接资源的MIME类型，text/css、image/x-icon sizes指定图标的大小
meta	提供关于文档的信息，指定名/值元数据对，声明字符编码，模拟HTTP标头字段	元数据	name、content、charset、http-equiv	见下章
noscpipt	包含浏览器禁用脚本或不支持脚本时显示的内容	元数据、短语		<noscrpit><meat http-equiv="refresh" content="0;http://www.apress.com"/>
script	定义脚本程序，可以是文档内嵌的也可以是外部文件中的位于head属于元数据，其他地方为短语	元数据、短语	type、src、defer、async、charset	type表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略 src指向外部脚本文件的URL defer推迟执行、async异步执行方式不影响页面的加载，只能和src一起使用，布尔属性 charset说明外部脚本文件所用字符编码，该属性只能与src一同使用
style	定义CSS样式	元数据	type、media、scoped	见下章
title	设置文档标题	元数据	无

文本元素
元素	说明	类型	局部属性	备注
a	生成超链接	短语、流	href、hreflang、media、rel、target、type	属性与link元素基本一致 href不一定是http协议网址，也可以是邮箱或者是#<id>锚点的形式进行链接
abbr	缩略语	短语		代表缩写，其title属性表示的是该缩写代表的完整词语<abbr title="FFFFFF">FF</abbr>
b	不带强调或着重意味地标记一段文字	短语		<b>orange</b> b {font-weight:border}
br	表示换行	短语		</br>
bdo	撇开默认的文字方向设置	短语	无局部属性，但必须添加全局属性dir	rtl（从右到左right to left） ltr（从左到右left to right）
bdi	表示一段出于文字方向考虑而与其他内容隔离开来的文字	短语		较少使用，例子是一个阿拉伯文字显示出错
cite	表示其他作品的标题	短语		cite{font-style:italic} 斜体显示
code	表示计算机代码片段	短语		<code>orange</code> code{font-family:monospace}
del	表示从文档中删除的文字	短语、流		del{text-decoration:line-throught}
dfn	表示术语定义	短语		如果dfn元素包含一个abbr元素，则该缩写词就是要定义的术语。如果没有title则文字就是要定义的术语
em	表示着重强调的一段文字	短语		斜体字<em>orange</em> em {font-style:italic}
i	表示与周边内容秉性不同的一段文字，例如来自另一种语言的词语	短语		<i>orange</orange> i {font-style:italic}
ins	表示加入文档的文字	短语、流		ins{text-decoration:underline}
kbd	表示用户输入内容	短语		<kbd>orange</kbd> kbd {font-family:monospace}
mark	表示一段因为与上下文中另一词语相关而被突出显示的内容	短语		<mark>orange</mark> mark{background-color:yellow;color:black}
q	表示引自其他处的内容	短语	cite	q{display:inline} q:before{content:open-quote} q:after{content:close-quote} cite属性用于指定来源文章的URL
rp	与ruby元素结合使用，标记括号	短语		ruby{text-indent:0} rt用于标记注音符号，rp用于不支持注音符号的浏览器在注音符号前后的括号 <ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby> <ruby>魍<rp>(</rp><rt>wang</rt><rp>)</rp></ruby> <ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby> <ruby>魉<rp>(</rp><rt>liang</rt><rp>)</rp></ruby>
rt	与ruby元素结合使用，标记注音符号	短语
ruby	表示位于表意文字上方或右方的注音符号	短语
s	表示文字已不再准确	短语		文字中间带横线<s>orange</s> s{text-decoration:line-throught}
samp	表示计算机程序的输出内容	短语		<samp>orange</samp> samp{font-family:monospace}
small	表示小号字体内容	短语		<samll>orange</small>小号字体显示 samll{font-size:small}
span	一个没有自己的语义的通用元素。可以用在希望应用一些全局属性却又不想引入额外语义的情况	短语
srtong	表示重要内容	短语		<strong>orange</strong> strong{font-weight:older}
sub	表示下标文字	短语		<sub>orange</sub> sub{vertical-align:sub;font-size:smaller}
sup	表示上标文字	短语		<sup>orange</sup> sup{vertical-align:super;font-size:smaller}
time	表示时间或日期	短语	datetime、pubdate	如果pubdate属性存在，那么time元素表示的是整个HTML文档或离元素最近的article元素的发布日期。 <time datetime="1989-11-29">1989-11-29</time>
u	不带强调或者着重意味地标记一段文字	短语		加下划线<u>orange</u> u{text-decoration:underline}
var	表示程序或计算机系统中的变量	短语		<var>orange</var> var{font-style:italic}
wbr	表示可安全换行的地方	短语		表示长度超过当前浏览器窗口的内容适合在此换行，究竟换不换行由浏览器决定，只是一个建议

用于分组的元素
元素	说明	类型	局部属性	备注
blockquote	表示引自他处的大段内容	流	cite	blockquote{display:block; margin-before:1em;margin-after:1em;margin-start:40px;margin-end:40px;} cite属性说明其引用内容的来源
dd	用在dl元素之中，表示定义	无		dd{display:block;margin-start:40px;}
div	一个没有任何既定语义的通用元素，是span元素在流元素中的对应物	流		div{display:block}
dl	表示包含一系列术语和定义的说明列表	流		dl{display:block; margin-before:1em; margin-after:1em;margin-start:0; margin-end:0;}
dt	用在dl元素之中，表示术语	无		dt{display:block;}
figcaption	表示figure元素的标题	无		figcaption{display:block;}
figure	表示图片	流		figure{display:block; margin-before:1em; margin-after:1em; margin-start:40px; margin-end:40px;}
hr	表示段落级别的主题转换	流		hr{display:block;margin-before:0 5em;margin-end:0 5em;margin-start:auto;margin-end:quto;border-style:insert;border-width:1px;} 虚元素<hr>
li	用在ul、ol、menu元素中、表示列表项，目前还没有浏览器支持menu元素	无··	value(仅用于父元素ol时）	li{display:list-item;} value可生成不连续的有序列表
ol	表示有序列表	流	start、reversed、type	ol{display:block; list-style"decimal; margin-before:1em; margin-after:1em; margin-start:0; margin-end:0;padding-start:40px;}
p	表示段落	流		p{display:block; margin-before:1em; margin-after:1em; margin-start:0;margin-end:0;}
pre	表示其格式应被保留的内容	流		pre{display:block;font-family:monospace;white-space:pre;margin:1em 0;}
ul	表示无序列表	流		ul{display:block; list-style-type:disc; margin-before:1em; margin-after:1em; mrgin-start:0; margin-end:0; padding-end:40px;}

用于划分内容的元素
元素	说明	类型	局部属性	备注
address	表示文档或article的联系信息	流
article	表示一段独立的内容	流
aside	表示与周边内容稍有牵涉的内容	流
details	生成一个区域，用户将其展开可以获得更多细节知识	流
footer	表示尾部	流
h1	表示标题	流		h1{display:block; font-size:2em; margin-before:0.67em; margin-after:0.67em; margin-start:0; margin-end:0; font-weight:bold; }
h2				h2{display:block; font-size:1.5em; margin-before:0.83em; margin-after:0.83em; margin-start:0; margin-end:0; font-weight:bold;}
h3				h3{display:block; font-size:1.17em; margin-before:1em; margin-after:1em; margin-start:0; margin-end:0; font-weight:bold;}
h4				h4{display:block; margin-before:1.33em; margin-after:1.33em; margin-start:0; margin-end:0; font-weight:bold;}
h5				h5{display:block; font-size:.83em; margin-before:1.67em; margin-after:1.67em; margin-start:0; margin-end:0; font-weight:blod;}
h6				h6{display:block; font-size:.67em;margin-before:2.33em; margin-after:2.33em; margin-start:0; margin-end:0; font-weight:blod;}
header	表示首部	流
hgroup	将一组标题组织在一起，以便文档大纲只显示其中第一个标题	流
nav	表示有意集中在一起的导航元素	流
section	表示一个重要的概念或主题	流
summary	用在details元素中，表示该元素内容的标题或说明	无

表格元素
元素	说明	类型	局部属性	备注
caption	用于表格标题	无		caption{display:table-caption; text-align:center;}
col	表示一列	无	span	col{display:table-colum;}
colgroup	表示一组列用于结构选择上，影响全部单元格	无	span	colgroup{display:table-column-group;}
table	表示表格	流	border	table{display:table; border-collapse:separate; border-spacing:2px; border-color:gray;}
tbody	表示表格主体	无		tbody{display:table-row-group; vertical-align:middle; border-color:inherit;}
td	表示单元格	无	colspan、rowspan、headers	td{display:table-cell; vertical-align:inherit;}
tfoot	表示表脚	无		tfoot{display:table-footer-group; vertical-align:middle; border-color:inerit;}
th	表示标题行单元格	无	colspan、rowspan、scope、headers	th{display:table-cell; vertical-align:inherit; font-weight:bold; text-align:center; }
thead	表示标题行	无		thead{display:table-header-group; vertical-align:middle; border-color:inherit;}
tr	表示一行单元格	无		tr{display:table-row; vertical-align:inherit;border-color:inherit; }

表单元素
元素	说明	类型
button	表示可用来提交或重置表单的按钮（或一般按钮）	短语
datalist	定义一组提供给用户的建议值	流
fieldset	表示一组表单元素	流
form	表示HTML表单	流
input	表示用来收集用户输入数据的控件	短语
keygen	生成一对公钥和私钥	短语
label	表示表单元素的说明标签	短语
legend	表示fieldset元素的说明性标签	无
optgroup	表示一组相关的option元素	无
option	表示供用户选择的一个选项	无
output	表示计算结果	短语
select	给用户提供一组固定的选项	短语
textarea	用户可以用它输入多行文字	短语

嵌入元素
元素	说明	类型
area	表示一个用于客户端分区响应图的区域	短语
audio	表示一个音频资源	无
canvas	生成一个动态的图形画布	短语、流
embel	用插件在HTML文档中嵌入内容	短语
iframe	通过创建一个浏览上下在一个文档中嵌入另一个文档	短语
img	嵌入图像	短语
map	定义客户端分区响应图	短语、流
meter	嵌入数值在许可值范围背景中的图形表示	短语
object	在HTML文档中嵌入内容。也可用于生成浏览上下文和生成客户端分区相应图	短语、流
param	表示将通过object元素传递给插件的参数	无
progress	嵌入目标进展或任务完成情况的图形表示	短语
source	表示媒体资源	无
svg	表示结构化矢量内容	无
track	表示媒体的附加轨道（例如字幕）	无
video	表示视频资源	无

7.创建HTML文档

1.构建基本的文档结构

DOCYTYPE元素，html元素，head元素，body元素

2.用元素据元素说明文档

title元素，base元素，meta元素,style元素

meta元素三种用法：同一个meta只能设置一个属性，需要设置多个属性值需要添加多条meta元素

1.指定名/值元数据对，需要使用name和content属性进行说明name属性用于表示元数据的类型，content用于表示值。可以从http://wiki.whatwg.org/wiki/MetaExtensions中找到，三个值noindex（表示不要索引本页）/noarchive（表示不要将本页存档或缓存）/nofollow（表示不要顺着本页的链接继续搜索下去）

常用的预定义元素类型有：

application name	当前页所属Web应用系统的名称
author	当前页的作者名
description	当前页的说明
generator	用来生成HTML的软件名称（通常用于以Ruby on Rails/ASP.NET等服务器端框架生成HTML页的情况下
keywords	一批以逗号分开的字符串，用来描述页面的内容，

2.声明字符编码

3.模拟HTTP标头字段 http-equiv属性

meta元素的http-equiv属性允许使用的值
refresh	以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入。如<meta http-equiv="refresh" content="5";http://www.apress.com/>
default-style	指定页面有先使用的样式表。对应的content属性值应与同一个文档中某个style元素或link元素的title属性值相同
content-type	这是另一种声明HTML页面所用字符编码的方法。如<meta http-equiv"content-type content="text/html charset="UTF-8"/>

style元素

type属性，用于告诉浏览器所定义的类型，目前浏览器只支持CSS样式机制，所以值总是text/css

scoped属性，定义的样式只作用于该元素的父元素及所有兄弟元素，目前没有主流浏览器支持

media属性，指定该样式表使用的设备范围

media属性值
all	将样式用于所有设备（默认值）
aural	将样式用于语音合成器
braille	将样式用于盲文设备
handheld	将样式用于手持设备
projection	将样式用于投影仪
print	将样式用于打印页面时
screen	将样式用于计算机显示器屏幕
tty	将样式用于电传打字机之类的等宽设备
tv	将样式用于电视机

link元素

link元素最重要的属性是rel

link元素的rel属性值选编
值	说明
alternate	链接到文档的替换版本，比如另一种语言的译本
author	链接到文档的作者
help	链接到当前文档的说明文档
icon	指定图标资源
license	链接到当前文档的相关许可证
pingback	指定一个回探服务器。从其他网站链接到博客的时候它能自动得到通知
prefetch	预先获取一个资源
stylesheet	载入外部样式表

1.载入样式表<link rel="tylesheet" type="ext/css" href="style.css" />

2.为网站定义图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />网络上有介绍如何制作ico

script和noscript元素

默认情况下浏览器一遇到脚本就优先执行脚本上的内容再解释HTML上的内容，但会出现脚本查找的元素还没有加载等原因造成解释不了的情况defer属性可以推迟执行脚本，该属性是一个布尔值类型的属性，没有属性值。async也是属于布尔属性，其意义在于打破默认的顺序执行，采用异步进行。

noscript元素在不支持相应的脚本语言或者是禁用脚本浏览器中执行的代码，是一个短语元素或流元素。可以使用meta元素重定向网页

8.标记文字

1.生成超链接 a元素

进行链接的href使用锚点形式时，所查找的是元素的id属性，找不到对应的id值时会重新查找元素的name属性

target属性设定打开的方式，有五个值：_blank（新窗口打开）_parent（父窗口）_self（当前窗口）_top（顶层窗口）<frame>（指定框架）

2.用基本的文字元素标记内容：b、em、i、s、strong、u、samll、sub、sup

3.换行br、wbr

4.输入和输出code、var、samp、kbd

5.使用标题引用、引文、定义和缩写abbr、dfn、q、cite

6.使用语言元素ruby、rt、rp、bdo、bdi

7.其他文本元素span、mark、ins、del、time

9.组织内容

ol元素

start属性设置编码的开始值

reversed设置升降序，不过目前浏览器都不支持降序，因此可忽略

type设置类型

ol中type属性支持的类型
值	说明
1	十进制数（默认）
a	拉丁字母小写
A	拉丁字母大写
i	罗马数字小写
I	罗马数字大写

10.文档分节

11.表格元素

12.表单

13.定制input元素

14.其他表单元素及输入验证

15.嵌入内容

16.理解CSS

CSS选择器
选择器	说明
*	选取所有元素
<type>	选取指定类型的元素
.<class>	选取指定类的元素
#<id>

边框和背景属性
属性	说明
background	设置所有背景值的简写属性
background-attachment	设置元素的背景附着属性，决定背景图片是否随页面一起滚动
background-clip	设置元素背景颜色和图像的裁剪区域
background-color	设置背景颜色
background-image	设置元素背景图像
background-origin	设置背景图像绘制的起始位置
background-position	设置背景图像在元素盒子中的位置
background-repeat	设置背景图像的重复方式
background-size	设置背景图像的绘制尺寸
border	为所有边界设置所有边框宽度的简写属性
border-bottom	为所有下边框设置宽度的简写属性
border-bottom-color	为所有下边框设置颜色
border-bottom-left-radius	将边框左下角设置为圆角
border-bottom-right-radius	将边框右下角设置为圆角
border-bottom-style	设置元素下边框的样式
border-bottom-width	设置元素下边框的宽度
border-color	设置四条边框的颜色
border-image	使用图像作为边框的简写属性
border-image-outset	指定图像向边框盒外部扩展的区域
border-image-repeat	指定边框图像的缩放和重复方式
border-image-slice	指定边框图像的切割方式
border-image-source	设置边框图像的来源路径
border-image-width	设置边框图像的宽度
border-left	设置元素左边框的简写属性
border-left-color	设置左边框的颜色
border-left-style	设置左边框的样式
border-left-width	设置左边框的宽度
border-radius	指定圆角边框的简写属性
border-right	设置元素右边框的简写属性
border-right-color	设置右边框的颜色
border-right-style	设置右边框的样式
border-right-width	设置右边框的宽度
border-style	设置所有边框样式的简写属性
border-top	设置上边框的简写属性
border-top-color	设置上边框的颜色
border-top-left-radius	将边框左上角设置为圆角
border-top-right-radius	将边框右上角设置为圆角
border-top-style	设置上边框的样式
border-top-width	设置上边框的宽度
border-width	设置四个边框的宽度
box-shadow	设置元素的一个或者多个阴影效果
outline-color	设置元素边框外围轮廓线的颜色
outline-offset	设置轮廓距离元素边框边缘的偏移量
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度
outline	在一条声明中设置轮廓的简写属性

基本的盒子属性
选择器	说明
box-sizing	设置要应用盒子尺寸相关属性的元素
clear	设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素
display	设置元素盒子的类型
float	将元素移动到其包含块的左边界或者右边界，或者另一个浮动元素的边界
height	设置元素盒子的高度
margin	设置元素盒子四个外边距宽度的简写属性
margin-bottom	设置盒子下外边距的宽度
margin-left	设置盒子左外边距的宽度
margin-top	设置盒子上外边距的宽度
margin-right	设置盒子右外边距的宽度
max-height	设置元素的最大高度
max-width	设置元素的最大宽度
min-height	设置元素的最小高度
min-width	设置元素的最小宽度
overflow	设置内容横向和竖向溢出盒子时处理方式的简写属性
overflow-x	设置内容横向溢出盒子时的处理方式
overflow-y	设置内容竖向溢出盒子时的处理方式
padding	设置元素盒子四个内边距宽度的简写属性
padding-bottom	设置盒子下内边距的宽度
padding-left	设置盒子左内边距的宽度
padding-right	设置盒子右内边距的宽度
padding-top	设置盒子上内边距的宽度
visibility	设置元素的可见性
width	设置元素的宽度

布局属性
选择器	说明
bottom	设置元素下外边距边界与包含块下边界之间的偏移
column-count	指定多列布局的列数
column-fill	多列布局中列与列之间的内容如何分布
column-gap	指定多列布局中列与列之间的间隔
column-rule	多列布局中定义列与列之间的规则的简写属性
column-rule-color	设置多列布局中的颜色规则
column-rule-style	设置多列布局中的样式规则
column-rule-width	设置多列布局中的宽度的简写属性
columns	在多列布局中设置列数和列宽度的简写属性
clumn-span	指定多列布局中元素能跨多少列
column-width	指定多列布局中列的宽度
display	指定元素在页面上的显示方式
flex-align	它们都是由弹性盒子布局定义的，目前还没有实现
flex-direction
flex-order
flex-pack
left	设置元素左外边距边界与包含块之间的偏移
position	设置元素的定位方法
right	设置元素右外边距边界与包含块右边界之间的偏移
top	设置元素上外边距边界与包含块上边界之间的偏移
z-index	设置定位元素的堆叠顺序

文本属性
属性	说明
@font-face	指定网页使用的字体
direction	指定文本的方向
font	在一条声明中设置文本字体、大小和颜色的简写属性
font-family	指定文本所用的字体系列，排在前面的优先使用
font-size	指定字体大小
font-style	指定采用正常字体、斜体还是倾斜字体
font-variant	指定字体是否以小型大写字母显示
font-weight	设置文本粗细
letter-spacing	设置字母间距
lint-height	设置行高
text-align	设置文本对齐方式
text-decoration	规定添加到文本的修饰（如下划线）
text-indent	规定文本块中首行文本的缩进
text-justify	设置文本的对齐方式
text-shadow	指定文本块的阴影效果
text-transform	控制文本块字母大小写
word-spacing	指定单词间距

过渡、动画和变换属性
属性	说明
@keyframes	为动画指定一个以上的关键帧
animation	设置动画的简写属性
animation-delay	指定动画开始前的延迟时间
animation-direction	指定动画重复播放时的播放方向
animation-duration	指定动画持续时间
animation-iteration-count	指定动画的循环次数
animation-name	指定用于动画的关键帧集合的名称
animation-play-state	指定动画状态（播放或暂停）
animation-timing-function	指定关键帧之间计算属性值的函数
transform	指定应用于元素的变换
transform-origin	指定元素变换的起点
transition	指定CSS属性过渡效果的简写属性
transition-delay	指定触发过渡的延迟时间
transition-duration	指定过渡的持续时间
transition-property	指定带有过渡效果的属性
transition-timing-function	指定过渡期间计算中间属性值的函数

其他属性
border-collapse	指定表格相邻单元格的边框的显示样式
border-spacing	指定相邻单元格的边框的距离
caption-side	指定表格标题的位置
color	设置元素的前景色
cursor	指定光标的形状
empty-cells	指定是否显示表格中的空单元格
list-style	设置列表样式的简写属性
list-style-image	指定列表项标记使用的图像
list-style-position	指定列表项标记相对于列表项内容的位置
list-style-type	指定列表项标记的类型
opacity	设置元素的透明度
table-layout	指定表格单元格、行和列的算法规则