HTML5总结

HTML5

1.语义化标签

语义化标签的好处是增强了代码的可阅读性，搜索引擎优化更好，对浏览器更友好

• header 头部
• nav 导航
• article 文章、内容
• aslide 侧边栏
• section 块
• footer 页脚

2.多媒体-音频标签

语法写法：

< audio src=“”  autoplay=“autoplay”  control=“control” >
</audio>

解决audio在各个浏览器兼容性问题：

 <audio src="">
        <source src="" type="audio/mp3">
        <source src="" type="audio/ogg">
            您的浏览器版本过低，暂不支持播放此音频
</audio>

3.多媒体-视频标签

语法写法：

   <video src=“”  autoplay=“autoplay”  control=“control” >
    </video>

解决video在各个浏览器兼容性问题：

 <video src="">
        <source src="" type="audio/mp3">
        <source src="" type="audio/ogg">
            <!-- 您的浏览器版本过低，暂不支持播放此音频 -->
</video>

4.input新增标签

• email 邮箱
• url 网址
• search 搜索
• tel 电话
• date日期
• number 数量
• color 颜色选择

5.input表单新增属性

• placeholder 提示文字
• autofocus 自动获得焦点
• autocomplete="on/off 用户曾经输入过的内容提示，必须要有 name属性才会生效
• required="required" 内容不能为空
• multiple="multiple 文件域多选文件上传

6.伪类选择器

E:nth-child

• E:first-child 匹配父元素下的第一个元素
• E:last-child匹配父元素下的最后一个元素
• E:nth-child（n）匹配父元素下的某一指定元素
• E:nth-child(odd)匹配父元素下序号为奇数的子元素
• E:nth-child(even)匹配父元素下序号为偶数的子元素
• E:nth-child(n+3)匹配父元素从第3个开始（包含到第3个）的元素一直到最后
• E:nth-child(-n+3)匹配父元素第3个开始（包含第3个）的前3个元素

E:nth-of-type

• E:nth-of-type指定父元素下类型标签的子元素
• E:first-of-type指定父元素下类型标签的第一个子元素
• E:last-of-type

nth-child与nth-of-type的区别
nth-child(n)是第n个子元素，nth-of-type(n)是父元素中第n个特定标签元素。
用口水话来说就是我不管你是谁，只要你是我儿子就行

nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
指定了某一个元素
举例：

<style>
	div span:nth-first-child {
	color:pink
	}
	</style>
	
<div>
	<p></p>
	<span></span>
<div>

这里设置的颜色只对div下的span标签起作用，对p标签不起作用

7.transform 2D变换

2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位

使用2d移动的步骤：

1. 给元素添加 转换属性 transform
2. 属性值为 translate(x,y) 如 transform:translate(50px,50px);

语法写法：

div{
    transform: translate(50px,50px);
  }

注意：

1. translate类似定位，不会影响到其他元素的位置
2. 对行内标签没有效果
3. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);可和定位搭配使用，实现让盒子居中布局（用法和margin负值相同）