HTML5大部分都有兼容性问题,适合IE9以上版本。
header
nav
article
section
aside
footer
语义化标准主要针对搜索引擎
这些新标签可以使用多次
在IE中,需把这些转换为块级元素
<!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>
header,
nav {
height: 120px;
background-color: pink;
border-radius: 15px;
width: 800px;
margin: 15px auto;
}
section {
height: 200px;
width: 500px;
background-color: blueviolet;
}
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
</section>
</body>
</html>
多媒体标签
音频:audio:有mp3(推荐)、WAV、Ogg三种格式
视频:video:有mp4(推荐)、WebM、Ogg三种格式
audio有src=“文件地址” controls(显示播放控件)=“controls” autoplay(自动播放,谷歌引擎都禁用)=“autoplay” loop(循环)=“loop”
video有src=“文件地址” controls=“controls” autoplay=“autoplay” loop=“loop”muted(静音播放)=“muted”
音频与视频标签使用方式基本一致
浏览器支持情况不同
视频添加muted来静音播放,音频不行
<!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>
video {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<video src="目标地址" autoplay="auto" loop="loop" controls="controls" muted="muted">
</video>
<audio src="目标地址" autoplay="auto" loop="loop" controls="controls">
</audio>
</body>
</html>
新增input控件
type=email、URL、date、time、month、week、number、Tel、search、color 可以限制用户输入
属性:required(必填项)=“required” placeholder=“提示文本” autofocus(自动聚焦属性)=“autofocus”
autocomplete(同时加有name且提交成功)=“off/on”
<!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::placeholder {
color: burlywood
}
/* 修改提示文本颜色 */
</style>
</head>
<body>
<form action="">
<ul>
<li>邮箱:<input type="email" autofocus="autofocus" autocomplete="off">
</li>
<li>网址:<input type="url" placeholder="pink"></li>
<li>日期:<input type="date"></li>
<li>日期:<input type="time"></li>
<li>日期:<input type="month"></li>
<li>日期:<input type="week"></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>
</body>
</html>