HTML5新属性

刘姐阳光 發表於 2021-2-5 10:19:00

<h1>一、HTML5 的新特性</h1>
<code>　　HTML5</code> 定义了 <code>HTML</code> 标准的最新版本，是对 <code>HTML</code> 的第五次重大修改；
<h2 class="md-end-block md-p">　　两个概念：</h2>
<ul class="ul-list" data-mark="-">
<li style="list-style-type: none">
<ul>
<li style="list-style-type: none">
<ul>
<li class="md-list-item">
是一个新版本的 <code>HTML</code> 语言，定义了新的标签、特性和属性
</li>
<li class="md-list-item">
拥有一个强大的技术集，这些技术集是指： <code>HTML5</code> 、<code>CSS3</code> 、<code>javascript</code>, 这也是广义上的 <code>HTML5</code>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-p">　　　</h3>
<h3 class="md-end-block md-p">　　1、<code>HTML5</code> 拓展了哪些内容</h3>
　　　　　　① 语义化标签
　　　　　　② 本地存储
　　　　　　③ 兼容特性
　　　　　　④ 2D、3D
　　　　　　⑤ 动画、过渡
　　　　　　⑥ CSS3 特性
　　　　　　⑦ 性能和集成
　　
<h3 class="md-end-block md-p">　　2、<code>HTML5</code> 的现状</h3>
 　　　　HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性基本是 IE9+ 以上版本的浏览器才支持；
<h1 class="md-end-block md-heading"> </h1>
<h1 class="md-end-block md-heading">二、HTML5 新增属性</h1>
 
<h2 class="md-end-block md-heading">　　1、HTML5 新增的语义化标签</h2>
　　　　以前布局基本用 div 来做，但div 对于搜索引擎来说，是没有语义的。
　　　　新增的语义化标签：
<div class="cnblogs_code">
<pre><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></pre>
</div>
 
　　　　注意：
　　　　　　这种语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次，
　　　　　　在 IE9 中，需要把这些元素转换为块级元素；
　　　　　　语义化标签，在移动端支持比较友好；
 
<h2 class="md-end-block md-heading">　　2、HTML5 新增的多媒体标签</h2>
<ul class="ul-list" data-mark="-">
<li style="list-style-type: none">
<ul>
<li style="list-style-type: none">
<ul>
<li class="md-list-item">
embed：标签定义嵌入的内容
</li>
<li class="md-list-item">
audio：播放音频
</li>
<li class="md-list-item">
video：播放视频
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">　</h3>
　　　　　　特点：
　　　　　　　　HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件（flash常常崩溃）但支持格式有限；
<h3 class="md-end-block md-heading">　　　</h3>
<h3 class="md-end-block md-heading">　　　　1、多媒体 embed（会使用）</h3>
　　　　　　　　embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
　　　　　　　　因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解 audio 和video 视频多媒体。 
<div class="cnblogs_code">
<pre><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></pre>
</div>
 
<h3 class="md-end-block md-p">　　　　2、视频：<code><video></code></h3>
　　　　　　当前 <code><video></code> 元素支持三种视频格式：尽量使用 mp4格式，低版本不支持：
　　　　　　（1）语法：
<div class="cnblogs_code">
<pre><video src="文件地址" controls="controls" width="300" autoplay="autoplay" muted="muted"> </video> </pre>
</div>
 
<div class="cnblogs_code">
<pre> // 播放录像
<video controls="controls" width="300">
 <source src="move.ogg" type="video/ogg" >
 <source src="move.mp4" type="video/mp4" >
</ video ></pre>
</div>
　　
　　　　　　（2）常见属性
<table class="md-table">
<thead>
<tr class="md-end-block"><th>属性</th><th>值</th><th>描述</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>src</td>
<td>url</td>
<td>视频url地址</td>
</tr>
<tr class="md-end-block">
<td>controls</td>
<td>controls</td>
<td>播放控件</td>
</tr>
<tr class="md-end-block">
<td>autoplay</td>
<td>autoplay</td>
<td>自动播放，谷歌默认muted</td>
</tr>
<tr class="md-end-block">
<td>loop</td>
<td>loop</td>
<td>循环播放</td>
</tr>
<tr class="md-end-block">
<td>width</td>
<td>pixelx（像素）</td>
<td>播放器宽度</td>
</tr>
<tr class="md-end-block">
<td>height</td>
<td>pixelx（像素）</td>
<td>播放器高度</td>
</tr>
<tr class="md-end-block">
<td>preload</td>
<td>auto（预先加载） none（不加载）</td>
<td>预先加载（有autoplay忽略）</td>
</tr>
<tr class="md-end-block">
<td>poster</td>
<td>imgurl</td>
<td>加载等待的画面图片，默认第一帧</td>
</tr>
<tr class="md-end-block">
<td>muted</td>
<td>muted</td>
<td>静音播放，谷歌默认</td>
</tr>
</tbody>
</table>
　　　　　　（3）案例：
<div class="cnblogs_code">
<pre><style>
video {
 width: 100%;
}
</style>
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/pic.jpg">
</video>
</body></pre>
</div>
 
 
<h3 class="md-end-block md-p">　　　　3、音频： <code><audio></code></h3>
　　　　　　当前 <code><audio></code> 元素支持三种音频格式：主要是用mp3
　　　　　　（1）语法：
<div class="cnblogs_code">
<pre>　　<audio src="文件地址" controls="controls"></audio>
　　< audio controls="controls" >
 　　 <source src="happy.mp3" type="audio/mpeg" >
 　　<source src="happy.ogg" type="audio/ogg" >
 　　您的浏览器暂不支持 <audio> 标签。
