一、HTML5 的新特性
HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改；
两个概念：
1、HTML5 拓展了哪些内容
① 语义化标签
② 本地存储
③ 兼容特性
④ 2D、3D
⑤ 动画、过渡
⑥ CSS3 特性
⑦ 性能和集成
2、HTML5 的现状
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性基本是 IE9+ 以上版本的浏览器才支持；
二、HTML5 新增属性
1、HTML5 新增的语义化标签
以前布局基本用 div 来做，但div 对于搜索引擎来说，是没有语义的。
新增的语义化标签：
<body>
<header> 头部标签 </header>
<nav> 导航标签 </nav>
<article> 内容标签 </article>
<section> 定义文档某个区域 </section>
<aside> 侧边栏标签 </aside>
<footer> 尾部标签 </footer>
</body>
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
注意：
这种语义化标准主要是针对搜索引擎的 ，这些新标签页面中可以使用多次 ，
在 IE9 中，需要把这些元素转换为块级元素；
语义化标签，在移动端支持比较友好；
2、HTML5 新增的多媒体标签
-
-
-
embed：标签定义嵌入的内容
-
audio：播放音频
-
video：播放视频
特点：
HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件（flash常常崩溃）但支持格式有限；
1、多媒体 embed（会使用）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
2、视频：<video>
当前 <video> 元素支持三种视频格式： 尽量使用 mp4格式 ，低版本不支持：
（1）语法：
<video src="文件地址" controls="controls" width="300" autoplay="autoplay" muted="muted"> </video>
// 播放录像
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
</ video >
（2）常见属性
| 属性 | 值 | 描述 |
|---|
| src |
url |
视频url地址 |
| controls |
controls |
播放控件 |
| autoplay |
autoplay |
自动播放，谷歌默认muted |
| loop |
loop |
循环播放 |
| width |
pixelx（像素） |
播放器宽度 |
| height |
pixelx（像素） |
播放器高度 |
| preload |
auto（预先加载） none（不加载） |
预先加载（有autoplay忽略） |
| poster |
imgurl |
加载等待的画面图片，默认第一帧 |
| muted |
muted |
静音播放，谷歌默认 |
（3）案例：
<style>
video {
width: 100%;
}
</style>
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/pic.jpg">
</video>
</body>
3、音频： <audio>
当前 <audio> 元素支持三种音频格式：主要是用mp3
（1）语法：
<audio src="文件地址" controls="controls"></audio>
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的浏览器暂不支持 <audio> 标签。
</ audio>
（2）属性：
| 属性 | 值 | 描述 |
|---|
| src |
url |
视频url地址 |
| autoplay |
autoplay |
自动播放，谷歌默认muted |
| controls |
controls |
播放控件 |
| loop |
loop |
循环播放 |
谷歌浏览器把音频和视频自动播放禁止了；
3、多媒体
1、插入音频、视频和flash
语法：
<embed src=”多媒体文件地址” width=””> </embed>
2、插入背景音乐
loop可选值：
Loop=”2”表示重复两次；
loop=”infinite”表示无限循环；
loop=”-1”无限次；
3、 HTML5 新增的 input 类型
1、新增类型
| 属性值 | 说明：限制用户输入的类型 |
|---|
| type="email" |
邮件类型 |
| type="url" |
地址类型 |
| type="date" |
日期类型 |
| type="time" |
时间类型 |
| type="month" |
月份类型 |
| type="week" |
周类型 |
| type="color" |
生成一个颜色表单 |
| type="number" |
数字类型（常用） |
| type="tel" |
手机号码（常用） |
| type="search" |
搜索框（常用） |
2、新增表单属性
| 属性 | 值 | 说明 |
|---|
| required |
required |
表单拥有该属性表示内容不能为空，必填 |
| placeholder |
提示文本 |
表单的提示信息，不占位 |
| autofocus |
autofocus |
页面加载完自动聚焦到指定表单 |
| autocomplete |
off/on |
当用户在字段键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项;默认打开,如 autocompplete="on"需要放在表单内，同时加name属性，成功提交 |
| multiple |
multiple |
多选文件提交 |
<style>
/* 可以通过以下设置方式修改placeholder里面的字体颜色： */
input::placeholder {
color: pink;
}
</style>
<body>
<form action="">
<ul>
<li>数量：<input type="number"></li>
<li>手机号码：<input type="tel"></li>
<li>搜索：<input type="search"></li>
</ul>
</form>
</body>
综合表单案例：
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><br>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
三、广义的HTML5
广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
HTML5 MDN 介绍：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
HTML标签附录
HTML大概有七八百个标签
<!--...--> 定义注释。
<!DOCTYPE> 定义文档类型,所有H5都是打头。
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<address> 定义文档作者或拥有者的联系信息。
<applet> 不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体字。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<body> 定义文档的主体。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<dd> 定义定义列表中项目的描述。
<del> 定义被删除文本。
<details> 定义元素的细节。
<dir> 不赞成使用。定义目录列表。
<div> 定义文档中的节。
<dfn> 定义定义项目。
<dialog> 定义对话框或窗口。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<fieldset> 定义围绕表单中元素的边框。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<font> 不赞成使用。定义文字的字体、尺寸和颜色。
<footer> 定义 section 或 page 的页脚。
<form> 定义供用户输入的 HTML 表单。
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<h1> to <h6> 定义 HTML 标题。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<html> 定义 HTML 文档。
<i> 定义斜体字。
<iframe> 定义内联框架。
<img> 定义图像。
<input> 定义输入控件。
<ins> 定义被插入文本。
<isindex> 不赞成使用。定义与文档相关的可搜索索引。
<kbd> 定义键盘文本。
<keygen> 定义生成密钥。
<label> 定义 input 元素的标注。
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目。
<link> 定义文档与外部资源的关系。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<menu> 定义命令的列表或菜单。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<meta> 定义关于 HTML 文档的元信息。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> 定义针对不支持框架的用户的替代内容。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象。
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output> 定义输出的一些类型。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section> 定义 section。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source> 定义媒介源。
<span> 定义文档中的节。
<strike> 不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary> 为 <details> 元素定义可见的标题。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期/时间。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track> 定义用在媒体播放器中的文本轨道。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video> 定义视频。
<wbr> 定义可能的换行符。
<xmp> 不赞成使用。定义预格式文本。
属性 描述
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。
来源：https://www.cnblogs.com/xinxinzi/p/14376274.html |
发表于 2021-2-5 10:19:00