HTML5+CSS3新特性-CSDN博客

本文链接：https://blog.csdn.net/weixin_52089751/article/details/125510017

本文详细介绍了HTML5的语义化标签、多媒体标签（音频和视频）、表单标签，以及CSS3的新选择器（属性选择器、结构伪类选择器、伪元素选择器）、盒子模型和过渡效果。通过实例展示了如何使用这些新特性，帮助开发者更好地理解和应用HTML5和CSS3，提升网页设计和用户体验。

摘要由CSDN通过智能技术生成

HTML5+CSS3新特性

一、HTML5
二、CSS3

一、HTML5

新标签具有兼容性问题，IE9+ 以上版本的浏览器才支持

1.语义化标签

方便网页布局，方便搜索引擎优化search engine optimization SEO

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

2.多媒体标签

音频标签`<audio>`	视频标签`<video>`
`<audio src="media/music.mp3"></audio>`	`<video src="media/mi.mp4"></video>`

(1)音频标签

mp3 wav ogg

属性	值
自动播放autoplay	autoplay
播放控件controls	controls
循环播放loop	loop
音频链接src	url

(2)视频标签

mp4 webm ogg

属性	值
自动播放autoplay	autoplay
播放控件controls	controls
循环播放loop	loop
音频链接src	url
静音播放muted	muted
等待时的画面照片poster	url
预加载视频prelode	auto是 none不
播放器宽高width height

3.表单标签

在这里插入图片描述

二、CSS3

新增的CSS3特性有兼容性问题，ie9+才支持
新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于 PC 端
不断改进中
应用相对广泛
现阶段主要学习：新增选择器和盒子模型以及其他特性

1.新增选择器

（1）属性选择器10

在这里插入图片描述

 /* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {    color: pink;}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {    color: red;}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {    color: blue;}

（2）结构伪类选择器10

在这里插入图片描述

<style>
    ul li:first-child {
        background-color: red;
    }
</style>
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
</ul>

E:nth-child(n) 匹配到父元素的第n个元素

匹配到父元素的第2个子元素 ul li:nth-child(2){}
匹配到父元素的序号为奇数的子元素ul li:nth-child(odd){} odd 是关键字奇
匹配到父元素的序号为偶数的子元素ul li:nth-child(even){} even（4个字母）
匹配到父元素的前3个子元素ul li:nth-child(-n+3){}

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个孩子

（3）伪元素选择器01

利用CSS添加创建标签元素，从而简化HTML结构
before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    /* div::before 权重是2 */
    div::before {
        /* 这个content是必须要写的 */
        content: '我';
    }

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

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

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.过滤

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用。

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

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