</ audio></pre>
</div>
 
　　　　　　（2）属性：
<table class="md-table">
<thead>
<tr class="md-end-block"><th>属性</th><th>值</th><th>描述</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>src</td>
<td>url</td>
<td>视频url地址</td>
</tr>
<tr class="md-end-block">
<td>autoplay</td>
<td>autoplay</td>
<td>自动播放，谷歌默认muted</td>
</tr>
<tr class="md-end-block">
<td>controls</td>
<td>controls</td>
<td>播放控件</td>
</tr>
<tr class="md-end-block">
<td>loop</td>
<td>loop</td>
<td>循环播放</td>
</tr>
</tbody>
</table>
　　　　　　　　谷歌浏览器把音频和视频自动播放禁止了；
 
<h3 class="md-end-block md-p">　　　　3、多媒体</h3>
　　　　　　1、插入音频、视频和flash
　　　　　　　　语法：
<div class="cnblogs_code">
<pre><embed src=”多媒体文件地址” width=””> </embed></pre>
</div>
 
　　　　　　2、插入背景音乐
<div class="cnblogs_code">
<pre><bgsound src=”背景音乐的地址”/></pre>
</div>
　　
　　　　　　loop可选值：
　　　　　　　　Loop=”2”表示重复两次；
　　　　　　　　loop=”infinite”表示无限循环；
　　　　　　　　loop=”-1”无限次；
 
<h2 class="md-end-block md-heading">　　3、 HTML5 新增的 input 类型</h2>
<h3 class="md-end-block md-p">　　　　1、新增类型</h3>
<table class="md-table">
<thead>
<tr class="md-end-block"><th>属性值</th><th>说明：限制用户输入的类型</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>type="email"</td>
<td>邮件类型</td>
</tr>
<tr class="md-end-block">
<td>type="url"</td>
<td>地址类型</td>
</tr>
<tr class="md-end-block">
<td>type="date"</td>
<td>日期类型</td>
</tr>
<tr class="md-end-block">
<td>type="time"</td>
<td>时间类型</td>
</tr>
<tr class="md-end-block">
<td>type="month"</td>
<td>月份类型</td>
</tr>
<tr class="md-end-block">
<td>type="week"</td>
<td>周类型</td>
</tr>
<tr class="md-end-block">
<td>type="color"</td>
<td>生成一个颜色表单</td>
</tr>
<tr class="md-end-block">
<td>type="number"</td>
<td>数字类型（常用）</td>
</tr>
<tr class="md-end-block">
<td>type="tel"</td>
<td>手机号码（常用）</td>
</tr>
<tr class="md-end-block">
<td>type="search"</td>
<td>搜索框（常用）</td>
</tr>
</tbody>
</table>
 
<h3 class="md-end-block md-p">　　　　2、新增表单属性</h3>
<table class="md-table">
<thead>
<tr class="md-end-block"><th>属性</th><th>值</th><th>说明</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>required</td>
<td>required</td>
<td>表单拥有该属性表示内容不能为空，必填</td>
</tr>
<tr class="md-end-block">
<td>placeholder</td>
<td>提示文本</td>
<td>表单的提示信息，不占位</td>
</tr>
<tr class="md-end-block">
<td>autofocus</td>
<td>autofocus</td>
<td>页面加载完自动聚焦到指定表单</td>
</tr>
<tr class="md-end-block">
<td>autocomplete</td>
<td>off/on</td>
<td>当用户在字段键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项;默认打开,如 autocompplete="on"需要放在表单内，同时加name属性，成功提交</td>
</tr>
<tr class="md-end-block">
<td>multiple</td>
<td>multiple</td>
<td>多选文件提交</td>
</tr>
</tbody>
</table>
<div class="cnblogs_code">
<pre><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></pre>
</div>
 
 综合表单案例：
<div class="cnblogs_code">
<pre><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></pre>
</div>
 
<h1 class="md-end-block md-p">三、广义的HTML5</h1>
广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
HTML5 MDN 介绍：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
 
<h1 class="md-end-block md-heading">HTML标签附录</h1>
HTML大概有七八百个标签
<div class="cnblogs_code">
<pre> 定义注释。

<!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> 不赞成使用。定义预格式文本。</pre>
</div>
 
 
属性 描述
<div class="cnblogs_code">
<pre>accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。
</pre>
</div>
 
  
来源：https://www.cnblogs.com/xinxinzi/p/14376274.html

頁: [1]

琼殿技术论坛's Archiver

HTML5新属性