本文介绍了HTML5新增的语义化标签如header, nav等，以及CSS3中的伪元素选择器、2D转换和表单新属性。实例演示了audio和video标签使用，以及如何应用 nth-child 和伪元素进行元素定位和样式控制。
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>
效果图展示：
7345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
