1.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 lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签</title>
<style>
body{
height: 500px;
}
header,nav,article,aside,footer{
text-align: center;
background-color: rgb(186,213,134);
border-radius: 50px;
margin-top: 2%;
line-height: 300%;
}
section{
height: 40%;
border-radius: 50px;
background-color: rgb(218,235,183);
}
header,nav,footer{
width: 100%;
height: 60px;
}
article,aside{
height: 260px;
}
article {
width: 55%;
line-height: 100px;
float: left;
margin-right: 5%;
}
aside{
width: 40%;
height: 260px;
float: left;
}
footer{
float: left;
}
</style>
</head>
<body>
<header>头部区域</header>
<nav>导航区域</nav>
<article>
article
<section>内容区域</section>
</article>
<aside>右侧区域</aside>
<footer>底部区域</footer>
</body>
</html>图解👇
2.新的表单元素
Input 类型: number ,range,week,
<datalist> 定义输入控件的预定义选项。
代码例👇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
数字框:<input type="number" max="10" min="0" step="2">
<h4>只能输入数字，不能输入其他字符</h4>
<h4>max---数字最大值</h4>
<h4>min---数字最小值</h4>
<h4>step---数字间隔值</h4>
滑块<input type="range" max="10" min="0" step="2">
<h4>max---数字最大值</h4>
<h4>min---数字最小值</h4>
<h4>step---数字间隔值</h4>
选择周: <input type="week" name="year_week"><br>
<h4>datalist 定义输入控件的预定义选项。</h4>
<input list="browsers" name="browsers">
<details id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Safari"></option>
</details>
</body>
</html>3.其他元素
<details> 用于描述文档或文档某个部分的细节
<summary> 标签包含 details 元素的标题
<dialog> 定义对话框，比如提示框
<progress> 定义任何类型的任务的进度。
4.多媒体元素
<video> ：视频标记元素
<audio> ：音频标记元素
<source>：资源的源引入标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video/audio</title>
</head>
<body>
<h4>HTML5 规定了一种通过 video 元素来包含视频的标准方法</h4>
<h4>controls---控制器</h4>
<h4>width和height---设置播放大小</h4>
<h4>video元素支持三种视频格式： MP4, WebM, 和 Ogg。</h4>
<video controls>
<source src="./res/movie.mp4" />
</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>
<source src="./res/zijinghuayuan.mp3" />
</audio>
</body>
</html>5.2D/3D 制图 <canvas>
代码例👇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video/audio</title>
<script>
function testcanvas(){
//得到当前需要使用的canvas元素对象
var c=document.getElementById("myCanvas");
//创建 context 对象
var ctx=c.getContext("2d");
//设置绘制颜色
ctx.fillStyle="#FF0000";
//创建绘制图形
//fillRect(0,0,150,75)
//参数1---x轴坐标
//参数2---y轴坐标
//参数3---图形长度
//参数4---图形宽度
ctx.fillRect(10,20,150,75);
}
</script>
</head>
<body>
<input type="button" id="but1" value="绘制图形" onclick="testcanvas()"><br>
<canvas id="myCanvas" width="200px" height="100px" style="border: 1px solid pink;"></canvas>
</body>
</html>图例👇
6.新增表单属性
| autocomplete | 属性规定 form 或 input 域应该拥有自动完成功能 |
| novalidate | 是否不校验 |
| autofocus | 是否获取焦点【input】 |
| multiple | 允许选择多个选项【select】【input type=file】 |
| pattern (regexp) | 对表单内容验证【input】 |
| placeholder | 内容提示【input】 |
| required | 是否必填项【input】 |
代码例👇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<h5>autocomplete--属性规定 form 或 input 域应该拥有自动完成功能</h5>
<h5>novalidate---属性规定在提交表单时不应该验证 form 或 input 域。</h5>
<h5>autofocus 属性规定在页面加载时，域自动地获得焦点。</h5>
target 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示<br>
<h5>属性与type="submit" 和 type="image"配合使用</h5>
<h5>multiple -- 选择多个内容</h5>
<h5>pattern 属性描述了一个正则表达式用于验证 input元素的值。</h5>
<h5>placeholder --设置提示内容</h5>
<h5>required--设置必填项校验</h5>
<form action="" method="get" autocomplete="on">
name : <input type="text" name="myName" autocomplete="off" autofocus placeholder="请输入名字" required /> <br>
E-mail : <input type="email" name="myemail" autocomplete="off" autofocus placeholder="请输入邮箱" required /> <br>
file: <input type="file" name="myFile" multiple />
<select multiple>
<option value="name1">北京</option>
<option value="name2">西安</option>
<option value="name3">上海</option>
<option value="name4">广州</option>
</select>
输入数字 ： <input type="text" name="myNum" pattern="[0-9]{6}" placeholder="请输入6位验证码" required> <br>
<submit>提交</submit>
</form>
</body>
</html>图例👇
7.HTML5 Web 存储localStorage对象 和 sessionStorage 对象
无奈源于不够强大
4633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
