HTML和CSS入门（4）

待我称王封你为后i 2022-06-05 03:21 210阅读 0赞

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的嵌套  
定义方式：

（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>`实现的自动填充表单功能

## 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 设置对象被选择时的颜色