HTML5和CSS3的新特性

最新推荐文章于 2024-04-08 12:15:27 发布

吴大喜

最新推荐文章于 2024-04-08 12:15:27 发布

阅读量966

点赞数

分类专栏：前端文章标签： css3 html5 搜索引擎

本文链接：https://blog.csdn.net/wmz19960227/article/details/122410421

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、Html5的新特性：

1、语义化标签：

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的，发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签

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

在这里插入图片描述
2、多媒体标签：

多媒体标签分为音频 audio 和视频 video 两个标签使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。

（1）视频标签video：

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

<video src="media/mi.mp4"></video>

在这里插入图片描述

兼容写法（由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法）

<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持 <video> 标签播放视频
</ video >

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

在这里插入图片描述
（2）音频标签-audio

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

<audio src="media/music.mp3"></audio>

在这里插入图片描述

兼容写法

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>

在这里插入图片描述

（3）总结：

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

3、新增的表单元素：

在这里插入图片描述

二、CSS3新特性

1、CSS3新增选择器：

（1）属性选择器
在这里插入图片描述

属性选择器，按照字面意思，都是根据标签中的属性来选择元素
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器
属性选择器也可以选择出来自定义的属性

**注意：**类选择器、属性选择器、伪类选择器，权重为 10。

（2）结构伪类选择器

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

在这里插入图片描述

E:nth-child(n)

在这里插入图片描述

E:nth-child 与 E:nth-of-type 的区别

在这里插入图片描述

E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

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

（3）伪元素选择器：

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

在这里插入图片描述

示例

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    /* div::before 权重是2 */
    div::before {
        /* 这个content是必须要写的 */
        content: '我';
    }
    div::after {
        content: '小猪佩奇';
    }
</style>
<body>
    <div>
        是
    </div>
</body>

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

应用场景一：字体图标

在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的编码

<head>
    ...
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

结构中定义div盒子
在style中先申明字体 @font-face
在style中定义after伪元素 div::after{…}
在after伪元素中设置content属性，属性的值就是字体编码
在after伪元素中设置font-family的属性
利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相

应用场景二：清除浮动

在这里插入图片描述

2、盒子模型：

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

可以分成两种情况：

box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度

3、图标变模糊

filter:   函数(); -->  例如： filter: blur(5px);  -->  blur模糊处理  数值越大越模糊

在这里插入图片描述
4、计算盒子宽度

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

width: calc(100% - 80px);

5、CSS3过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态，我们现在经常和 :hover 一起搭配使用

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

属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以
花费时间：单位是秒（必须写单位）比如 0.5s
运动曲线：默认是 ease （可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）
后面两个属性可以省略
记住过渡的使用口诀：谁做过渡给谁加

（1）示例：
在这里插入图片描述

创建两个div的盒子，属于的嵌套关系，外层类名叫 bar，里层类名叫 bar_in
给外层的bar 这个盒子设置边框，宽高，圆角边框
给里层的bar_in 设置初试的宽度，背景颜色，过渡效果
给外层的 bar 添加 hover事件，当触发了hover事件让里层的bar_in 来进行宽度的变化

<head>
    ...
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

非原创，网络上知识的搬运工。

吴大喜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5和CSS3的新特性

一、Html5的新特性：1、语义化标签：以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的，发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签<header> 头部标签<nav> 导航标签<article> 内容标签<section> 定义文档某个区域<aside&
复制链接

扫一扫