精华内容
下载资源
问答
  • 目录一、什么是 `HTML5`二、新增语义化标签三、多媒体音频标签四、多媒体视频标签、新增 input 标签六...拥有一强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上 HTML5 HTML5 拓展了

    一、什么是 HTML5

    1. HTML5 的概念与定义
    • 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML
    • 两个概念:
      • 是一个新版本的 HTML 语言,定义了新的标签、特性和属性
      • 拥有一个强大的技术集,这些技术集是指: HTML5CSS3javascript, 这也是广义上的 HTML5
    1. HTML5 拓展了哪些内容
    • 语义化标签
    • 本地存储
    • 兼容特性
    • 2D3D
    • 动画、过渡
    • CSS3 特性
    • 性能与集成
    1. HTML5 的现状

      绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,

      总的来说:HTML5 已经是大势所趋

    二、新增语义化标签

    1. 什么是语义化

    2. 新增了那些语义化标签

      • header — 头部标签
      • nav — 导航标签
      • article — 内容标签
      • section — 块级标签
      • aside — 侧边栏标签
      • footer — 尾部标签

    3. 使用语义化标签的注意

    - 语义化标签主要针对搜索引擎
    - 新标签可以使用一次或者多次
    - 在 `IE9` 浏览器中,需要把语义化标签都转换为块级元素
    - 语义化标签,在移动端支持比较友好,
    - 另外,`HTML5` 新增的了很多的语义化标签,随着课程深入,还会学习到其他的
    

    三、多媒体音频标签

    1. 多媒体标签有两个,分别是
    • 音频 – audio
    • 视频 – video
    1. audio 标签说明
    • 可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放,
    • 但是:播放格式是有限的
    1. audio 支持的音频格式

    在这里插入图片描述

    1. audio 的参数

      在这里插入图片描述

    5、audio 代码演示

    <body>
      <!-- 注意:在 chrome 浏览器中已经禁用了 autoplay 属性 -->
      <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
    
      <!-- 
        因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件
       -->
      <audio controls>
        <source src="./media/snow.mp3" type="audio/mpeg" />
      </audio>
    </body>
    

    四、多媒体视频标签

    1. video 视频标签

      • 目前支持三种格式

    在这里插入图片描述

    1. 语法格式

      <video src="./media/video.mp4" controls="controls"></video>
      
    2. video 参数

    在这里插入图片描述

    1. video 代码演示

      <body>
        <!-- <video src="./media/video.mp4" controls="controls"></video> -->
      
        <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 -->
        <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
          <source src="./media/video.mp4" type="video/mp4">
          <source src="./media/video.ogg" type="video/ogg">
        </video>
      </body>
      
    2. 多媒体标签总结

    • 音频标签与视频标签使用基本一致
    • 多媒体标签在不同浏览器下情况不同,存在兼容性问题
    • 谷歌浏览器把音频和视频标签的自动播放都禁止了
    • 谷歌浏览器中视频添加 muted 标签可以自己播放
    • 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册

    五、新增 input 标签

    在这里插入图片描述

    六、新增表单属性

    在这里插入图片描述

    展开全文
  • HTML5新特性

    2021-02-23 12:57:46
    它是万维网核心语言、标准通用标记语言下一应用标记语言次重大修改所以叫html5 html5设计目的为了在移动设备上支持多媒体 html5优势 提高可用性和改进用户友好体验 更好语义化标签 可以给站点带来...

    html5简介
    它是万维网的核心语言、标准通用标记语言的下一个应用标记语言的第五次重大修改所以叫html5
    html5设计的目的为了在移动设备上支持多媒体
    html5优势
    提高可用性和改进用户的友好体验
    更好的语义化标签
    可以给站点带来更多的多媒体元素
    可以很好的替代FLASH和silverlight
    设计到网站抓取和索引时,对于seo很友好
    广义的html5
    html5+css3+javascript技术的综合
    语义化标签

    <header>: 头部标签
    <nav>:导航标签
    <main>:主体标签
    <article>:独立的内容标签
    <section>:区段标签
    <aside>:侧边栏标签
    <footer>: 尾部标签
    

    新增多媒体标签
    使用他们可以很方便在页面中嵌入音频和视频,而不再去使用落后的flash和其他浏览器插件
    音频
    HTML5在不使用插件的情况下也可以原生支持音频文件
    常见的音频格式:ogg、mp3、wav

    <audio src="文件地址" controls="controlss"></audio>
    autoplay="autoplay" 音频在就绪后马上播放
    controls="controls" 用户显示控件,根据控件播放
    loop="loop"         音频结束时,重新开始播放
    preload="preload"   页面加载时预备播放,如果使用autoplay,则忽略该属性
    src="url"           要播放音频的URL
    

    多种音频兼容写法

    <audio controls="controls">
        <source src="media.show.mp3" type="audio.mpeg"> 
        <source src="media.show.ogg" type="audio.ogg"> 
        您的浏览器版本过低,不支持音频播放
      </audio>
    

    视频
    常见的视频格式:ogg、MP4、webm

     autoplay="autoplay"   视频就绪自动播放
      controls="controls"   向用户显示播放控件
      loop="loop"           循环播放
      preload="auto/none"   是否预加载
      src="url"             视频地址
      width="pixels"        设置播放器的宽度
      height="pixels"       设置播放器的高度
      poster="imgurl"       加载等待的画面图片
      muted="muted"         静音播放
    

    兼容写法

    <video controls="controls" width="300">
      <source src="move.ogg" type="video/ogg">
      <source src="move.mp4" type="video/mp4">
      您的浏览器暂不支持video视频
    </video>
    

    新增的表单标签
    输入标签
    h5新增表单类型

    属性名 属性值
    type=“email” 输入email类型
    type=“url” 输入URL类型
    type=“date” 输入日期类型
    type=“time” 输入时间类型
    type=“month” 输入月类型
    type=“week” 输入周类型–
    type=“number” 输入数字类型
    type=“range” 滑动条
    type=“tel” 手机号码
    type=“search” 搜索框
    type=“color” 生成颜色选择表单

    datalist标签
    datalist规定了<input元素可能的选项列表>

    <input type="text" list="city-list">
    <datalist id="city-list">
      <option value=""广州>gz</option>
      <option value=""北京>bj</option>
      <option value=""上海>sh</option>
    </datalist>
    

    表单属性
    新增的表单属性

      required="required"   表单内容不能为空
      placeholder="提示文本" 表单的提示信息,存在默认值不显示
      autofocus="autofocus" 自动聚焦属性
      autocomplete="off/on" 当用户键入时,浏览器在之前键入过的值显示出现字段的选项,补全
      multiple="multiple"   可以多选文件提交
    
    展开全文
  • 拥有一强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上 HTML5 HTML5 拓展了哪些内容 语义化标签 本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成 H

    HTML5 第一天

    一、什么是 HTML5
    1. HTML5 的概念与定义

      • 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML
      • 两个概念:
        • 是一个新版本的 HTML 语言,定义了新的标签、特性和属性
        • 拥有一个强大的技术集,这些技术集是指: HTML5CSS3javascript, 这也是广义上的 HTML5
    2. HTML5 拓展了哪些内容

      • 语义化标签
      • 本地存储
      • 兼容特性
      • 2D3D
      • 动画、过渡
      • CSS3 特性
      • 性能与集成
    3. HTML5 的现状

      绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,

      总的来说:HTML5 已经是大势所趋

    问:为什么要引进语义化标签?

    ​ 因为移动端不知道我们写的标签的含义是什么,格式有可能不对。

    所以这里引进了语义化标签。

    二、HTML5 新增标签
    1. 什么是语义化

    2. 新增了那些语义化标签

      • header — 头部标签
      • nav — 导航标签
      • article — 内容标签
      • section — 块级标签
      • aside — 侧边栏标签
      • footer — 尾部标签

    在这里插入图片描述

    1. 使用语义化标签的注意

      • 语义化标签主要针对搜索引擎
      • 新标签可以使用一次或者多次
      • IE9 浏览器中,需要把语义化标签都转换为块级元素
      • 语义化标签,在移动端支持比较友好
      • 另外,HTML5 新增的了很多的语义化标签,随着课程深入,还会学习到其他的
    三、多媒体音频标签
    1. 多媒体标签有两个,分别是

      • 音频 – audio
      • 视频 – video
    2. audio 标签说明

      • 可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放,
      • 但是:播放格式是有限的
    3. audio 支持的音频格式

      • audio 目前支持三种格式

    4. audio 的参数(controls不写的话,不会显示,并且谷歌浏览器禁用了autoplay)

    5、audio 代码演示

     <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <!--
        html5新增多媒体标签
        <audio>
        <video>
    
        audio有属性:
          loop  循环
          autoplay  自动播放
          controls  显示
          src  来源
      -->
        <!-- 谷歌浏览器禁用了autoplay -->
        <audio src="media/snow.mp3" controls="controls" autoplay></audio>
    
        <!-- 为了解决各种浏览器的音频兼容问题 -->
        <audio controls="controls">
        <source src="media/snow.mp3" type="audio/mpeg">
        <source src="media/snow.ogg" type="audio/ogg">
        您的浏览器不支持audio播放
      </audio>
    </body>
    
    </html>
    
    
    四、多媒体视频标签
    1. video 视频标签

      • 目前支持三种格式

    2. 语法格式

      <video src="./media/video.mp4" controls="controls"></video>
      
    3. video 参数

    4. video 代码演示

    <!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>
            video {
                width: 300px;
            }
        </style>
    </head>
    
    <body>
        <!--
        视频标签 video
        属性
        loop 循环
        autoplay 自动播放  谷歌浏览器禁用了autoplay,除非给视频添加静音的效果
        src  来源
        controls 显示
        width  宽度
        height  高度
        muted  静音
        poster  封面
          
      -->
        <!-- 设置封面的话,需要关闭自动播放,显示控件 -->
        <video src="media/video.mp4" controls poster="media/scale.jpg"></video>
        <!-- 设置自动播放的话,需要设置为静音 -->
        <video src="media/video.mp4" autoplay muted></video>
        <!-- 为了解决各种浏览器的音频兼容问题 -->
        <video muted autoplay>
        <source src="media/video.mp4" type="video/mp4">
        <source src="media/video.ogg" type="video/ogg">
      </video>
    </body>
    
    </html>
    
    1. 多媒体标签总结

      • 音频标签与视频标签使用基本一致
      • 多媒体标签在不同浏览器下情况不同,存在兼容性问题
      • 谷歌浏览器把音频和视频标签的自动播放都禁止了
      • 谷歌浏览器中视频添加 muted 标签可以自己播放
      • 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册
    五、新增 input 标签

    六、新增表单属性

    七、CSS3 属性选择器(上)
    1. 什么是 CSS3

      • CSS2 的基础上拓展、新增的样式
    2. CSS3 发展现状

      • 移动端支持优于 PC
      • CSS3 目前还草案,在不断改进中
      • CSS3 相对 H5,应用非常广泛
    3. 属性选择器列表

    4. 属性选择器代码演示

      button {
        cursor: pointer;
      }
      button[disabled] {
        cursor: default
      }
      
    八、CSS3 属性选择器(下)
    1. 代码演示

      input[type=search] {
        color: skyblue;
      }
      
      span[class^=black] {
        color: lightgreen;
      }
      
      span[class$=black] {
        color: lightsalmon;
      }
      
      span[class*=black] {
        color: lightseagreen;
      }
      
    九、结构伪类选择器
    1. 属性列表

    2. 代码演示

      ul li:first-child {
        background-color: lightseagreen;
      }
      
      ul li:last-child {
        background-color: lightcoral;
      }
      
      ul li:nth-child(3) {
        background-color: aqua;
      }
      
    十、nth-child 参数详解
    1. nth-child 详解

      • 注意:本质上就是选中第几个子元素

      • n 可以是数字、关键字、公式

      • n 如果是数字,就是选中第几个

      • 常见的关键字有 even 偶数、odd 奇数

      • 常见的公式如下(如果 n 是公式,则从 0 开始计算)

      • 但是第 0 个元素或者超出了元素的个数会被忽略

    2. 代码演示

      <style>
        /* 偶数 */
        ul li:nth-child(even) {
          background-color: aquamarine;
        }
      
        /* 奇数 */
        ul li:nth-child(odd) {
          background-color: blueviolet;
        }
      
        /*n 是公式,从 0 开始计算 */
        ul li:nth-child(n) {
          background-color: lightcoral;
        }
      
        /* 偶数 */
        ul li:nth-child(2n) {
          background-color: lightskyblue;
        }
      
        /* 奇数 */
        ul li:nth-child(2n + 1) {
          background-color: lightsalmon;
        }
      
        /* 选择第 0 5 10 15, 应该怎么选 */
        ul li:nth-child(5n) {
          background-color: orangered;
        }
      
        /* n + 5 就是从第5个开始往后选择 */
        ul li:nth-child(n + 5) {
          background-color: peru;
        }
      
        /* -n + 5 前五个 */
        ul li:nth-child(-n + 5) {
          background-color: tan;
        }
      </style>
      
    十一、nth-childnt-of-type 的区别
    1. 代码演示

      <style>
        div :nth-child(1) {
          background-color: lightblue;
        }
      
        div :nth-child(2) {
          background-color: lightpink;
        }
      
        div span:nth-of-type(2) {
          background-color: lightseagreen;
        }
      
        div span:nth-of-type(3) {
          background-color: #fff;
        }
      </style>
      
    2. 区别

      • nth-child 选择父元素里面的第几个子元素,不管是第几个类型
      • nt-of-type 选择指定类型的元素
    十二、伪元素选择器
    1. 伪类选择器

    2. 伪类选择器注意事项

      • beforeafter 必须有 content 属性
      • before 在内容前面,after 在内容后面
      • beforeafter 创建的是一个元素,但是属于行内元素
      • 创建出来的元素在 Dom 中查找不到,所以称为伪元素
      • 伪元素和标签选择器一样,权重为 1
    3. 代码演示

    <!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>
            div {
                width: 300px;
                height: 300px;
                border: 1px solid #000;
            }
            /*
            (1)before和after是伪元素,必须要写content
            (2)是行内元素,需要转为块级元素
            (3)权重和标签选择器一样都是1,
            (4)权重:
              !important  最高
              id选择器:100
              类选择器、结构伪类、属性选择器:10
              标签选择器、伪元素选择器:1
    
            */
            
            div::before {
                content: '我';
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            
            div::after {
                content: '小猪佩奇';
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>
    
    十三、伪元素的案例
    1. 添加字体图标
    <!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 {
                font-family: 'icomoon';
                src: url('fonts/icomoon.eot?cv013x');
                src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            
            div,
            p {
                position: relative;
                width: 300px;
                height: 30px;
                border: 1px solid red;
            }
            
            span {
                font-family: 'icomoon';
                position: absolute;
                top: 3px;
                right: 0;
            }
            
            p::after {
                content: '\ea50';
                font-family: 'icomoon';
                position: absolute;
                top: 3px;
                right: 0;
            }
        </style>
    </head>
    
    <body>
        <!-- 普通 -->
        <div>
            <span></span>
        </div>
    
        <!-- 用伪元素 -->
        <p></p>
    </body>
    
    </html>
    

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 1. 基于MPEG-4的多媒体技术:使用自行开发基于MPEG-4标准多媒体压缩技术,适应从64Kbps到宽带网络环境。系统不仅可以提供流畅语音,而且可以提供清晰流畅视频图像。音频数据仅仅占用6Kbps网络带宽,视频...
  • 学习内容:了解 H5 新变化 掌握 H5 新增语义化标签 掌握 H5 新增多媒体标签 掌握 H5 新增 input 表单、表单...拥有一强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上 HTML5 HTML5.

    学习内容:了解 H5 新变化
    掌握 H5 新增语义化标签
    掌握 H5 新增多媒体标签
    掌握 H5 新增 input 表单、表单属性

    1.什么是 HTML5

    1. HTML5 的概念与定义
    • 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML
    • 两个概念:
      • 是一个新版本的 HTML 语言,定义了新的标签、特性和属性
      • 拥有一个强大的技术集,这些技术集是指: HTML5CSS3javascript, 这也是广义上的 HTML5

    1.1HTML5 拓展了哪些内容

    • 语义化标签
    • 本地存储
    • 兼容特性
    • 2D3D
    • 动画、过渡
    • CSS3 特性
    • 性能与集成

    1.2HTML5 的现状

      绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,
    
      总的来说:`HTML5` 已经是大势所趋
    

    2.HTML5 新增标签

    1. 什么是语义化

    2. 新增了那些语义化标签

      • header — 头部标签
      • nav — 导航标签
      • article — 内容标签
      • section — 块级标签
      • aside — 侧边栏标签
      • footer — 尾部标签

      在这里插入图片描述

    2.1使用语义化标签的注意

    - 语义化标签主要针对搜索引擎
    - 新标签可以使用一次或者多次
    - 在 `IE9` 浏览器中,需要把语义化标签都转换为块级元素
    - 语义化标签,在移动端支持比较友好,
    - 另外,`HTML5` 新增的了很多的语义化标签,随着课程深入,还会学习到其他的
    

    3. H5新增多媒体标签

    3.1多媒体音频标签

    1. 多媒体标签有两个,分别是
    • 音频 – audio
    • 视频 – video
    1. audio 标签说明
    • 可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放,
    • 但是:播放格式是有限的
    1. audio 支持的音频格式

      • audio 目前支持三种格式

    2. audio 的参数
      在这里插入图片描述

    5、audio 代码演示

    <body>
      <!-- 注意:在 chrome 浏览器中已经禁用了 autoplay 属性 -->
      <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
    
      <!-- 
        因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件
       -->
      <audio controls>
        <source src="./media/snow.mp3" type="audio/mpeg" />
      </audio>
    </body>
    

    3.2多媒体视频标签

    1. video 视频标签

      • 目前支持三种格式
    2. 语法格式

    <video src="文件地址" controls="controls"></video>
    
    1. video 参数

    2. video 代码演示

      <body>
        <!-- <video src="./media/video.mp4" controls="controls"></video> -->
      
        <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 -->
        <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
          <source src="./media/video.mp4" type="video/mp4">
          <source src="./media/video.ogg" type="video/ogg">
        </video>
      </body>
      

    3.3 多媒体标签总结

    • 音频标签与视频标签使用基本一致
    • 多媒体标签在不同浏览器下情况不同,存在兼容性问题
    • 谷歌浏览器把音频和视频标签的自动播放都禁止了
    • 谷歌浏览器中视频添加 muted 标签可以自己播放
    • 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册

    4. H5新增input表单、表单属性

    4.1新增表单属性

    5. CSS3 选择器

    5.1CSS3 属性选择器(上)

    1. 什么是 CSS3

    • CSS2 的基础上拓展、新增的样式

    2. CSS3 发展现状

    • 移动端支持优于 PC
    • CSS3 目前还草案,在不断改进中
    • CSS3 相对 H5,应用非常广泛

    3. 属性选择器列表


    类选择器、属性选择器、伪类选择器,权重为 10

    4. 属性选择器代码演示

    button {
      cursor: pointer;
    }
    button[disabled] {
      cursor: default
    }
    

    5.2CSS3 属性选择器(下)

    1. 代码演示

    input[type=search] {
      color: skyblue;
    }
    
    span[class^=black] {
      color: lightgreen;
    }
    
    span[class$=black] {
      color: lightsalmon;
    }
    
    span[class*=black] {
      color: lightseagreen;
    }
    

    5.3结构伪类选择器

    1. 属性列表

    在这里插入图片描述
    注意:类选择器、属性选择器、伪类选择器,权重为 10

    2. 代码演示

    ul li:first-child {
      background-color: lightseagreen;
    }
    
    ul li:last-child {
      background-color: lightcoral;
    }
    
    ul li:nth-child(3) {
      background-color: aqua;
    }
    

    3.nth-child 参数详解

    • nth-child 详解

    • 注意:本质上就是选中第几个子元素

    • n 可以是数字、关键字、公式

    • n 如果是数字,就是选中第几个

    • 常见的关键字有 even 偶数、odd 奇数

    • 常见的公式如下(如果 n 是公式,则从 0 开始计算)

    • 但是第 0 个元素或者超出了元素的个数会被忽略

    • 代码演示

    <style>
      /* 偶数 */
      ul li:nth-child(even) {
        background-color: aquamarine;
      }
    
      /* 奇数 */
      ul li:nth-child(odd) {
        background-color: blueviolet;
      }
    
      /*n 是公式,从 0 开始计算 */
      ul li:nth-child(n) {
        background-color: lightcoral;
      }
    
      /* 偶数 */
      ul li:nth-child(2n) {
        background-color: lightskyblue;
      }
    
      /* 奇数 */
      ul li:nth-child(2n + 1) {
        background-color: lightsalmon;
      }
    
      /* 选择第 0 5 10 15, 应该怎么选 */
      ul li:nth-child(5n) {
        background-color: orangered;
      }
    
      /* n + 5 就是从第5个开始往后选择 */
      ul li:nth-child(n + 5) {
        background-color: peru;
      }
    
      /* -n + 5 前五个 */
      ul li:nth-child(-n + 5) {
        background-color: tan;
      }
    </style>
    

    4.结构伪类选择器小结

    • 结构伪类选择器就是选择第n个

    • Nth-child从所有子级开始算的,可能不是同一种类型

    • Nth-of-type 是指定同一种类型的子级,比如 ul li:nth-of-type(2) 是选择第2个li

    • 关于nth-child(n) 我们要知道n从0开始计算的,要记住常用的公式

    • 如果是无无序列表,我们肯定用 nth-child 更多

    nth-childnt-of-type 的区别

    1. 代码演示
    <style>
      div :nth-child(1) {
        background-color: lightblue;
      }
    
      div :nth-child(2) {
        background-color: lightpink;
      }
    
      div span:nth-of-type(2) {
        background-color: lightseagreen;
      }
    
      div span:nth-of-type(3) {
        background-color: #fff;
      }
    </style>
    
    1. 区别

      • nth-child 选择父元素里面的第几个子元素,不管是第几个类型
      • nt-of-type 选择指定类型的元素

    5.4伪元素选择器

    1. 伪类选择器

    2. 伪类选择器注意事项

    • beforeafter 必须有 content 属性
    • before 在内容前面,after 在内容后面
    • beforeafter 创建的是一个元素,但是属于行内元素
    • 创建出来的元素在 Dom 中查找不到,所以称为伪元素
    • 伪元素标签选择器一样,权重为 1
    1. 代码演示

      <style>
          div {
            width: 100px;
            height: 100px;
            border: 1px solid lightcoral;
          }
      
          div::after,
          div::before {
            width: 20px;
            height: 50px;
            text-align: center;
            display: inline-block;
          }
          div::after {
            content: '德';
            background-color: lightskyblue;
          }
      
          div::before {
            content: '道';
            background-color: mediumaquamarine;
          }
        </style>
      

    伪元素的案例

    在这里插入图片描述

    1. 添加字体图标

      p {
         width: 220px;
         height: 22px;
         border: 1px solid lightseagreen;
         margin: 60px;
         position: relative;
      }
      p::after {
        content: '\ea50';
        font-family: 'icomoon';
        position: absolute;
        top: -1px;
        right: 10px;
      }
      
    展开全文
  • 拥有一强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上 HTML5 HTML5 拓展了哪些内容 语义化标签 本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成 H
  • HTML5 概念与定义 定义:HTML5 定义了 HTML 标准最新版本,是对 HTML 次重大修改,...拥有一强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上 HTML5 HTML5 拓展了哪些...
  • 本书不是一本综述性的理论书籍,它是一本计算机应用模型机技术的专著,在内容上可供专业人员从事研究工作参考,是有关计算机科技人员解读关键技术问题的一本专业工具书。本书选题是辽宁省教育厅高等学校科学研究项目...
  • 章:BREW工具使用 第六章:SDK应用开发框架 第七章:开发一BREW应用 第八章:ISHELL接口使用 第九章:IDISPLAY使用简介 第十章:菜单实现 第十一章: ISTATIC使用简介 第十二章:文件操作 第十三章:IIMAGE...
  • 章:BREW工具使用 第六章:SDK应用开发框架 第七章:开发一BREW应用 第八章:ISHELL接口使用 第九章:IDISPLAY使用简介 第十章:菜单实现 第十一章: ISTATIC使用简介 第十二章:文件操作 第十三章:IIMAGE...
  • 1.3.1 开始一工程 1.3.2 设计用户界面 1.3.3 属性设置 1.3.4 编写程序代码 1.3.5 编译、运行程序 1.4 程序调试 1.4.1 程序错误种类 1.4.2 C++ Builder集成环境中调试选项 1.4.3 C++ Builder主要调试...
  • 4. 连接特性(Server-Send Event和Websockets这两个特性能帮助我们实现服务器将数据推送到客户端功能) 5. 网页多媒体特性 6. 三维,图形及特效特性(基于SVG,Canvas,WebGL及CSS33D功能) 7. 性能与集成特性...
  • (2)针对跨域数据交互问题,指出并分析了跨域缓存交互问题出现的原因,通过在HTML5存储技术的基础上,重写LocalStorage,用移动端本地的Sqlite进行数据维护,实现跨域数据交互。 (3)针对页面自适应问题,本文结合...
  • HTML5

    2021-03-21 13:42:02
    它有更大的技术集,允许更多样化和强大网站和应用程序,增加了新特性:语义特性,本地存储特性,设备兼容特性,连续特性,网页多媒体特性,三维,图形以及特效特性,性能 与集成特性,CSS3特性。这集合有时称位...
  • HTML5&CSS3及demo

    2020-03-08 16:59:16
    底下有很多CSS3和动画实例,大家可以看一下 ... 万维网核心语言、标准通用...增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维,图形及特效特性,性能与集成特性,CSS3特效。 ...
  • HTML5 + CSS3新特征

    2020-05-29 17:56:59
    万维网核心语言、标准通用标记语言下应用超文本标记语言(HTML)次重大修改。作为新HTML语言,具有新元素,属性和行为。 XHTML和HTML5区别: XHTML是一种增强了HTML,它可扩展性和灵活性将适应...
  • 地理信息产业是信息产业的一重要组成部分,地理信息技术是IT技术的重要分支,地理信息系统软件是一类特殊的计算机信息系统软件,它是以各类空间数据及其属性为基础,为各种应用目的服务的一类计算机信息系统。...
  • 国内外主流三维GIS软件

    热门讨论 2011-03-14 13:38:59
     介绍:三维地理信息系统软件VRMap实现了VR和GIS技术的完美结合,可以根据卫星影像、航空影像、电子地图、高程数据、城市模型数据、虚拟效果数据生成虚拟地理场景;通过VRMap提供的二次开发包,可实现规划、国土、...
  • 包括DBMS概念、术语和体系结构,ER模型和ER图,数据抽象和语义数据建模,UML类图表示法,基本关系模型,关系代数和关系演算,SQL,规范化,磁盘上组织记录文件主要方法,文件索引技术,查询处理与优化,以及...
  • Thinking.In.Java

    2012-03-21 22:35:53
    若由你自己来干,可能要花9时间才能发现和理解多形性问题,这一特性实际是OOP一重要基础。通过一些小、简单例子,读者可知道如何通过继承来创建一系列类型,并通过它们共有基础类对那个系列中...
  • 压控振荡器)、环路|捕捉与环路锁定跟踪、环路同步带与捕捉带、相位比较器锁定在 时波形、相位比较器II逻辑图和锁定时波形图、在调制解调技术应用、在空间技术应用、在稳频技术应用。...
  • 吉象浏览器是一款全格式浏览器,通过压缩解码和流播放技术,支持PDF、JAR、WMA、MP4、AVI、RAR、ZIP、7Z、ACE、ARJ、BZ2、CAB、GZ、LAH、TAR、UUE等100余种文件格式在线浏览,无论是压缩文件、多媒体文件、文档...
  • asp.net知识库

    2015-06-18 08:45:45
    .NET关于string转换小Bug Regular Expressions 完整在.net后台执行javascript脚本集合 ASP.NET 中正则表达式 常用匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎...
  • VC++ 编程指南_中文chm

    2009-08-24 16:15:41
     4.2 工具条编程技术  4.3 状态栏设计与实现 第课 对话框  5.1对话框和控件基本概念  5.2 对话框模板设计  5.3 对话框类设计  5.4 非模态对话框  5.5 标签式对话框  5.6 公用对话框  5.7 ...
  • VC++可视化编程指南

    2009-07-05 15:36:18
     4.2 工具条编程技术  4.3 状态栏设计与实现 第课 对话框  5.1对话框和控件基本概念  5.2 对话框模板设计  5.3 对话框类设计  5.4 非模态对话框  5.5 标签式对话框  5.6 公用对话框  5.7 ...
  • 实例085 利用类封装特性制作一简单计算器 132 3.3 子承父业——继承特性 133 实例086 龙生龙,凤生凤(单继承应用) 133 实例087 兄弟情深:this和base(引用对象及控制基类) 135 实例088 初识支持多重继承接口...

空空如也

空空如也

1 2 3
收藏数 58
精华内容 23
关键字:

多媒体技术的五个特性