HTML5和CSS3的一些新特性-视屏，语音，表单，选择器，伪类，结构，before和after选择器，iconmoon 字体使用方法
Html5：
1. HTML5新增语义化标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增语义化标签</title><style>header, nav {height: 120px;background-color: pink;border-radius: 15px;width: 800px;margin: 15px auto;}section {width: 500px;height: 300px;background-color: skyblue;}</style></head><body><header>头部标签</header><nav>导航栏标签</nav><section>某个区域</section></body></html>
2.HTML5新增音频和视频标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增音频标签</title></head><body><audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增视频标签</title><style>video {width: 100%;}</style></head><body><video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video></body></html>
差异：
3. input表单属性
HTML5 Input 类型 | 菜鸟教程 ()
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!-- 我们验证的时候必须添加form表单域 --><form action=""><ul><li>邮箱: <input type="email" /></li><li>网址: <input type="url" /></li><li>日期: <input type="date" /></li><li>时间: <input type="time" /></li><li>数量: <input type="number" /></li><li>手机号码: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>颜色: <input type="color" /></li><!-- 当我们点击提交按钮就可以验证表单了 --><li> <input type="submit" value="提交"></li></ul></form></body></html>
测试结果如下：
4.css3 新增属性选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增属性选择器</title><style>/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] *//* input[value] {color:pink;} *//* 只选择 type =text 文本框的input 选取出来 */input[type=text] {color: pink;}/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */div[class^=icon] {color: red;}/* 选择首先是section，然后是以data结尾的元素 */section[class$=data] {color: blue;}div.icon1 {color: skyblue;}/* 类选择器和属性选择器 伪类选择器 权重都是 10 */</style></head><body><!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 --><!-- <input type="text" value="请输入用户名"><input type="text"> --><!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 --><input type="text" name="" id=""><input type="password" name="" id=""><!-- 3. 属性选择器可以选择属性值开头的某些元素 --><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div><div>我是打酱油的</div><!-- 4. 属性选择器可以选择属性值结尾的某些元素 --><section class="icon1-data">我是安其拉</section><section class="icon2-data">我是哥斯拉</section><section class="icon3-ico">哪我是谁</section></body></html>
测试如下：
5.CSS3新增结构伪类选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增结构伪类选择器</title><style>/* 1. 选择ul里面的第一个孩子 小li */ul li:first-child {background-color: pink;}/* 2. 选择ul里面的最后一个孩子 小li */ul li:last-child {background-color: pink;}/* 3. 选择ul里面的第2个孩子 小li */ul li:nth-child(2) {background-color: skyblue;}ul li:nth-child(6) {background-color: skyblue;}</style></head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul></body></html>
测试如下：
6、CSS3新增结构伪类选择器-nth-child
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增结构伪类选择器-nth-child</title><style>/* 1.把所有的偶数 even的孩子选出来 */ul li:nth-child(even) {background-color: #ccc;}/* 2.把所有的奇数 odd的孩子选出来 */ul li:nth-child(odd) {background-color: gray;}/* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*//* ol li:nth-child(n) {background-color: pink;} *//* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*//* ol li:nth-child(2n) {background-color: pink;}ol li:nth-child(2n+1) {background-color: skyblue;} *//* ol li:nth-child(n+3) {background-color: pink;} */ol li:nth-child(-n+3) {background-color: pink;}</style></head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul><ol><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ol></body></html>
结果入下：
7. 伪元素选择器before和after
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素选择器before和after</title><style>div {width: 200px;height: 200px;background-color: pink;}/* div::before 权重是2 */div::before {/* 这个content是必须要写的 *//* display: inline-block; */content: '我';/* width: 30px;height: 40px;background-color: purple; */}div::after {content: '小猪佩奇';}</style></head><body><div>是</div></body></html>
测试结果入下：
8. 使用 iconmoon 字体样式方法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素选择器使用场景-字体图标</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1lv3na');src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1lv3na') format('truetype'),url('fonts/icomoon.woff?1lv3na') format('woff'),url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;font-family: 'icomoon';/* content: ''; */content: '\e91e';color: red;font-size: 18px;}</style></head><body><div></div></body></html>
测试结果如下:
HTML5和CSS3的一些新特性-视屏 语音 表单 选择器 伪类 结构 before和after选择器 iconmoon 字体使用方法...
