HTML和CSS入门（4）

HTML5=HTML5+CSS3+Javascipt+API

1.html5中新增标签：
（1）<figure>表示一段独立的流内容（文本图像）
（2）<figcaption>位于figure内，用于定义figure的标题
（3）<details>用于描述文档或某个部分的细节（目前只有chrome浏览器识别）
（4）<mark>用于定义带有记号的文本
（5）<progress>定义运行中的进度（进程）
（6）<meter>表示范围已知，且可度量的等级标量成分数值
（7）<menu>定义一个列表式菜单
（8）<article>标记定义一篇文章
（9）<header>标记定义一个页面或一个区域的头部
（10）<nav>标记定义导航链接
（11）<section>标记定义一个区域
（12）<aside>标记定义页面内容部分的侧边栏
（13）<hgroup>标记定义文件中一个区域的相关信息

2.html5中改良标签：
（1）<ol>新加属性：start和reversed
start：用于自定义列表项开始的编号
reversed：用于设置列表是否进行反向排序
（2）<ul>新加属性：不支持type和compact属性，不支持li的type属性，改用css样式来定义列表类型。

3.表单标签：
html5中为了方便排版，可以使form中表单标签脱离form的嵌套
定义方式：

<form action="" id="new"<!--自定义表格名称-->></form>
<input type="" name="" form="new"/>

（1）input表单的type新属性值：type=“email/url/date/time/month/week/number/range/search/color”

（2）表单属性：
required：表示其内容不能为空，必填
placeholder：提示文本，未输入时表单的内容，输入值后将不显示
autofocus（on）：自动聚焦
autocompletely（on/off）：自动完成的功能（注意添加name的值）

（3）datalist列表：配合<option>实现的自动填充表单功能

<input id="mycar" list="cars"/>
<datalist id="cars">
    <option value="bwm"></option>
    <option value="ford"></option>
</datalist>

css3新增选择器

1.关系选择器
（1）E+F 相邻选择符，选择紧贴在E之后的F元素
（2）E~F 兄弟选择符，选择E所有兄弟元素F
2.结构伪类选择器
（1）E：root 匹配E在文档的根元素（一般都是html，所以和定义body效果一样）
（2）E：first-child 匹配E的第一个子元素
E：last-child 匹配E的最后一个子元素
E：only-child 匹配E的仅有的一个子元素
E：nth-child（n） 匹配E的第n个子元素
E：nth-last-child（n） 匹配E的倒数第n个子元素

（3）E：first-of-type 匹配同类型中第一个同级兄弟元素E
E：last-of-type 匹配同类型中最后一个同级兄弟元素E
E：only-of-type 匹配同类型中仅有的一个同级兄弟元素E
E：nth-of-type（n） 匹配同类型中第n个同级兄弟元素E
E：nth-last-of-type（n） 匹配同类型中倒数第n个同级兄弟元素E

（4）E：empty 匹配没有任何子元素的元素E
（5）E：checked 匹配用户界面上处于选中状态的元素E
（6）E：enabled 匹配用户界面上处于可用状态的元素E
（7）E：disabled 匹配用户界面上处于禁用状态的元素E

3.属性选择器
（1）E[att] 具有att属性的元素
（2）E[att=“x”] 具有att=“x”属性值的元素
（3）E[att~=“x”] 具有att属性且属性值为一用空格分隔的字词列表，其中一个等于x的E元素
（4）E[att^=“x”] 具有att属性且属性值以x开头的字符串的E元素
（5）E[att$=“x”]具有att属性且属性值以x结尾的字符串的E元素
（6）E[att*=“x”]具有att属性且属性值包含x的字符串的E元素
（7）E：first-letter/E::first-letter 设置对象内的第一个字符样式
（8）E：first-line/E::first-line 设置对象内的第一行样式
（9）E：before/E::before 设置在对象前发生的内容，和content属性一起使用
（10）E：after/E::after 设置在对象后发生的内容，和content属性一起使用
（11）E::selection 设置对象被选择时的颜色