html5新增了语义化的标签，因为传统的div标签对于搜索引擎来讲是没有任何语义的，html5增加的header（头标签），nav（导航栏标签），article（内容标签），section（块级标签），aside（侧边栏标签），footer（尾部标签）， 语义化标签是针对搜索引擎的，在IE9中上述的标签都是行内元素，都需要转化成块（block）或者行内块（inline-block）元素才能进行添加内容。低版本的浏览器不支持这些语义化的标签。 新学的标签：音频标签audio，视频标签video，具体属性以及样式在代码中有展现。 html5新增的表单属性：type：email，url，date，time，month，week，number，tel，search，color。新增的表单属性：required（设置不可为空），placeholder（表单的提示信息）。 css3新增在代码中有部分体现。 其中重要几点： nth-child结构伪类选择器；以及伪元素选择器before和after 伪元素选择器：都必须要有content属性，都创建了一个行内元素，但是在DOM中是看不见的，所以称作伪元素，权重是1。字体图标样式可以在伪元素选择器里面的用代号写，不用再复制图标粘贴，具体见代码。 2D的转换（transform）:主要有translate（平移）,rotate(旋转）和scale（缩放），还可以通过transform-origin来控制2D变化的中心点。其中scale缩放比直接改变宽高缩放的优势在于：scale不会影响到其他的盒子而且是可以设置缩放中心点的。 在2d转换的合起来写的时候需要注意，同时使用多个转换的时候，写的先后顺序会影响到转换的效果，如果同时有位移和其他的属性的时候，就要把位移放在最前面，否则会出乱子。2D转换配上过渡transition会更好，记住谁做过渡就把transition放在谁的里面，不要放错了。 今天学习内容的代码，具体内容注释有解释：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @font-face { /*1. 这个字体名称要注意 icomoon*/ font-family: 'icomoon'; /*2. 一定要注意路径的问题 一定一定！！！！*/ src: url('../fonts/icomoon.eot?7kkyc2'); src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; } video { width: 400px; } li { list-style: none; } button { cursor: pointer; } /* 属性选择器 选择既有button标签又有disabled的属性 属性选择器权重高于标签 */ button[disabled] { cursor: default; } input[type="search"] { color: aqua; } /* ^=表示以“”开头的 */ div[class^="icon"] { color: #f00; } /* $=表示以“”结尾的 */ div[class$="icon"] { color: #0f0; } /* 结构伪类选择器 first-child第一个孩子，last-child最后一个孩子 nth-child(n)第n个孩子 */ ul .tab:first-child { background-color: #00f; } ul .tab:last-child { background-color: #f00; } ul .tab:nth-child(5) { background-color: #0f0; } /* 选出第偶数个 */ ul .new:nth-child(even) { background-color: #f4d321; } /* 选出第奇数个 */ ul .new:nth-child(odd) { background-color: #00dff9; } .wei { width: 200px; height: 200px; border: 1px solid #000; } /* 伪元素选择器 */ .wei::before { display: inline-block; content: '你'; background-color: aqua; width: 80px; height: 80px; } .wei::after { display: inline-block; content: '野猪佩奇'; background-color: aqua; width: 80px; height: 80px; } .wys, .wys2 { width: 250px; height: 40px; position: relative; border: 1px solid #000; } /* 伪元素选择器的应用，加入内容盒子 */ .wys::after { /* 字体图标可以直接用代码表示，在伪元素选择器里content用 */ content: '\e91e'; position: absolute; top: 15px; right: 10px; font-family: 'icomoon'; transition: all .5s; } .wys:hover::after { transform: rotate(180deg); } .newdiv { position: relative; width: 400px; height: 400px; margin: 50px auto; background-color: aqua; } .newdiv .onediv { width: 100px; height: 100px; background-color: #f00; /* transform: translate(x,y);是相对于自己原来的位置来移动的，而且是不会影响到其他的盒子 对行内标签没有效果 对行内元素无效果*/ transform: translate(30px, 30px); } .newdiv .twodiv { width: 100px; height: 100px; background-color: #0f0; } .newdiv .thrdiv { width: 100px; height: 100px; background-color: #00f; /* 百分比是相对于自身宽高的百分比移动，不是整个父元素 */ transform: translate(50%, 50%); } .newdiv .fourdiv { position: absolute; width: 100px; height: 100px; background-color: purple; top: 50%; left: 50%; /* 利用translate来写水平垂直居中，可以不知道盒子的宽高直接写 */ transform: translate(-50%, -50%); } .newdiv .xuanzhuan, .newdiv .lbxuanz { width: 100px; height: 100px; background-color: beige; transition: all 1s; } .newdiv .lbxuanz { /* 确定转换的中心点，默认是50%，50%, 可以是像素px也可以是百分比也可以是方位词left bottom */ transform-origin: 0 100px; } .xuanzhuan:hover { /* rotate是旋转，单位是deg，正数是顺时针旋转，复数是逆时针旋转 */ transform: rotate(180deg); } .lbxuanz:hover { transform: rotate(180deg); } .wys2::after { content: ''; position: absolute; width: 10px; height: 10px; top: 15px; right: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all .5s; } /* 是鼠标经过div的hover里面的after元素来更改！！！ */ .wys2:hover::after { transform: rotate(225deg); } .new3 { width: 150px; height: 150px; background-color: #fff; border: 1px solid #000; /* 溢出隐藏下面的trxuan盒子 */ overflow: hidden; } .new3 .trxuan { width: 150px; height: 150px; background-color: #00f7d6; transform-origin: 0 100%; transform: rotate(180deg); transition: all .5s; } .new3:hover .trxuan { transform: rotate(0); } .big { width: 100px; height: 100px; margin: auto; background-color: #f00; transition: all .5s; transform-origin: 50% 100%; } .big:hover { /* 缩放，scale(x,y)，xy都是数字没有单位的，表示倍数 如果宽高缩放比例一样那么括号内直接写一个倍数即可*/ transform: scale(2, 2); } </style> </head> <body> <!-- 音频标签，加入controls会显示播放页面 autoplay自动播放，chrome禁用了自动播放 loop循环播放--> <audio src="It's Ok.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio> <!-- 当不同浏览器支持的音频文件类型不同时选择多个格式 --> <audio controls="controls"> <source src="It's Ok.mp3" type="audio/mpeg"> <source src="It's ok.ogg" type="audio/ogg"> </audio> <!-- 视频标签 同样也要加入controls才会显示播放页面--> <video src="mi.mp4" controls="controls"></video> <!-- 不同浏览器不兼容也可选择多种格式 --> <video controls="controls"> <source src="mi.mp4" type="audio/mpeg"> <source src="mi.ogg" type="audio/ogg"> </video> <!-- 如果自动播放就不需要控件controls了 自动播放也是chrome禁用了，可以添加静音播放muted从而达到可以自动播放 --> <video autoplay="autoplay" muted="muted" loop="loop"> <source src="mi.mp4" type="audio/mpeg"> <source src="mi.ogg" type="audio/ogg"> </video> <!-- poster是加载等待的画面图片 --> <video controls src="mi.mp4" muted poster="xiaoxin2.png"></video> <form action=""> <ul> <li> 邮箱： <input type="email"> <input type="submit"> </li> <!-- <li>autofocus自动选中输入框 --> URL： <input type="url" autofocus/> <input type="submit"> </li> <li> <!-- required表示不能输入信息为空，placeholder是提示的文字 --> 文本提示信息且不能输入为空：<input type="text" name="" id="" required placeholder="请输入文字"> </li> <li> <!-- 如果设置了name那么就会有之前输入的记录，这个记录可以用autocomplete="on"来打开，设置成off就关闭了 常用off--> 记录： <input type="text" placeholder="输入用户名" name="12name" autocomplete="on"> </li> <li> <!-- multiple可上传多个文件 --> 上传多文件：<input type="file" name="" id="" multiple="multiple"> </li> </ul> </form> <!-- disabled表示按钮禁用 --> <button>点击</button> <button>点击</button> <button disabled>点击</button> <button disabled>点击</button> <input type="text" name="" id="" value="文本框"> <input type="search" name="" id="" value="搜索框"> <div class="icon1">以icon开头的</div> <div class="icon2">以icon开头的</div> <div class="icon3">以icon开头的</div> <div class="aicon">以icon结尾的</div> <div class="bicon">以icon结尾的</div> <div class="cicon">以icon结尾的</div> <ul> <li class="tab">1</li> <li class="tab">2</li> <li class="tab">3</li> <li class="tab">4</li> <li class="tab">5</li> <li class="tab">6</li> <li class="tab">7</li> <li class="tab">8</li> </ul> <ul> <li class="new">1</li> <li class="new">2</li> <li class="new">3</li> <li class="new">4</li> <li class="new">5</li> <li class="new">6</li> <li class="new">7</li> <li class="new">8</li> <li class="new">9</li> <li class="new">10</li> </ul> <div class="wei">是 </div> <p class="wys"></p> <div class="newdiv"> 红绿蓝原本位置是竖着对齐三个排列，现在是加了2D移动后的效果，紫色是2d移动写的水平垂直居中的盒子 <div class="onediv"> </div> <div class="twodiv"></div> <div class="thrdiv"></div> <div class="fourdiv"></div> </div> <div class="newdiv"> <div class="xuanzhuan">我旋转了180度</div> <div class="lbxuanz">我绕着左下角旋转</div> </div> <div class="wys2"> </div> <div class="new3"> <div class="trxuan"> 我突然出现 </div> </div> <div class="big"> 我变两倍大啦！ </div> </body> </html>效果图展示：
