第三阶段总结

html5 + css3

第三阶段总结前言一、语义化标签有哪些 ？二、音视频1.audio和video属于行内块标签2.播放音视频 三、新增选择器1.css3之前的选择器2. 新增属性选择器 四、css滤镜1.img的filter属性 五、自动编号css3中可以使用计数器, 对标签自动编 总结

---

前言

前面我们讲过了html和css进行基本的页面渲染，加上js实现动态页面的效果，但是我们会发现，我们使用了大量的div进行嵌套和基本上每个页面都分为导航条、广告条、主要内容和底部内容，为了使我们的页面更具结构性，我们在html5和css3中添加了语义化标签，使网页结构更清晰，样式查找更 快速准确，便于搜素引擎的更准确检索。

---

一、语义化标签有哪些 ？

`

<header> 网页头部 <nav>导航条</nav> </header> <main> 网页主体 <section>表示网页中的一块信息,指一个功能模块,比div结构性更强</section> <section>轮播图</section> <section>推荐推荐网址</section> <section>今天要闻</section> <section>看点直播</section> <section>国际新闻</section> </main> <footer>网页尾部</footer> <aside>网页两边的附加信息, 常用广告</aside> <!-- 以上语义化标签, header, nav, main, footer, aside, section 用法和div一样,都是块标签 --> <!-- button标签也是h5新增的语义化标签 --> <input type="button"> <button></button>`

二、音视频

1.audio和video属于行内块标签

代码如下（示例）：

<!-- 音频 src音频路径 autoplay 自动播放 controls显示控制器 loop循环播放--> <audio src="./resource/雨的印记.mp3" autoplay controls loop> 此浏览器不支持audio标签, 请升级 </audio> <button onclick="myPlay()">播放</button> <button onclick="myPause()">暂停</button> <input type="range" min="0" max="1" step="0.01" onchange="updateVolume(event)"> <!-- 视频的使用和音频基本一致, 包括属性, API等 --> <video src="./resource/cc75cbfe01c21bf8c0c948f23a010ce9.mp4" autoplay controls loop></video>

2.播放音视频

代码如下（示例）：

var myAudio = document.querySelector("audio") function myPlay(){ myAudio.src = "./resource/半壶纱.mp3" myAudio.play(); } function myPause(){ myAudio.pause(); } var input = document.querySelector("input") input.value = 1; function updateVolume(event){ console.log(event.target.value) myAudio.volume = event.target.value } // 用计时器监测播放进度 setInterval(function(){ console.log(myAudio.duration) // 音乐总时长,单位s console.log(myAudio.currentTime) // 音乐当前时间,单位s }, 1000)

三、新增选择器

1.css3之前的选择器

1, ID选择器 2, 类选择器 3, 包含选择器(E F) 4, 伪类选择器（:link,visited,hover,active,focus,first-child） 5, 伪元素选择器（::first-line,first-letter,before,after） 6, 通配选择器(*) 7, 属性选择器(foo[name='martin']) 8, 子包含选择器(E>F) 9, 相邻兄弟选择器(E+F)

2. 新增属性选择器

