HTML新增标签及属性和属性选择器、结构伪类选择器的使用。

本文链接：https://blog.youkuaiyun.com/m0_73805336/article/details/129913786

本文介绍了HTML5中新增的语义化标签，如头部、导航、内容等，并详细讲解了音频和视频标签的使用，包括autoplay、controls、loop等属性。此外，还讨论了新增的input表单类型，如email、date等，以及表单属性如required、placeholder。在CSS方面，文章提到了属性选择器和结构伪类选择器的应用，帮助更精确地选择和样式化元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML新属性

头部标签：

导航标签：

内容标签：

定义文档的某个区域：

侧边栏标签：

尾部标签：

这种语义化标准主要是针对搜索引擎。

1、多媒体标签

1.1音频标签

<audio src="文件地址"></audio>

尽量使用MP3格式。

自动播放音频：（谷歌浏览器禁用了自动播放属性）

autoplay="autoplay"

向用户展示控件：

controls="controls"

音频结束时重新开始播放：

 loop="loop"

要播放音频的URL

src：url（）；

1.2视频标签

<video src="文件地址"></video>

视频格式尽量使用mp4。

（1）视频属性

（1）视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）

autoplay="autoplay"

（2）向用户显示播放控件：

controls="controls"

（3）设置播放器宽高： width height；

（4）播放完是否继续播放视频，循环播放。

loop="loop"

（5）/如果有autoplay忽略该属性/

preload="auto （预先加载视频）\none (不应加载视频)"

（6）src：url（）视频url地址

（7）加载等待的画面图片：

poster=""

（8）静音播放：

 muted="muted"

2、新增input类型

2.1新增input表单

<!-- 验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱：<input type="email" name="" id=""></li>
            <li>网址：<input type="url" name="" id=""></li>
            <li>日期：<input type="date" name="" id=""></li>
            <li>日期：<input type="time" name="" id=""></li>
            <li>数量：<input type="number" name="" id=""></li>
            <li>手机号码：<input type="tel" name="" id=""></li>
            <li>搜索：<input type="search" name="" id=""></li>
            <li>颜色：<input type="color" name="" id=""></li>
            <!-- 当我们点击提交按钮就可以验证表单 -->
            <li><input type="submit" name="" id=""></li>
        </ul>
    </form>

2.2新增表单属性

（1）表单拥有该属性表示其内容不能为空：

 required="required"

（2）表单的提示信息，存在默认值将不显示：

placeholder="提示文本"
/*修改提示文本颜色*/
input::placeholder {
            color: pink;
        }

（3）自动聚集焦点

 autofocus="autofocus"

（4）显示以前搜索的内容：

默认已经打开需要放到表单内，同时加上name属性，同时提交成功。

autocomplete="on\off"

（5）多选文件提交

multiple="multiple"

二、CSS新增两类选择器

1、新增选择器

1.1属性选择器

根据元素特定属性来选择元素，可以不借用类或id选择器

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

[]是属性选择器 + 前面的div 权重为11.

 <style>
        /* 必须是input 但是同时具有value这个属性 选择这个元素 [] */
        input[value] {
            color: pink;
        }
        /* 必须是input 同时type的值必须是text */
        input[type=text] {
                color:red;

        }
        /* 选择首先是div 然后具有class属性 并且属性值必须是icon开头的元素 */
        div[class^=icon] {
                color: red;
        }
        /* 选择section 然后具有class属性 并且属性值必须以date结尾 */
        section[class$=date] {
            color:aqua
        }
        /* 选择span 然后具有class属性 并且属性值里面任意位置有date */
        span[class*=date] {

        }
    </style>
</head>
<body>
    <!-- 1、利用属性选择器就可以不用借助于类或id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text">
    <!-- 2、属性选择器还可以选择属性=值的某些元素   重点-->
    <input type="text" >
    <input type="password" name="" id="">
    <!-- 3、属性选择器可以选择属性值 开头 的的某些元素 -->
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="icon4">图标4</div>
    <!-- 属性选择器可以选择属性值 结尾 的某些元素 -->
    <section class="icon1-date">图标5</section>
    <section class="icon2-date">图标6</section>
    <section class="icon3-ico"> 图标7</section>
</body>