HTML5和CSS3的新特性

原创已于 2022-04-23 19:08:15 修改 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

于 2022-04-22 18:36:46 首次发布

学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML5中的新语义标签如<header>、<nav>等，用于提升网页的可读性和SEO效果。同时，讲解了新增的<video>和<audio>媒体标签及其属性，以及如何处理浏览器兼容性问题。此外，还探讨了HTML5的新input类型，如search和file，以及CSS3的新选择器，如属性选择器和结构伪类选择器，帮助开发者更精确地选择和样式化网页元素。

HTML5和CSS3的新特性

html5新增的语言化标签

<header> : 头部标签
<nav> : 导航标签
<article> : 内容标签
<section> : 定义文档某个区域
<aside> : 侧边栏标签
<footer> : 尾部标签

注意：

这种语义化标准主要是针对搜索引擎的
这些新标签可以多次使用
看作块级元素

html5新增媒体标签

<video> 视频

当前<video>元素支持三种视频格式 MP4 Webm Ogg
尽量使用MP4兼容更强

<video controls width="250">

    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

video 一些常见的属性

<audio> 音频

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="/media/cc0-audio/t-rex-roar.mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

<audio> 一些常见的属性

多媒体标签总结

音频标签和视频标签的使用方式基本一致
浏览器支持情况不同
我们可以给视频标签添加muted属性来静音播放，音频不可以（可以通过JavaScript解决）
谷歌浏览器把音频和视频自动禁止了
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

HTML5新增的input类型

<form\>
    <input type="search" name="search" id="" required="required" placeholder="请输入" autofocus="autofocus" autocomplete="off">
<input type="file" name="" id="">
<input type="submit" value="提交" >
</form>

HTML5新增的表单属性

CSS新增选择器

属性选择器
结构伪类选择器
伪类元素选择器

属性选择器

for example

<input type="text" value="请输入用户名">
<input type="password">
<!-- 这里可以选择input[value]{} -->
<input type="text">
<input type="password">
<!-- 这里可以选择input[type="text"]{} -->
<input type="icon1">
<input type="icon2">
<input type="icon3">
<input type="icon4">
<input type="icon5">
<!-- 这里可以通过input[type^="icon"]全部选中 -->
<section class="icon1-date">我是安其拉</section>
<section class="icon2-date">我是哥斯拉</section>
<section class="icon3-ico">那我是谁</section>
<!-- 这里可以通过section[class$="date"]选中前两个 -->

结构伪类选择器

for-example

ul li:first-child {
    background-color: pink;
}
ul li: last-child {}
ul li: nth-child(4){}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>