/* 1, E[foo^='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头 */ div[name^="马"]{ background-color: aqua; } /* 2,E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾 */ div[name$="云"]{ color: red; } /* 3,E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串 */ div[name*="赵"]{ font-size: 30px; } /* 新增结构伪类选择器： */ /* 1, E:root 匹配文档所在的根元素 */ html:root{ border: 1px solid; } /* 2,E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始） */ div:nth-child(2){ color: blue; } /* 3, E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素 body中最后会渲染一个script标签,也会计算在内*/ div:nth-last-child(3){ color: orange; } /* 4, E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n) */ div:nth-of-type(2){ font-size: 20px; /* } */ /* 5, E:last-child 父标签中的最后一个子元素, 而且这个最后的元素必须是E */ /* 6, E:first-of-type 父标签中的第一个类型为E的子标签,非E子元素不包含在内*/ /* 7, E:last-of-type 父标签中的最后一个类型为E的子标签,非E子元素不包含在内*/ /* 8, E:only-child 匹配属于父元素中唯一子元素的 E 元素 (待定)*/ /* 9: E:only-of-type 指定属于父元素的特定类型的唯一子元素的每个 p 元素 (待定)*/ /* 10, E:empty 找到内容为空的元素*/ /* div:empty{ height: 50px; background-color: black; } */

四、css滤镜

1.img的filter属性

/* 1, 灰度 [0,1] 默认0 */ img:nth-child(1){ filter: grayscale(1) } /* 2, 褐色 [0,1] 默认0 */ img:nth-child(2){ filter: sepia(1) } /* 3, 饱和度 [0,∞] 默认1 */ img:nth-child(3){ filter: saturate(10) } /* 4, 色相 [0deg, 360deg] 默认0deg */ img:nth-child(4){ filter: hue-rotate(300deg) } /* 5, 反色 [0,1] 默认0 */ img:nth-child(5){ filter: invert(1) } /* 6, 透明度 [0,1] 默认1 */ img:nth-child(6){ filter: opacity(0.2) } /* 7, 亮度 [0,∞] 默认1 */ img:nth-child(7){ filter: brightness(0.4) } /* 8, 对比度 [0,∞] 默认1 */ img:nth-child(8){ filter: contrast(0.2) } /* 9, 模糊度 [0px, ∞] 默认0px */ img:nth-child(9){ filter: blur(10px) } /* 10, 阴影 */ img:nth-child(10){ border-radius: 20px; /* 滤镜阴影可以显示png图片轮廓 */ filter: drop-shadow(10px 10px 3px red); /* box-shadow: 10px 10px 3px blue; */ } div{ width: 300px; height: 200px; margin: 100px; border-radius: 20px; /* 盒子阴影只能显示盒子周围 */ box-shadow: 10px 10px 10px red; /* 文字阴影, 可以显示文字轮廓 */ font-size: 40px; text-shadow: 10px 10px 3px blue; }

五、自动编号

css3中可以使用计数器, 对标签自动编

步骤：

在父标签或兄弟标签中定义计数器在子标签中计数器加1在伪元素中显示计数器值 body{ /* 1, counter-reset 初始化一个计数器, count1指的是计数器的变量名 */ counter-reset: count1; } h1{ /* 2, counter-increment 计数器加1 increment增加 让count1这个变量+1*/ counter-increment: count1; /* 定义二级计数器, h1标签渲染时,重置一个计数器, 下一个h1渲染时, 会再重置一个计数器 , 有4个h1标签, 就会重置4个计数器, 分别计数 , 如果在body中重置,那么计数器只会重置一次 */ counter-reset: count2; } h1::before{ /* 3, counter(count1) 使用计数器的值, 作为标签前缀, 可以直接在前后拼接字符串*/ content: counter(count1)", " } h2{ text-indent: 2rem; /* 二级计数器+1 */ counter-increment: count2; /* 定义三级计数器 */ counter-reset: count3; } h2::before{ /* 拼接一级,二级计数器 */ content:counter(count1)"."counter(count2)" " } h3{ text-indent: 4rem; /* 三级计数器+1 */ counter-increment: count3 } h3::before{ /* 拼接一级,二级,三级计数器 */ content: counter(count1)"."counter(count2)"."counter(count3)" " } </style> </head> <body> <h1>个人信息</h1> <h2>姓名</h2> <h2>电话</h2> <h2>联系方式</h2> <h1>专业技能</h1> <h2>html</h2> <h3>html常用标签</h3> <h3>html语义化标签</h3> <h3>html单标签</h3> <h3>html单标签</h3> <h2>css</h2> <h3>css样式</h3> <h2>js</h2> <h3>DOM增删改查</h3> <h3>变量,运算,函数</h3> <h3>鼠标键盘事件</h3> <h3>本地数据存储</h3> <h3>jquery插件</h3> <h1>工作经历</h1> <h2>2019-2020 智游</h2> <h2>2020-2021 腾讯</h2> <h1>个人评价</h1>

---

总结

第一次总结的有点乱，知识点很多。我应该分模块、单个的进行总结，最近第三阶段已经结束了，马上就开始第四阶段的学习，应该是开始学习框架了，框架应该相对来说是比较重要的部分，所以一定要做好总结。我现在还是不是很了解这个的操作，希望后期可以越来越熟练，加油！