自学前端——第十三天

最新推荐文章于 2024-07-25 09:24:40 发布

m0_74758366

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量65

点赞数

分类专栏：自学前端文章标签：前端 css

本文链接：https://blog.csdn.net/m0_74758366/article/details/128703841

版权

自学前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.HTML5新增标签

1.1新增语义化标签

（图源03-HTML5-新增视频标签_哔哩哔哩_bilibili）

这些标签本质上都是div，只是语义化更强。

1.2新增多媒体标签

1.2.1 视频标签<video>

视频文件的格式有很多，<video>标签支持三种：MP4、ogg、WebM。其中被大多数浏览器都接受的格式是MP4，因此尽量使用MP4格式作为视频格式。

（图源同上）

考虑到不同浏览器的兼容性问题，可以采取以下写法：

（图源同上）

这段代码运行的顺序是从上往下，如果ogg格式的视频可以播放，就播放ogg格式的视频，否则就播放mp4格式的视频，如果MP4格式的视频也无法播放，就输出下面的文字。

（图源同上）

在谷歌浏览器中运行时，即使<videro src="#" autoplay=autoplay></video>也不会自动播放视频，需要添加muted=“muted”才会播放。（muted是静音的意思）

controls=“controls”则是用于显示向用户显示播放控件（暂停、进度条、静音、全屏之类）.

1.2.2 音频标签<audio>

<audio>标签支持三种格式：MP3、Wav、Ogg。尽量使用MP3。

语法和兼容性问题的解决方法都与<video>一致。

（图源同上）

想实现音频在谷歌浏览器中的自动播放需要利用JS。

1.3HTML5新增input表单类型

（图源同上）

一般而言，为了让后台接收数据，需要用form表单将input包含起来。

以上的属性中着重记住：number tel search三个

1.4HTML5新增的表单属性

其中，placeholder提示文本的字体颜色默认为灰色，但是可以通过一定的方法改变其颜色，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input::placeholder {
            color: red;
        }
    </style>
</head>

<body>
    <input type="search" placeholder="6666" />
    <input type="submit" value="提交" />
</body>

</html>

要注意style标签里的input后面带着2个：；autocomplete=“on”的作用类似于保存搜索记录，一般而言要关掉；而multiple属性一般是用于type=“file”中。

2.CSS3新增

（图源同上)

2.1属性选择器

（图源同上）

（i）在以前，想给这两个选择器分别赋予不同的格式，必须让其中一个标签调用类名，在css里通过类选择器来更改样式，然而属性选择器可以在相同的标签里通过某个属性的有无来进行选择，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[placeholder] {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 属性选择器：通过某个标签是否拥有对应的属性来选择 -->
    <input type="search" placeholder="请输入用户名" />
    <input type="search" />
</body>

</html>

请读者考虑一下上面这段代码运行后的结果，是不是会让placeholder提示文字变成红色呢？答案是否定的。原因是：属性选择器本质上是选择某个标签，即改变拥有placeholder属性的input标签的样式，因此它的作用是对第一个input标签施加了color：red样式，这么做并不会让placeho变成红色，只是让用户输入框内的字变为红色。

（ii） 属性选择器还可以根据属性以及属性值来选择：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type=search] {
            color: red;
        }
    </style>
</head>

<body>
    <input type="search" placeholder="请输入用户名" />
    <input type="text" placeholder="请输入用户名" />
</body>

</html>

（iii）属性选择器还可以根据某个标签里的某个属性的属性值的开头来选择：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[class^=box] {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box1">1111</div>
    <div class="box2">2222</div>
    <div class="box3">3333</div>
    <div>4444</div>
</body>

</html>

（iv）属性选择器还可以根据某个标签的某个属性的属性值的结尾来选择：

（v）属性选择器还可以根据某个属性的属性值里是否含有特定的字符来选择：

注意

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

属性选择器前面的div之类的只是标签选择器（不管和冒号之间有没有空隙都占1个权重），占1个权重，因此其总权重是10+1=11，如果改成.bottom[class=box]，则权重为10+10=20 .

2.2结构伪类选择器

2.2.1 child

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 注意，ul和：first-child之间必须有一个空格，意为对ul的后代取第一个孩子 */
        /* 如果没有空格就相当于是对第一个ul进行操作 */
        ul :first-child {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>111111111</li>
        <li>222222222</li>
        <li>333333333</li>
        <li>444444444</li>
        <li>555555555</li>
    </ul>
    <ul>
        <li>111111111</li>
        <li>222222222</li>
        <li>333333333</li>
        <li>444444444</li>
        <li>555555555</li>
    </ul>
</body>

</html>

上面的代码读者可以考虑一下，ul :first-child的冒号前面是否需要空格，加了空格和不加空格运行的区别又是什么呢？

加空格是取 ul 后代中的first-child（即第一个 li）：