前端基础——H5C3提高

影易

已于 2024-02-22 16:38:53 修改

阅读量879

点赞数 16

CC 4.0 BY-SA版权

文章标签：前端

于 2024-02-22 16:37:47 首次发布

本文链接：https://blog.csdn.net/2302_79866622/article/details/136237291

本文介绍了HTML5新增的语义化标签、多媒体标签（音频和视频）、input类型和表单属性，以及CSS3的属性选择器、结构伪类选择器、伪元素选择器、盒子模型改进和过渡效果。强调了新特性的使用需注意浏览器兼容性问题，特别是针对移动设备和现代浏览器的要求。

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

一.HTML5的新特性

针对之前的不足，新增加了一些新的标签，新的表单和新的表单属性等

注意：这些新特性都会有兼容性问题，基本使IE9以上的版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性

常用新标签：

1.1HTML5新增的语义化标签

以前布局，我们基本用div来做。对于搜索引擎来说，是没有语义的

例如：

所以：

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

例如：

注意：

这些语义化的标签主要是针对于搜索引擎的

这些新标签页面中可以使用多次

在IE9中，需要把这些元素转换为块级元素

其实在移动端更喜欢使用这些标签

HTML5还增加了很多其他的标签

1.2HTML5新增的多媒体标签

新增的多媒体标签主要包括两个：

1.音频：

2.视频：

使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器的插件

1.视频video

当前video元素支持三种视频格式：尽量使用MP4格式

具体浏览器支持格式如下：

语法规范： <video src="文件地址“ controls=”controls“></video>

常见属性：

该属性再video标签里可以简写比如 autoplay="autoplay" 直接可以写为 autoplay

有的浏览器禁用或者不兼容自动播放，只需要再加上一个muted

（为了为手机上打开网页的用户节省流量）

2.音频<audio>

当前 <audio>元素支持三种音频格式：

尽量使用MP3格式

语法：<audio src="文件地址“ controls=”controls“></audio>

常见属性：

谷歌把视频音频自动播放禁止了

音频自动播放问题需要使用js来解决

1.3 HTML5 新增的input类型

1.4 HTML5 新增的表单属性

二.CSS3 的新特性

新增的CSS3特性有兼容性问题，ie9才支持

移动端支持优于PC端

现阶段主要学习：新增选择器和盒子模型以及其他特性

2.2 属性选择器

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

注意：

属性选择器和类选择器和伪类选择器权重都是0，0，1，0

例如 :

<!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 但是需要同时具有 value这个属性 */
        input[value] {
            color: pink;
        }
    </style>
</head>

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

</html>

再例如：

<style>
        /* 属性选择器可以选择属性值开头的某些元素 */
        div[class^="icon"] {
            color: red;
        }
    </style>
</head>

<body>
    <div class="icon1">icon1</div>
    <div class="icon2">icon2</div>
    <div class="icon3">icon3</div>
    <div class="icon4">icon4</div>
    <div>我是打酱油的</div>
</body>

2.3 结构伪类选择器

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

例如：

<!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>
        ul {
            list-style: none;
        }

        ul li:first-child {
            font-size: 30px;
            color: red;
        }

        ul li:last-child {
            color: skyblue;
            font-size: 30px;
        }

        ul li:nth-child(5) {
            color: yellow;
            font-size: 300px;
        }
    </style>
</head>

<body>
    <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>
    </ul>
</body>

</html>

nth-child（n）

选择某个父元素的一个或多个特定的子元素

--n可以是公式

常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略

--n如果是数字，就是选择第n个子元素，里面数字从1开始

--n可以是关键字：even 偶数， odd 奇数

nth-of-type（n）

nth-child会把所有的孩子都排列序号

但是这个选择器不会，它只会对选定的元素计数

2.4伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，更不需要HTML标签

从而简化HTML结构

2.5 CSS3 盒子模型

CSS3中可以通过box-sizing 属性来指定盒子模型，有两个值：即可指定为content-box，boder-box 这样我们计算盒子大小的方式就发生了变化

可以分成两种情况：

1 box-sizing： content-box（以前默认的）

最终盒子大小就是宽度加边框加内外边距

2 box-sizing： boder-box

盒子大小为width

也就是说更改之后内外边距和边框就不会再撑大盒子了（前提padding和boder不会超过width宽度）

2.6 CSS3 其他特性（了解）

1.图片边模糊

CSS3滤镜filter：

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

2.CSS3 calc 函数

这个函数让你在声明CSS属性值时执行一些计算

例如：

2.7 CSS3 过渡（重点）

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

谁要过渡给谁加

多个属性过渡也可以加逗号分割

通常搭配伪类选择器使用

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

2.花费时间：单位是秒

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

4.何时开始：单位是秒可以设置延迟触发时间默认是0s（可以省略）

例如：

使该图片由模糊到清晰

例如：进度条布局

.box div {
            border-radius: 20px 0 0 20px;
            width: 30%;
            height: 100%;
            background-color: green;
            transition: all 2s ease-in;
        }

        .box:hover div {
            width: 100%;
            background-color: red;
            border-radius: 20px 20px 20px 20px;
        }



 <div class="box">
        <div></div>
    </div>