HTML5和CSS3的新特性

原创已于 2022-06-16 10:40:39 修改 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5 #css

于 2022-05-23 23:27:28 首次发布

htmlcss 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML5的新特性，包括语义化标签、多媒体标签（video和audio）、新增的表单元素。在CSS3方面，重点讨论了新增选择器（如属性选择器、结构伪类选择器、伪元素选择器、盒子模型）以及其他新特性，如滤镜、calc函数、变形、过渡和动画。此外，还提到了HTML5的拖放API、自定义属性、Canvas绘图、地理定位API、本地存储等新功能。

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

H5新特性：

1.语义化标签（★★）

代码示例：

<div class=“header”> 头部标签</div>
<div class=“nav”>导航标签 </div>
<div class=“footer”> 尾部标签 </div>

常用属性：

标签	描述
header	定义了文档的头部区域
nav	定义文档的导航
article	定义页面独立的内容区域
section	定义文档中的节（section、区段）
aside	定义页面的侧边栏内容
footer	定义了文档的尾部区域

在这里插入图片描述

2.多媒体标签

视频标签- video（★★★）

代码示例：

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

video 常用属性：在这里插入图片描述

音频标签- audio

代码示例：

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

audio常用属性：
在这里插入图片描述

3.新增的表单元素（★★）

在H5中，帮我们新增加了很多类型的表单

在这里插入图片描述
代码示例：

<!-- 我们验证的时候必须添加form表单域 -->
<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>

常用属性：
在这里插入图片描述

css3新特性：

CSS3 新增选择器

（1）属性选择器（★★）

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

示例代码：

 /* 只选择 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）结构伪类选择器

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

例：E:first-child
匹配父元素的第一个子元素E

 <style>
    ul li:first-child{
      background-color: red;
    }
  </style>

  <ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
  </ul>

在这里插入图片描述
E:last-child 则是选择到了最后一个li标签

例：E:nth-child(n)（★★★）

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

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

<style>
    ul li:nth-child(2){
      /* 字体变成红色 */
        color: red;
    }

    ul li:nth-of-type(2){
      /* 背景变成绿色 */
      background-color: green;
    }
  </style>


  <ul>
    <li>列表项一</li>
    <p>乱来的p标签</p>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
  </ul>

在这里插入图片描述

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

（3）伪元素选择器（★★★）

在这里插入图片描述
代码示例：

<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

（4）盒子模型（★★★）

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宽度）

（5）其他新特性

图标变模糊 – CSS3滤镜filter

例如： filter: blur(5px); --> blur模糊处理数值越大越模糊
在这里插入图片描述

 <style>
        img {
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(15px);
        }
        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
   <img src="images/pink.jpg" alt="">
</body>

计算盒子宽度 – calc 函数
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算

 <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .son {
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

变形transform
变形有rotate旋转、scale缩放、translate位移、skew倾斜
过渡transition
过渡transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值
transition：变化的属性花费时间运动曲线何时开始
transition：width .5s ease（默认） 1s

   <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>

动画animation

新增总结
1、拖拽释放(Drap and drop) API ondrop 拖放是一种常见的特性，即抓取对象以后拖到另一个位置
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
2、自定义属性 data-id
3、语义化更好的内容标签(header,nav,footer ,aside, article, section)
4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay
5、画布 Canvas
5.1)getContext() 方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
5.2)cxt.stroke() 如果没有这一步线条是不会显示在画布上的 5.3)canvas 和 image 在处理图片的时候有什么区别?
image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上. 6、地理(Geolocation) API
7、本地离线存储 localStorage 长期存储数据浏览器关闭后数据不丢失
8、 sessionStorage 的数据在浏览器关闭后自动删除
9、表单控件 calendar , date , time , email , url , search , tel , file , number 10、新的技术 webworker, websocket , Geolocation