标签语义化
以前制作网页布局，我们基本用div 来做。 div就是一个普通的块级标签， 对于搜索引擎来说，是没有语义的注意事项
这种语义化标准主要针对搜索引擎的这些新标签页面中可以使用多次的在IE9中，需要把这些元素转换为块级元素其实，我们移动端更喜欢使用这些标签HTML 元素参考链接 * { margin: 0; padding: 0; } header,nav,article,aside,main,footer { display: block; } header { width: 1000px; height: 100px; margin: 0 auto; background-color: skyblue; } nav { width: 1000px; height: 50px; margin: 10px auto; background-color: sandybrown; } main { width: 1000px; height: 400px; margin: 0px auto; background-color: springgreen; } main aside { float: left; width: 150px; height: 400px; margin-right: 10px; background-color: tomato; } main article { float: left; width: 840px; height: 400px; background-color: tomato; } footer { width: 1000px; height: 50px; margin: 10px auto 0; background-color: yellow; } <header> 头部 </header> <nav> 导航 </nav> <main> <aside> 侧边栏 </aside> <article> 主体内容 </article> </main> <footer> 底部 </footer>多媒体标签包含两个，具体如下：
音频：<audio>视频：<video>使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件
HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的
<audio> 音频标签音频标签语法格式 <audio src="文件地址" controls="controls"></audio> 兼容写法 <audio controls="controls"> <source src="Jason Mraz - Try Try Try.mp3" type="audio/mpeg"> <source src="Jason Mraz - Try Try Try.ogg" type="audio/ogg"> 您的浏览器暂不支持 audio 标签 </audio><audio> 音频标签常见属性
属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放controlscontrolscontrols 如果出现该属性，则向用户显示控件，比如播放按钮looploop如果出现该属性，则每当音频结束时重新开始播放preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 “autoplay”，则忽略该属性srcurl要播放的音频的 URLHTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是有限的
<vieo> 音频标签音频标签语法格式 <video src="文件地址" controls="controls"></video> 兼容写法 <video controls="controls"> <source src="Lauv - I Like Me Better.mp4" type="video/mp4"> <source src="Lauv - I Like Me Better.ogg" type="video/ogg"> 您的浏览器暂不支持 video 标签 </video><video>视频标签常见属性
属性值描述autoplayautoplay视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）controlscontrols向用户显示播放控件looploop放完是否继续播放该视频，循环播放preloadauto（预先加载视频） none（不应加载视频）规定是否预加载视频(如果有了autoplay 就忽略该属性）srcurl视频url地址widthpx (像素)设置播放器宽度heightpx (像素)设置播放器高度posterImgurl加载等待的画面图片mutedmuted静音播放总结
音频标签和视频标签使用基本一致浏览器支持情况不同我们可以给视频标签添加 muted 属性进行自动静音播放视频，音频不可以视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用 controls 控件h5 新增 <input> 表单类型
属性值描述type=“email”限制用户输入必须为Email类型type=“url”限制用户输入必须为URL类型type=“date”限制用户输入必须为日期类型type=“time”限制用户输入必须为时间类型type=“month”限制用户输入必须为月类型type=“week”限制用户输入必须为周类型type=“number”限制用户输入必须为数字类型type=“range”滑动条type=“tel”手机号码type=“search”搜索框type=“color”生成一个颜色选择表单 <form action=""> 姓名: <input type="text"> <br> Email类型: <input type="email"> <br> URL类型: <input type="url"> <br> 日期类型: <input type="date"> <br> 时间类型: <input type="time"> <br> 月类型: <input type="month"> <br> 周类型: <input type="week"> <br> <!-- 可以设置 数字范围 --> 数字类型: <input type="number" max="100" min="20" step="4" value="20"> <br> 滑动条: <input type="range" max="100" min="20" step="4" value="20"> <br> 手机号: <input type="tel"> <br> 搜索: <input type="search"> <br> 颜色选择: <input type="color"> <br> <input type="submit" value="提交"> </form><datalist> 标签
<datalist> 标签规定了 <input> 元素可能的选项列表<datalist> 元素包含了一组 <option> 元素，这些元素表示预定义可选值，在 <input> 元素输 入过程中，会自动响应<option> 元素的值绑定的 <input> 标签必须设置 list 属性，属性值等于 <datalist> 标签的 id 属性值 城市: <input type="text" list="list01"> <!-- 预定义一些选项 --> <datalist id="list01"> <option value="北京"> bj </option> <option value="上海"> sh </option> <option value="广州"> gz </option> <option value="深圳"> sz </option> </datalist>新增表单属性
属性值描述requiredrequired表单拥有该属性表示其内容不能为空，必填placeholder提示文本表单的提示信息，存在默认值将不显示autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个autocompleteoff / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项默认已经打开，如 autocomplete=”on“关闭 autocomplete =”off”- 需要放在表单内同时加上name属性- 同时成功提交multiplemultiple可以多选文件提交 <form action=""> 搜索: <input type="search" autofocus="autofocus" autocomplete="on" name="ss"> <br> 姓名: <input type="text" required="required" placeholder="请输入您的姓名"> <br> 上传文件: <input type="file" multiple="multiple"> <br> <input type="submit" value="提交"> </form>CSS3 新增选择器
相邻兄弟选择器
相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素书写语法：element1 + element2注意： 选中的是紧跟在 element1 之后的同级元素 element2只能选中紧跟在后面的一个 element2 元素二者有相同的父元素+ 符号前后可以添加空格书写 /* 意思就是选中 box1 内部的 h1 后面的第一个满足 p 的条件*/ .box1 h1 + p { background-color: peru; } <div class="box1"> <h1> 一级标题 </h1> <p> 段落1 </p> <p> 段落2 </p> <p> 段落3 </p> <p> 段落4 </p> </div>其他兄弟选择器
其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素书写语法：element1 ~ element2注意： 选择 element1 之后出现的所有 element2两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1~ 符号前后可以添加空格书写 .box1 h1 ~ p { background-color: peru; }nth-child（n）
n 可以是数字，关键字和公式n 如果是数字，就是选择第 n 个常见的关键词 even 偶数 odd 奇数常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3… 一直递增）但是第 0 元素或者超出了元素的个数会被忽略 公式取值2n偶数2n+1奇数5n5 10 15 ……n+5从第5个开始（包含第5个）到最后，5 6 7 8 9 ……-n+5前5个（包含第5个），5 4 3 2 1 0…… .box1 :first-child { background-color: pink; } .box1 :last-child { background-color: purple; } .box1 :nth-child(4) { background-color: rgb(102, 99, 99); } /* .box1 p:nth-child(odd) { background-color: violet; } */ /* .box1 p:nth-child(3n) { background-color: violet; } */ /* .box1 p:nth-child(n + 4) { background-color: violet; } */ .box1 p:first-of-type { background-color: royalblue; } .box1 p:last-of-type { background-color: seagreen; } .box1 p:nth-of-type(3) { background-color: springgreen; } <div class="box1"> <!-- <p> 段落 </p> --> <h1> 一级标题 </h1> <h1> 一级标题 </h1> <p> 段落1 </p> <p> 段落2 </p> <p> 段落3 </p> <p> 段落4 </p> <h1> 一级标题 </h1> </div>E:nth-child(n) 和 E:nth-of-type(n) 的区别
E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素h5 写法和传统写法区别
单冒号 E:before双冒号 E::before浏览器对以上写法都能识别，双冒号是 h5 的语法规范伪元素的注意事项
伪元素只能给双标签添加，不能给单标签添加伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的伪元素里面必须写上属性 content: “” ;before 和 after 创建一个元素，但是属于行内元素因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素选择器权重
基础选择器：id 选择器 > 类选择器 > 标签选择器 > *伪类选择器、属性选择器的权重等于类选择器伪元素选择器的权重等于标签选择器content-box 标准模式
Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是 width 和 height 部分border-box 怪异模式
Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后， 内容区域会收缩 * { margin: 0; padding: 0; } div { width: 100px; height: 100px; padding: 10px; border: 10px solid red; background-color: orchid; } .box1 { box-sizing: content-box; } .box2 { box-sizing: border-box; }单一属性
border-top-left-radius: 半径;border-top-right-radius: 半径;border-bottom-right-radius: 半径;border-bottom-left-radius: 半径; border-top-left-radius: 50px;简写方法
border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法border-radius: 左上角 右上角 右下角 左下角;border-radius: 左上角 右上角 和 左下角 右下角;border-radius: 左上角 和 右下角 右上角 和 左下角;border-radius: 四个角相同; border-radius: 10px 20px 30px 40px;/ 的属性值写法
border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法 .box1 { border-radius: 10px 20px 40px / 50px 60px; } .box2 { border-radius: 10px 20px 40px; }Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持
文字阴影语法
text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0 .word { margin: 50px; font: bold 30px/60px "楷体"; /* 文字阴影： 水平位置 垂直位置 模糊程度 颜色 */ text-shadow: 3px 3px 5px #f00; }多层阴影
text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值注意：多阴影中，先写的阴影压盖在后写的阴影上 .word { margin: 50px; font: bold 30px/60px "楷体"; /* 文字阴影： 水平位置 垂直位置 模糊程度 颜色 */ text-shadow: 3px 3px 5px #f00, 6px 6px 5px steelblue, 9px 9px 5px orangered }边框阴影语法
box-shadow 属性向盒子添加阴影，属性值有 2-4 个长度值、可选的颜色值以及可选 的 inset 关键词来规定，省略的长度是 0 .box2 { /* 边框阴影： 水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 inset */ box-shadow: 10px 10px 5px 10px slateblue ; }多层阴影
box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值注意：多阴影中，先写的阴影压盖在后写的阴影上 .box2 { /* 边框阴影： 水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影inset */ box-shadow: 10px 10px 5px 10px slateblue , 20px 20px 5px 10px red ; }属性名：transition
作用：在不使用 Flash 动画 或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果）， 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用 A 和 B 代指），那么 A 和 B 之间就可以实现平滑的过渡的动画效果，为了方便看效果，我们使用 :hover 切换状态
语法格式： transition: 过渡的属性 过渡时间 运动曲线 延时时间;
单一属性写法
属性描述transition简写属性，用于在一个属性中设置四个过渡属性transiton-property规定应用过渡的 CSS 属性的名称transition-duration定义过渡效果花费的时间，默认是 0transition-timing-function规定过渡效果的时间曲线，默认是 “ease”transition-delay规定过渡效果何时开始，默认是 0transition-property 过渡的属性
none 表示没有属性过渡all 表示所有变化的属性都过渡属性名使用具体的属性名，多个属性名中间逗号分隔时间
过渡时间：以 s 秒为单位延时时间：以 s 秒为单位，0 s也必须加单位transition-timing-function 时间曲线
值描述linear规定以相同速度开始至结束ease规定慢速开始，然后变快，然后慢速结束ease-in规定以慢速开始ease-in-out规定以慢速开始和结束的过渡效果cubic-bezier(x1,y1,x2,y2)在 cubic-bezier 函数中定义自己的值，x1、x2取是 0 至 1 之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标贝塞尔曲线
示例
.box { width: 100px; height: 100px; margin: 10px; background-color: skyblue; /* 过渡属性：属性 过渡时间 时间曲线 延迟时间 */ transition: all 2s linear 2s; } .box:hover{ width: 300px; height: 300px; }位移 translate()
transform 的属性值为 translate() 时，可以实现位移效果 值说明translate(x,y)x,y 分别为水平和垂直方向位移的距离，可以为 px 值或百分比， 区分正负translate(x)只有一个数值，表示水平方向的位移 * { margin: 0; padding: 0; } .box { width: 222px; height: 222px; margin: 100px auto; border: 2px solid red; } .box img { transform: translate(30px,30px); } .box2 { position: relative; width: 500px; height: 100px; border: 2px solid black; } .box2 p { position: absolute; left: 50%; width: 100px; height: 100%; transform: translate(-50%); background-color: coral; } <div class="box"> <img src="images/lagouwang.jpg" alt=""> </div> <div class="box2"> <p> 设置居中</p> </div>缩放 scale()
transform 的属性值为 scale() 时，可以实现元素缩放效果 值说明scale(x, y)x,y 分别为改变元素的宽度和高度的倍数scale(n)只有一个值，表示宽度和高度同时缩放n倍scaleX(n)改变元素的宽度scaleY(n)改变元素的高度 .box img { transform: scale(1,0.5); }旋转 rotate()
transform 属性值设置为 rotate() 时，实现元素的旋转
rotate(数字deg)
其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有 一个属性值
元素旋转后，坐标轴也跟着发生转变
多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异
.box img { /* 旋转 */ transform: rotate(20deg); /* 先位移后旋转 */ /* transform: translate(100px) rotate(20deg); */ /* 先旋转后位移 */ /* transform: rotate(20deg) translate(100px); */ }倾斜 skew()
transform 属性值设置为 skew() 时，实现元素的倾斜transform: skew(数字deg,数字deg)两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0 .box img { transform: skew(20deg); }transformorigin 属性
作用：设置调整元素的水平和垂直方向原点的位置调整元素的基准点属性值：包含两个，中间使用空格分隔 值说明x定义 x 轴的原点在何处，可能的值：left 、center、right、像素值、百分比y定义 y 轴的原点在何处，可能的值：top、center、bottom、像素值、百分比 .box img { transform-origin: left 50%; transform: rotate(20deg); }代码地址
透视属性 perspective
属性名：perspective作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸注意：透视属性需要设置给 3D 变化元素的父级 .box { width: 222px; height: 222px; margin: 100px auto; border: 2px solid red; perspective: 500px; } .box img { transition: all 1s ease; } .box img:hover { transform: rotateX(60deg); }3D 旋转
3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值 值说明rotateX(angle)定义沿着 X 轴的 3D 旋转rotateY(angle)定义沿着 Y 轴的 3D 旋转rotateZ(angle)定义沿着 Z 轴的 3D 旋转 属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针 方向旋转 .box img { transition: all 1s ease; } .box img:hover { transform: rotateX(60deg); /* transform: rotateY(60deg); transform: rotateZ(60deg); */ }3D 位移
类似的，位移也分为三个方向的移动 值说明translateX(x)设置 X 轴的位移值translateY(y)设置 Y 轴的位移值translateZ(z)定义3D位移，设置Z轴的位移值 属性值为像素值或百分比，正负表示位移的方向，正值向对应轴的正方向移动，负值向对应轴的负方向移动 .box img:hover { transform: translateX(50px); /* transform: translateY(50px); transform: translateZ(50px); */ }transform-style属性
用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴
属性值：
flat：所有子元素在 2D 平面呈现preserve-3d：保留 3D 空间3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置 transform-style: preserve-3d，来使其变成一个真正的 3D 图形
一般来说，该属性设置给 3D 变换图形的父级元素
代码链接
css3 动画制作分为两步：创建动画、绑定动画
@keyframes 规则
@keyframes 规则用于创建动画
在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果
可以改变任意多的样式任意多的次数
需要使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to” ，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成
@keyframes 书写方法
@keyframes 动画名称 { 动画过程，可以添加任意百分比处的动画细节 }
animation 属性
需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果
animation 属性用于对动画进行捆绑
语法： div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;}
其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置
单一属性列表
属性描述animation-name规定 @keyframes 动画的名称animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是 0animationtiming-function规定动画的速度曲线，默认是 “ease”animationdelay规定动画何时开始，默认是 0animationiteration-count规定动画被播放的次数，默认是 1，infinite表示无限次播放 * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; border-radius: 50%; margin: 200px auto; background-color: skyblue; /* 添加绑定动画 */ /* animation: move 3s linear 3 1s; */ /* animation: move2 3s linear 3 1s; */ animation: move2 3s linear infinite; } /* 自定义动画，过程 */ @keyframes move { /* 从头开始 最好保持跟默认样式状态一致 */ from { transform: translateY(0); } /* 到结束位置 */ to { transform: translateY(150px); } } /* 百分比定义动画细节 */ @keyframes move2 { 0% { transform: translateY(0); } 25% { transform: translateY(100px); } 50% { transform: translateY(0); } 75% { transform: translateY(-100px); } 100% { transform: translateY(0); } }