CSS3+HTML5基础学习01（标签）

1、HTML5新增的语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：块级标签 （大号的div标签，他们之间可以相互包含）
<aside>：侧边栏标签
<footer>：尾部标签
<audio>：音频
<video>：视频

注意：
（1）这些标签主要是针对搜索引擎的
（2）这些新标签页面中可以使用多次
（3）在IE9中，需要把这些元素转换为块级元素
（4）针对移动端更喜欢用这些标签
（5）一般在里面放两种音频格式（ogg和MP3）

2、音频标签：
常见属性：
autoplay：表示音频在就绪后马上播放
注意：谷歌浏览器把autoplay属性禁用了
controls：如果出现该属性，向用户显示控件，比如播放按钮
loop：每当音频结束时重新开始播放
例：autoplay=“autoplay”

2.1、因为不同的浏览器支持不同的格式，我们采取的解决方案是，为这个音频准备多个格式
语法：

<audio controls="controls">
    <!-- <source>是单标签 -->
    <source src="media/snow.mp3" type="audio/mpeg">
    <source src="snow.ogg" type="audio/ogg">
</audio>

3、视频标签
常用的三种格式：Ogg MPEG4 WebM
其他的用法和音频一样
注意：谷歌浏览器也不会自动播放视频，但是有解决方案，给视频添加静音属性
autoplay=“autoplay” muted="muted"

4、HTML5新增的input表单
type=“email” 限制用户输入必须为email类型
type=“url” 限制用户输入必须为URL类型
type=“date” 限制用户输入必须为日期类型
type=“time” 限制用户输入必须为时间类型
type=“month” 限制用户输入必须为月l类型
type=“week” 限制用户输入必须为周类型
type=“number” 限制用户输入必须为数字类型
type=“tel” 限制用户输入必须为手机号码
type=“search” 搜索框
type=“color” 生成一个颜色选择器

5、HTML5新增的input表单属性
required=“required” 表示其内容不能为空，必填。
placeholder=“提示文本” 表单的提示信息，存在默认值将不显示。
autofocus=“autofocus” 自动聚焦属性，页面加载完成自动聚焦到指定表单。
autocomplete=“off/on” 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出字段中填写的选项。
默认是：autocomplete=“on”

autocomplete=“off” 表示提交成功后不再显示之前键入过的值（一般off用得多）

multiple=“multiple” 可以多选文件提交。

6、CSS3选择器
6.1、属性选择器（权重是10）
属性选择器：选择某一类标签的带有某个属性的
例1：button[disabled] 直接写属性，注意中间无空格

补充：类选择器，属性选择器，伪类选择器的权重都是10

例2：input[type="search"]  属性等于值，通过属性里面的值不同，来选择

例3：**div[class^="icon"]  属性以某个值开头，匹配以icon开头的，注意要以^开头**

例4：**div[class$="icon"]  属性以某个值结尾的，匹配以icon结尾的，注意要有$符号**

例5：**div[class*="icon"]  可以在任意位置的，只要有icon的都会被选择，*是都选择**

6.2、结构伪类选择器（权重是10）
例1： ul li:first-child {
background-color: pink;
}
叫伪类是因为它还是以冒号来写的
first-child ：表明选择的是第一个li

例2： ul li:nth-child(8) {
background-color: azure;
}
nth-child(8)：表示选择的是第8个，我们要第几个直接在括号后面写几（重点！！！）

nth-child(n)：n可以是数字，关键字和公式
（1） n是数字，就是选择第几个
（2） 常见的关键字有even 偶数(2n) odd 奇数(2n+1)
（3）常见的公式如下（如果n是公式，则从0开始计算）
比如：n表示就是0,1,2,3,4,5,6…
2n就是20=0，21=2，2*2=4…
（4）第0个元素或者超出了元素的个数会被忽略
n+5：从第五个开始选择
-n+5：选择前五个
注意： nth-child(n)使用的时候要注意，它选择的是父元素里面的第n个孩子，不管里面的孩子是否是同一种类型。

例3：div span:first-of-type {
        background-color: darkcyan;
    }

of-type：是选择指定类型的元素，
first-of-type：是选择某类型的第一个元素
last-of-type：是选择某类型的最后一个元素
nth-of-type(n)：选择某类型的第n个元素
of-type：一般用于子元素是不同的类型

6.3**、伪元素选择器（两个冒号）（权重为1）**
::before 在元素内部的前面插入内容
::arter 在元素内部的后面插入内容
注意：
（1）before和after必须有content内容
（2）before和after创建一个元素，但是属于行内元素,可以给这个元素添加其他属性
（3）因为在dom里面看不见刚才创建的元素，所以我们成为伪元素
（4）伪元素和标签选择器一样，权重为1