C语言 security threejs Backbonejs Notify.js android小程序源代码 db2从入门到精通 wordpress本地建站 mysql删除存储过程 python数据格式 车载u盘 python数据 python日期转时间戳 python编译环境 python中的for循环 python定义变量 python变量定义 python写入文件 java语言 java基础课程 java创建文件 java中map java获取url linux安装教程 shell脚本参数 sql实例 flash实例教程 服务器系统下载 flash相册制作 火牛软件 kms神龙 ezcad2 给视频加字幕的软件 phpword 视频md5修改器 c4d挤压怎么用 天谕玲珑技能加点 js继承的几种方式 ps怎么做动画 重复文件查找
当前位置: 首页 > 学习教程  > 编程语言

第三阶段总结

2020/10/8 20:25:44 文章标签:

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

第三阶段总结

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. 在父标签或兄弟标签中定义计数器
  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的操作,希望后期可以越来越熟练,加油!

本文链接: http://www.dtmao.cc/news_show_250297.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?