HTML5和CSS3部分小总结

最新推荐文章于 2023-03-08 14:46:38 发布

@山海*

最新推荐文章于 2023-03-08 14:46:38 发布

阅读量116

点赞数 2

分类专栏： HTML5 css3 文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_47612165/article/details/112271967

版权

css3 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

HTML5 新增标签

什么是语义化
新增了那些语义化标签

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

使用语义化标签的注意

- 语义化标签主要针对搜索引擎 
- - 新标签可以使用一次或者多次
- - 在 `IE9` 浏览器中，需要把语义化标签都转换为块级元素 
- - 语义化标签，在移动端支持比较友好，

二、多媒体音频标签
4. 多媒体标签有两个，分别是
音频 – audio
视频 – video 2. audio 标签说明
可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
但是：播放格式是有限的
5. audio 支持的音频格式
audio 目前支持三种格式
在这里插入图片描述
6. audio 的参数

7.adiuo 和 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:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <audio controls="controls" autoplay="autoplay" loop="loop">
        <source src="source/01.mp3">
        <source src="source/01.wav">
        <source src="source/01.ogg">
       您的浏览器版本不支持
    </audio>
    <video controls="controls" muted="muted" poster="images/2.jpg" autoplay="autoplay" loop="loop">
        <source src="source/02.mp4">
        <source src="source/02.ogg">
        您的浏览器不支持此种格式    
    </video>
</body>
</html>

在这里插入图片描述
四、多媒体视频标签
video 视频标签
1.目前支持三种格式

7. 语法格式

<video src="./media/video.mp4" controls="controls"></video>

video 参数
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>

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

<form action="">
        <input type="email" required placeholder="提示文字内容" autofocus> 
        <input type="text" autocomplete="on">
         <input type="email">
        <input type="url">
        <input type="date">
        <input type="time">
        <input type="week">
        <input type="month">
        <input type="search">
        <input type="number">
        <input type="tel">
        <input type="submit">
    </form>

在这里插入图片描述

属性选择器列表

<!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>
        /* 属性选择器 */
        /* input[disabled]{
            width:200px;
        }
        input[type="email"]{
            width: 50px;
        } */
        input[type^="t"]{
            width:50px;
        }
        input[type$="t"]{
            width:50px;
        }
        input[type*="t"]{
            width:50px;
        }
    </style>
</head>
<body>
    <input type="text" disabled>
    <input type="email">
    <input type="number">
</body>
</html>

在这里插入图片描述
六、结构伪类选择器

属性列表

<!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>
<style>
    /* 第一个子元素 */
  ul li:first-child{
        background-color:green
    } 
    /* 最后一个子元素 */
    ul li:last-child { 
        background-color: lightcoral; 
        }
    /* 指定第几个元素 */
     ul li:nth-child(3) {
         background-color: blue }
     /* 指定最后一个元素*/
    ul li:last-of-type {
      background-color: red}
      /* 指定类型第几个 */
      ul li:nth-of-type(2) {
      background-color: black}
</style>
<body>
    <ul>
        <li>1111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>
</html>

在这里插入图片描述
七. nth-child 参数详解

1.注意：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、 odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略
在这里插入图片描述
2. 区别
nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素
八、伪元素选择器
1 伪类选择器

2. 伪类选择器注意事项
before 和 after 必须有 content 属性
before 在内容前面，after 在内容后面
before 和 after 创建的是一个元素，但是属于行内元素
创建出来的元素在 Dom 中查找不到，所以称为伪元素
伪元素和标签选择器一样，权重为 1

@山海*

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5和CSS3部分小总结

**HTML5 新增标签**什么是语义化新增了那些语义化标签header --- 头部标签nav --- 导航标签article --- 内容标签section --- 块级标签aside --- 侧边栏标签footer --- 尾部标使用语义化标签的注意- 语义化标签主要针对搜索引擎 - - 新标签可以使用一次或者多次- - 在 `IE9` 浏览器中，需要把语义化标签都转换为块级元素 - - 语义化标签，在移动端支持比较友好，二、多媒体音频标签4. 多媒体标签
复制链接

扫一扫

专栏目录