对于HTML5与CSS3基础教程的总结
1. HTML和CSS是万维网(www)的根基。
2. 万维网(www)：world wide web，是互联网提供的服务其中之一。分为web客户端和web服务器程序。以http(Hypertext Transfer Protocol)和html为基础。由一个全局的URI(统一资源标志符)标识。资源通过超文本传输协议传送给用户。
3. 万维网联盟：w3c
4.https比http多了个保密功能，Consortium。
5. 标签的组成：元素（element）、属性（attribute）和值（value）。
6. 大多数元素既包含文本，也包含其他元素。一些元素由开始标签、内容和结束标签组成。空元素既不包含文本也不包含其他元素。空元素只有一个标签<img/>
body元素包住页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容，也就是访问者看见的东西。
<header>可以包含h1～h6标题、标识、导航、搜索框
7. 浏览器呈现HTML时，会把文本中的多个空格或制表符压缩成单个空格，把回车和换行符转换成单个空格，或将他们一起忽略。
8.特殊字符：版权符号：©，带语调的小e：é，<：<，>：> 详情请见http://www.elizabethcastro.com/html/extras/entities.html
9.URL(Uniform Resource Locator)统一资源定位符。第一部分成为模式。模式有HTTP和FTP(File Transfer Protocol)文件传输协议等。第二部分是文件所在的主机的名称。第三部分路径
HTTP的模式
模式 主机名 路径
" http :// www.site.com / tofu/index.html "
FTP的模式
模式 主机名 路径
" ftp :// ftp.site.com / pub/index.pdf "
用于电子邮件地址的URL包括mailto模式
模式 电子邮箱地址
" mailto : test@163.com "
10. 斜体<em>表示强调的意思</em> 或者font:italic; <i></i>
<address>也是斜体，禁止在里面添加h1～h6、article、address、aside、footer、header、hgroup、nav、section
<small>变小变细一点，表示的含义是法律声明等条纹细则。放在footer里，版权所有
<strong>加粗，想标记为重要内容的文本
<figure>创建图及其标题的步骤
<cite>标记的是音乐专辑、电影、图书和艺术作品的标题，也是斜体
两个特殊的元素用以标记引述的文本。blockquote元素表示单独存在的引述。q元素则用于短的引述
<time datetime=“”>标记时间
<abbr title="">标记缩写词并用title解释其含义， 样式标记含有title的abbr：abbr[title] {}
<dfn>用于定于术语，后续使用术语时不需要再对其定义。斜体
<sub>创建下标 <span>H<sub>2</sub>O</span>
<sup>创建上标 <span>X<sup>2</sup></span>
<del>标记删除，同text-decoration:
既可以包围短语内容又可以包围块级内容的元素
<code>表示其中的文本是代码或文件名
<pre>预格式化的文本，保持文本固有的换行和空格。它自动关闭换行有内容很宽会出现滚动条，加一个word-space:pre-wrap;
<mark>荧光笔样式，一般是黄色背景
<ruby><rp><rt>旁注标记 <ruby> 北<rp>(</rp> <rt>bei</rt> <rp>)</rp> 京<rp>(</rp> <rt>jing</rt> <rp>)</rp> </ruby> =>北京上面有beijing
<meter>出现百分比的横条 <meter value="0.8">80%</meter>
<progress>计算后的百分比的横条 <progress value="37" max="100">
<img alt=""/>当图片未加载出来，显示alt里面的内容
<cursor> pointer手型、default箭头、crosshair加号、move带箭头的加号、wait windows加载等的图片、help 问号、text大写I、progress跟wait差不多
<video> src（源）、autoplay（自动播放）、controls（播放控件）、muted（静音）、loop（循环一般跟controls）、poster（海报）、width、height、preload（预加载，加载页面加载还是点击播放加载）
<source>跟<video>或<audio>一起用指定视频类型，来源。src（video不用写了）、type（video/mp4、video/webm、video/ogg、audio/mp3、audio/mp3、audio/aac、audio/wav、audio/ogg、audio/opus）、media适应屏幕
<audio>音频，有 src（源）、autoplay（自动播放）、controls（播放控件）、muted（静音）、loop（循环一般跟controls）、preload（预加载，加载页面加载还是点击播放加载）
11. HTML5引入header、footer、main、article、section、aside（放指向其他网站的链接）、nav。
12. 地标角色
| 地标角色 | 如何使用 |
| role=“banner”（横幅）页面顶端，网站标志、网站赞助者标志、全站搜索工具 | 放在页面级的header元素，每个页面只用一次 |
| role=“navigation”（导航）通常为链接 | 与nav是对应关系，每个页面可以多次使用但不能过度使用 |
| role=“main”（主体）文档的主要内容 | 与main是对应关系，最好将其添加到main元素，也可以添加到其他元素，每个页面仅用一次 |
| role=“complementary”（补充性内容）文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的 | 与aside是对应关系。应将其添到aside或div元素。每个页面可以用多次但不能过度 |
| role=“contentinfo”（内容信息）包含关于文档的信息的大块可感知区域这类信息的例子包含版权声明和指向隐私权声明的链接等 | 可添加至整个页面的页脚（通常footer），每个页面仅用一次 |
13. 链接两个主要的部分： 目标和标签。 目标指定访问者点击链接时会发生什么，标签是访问者在浏览器中看到或在屏幕阅读器中听到测部分，标签可以是文本、图像或两者兼有。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 在被点击时的同一框架中打开被链接文档（默认）。 |
| _parent | 在父框架中打开被链接文档。 |
| _top | 在窗口主体中打开被链接文档。 |
| doodad | 在名为doodad的新窗口或标签中打开href的页面 |
14. 哪些属性会被继承
文本：color、direction、font、font-family、font-size、font-style、font-weight、font-variant（小型大写字母）、letter-spacing、line-height、text-align、text-indent（首航缩进）、text-transform、visibility、white-space、word-spacing
列表： list-style、list-style-image、list-style-position、list-style-type
表格：border-collapse（相邻单元格边框是否合并为单一边框）、border-spacing（表格边框之间的空隙大小）、caption-side（设置标题位置）、empty-cells（显示表格中的空单元格）
页面设置（对于印刷物）：orphans、page-break-inside、widows
其他：cursor（鼠标指针）、quotes（指定引号样式）
15. css用层叠的原则来考虑特殊性、顺序和重要性。 特殊性相同的，越晚出现的优先级越高。样式分为外部样式<link rel="stylesheet" href="style.css">、嵌入样式<style></style>、应用内联样式<span style=""></span>
16. 选择器
| 选择器 | 类型 | 例子 | 例子描述 | CSS（哪个 CSS 版本） |
|---|---|---|---|---|
| .class | 类选择器 | .intro | 选择 class="intro" 的所有元素。 | 1 |
| #id | id选择器 | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
| * | 通用元素选择器 | * | 选择所有元素。 | 2 |
| element | 标签选择器 | p | 选择所有 <p> 元素。 | 1 |
| element,element | 多元素选择器 | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
| element element | 后代元素选择器 | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
| element>element | 子元素选择器 | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
| element+element | 毗邻元素选择器 | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。如果是p+p,第一个p也就是本身不变 | 2 |
| E[attribute] | 属性选择器：匹配所有具有att属性的E元素 | [target] | 选择带有 target 属性所有元素。 | 2 |
| E[attribute=value] | 属性选择器：匹配所有att属性等于“value”的E元素 | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| E[attribute~=value] | 属性选择器：匹配所有att属性具有多个空格分隔的值、其中一个值等于“value”的E元素 | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
| E[attribute|=value] | 属性选择器：匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素 | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
| E[attribute^=value] | 属性选择器：属性att的值以”val”开头的元素 | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
| E[attribute$=value] | 属性选择器： 属性att的值以”val”结尾的元素 | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
| E[attribute*=value] | 属性选择器：属性att的值包含”val”字符串的元素 | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
| :first-child | 伪类 | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。是第一个p而不是p的第一个 | 2 |
| :link | 伪类 | a:link | 选择所有未被访问的链接。 | 1 |
| :visited | 伪类 | a:visited | 选择所有已被访问的链接。 | 1 |
| :active | 伪类 | a:active | 选择活动链接。 | 1 |
| :hover | 伪类 | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
| :focus | 伪类 | input:focus | 选择获得焦点的 input 元素。 | 2 |
| :lang(language) | 伪类 | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 |
| :first-letter | 伪元素 | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
| :first-line | 伪元素 | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
| :before | 伪元素 | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
| :after | 伪元素 | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
| element1~element2 | 通用选择器（匹配任何在E元素之后的同级F元素） | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
| :root | 结构性伪类 | :root | 选择文档的根元素。对于HTML文档，就是HTML元素 | 3 |
| :nth-child(n) | 结构性伪类： | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
| :nth-last-child(n) | 结构性伪类： | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
| :nth-of-type(n) | 结构性伪类： | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
| :nth-last-of-type(n) | 结构性伪类： | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 |
| :last-child | 结构性伪类： | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
| :first-of-type | 结构性伪类： | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
| :last-of-type | 结构性伪类： | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
| :only-of-type | 结构性伪类： | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
| :only-child | 结构性伪类： | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
| :empty | 结构性伪类： | p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 | 3 |
| :target | target伪类（匹配文档中特定”id”点击后的效果） | #news:target | 选择当前活动的 #news 元素。 | 3 |
| :enabled | 与用户界面有关的伪类：匹配表单中激活的元素 | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
| :disabled | 与用户界面有关的伪类：匹配表单中禁用的元素 | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
| :checked | 与用户界面有关的伪类：匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
| ::selection | 与用户界面有关的伪类：匹配用户当前选中的元素 | ::selection | 选择被用户选取的元素部分。 | 3 |
| :not(selector) | 反选伪类（匹配不符合当前选择器的任何元素） | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
17. 颜色设置
1) color： #rrggbb或 #rgb
2) color：rgb(r, g, b) r、g、b取0~255之间的整数，或输入百分数
3) color：rgba(r, g, b, a) r、g、b取0~255之间的整数，a是0~1之间的小数，alpha透明度 opacity不透明程度
18. background-attachment:fixed;无论如何滚动，图片都会在浏览器初始化时的哪个位置，相当于position：fixed；
19. 对于IE8的兼容
[if It IE 9]<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>[endif]
Modernizr库检测浏览器是否支持HTML5和CSS3的各种特性。
20. display：none与visibility：hidden的区别； display不占块， visibility出现同样大块的空白。
21. colspan table占几列、rowspan table占几行
22. HTML定义网页的内容，css定义网页的表现，JavaScript则定义特殊的行为。
23. oblur离开、onchange改变值、onclick、ondblclick、onfocus、onkeydown按下一个键、onkeypress按下并松开一个键、onkeyup输入后松开一个键、onload、onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onreset、onselect、onsubmit
