HTML5新特性解析：新标签与CSS3效果-CSDN博客

本文链接：https://blog.csdn.net/CCT912097957/article/details/105279338

本文详细介绍了HTML5中新增的标签，包括<header>、<nav>、<footer>等，以及<embed>、<audio>、<video>等多媒体标签。此外，还探讨了CSS3的新特性，如背景缩放、多背景和凹凸文字效果，这些新特性极大地丰富了网页的展示形式和用户体验。

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

HTML5新标签与特性

文档类型设定

<!DOCTYPE html>

字符设定

<!DOCTYPE html>
<meta charset="utf-8">

常用新标签

header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚底部
article：定义文章
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容侧边

datalist 标签定义选项列表。与 input 元素配合使用该元素：

<!--  input里面用list -->
<input type="text" value="输入明星" list="star"/>
<datalist id="star">   
	<!-- datalist 里面用id来实现和input链接 -->  
    		<option>刘德华</option>
    		<option>刘若英</option>
    		<option>刘晓庆</option>
    		<option>郭富城</option>
    		<option>张学友</option>
    		<option>郭郭</option>
</datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用：

<fieldset>
    		<legend>用户登录</legend>
    		用户名: <input type="text"><br /><br />
    		密　码: <input type="password">
</fieldset>

新增的input type属性值：

类型	使用示例	含义
email		输入邮箱格式
tel		输入手机号码格式
url		输入url格式
number		输入数字格式
search		搜索框（体现语义化）
range		自由拖动滑块
time		小时分钟
date		年月日
datetime		时间
month		月年
week		星期年

常用新属性

属性	用法	含义
placeholder		占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus		规定当页面加载时 input 元素应该自动获得焦点
multiple		多文件上传
autocomplete		规定表单是否应该启用自动完成功能有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required		必填项内容不能为空
accesskey		规定激活（使元素获得焦点）元素的快捷键采用 alt + s的形式

多媒体标签

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。

url为音频或视频文件及其路径，可以是相对路径或绝对路径。

embed：标签定义嵌入的内容
audio：播放音频
video：播放视频

通过附加属性可以更友好控制音频的播放，如：

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放如果这个属性不写默认播放一次 loop 或者 loop = “loop” 表示无限循环。

source标签

允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
在这里插入图片描述

背景缩放(CSS3)

background-size设置背景图片的尺寸，类似设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

1.可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

2.设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。平时用的cover 最多.

3.设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局。
做法: 用逗号隔开。

一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上。

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,	
	 		url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	  	 	url(test1.jpg) no-repeat scroll 10px 20px/110px 130px #aaa;

凹凸文字

<head>
        <meta charset="utf-8">
        <style>
        body {
        	background-color: #ccc;
        }
		div {
			color: #ccc;
			font: 700 80px "微软雅黑";
		}
		div:first-child {
			/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
			text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
		}
		div:last-child {
			/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
			text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
		}
        </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>