CSS学习文档（6）：HTML5的新特性、CSS3的新特性

码农_小文

已于 2024-07-31 23:24:19 修改

阅读量1k

点赞数 37

文章标签： css 学习 html5

于 2024-07-31 23:13:20 首次发布

本文链接：https://blog.csdn.net/m0_58433849/article/details/140833613

版权

一、HTML5新特性

1、新增的语义化标签

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

注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
其实，我们移动端更喜欢使用这些标签

2、新增的多媒体标签

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。

（1）视频<video>----------常见属性（音频类似视频）

（2）视频<video>代码示例如下：

    <title>视频标签</title>
    <style>
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <video src="images/media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop"
        poster="images/media/mi9.jpg"></video>
</body>

3、新增的input类型

重点记住：number、tel、seatsh

代码示例如下所示：

    <form action="">
        <ul>
            <li>邮箱:<input type="email" /></li>
            <li>网址:<input type="url" /></li>
            <li>日期:<input type="date" /></li>
            <li>日期:<input type="time" /></li>
            <li>数量:<input type="number" /></li>
            <li>手机号:<input type="tel" /></li>
            <li>搜索:<input type="search" /></li>
            <li>颜色:<input type="color" /></li>
            <li> <input type="submit" value="提交"></li>
        </ul>
    </form>

4、新增的表单属性

代码示例如下所示：

    <title>新增表单属性</title>
    <style>
        input::placeholder {
            color: pink;
        }
    </style>
</head>

<body>
    <form action="">
        <input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus"
            autocomplete="off">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>

</body>

二、CSS3的新特性

1、属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

代码示例如下所示：

    <title>新增属性选择器</title>
    <style>
        /* input[value] {
            color: pink;
        } */
        input[type=text] {
            color: pink;
        }

        div[class^=icon] {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <div class="icon5">5</div>
</body>

2、结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。

区别：

（1）nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

（2）nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

nth-child ( n)选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始...
n可以是关键字:even偶数，odd奇数
n可以是公式︰常见的公式如下(如果n是公式，则从O开始计算，但是第0个元素或者超出了元素的个数会被忽略)

代码示例如下所示：

    <title>结构伪类选择器</title>
    <style>
        /* ul li:first-child {
            background-color: pink;
        }

        ul li:last-child {
            background-color: pink;
        } */

        /* ul li:nth-child(3) {
            background-color: pink;
        } */

        ul li:nth-of-type(even) {
            background-color: pink;
        }

        /* section div:nth-child(1) {
            background-color: red;
        } */

        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

小结：

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
关于nth-child ( n )我们要知道n是从О开始计算的，要记住常用的公式
如果是无序列表，我们肯定用nth-child更多
类选择器、属性选择器、伪类选择器，权重为10。

3、伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

注意：

before和after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法: element:before {}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

    <title>伪元素选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div::before {
            display: inline-block;
            content: '我';
            height: 40px;
            width: 30px;
            background-color: purple;
        }

        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>

<body>
    <div>是</div>
</body>

4、CSS3过渡

transition:要过渡的属性花费时间运动曲线何时开始;

（1）1.属性︰想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以

（2）2.花费时间:单位是秒（必须写单位）比如0.5s

（3）3.运动曲线:默认是ease (可以省略)

（4）4.何时开始︰单位是秒(必须写单位）可以设置延迟触发时间默认是0s(可以省略)

注意：记住谁过渡就给谁加

（5）代码示例如下所示：

    <title>CSS3过渡练习</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 9px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: all 0.7s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

总结

以上是我对于HTML5+CSS3新特性的描述与普及，这些新特性有利于帮助我们对面页面进行添加内容有了更好的方式，包括对语义化、多媒体、input类型等等，还有些选择器等等，最好把每个知识理解了，对网页来说分析结构永远是最重要的，感谢大家的观看谢谢！