HTML5中一些常用的元素与属性介绍
导读
一、HTML5保留的常用元素
1、基本元素
HTML保留的基本元素有如下几个：
<!-- -->： 定义HTML注释
<html>：HTML5文档的根元素
<head>：定义HTML5文档的页面头部分
<title>：定义HTML5文档的标题
<body>：定义HTML5文档的主体部分
<style>：用于引入样式定义
<h1>到<h6>：定义标题一到标题六
<p>：定义段落
提示：几乎所有的HTML元素都可指定id、style和class属性，其中id属性用于为HTML元素指定一个唯一标识，该标识是通过DOM访问HTML元素的重要途径，class和style属性是CSS样式相关属性。
<br>：插入一个换行
<hr>：定义水平线
<div>：定义文档中的节，也就是我们说的区块，会占满一行
<span>：与<div>基本相似，定义的是一个行内标签样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本标签</title> </head> <body> <!-- 采用标题一到标题六来输出文本 --> <h1>疯狂Java讲义</h1> <h2>疯狂Android讲义</h2> <h3>轻量级Java EE企业应用实战</h3> <h4>疯狂XML讲义</h4> <h5>疯狂Ajax讲义</h5> <h6>经典Java EE企业应用实战</h6> <!-- 输出一条水平线 --> <hr /> <!-- 使用三个span定义三节 --> <span>TOmcat</span><span>Jetty</span><span>Resin</span> <!-- 输出换行 --> <br /> <!-- 使用三个div定义三节 --> <div>Tomcat</div><div>Jetty</div><div>Resin</div> <!-- 使用三个p定义三个段落--> <p>Tomcat</p><p>Jetty</p><p>Resin</p> </body> </html>
2、文本格式化元素
<b>：定义粗体文本
<i>：定义斜体文本
<em>：定义强调文本，实际效果与斜体文本差不多
<strong>：定义粗体文本
<small>：定义小号字体文本，通常用来标注免责声明、注意事项、法律规定和版权
<sup>： 定义上标文本
<sub>： 定义下标文本
<bdo>：定义文本显示方向，该标签可指定dir属性，属性值只能是ltr或rtl
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>格式化标签</title> </head> <body> <span><b>加粗文本</b></span><br /> <span><i>斜体文本</i></span><br /> <span><b><i>粗斜体文本</i></b></span><br /> <span><em>被强调的文本</em></span><br /> <p><strong>加粗文本</strong></p> <small><span>小号字体文本</span></small><br /> <div>普通文本<sup>上标文本</sup></div> <span>普通文本<strong><sub>下标加粗文本</sub></strong></span><br /> <!-- 指定文本从左到右（正常情况）排列 --> <bdo dir="ltr">从左到右排列的文本</bdo><br /> <!-- 指定文本从右向左排列 --> <bdo dir="rtl">从右向左排列的文本</bdo><br /> </body> </html>
3、语义相关元素
<abbr>：用于表示一个缩写，可指定title属性，该属性指定该缩写所代表的全称
<address>：用于表示一个地址，斜体显示文本。
<blockquote>：用于定义一段长的引用文本，浏览器会使用缩进的方式显示，该标签可指定cite属性，该属性指定该引用文本所引用的网址URL
<q>：用于定义一段短的引用文本，浏览器会为这段被引用的文本添加引号
<cite>：用于表示作品的标题，斜体显示
<code>：表示一段计算机代码
<dfn>：用于定义一个专业术语，浏览器会使用粗体或斜体显示
<del>：定义文档中被删除的文本。
<ins>：定义文档中插入的文本，浏览器通常会使用下划线显示
<pre>：表示该元素所包含的文本已进行了“预格式化”
<samp>：用于定义示范文本内容
<kdb>：用于定义键盘文本
<var>：用于表示一个变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>语义相关元素</title>
</head>
<body>
<!-- 使用q表示一段短的引用文本 -->
<p>疯狂Java的精神是<q cite="http://www.fkjava.org">
疯狂源自梦想，技术成就辉煌。</q>这也是所有Java程序员的梦想</p>
<div>
<!-- 使用blockquote表示一段长的引用文本 -->
<blockquote>
景色无端五十铉，一炫一柱思年华。<br />
庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br />
沧海月明珠有泪，蓝田日暖玉生烟。<br />
此情可待成追忆，只是当时已惘然。
</blockquote>
是唐朝诗人李商隐的代表作，诗中影藏着一种淡淡的忧伤，让人无法言说，但又无法释怀。
</div>
<p>
<cite>《芙蓉镇》</cite>、<cite>《蓝风筝》</cite>
是国内导演拍摄的最有思考深度的两部电影。
</p>
<p>
下面定义了一个Java类：<br />
<code>
public class Cat<br />
{<br />
private int name = "garfield";<br />
}<br />
</code>
</p>
<!-- pre元素包含的内容是"预格式化"文本 -->
<pre>
public class Cat
{
private int name = "garfield";
}
</pre>
<p>
<!-- 使用abbr定义缩写 -->
疯狂Java教育中心的缩写是：<abbr title="疯狂Java教育">fkjava</abbr>
<!-- 使用address定义地址 -->
疯狂软件地址是：<address>广州市天河区车坡大纲路4号冯弘大厦306-3011</address>
<!-- 使用dfn定义专业术语 -->
<p>
<dfn>HTML</dfn>是一种广为人知的标记语言。
</p>
<p>
可通过输入如下命令：<br />
<kbd>list -l</kbd><br />
在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。
</p>
<p>
如果您在阅读疯狂Java体系图书时，遇到有任何无法理解的技术问题，<br />
请登陆www.fkjava.org发帖提问，可按如下示例内容发帖：<br />
<!-- 使用samp定义示范文本内容 -->
<samp>
我在阅读XXX图书的第X章、第X节时，遇到一个XXX问题，<br />
错误提示信息是：XXX。
</samp>
</p>
<!-- 使用var定义变量 -->
<var>i</var>、<var>j</var>、<var>k</var>通常用于作为循环计数器变量。
<!-- 使用del和ins表示修订 -->
<p>Android是一个<del>开发</del><ins>开放</ins>式的手机、平板电脑操作系统</p>
</p>
</body>
</html>4、超链接和锚点
HTML5保留了定义超链接的<a.../>元素，它有如下3个重要的属性：
href：指定超链接所关联的另一个资源
target：指定使用哪种框架来装载资源，有_self、_blank、_top、 _parent四个值
media：指定目标URL所引用的媒体类型，默认为all，它是HTML5新 增的属性
5、列表相关元素
<ul>：定义无序列表
<ol>：定义有序列表，该元素还可以指定以下三个属性：
start：指定列表项的起始数字
type：指定使用哪种类型的编号
reversed：该属性指定是否将排序反转
<li>：定义列表项目
<dl>：也用于定义列表，只能包含<dt>和<dd>两个子元素
<dt>：用于定义列表，只能包含<dd>子元素
<dd>：定义普通列表项
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表相关标签</title> </head> <body> <!-- 定义无序列表 --> <ul> <li>疯狂Java讲义</li> <li>轻量级Java EE 企业应用实战</li> <li>疯狂Android讲义</li> </ul> <!-- 定义有序列表 --> <ol start="2" type="I"> <li>疯狂Java讲义</li> <li>轻量级Java EE 企业应用实战</li> <li>疯狂Android讲义</li> </ol> <!-- 定义列表 --> <dl> <!-- 定义标题列表项 --> <dt>疯狂Java体系</dt> <dd>疯狂Java讲义</dd> <dd>轻量级Java EE企业应用实战</dd> <dd>疯狂Android讲义</dd> <!-- 定义标题列表项 --> <dt>作者其他图书</dt> <dd>Struts 2.1 权威指南</dd> <dd>基于J2EE的Ajax宝典</dd> </dl> </body> </html>
6、图像相关元素
HTML5保留了<img.../>元素在页面中定义图像，它是一个空元素，它必须制定以下两个属性：
src：指定图片文件所在的位置，可以是相对或绝对路径
alt：指定一段文本，作为图片的提示信息
<img>的两个可选属性：
height：图片高度
width：图片宽度
与<img>相关的标签：
<map>：定义图片映射
<area>：定义图片映射的内部区域
7、表格相关元素
<table>：用于定义表格，它可以指定如下属性：
cellpadding：指定单元格内容和单元格边框之间的间距
cellspacing：指定单元格时间的间距
width：指定表格的宽度
注意：HTML5建议将表格的所有属性都放到CSS中定义
<caption>：用于定义表格标题
<tr>：定义表格行
<td>：定义单元格，它可以指定如下几个属性：
colspan：指定该单元格跨多少列
rowspan：指定单元格可横跨的行数
height：指定该单元格的高度
width：指定该单元格的宽度
<th>：定义表格页眉的单元格
<tbody>：定义表格的主体
<thead>：定义表格头
<tfoot>：定义表格脚
注意：如果使用<thead.../>和<tfoot.../>标签，建议使用如下次序使用它们： <thead.../>、<tfoot.../>、<tbody.../>，浏览器会自动将<tfoot.../>呈现在最下面
<col>：该元素为表格中的一个或多个列指定属性值
<colgroup>：该元素用于为表格中的一个或多个列指定属性值
8、框架相关元素
HTML5不再推荐在页面中使用框架集，但保留了<iframe.../>元素，它有 一个属性src，该属性指定一个URL，指定该iframe将装载那个页面。
二、HTML5新增的通用属性
1、contentEditable属性
HTML5为大部分HTML元素增加了contentEditable属性，如果将该属性的值设为true，那么浏览器允许开发者直接编辑该HTML元素里的内容，并且它具有可继承性。
HTML5为允许设置contentEditable属性的元素提供了isContentEditable属性，当元素可编辑则返回true，否则false。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>contentEditable属性</title> </head> <body> <!-- 直接指定contentEditable=“true”表明该元素是可编辑的 --> <div contenteditable="true" style="width: 500px; border:1px solid black"> 疯狂Java讲义 <!-- 该元素的父元素有contentEditable=“true”，因此该表格也是可以编辑的 --> <table style="width: 420px; border-collapse: collapse;" border="1"> <tr> <td>疯狂Java讲义</td> <td>疯狂Android讲义</td> </tr> <tr> <td>轻量级Java EE企业应用实战</td> <td>经典Java EE企业应用实战</td> </tr> </table> </div> <hr /> <!-- 这个表格默认是不可编辑的，双击之后该表格变为 --> <table id="target" ondblclick="this.contentEditable=true" style="width: 420px; border-collapse: collapse;" border="1"> <tr> <td>Java</td> <td>Ruby</td> </tr> <tr> <td>C/C++</td> <td>Python</td> </tr> </table> </body> </html>
2、designMode属性
designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为on，则该页面上所有可支持contentEditable属性的元素都编程可编辑状态。
document.designMode = "on";
3、hidden属性
HTML5为所有元素提供一个hidden属性，如果某元素的hidden设为true， 则浏览器不显示该组件，且不保留该组件所占空间
<div id="target" hidden="true" style="height: 80px;">文字内容</div>
<button onclick="var target=document.getElementById('target');
target.hidden=!target.hidden;">显示/隐藏</button>4、spellcheck属性
HTML5为<input.../>、<textarea.../>等元素增加了spellcheck属 性，该属性支持 true和false两个值，如果为true，则浏览器会对用户 的输入进行语法检。
<!-- 指定执行拼写检查 --> <textarea spellcheck="true" rows="3" cols="40"></textarea>
三、HTML新增的常用元素
1、文档结构元素
<article>：该元素定义页面上一篇独立、完整的“文章”.
<article.../>可以包含<header.../>作为头部
<article.../>可以包含<footer.../>作为尾部
<article.../>可以包含<section.../>作为文章的分段
<article.../>可以包含<article.../>作为文章的附属文章
<section>：该元素用于对页面上的内容进行分块
建议使用<h1>-<h6>作为<section.../>的标题
<section.../>可以包含<article.../>
<section.../>也可以包含<section.../>
注意：<article.../>和<section.../>很容易混淆，它们可以包含很多子元素，也可以相互嵌套。一般 使用<article.../>表达一篇独立、完整的文章，而使用<section.../>对页面内容进行分块。
<nav>：该属性用于定义页面上的“导航条”
<aside>：该属性用于定义页面内容的附属信息，推荐此属性配合CSS渲染成侧边栏
<header>：该属性主要为<article.../>定义头部信息
<hgroup>：该元素组织多个<h1>~<h6>这样的标题元素
<footer>：该元素主要为<article>定义脚注信息
<figure>：该元素用于表示一块独立的“图片区域”，它可以包含一个或多个由<img>元素组成的图片，除此之外，它还可以包含一个<figcaption>元素，用于表示该图片区域的标题
<figcaption>：通常放在<figure>元素里，用于表示图片区域的标题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5新增元素 - article</title> </head> <body> <article> <!-- 帖子的“头部” --> <header> <h1>学习Android，必须先学习Java吗？</h1> <div>作者：crazystu</div> </header> <p> 学习Android，必须先学习Java吗？ Android上的应用程序只能用Java编写吗？可以用C++吗？ </p> <!-- 帖子的“回复”部分，用section元素表示 --> <section> <article> <!-- 回复的头部 --> <header> <h2>还是得学习Java</h2> <div>作者：kongyeeku</div> </header> <p> 虽然Android不一定要使用Java开发，还可以选择JavaScript<br /> 或NDK开发，但Java毕竟是Android主要的开发语言，<br /> 因此建议学习Android之前还是学习Java </p> </article> <!-- 每一个article代表一个回复 --> <article> <!-- 回复的头部 --> <header> <h2>Java是基础</h2> <div>作者：kuan008</div> </header> <p> Java是基础，学好Java再去学习Android事半功倍。 </p> </article> </section> <!-- 帖子的”脚注“ --> <footer> 以上帖子和回复只代表个人观点，不代表疯狂Java联盟的观点或立场 </footer> </article> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5新增元素 - aside</title> </head> <body> <article> <!-- 帖子的头部 --> <header> <h1>学习Android，必须先学习Java吗？</h1> <div>作者：crazystu</div> </header> <p> 学习Android，必须先学习Java吗？ Android上的应用程序只能用Java编写吗？可以用C++吗？ </p> <!-- 帖子的“回复”部分，用section元素表示 --> <section> <!-- 回复的头部 --> <header> <h2>还是得学习Java</h2> <div>作者：kongyeeku</div> </header> <p> 虽然Android不一定要使用Java开发，还可以选择JavaScript<br /> 或NDK开发，但Java毕竟是Android主要的开发语言，<br /> 因此建议学习Android之前还是学习Java </p> </section> </article> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5新增结构元素 - figure</title> </head> <body> <figure style="border:2px solid black; padding:5px; width:500px;"> <figcaption><b>疯狂Java体系图书</b></figcaption> <img src="images/java.png" alt="疯狂Java"> <img src="images/android.png" alt="疯狂Android"> <img src="images/ee.png" alt="轻量级Java EE"> </figure> </body> </html>
2、语义相关元素
HTML5提供了以下两个语义相关的元素：
<mark>：用于显示页面中需要重点关注的内容，浏览器通常会使用黄色来标注，比如搜索结果中用户输入的关键字
<time>：用于显示被标注的内容是日期、时间或日期时间，该元素有一个datatime属性，用于向机器提供时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新增的语义相关元素 - mark和time</title> </head> <body> <article> <header> <h2>疯狂软件即将引入<mark>HTML5</mark>相关课程</h2> </header> <p> <mark>HTML5</mark>是下一代的HTML规范。<br /> <mark>HTML5</mark>即将把前端开发者从繁重的开发中解放出来<br /> 为了把握技术潮流的脉搏，疯狂软件教育计划在 <time datetime="2012-04-21">2012年4月</time>引入<mark>HTML5</mark>相关课程 </p> </article> </body> </html>
<details>：用于显示一段详细信息或某个主题的细节，通常它会跟<summary>元素结合使用，把<summary>放在<details>中，为其定义摘要信息，当用户点击摘要信息时，浏览器会显示出详细内容。目前只有Chrome浏览器支持这两个属性
<details> <summary>芙蓉镇</summary> 《芙蓉镇》是一部极好的电影，每个中国人都不应该错过。 </details>
<meter>：用于表示一个已知最大值和最小值的计数仪表，它可以指定如下属性：
value：指定计数仪表的当前值，默认为0
min：指定计数仪表的最小值，默认为0
max：指定计数仪表的最大值，默认为1
low：指定计数仪表制定范围的最小值，它必须大于min
high：指定计数仪表指定范围的最大值，它必须小于max
optimum：指定计数仪表有效范围的最佳值
<progress>：用于表示一个进度条，它可以指定如下属性：
max：指定进度条完成时的值
value：指定进度条当前完成的进度值
四、HTML5头部和元信息
HTML5使用<head.../>元素定义文档头，该元素可以包含如下子元素：
<script>：该元素用于包含JavaScript脚本
<style>：该元素用于定义内部CSS样式
<link>：该元素用于链接外部CSS样式资源
<title>：该元素定义文档标题
<base>：该元素用于指定该页面中所有链接的基准链接
<meta>：该元素用于定义HTML页面的元数据，也就是一些name-value对，它可以指定如下属性
http-equiv：指定元信息的名称
name：指定元信息的名称，可以随意指定
content：指定元信息的值
<head> <title>我是标题</title> <meta name="author" content="Yeeku.H.Lee"> <meta name="websit" content="http://www.xxx.org"> <meta name="copyright" content="2001-2008 xxx.org"> <meta name="Keywords" content="Java论坛， Java技术论坛"> </head>
http-equiv属性可以指定如下值：
Expires：指定页面的过期时间，一旦过期必须从服务器下载
<meta http-equiv="Expires" content="Sat Sep 27 16:12:36 CST 2008">
Progma：指定禁止浏览器从本地磁盘缓存中调阅页面内容
<meta http-equiv="Progma" content="no-cache">
Refresh：指定浏览器多长时间后自动刷新指定页面
<!-- 设置2秒后自动刷新本页面 --> <meta http-equiv="Refresh" content="2" /> <!-- 设置2秒后自动刷新http://www.xxx.org --> <meta http-equiv="Refresh" content="2;URL= / >
Set-Cookie：设置Cookie，如果网页过期，那么Cookie也将被删除
<meta http-equiv="Set-Cookie" content="name=value expires=Sat Sep 27 16:12:36 CST 2008, path=" />
content-Type：设置该页面的内容类型和所用的字符集
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
五、HTML5新增的拖放API
HTML5新增的拖放API，可以让HTML页面的任意元素变得可以被拖放，通过它可以开发出更友好的人机交互界面
1、启动拖动
在HTML5中，把需要拖动的元素的draggable属性设置为true，就表示它可以被拖动了，但此时它未携带数据，所以用户是看不到效果的，为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可拖动的DIV</title>
</head>
<body>
<div id="source" style="width:80px;height:80px;border:1px
solid black;background-color:#bbb;" draggable="true">可拖动的Div</div>
<script>
var source = document.getElementById('source');
source.ondragstart = function (evt) {
evt.dataTransfer.setData('text/plain', 'www.xxx.org');
}
</script>
</body>
</html>2、接受“放”操作
为了让document接受“放”操作，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为
document.ondragover = function (evt) {
//取消事件的默认行为
return false;
}但Firefox和Chrome对此操作有不同的反应，所以需要对document的ondrop事件设置监听器
document.ondrop = function (evt) {
//取消事件的默认行为
return false;
}下表是用户在拖放HTML元素时可能会触发的事件
下面的代码实现了一个可以自由拖动的<div>元素
<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8">
<title></title>
<style>
div#source {
width: 80px;
height: 80px;
background-color: #bbb;
}
</style>
</head>
<body>
<div id="source" draggable="true">可拖动Div</div>
<script>
var source = document.getElementById('source');
source.ondragstart = function (evt) {
evt.dataTransfer.setData('text/plain', 'www.baidu.com');
}
document.ondragover = function (evt) {
return false; //取消事件默认行为
}
document.ondrop = function (evt) {
source.style.position = 'absolute';
source.style.left = evt.pageX + 'px';
source.style.top = evt.pageY + 'px';
return false; //取消事件默认行为
}
</script>
</body>
</html>
