第三阶段总结

第三阶段总结

---

前言

前面我们讲过了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. 在父标签或兄弟标签中定义计数器
2. 在子标签中计数器加1
3. 在伪元素中显示计数器值

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>

---

总结

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