一、HTML5
HTML5是HTML最新的修订版本.
HTML5的设计目的是为了在移动设备上支持多媒体。
较上一个版本新元素新增了
新元素、新属性、完全支持CSS3 、Video 和 Audio 、2D/3D 制图 、本地存储、
本地 SQL 数据、Web 应用
二、HTML5中移除元素
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>
三、新增元素
1.语义元素
<header> / <nav> / <section> / <article> / <aside> / <figcaption> / <figure> / <footer>
语义元素：一个语义元素能够清楚的描述其意义给浏览器和开发者。<table>
无语义元素实例: <div> 和 <span>
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
<header> / <nav> / <section> / <article> / <aside> / <figcaption> / <figure> / <footer>
<header>元素描述了文档的头部区域【<div id=”header”>】
<nav> 标签定义导航链接的部分【<div id=”nav”>】
<article> 标签定义独立的内容。【<div id=”article”>】
<aside>标签定义页面主区域内容之外的内容（比如侧边栏）【<div id=”aside”>】
<section> 标签定义文档中的节（section、区段）【<div id=”section”>】
<figcaption> 标签定义 <figure> 元素的标题.
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<footer>元素描述了文档的底部区域.【<div id=”footer”>】
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>语义元素</title>
<style>
header,nav,aside,article,section,figcaption,figure,footer{
border: 1px solid red;
}
aside{
width: 30%;
height: 400px;
float: left;
position: absolute;
}
article{
height: 400px;
width: 68%;
position: absolute;
left: 400px;
}
footer{
position: absolute;
width: 100%;
top: 570px;
}
</style>
</head>
<body>
<header>
<h1>header--页面头部区域</h1>
</header>
<nav>
<h2>nav--标签定义导航链接的部分</h2>
</nav>
<aside>
<h4>aside--标签定义页面主区域内容外的区域（例如侧边栏）</h4>
</aside>
<article>
<h3>article--标签定义独立的内容</h3>
<section>
<h4>section--标签定义网页中节（section、区段）</h4>
<figure>
<figcaption><b>figcaption--定义figure元素的标题</b></figcaption>
<img src="../../CSS基础/CSS基础（3）/imgs/avatar2.png" width="30px">
标签规定独立的流内容（图像、图表、照片、代码等）
</figure>
</section>
<section>
<h4>section--标签定义网页中节（section、区段）</h4>
<figure>
<figcaption><b>figcaption--定义figure元素的标题</b></figcaption>
<img src="../../CSS基础/CSS基础（3）/imgs/avatar2.png" width="30px">
标签规定独立的流内容（图像、图表、照片、代码等）
</figure>
</section>
</article>
<footer>
<h4>footer--元素描述文档的底部区域</h4>
</footer>
</body>
</html>
2.新的表单元素
Input 类型: number ,range,week,
<datalist> 定义输入控件的预定义选项。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新的表单元素</title>
<style>
</style>
</head>
<body>
<h4>只能输入数字，不能输入其他字符</h4>
<h4>max---数字最大值</h4>
<h4>min---数字最小值</h4>
<h4>step---数字间隔值</h4>
数字：<input type="number" min="0" max="10" step="2">
<h4>max---数字最大值</h4>
<h4>min---数字最小值</h4>
<h4>step---数字间隔值</h4>
滑动条：<input type="range" max="10" min="0" step="2"><br>
选择周：<input type="week" name="year_week"><br>
<h4>datalist定义输入控件的预定义选项</h4>
选择科目：<input list="browsers" name="browser">
<datalist id="browsers">
<option value="数学"></option>
<option value="语文"></option>
<option value="英语"></option>
</datalist>
</body>
</html>
3.其他元素
<details> 用于描述文档或文档某个部分的细节
<summary> 标签包含 details 元素的标题
<dialog> 定义对话框，比如提示框
<progress> 定义任何类型的任务的进度。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>其他元素</title>
<style>
</style>
<script>
//获取进度条开始按钮的函数
function runprogress(){
var num=0;
//得到进度条
var progress1 = document.getElementById("progress1");
setInterval(function(){
num++;
progress1.value=num;
},300)
}
</script>
</head>
<body>
<h4>details 用于描述文档或文档某个部分的细节</h4>
<h4>summary标签包含 details 元素的标题 </h4>
<h4>open属性--规定 details 是否可见。默认是不可见需要自己点击后在网页可见</h4>
<details>
<summary>details元素的标题</summary>
<p>用于描述文档或文档某个部分的细节</p>
</details>
<h4>open属性--规定 dialog 是否可见。默认不可见</h4>
<h4>dialog--定义对话框，比如提示框</h4>
<h4>open属性--规定 dialog 是否可见。</h4>
<dialog open="open">
<p>我的对话框</p>
</dialog>
<h4><mark>mark</mark>带有标记的文本</h4>
<h4>progress定义任何类型的进度条</h4>
<input id="but1" type="button" value="开始" onclick="runprogress()">
<progress id="progress1" value="30" max="100"></progress>
</body>
</html>
4.多媒体元素
<video> <audio> <source>
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多媒体元素video/audio</title>
<style>
</style>
</head>
<body>
<h4>HTML5 规定了一种通过 video 元素来包含视频的标准方法</h4>
<h4>controls---控制器</h4>
<h4>width和height---设置播放大小</h4>
<h4>video元素支持三种视频格式： MP4, WebM, 和 Ogg。</h4>
<video controls width="300px">
<source src="../视频/录像1_转.mp4"></source>
</video>
h4>HTML5 规定了在网页上嵌入音频元素的标准，即使用 audio元素</h4>
<h4>controls--设置控制器</h4>
<h4>source--子元素表示被播放的音频资源</h4>
<h4>src--音频资源路径</h4>
<h4>type--文件类型</h4>
<h4>audio元素支持三种音频格式文件: MP3, Wav, 和 Ogg。</h4>
<h4>autoplay--设置自动播放</h4>
<h4>loop--设置循环播放</h4>
<audio controls="controls" autoplay="autoplay" loop="4">
<source src="res/zijinghuayuan.mp3" type="audio/mp3"></source>
</audio>
</body>
</html>
5.2D/3D 制图 <canvas>
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2D/3D制图工具</title>
<script>
function testcanvas(){
//得到当前需要使用的canvas元素对象
var c= document.getElementById("myCanvas");
//创建 context 对象
var ctx=c.getContext("2d");
//绘制颜色
ctx.fillStyle="red";
//创建绘制图形
//fillRect(0,0,150,75)
//参数1---x轴坐标
//参数2---y轴坐标
//参数3---图形长度
//参数4---图形宽度
ctx.fillRect(8,8,150,75);
}
</script>
</head>
<body>
<input id="but1" type="button" value="绘制图形" onclick="testcanvas()">
<canvas width="200px" height="200px" id="myCanvas" style="border:1px solid black"></canvas>
</body>
</html>
6.新增表单属性
autocomplete，novalidate，autofocus，multiple，pattern (regexp)，placeholder，required
例如：size表示设置下拉菜单的大小，变小带有轮动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单新增元素</title>
</head>
<body>
<h5>autocomplete--属性规定from或input域应该拥有自动完成功能</h5>
<h5>novalidate--属性规定在提交表单时不应该验证from或input域</h5>
<h5>autofocus--属性规定在页面加载时，域自动获得焦点</h5>
<h5>target--属性指定一个名称或一个关键词来指明表单数据接收后的展示<br>
属性与type="submit"和type="image"配合使用</h5>
<h5>multipe--选择多个内容</h5>
<h5>pattern--属性描述了一个正则表达式用于验证input元素的值</h5>
<h5>placeholder--设置提示内容</h5>
<h5>require--设置必填项效验</h5>
<form action="login" method="GET" autocomplete="on">
name：<input type="text" autofocus name="myname" placeholder="请输入姓名" autocomplete="off"><br>
Emil：<input type="email" name="user_name" placeholder="邮箱" required><br>
<input type="file" name="myfile" multiple><br>
<select size="3">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select><br>
输入数字：<input type="text" name="mynum" pattern="[0-9]{6}"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79871.html
