您的位置：首页 > Web前端 > HTML5

HTML5常用元素与属性

2015-10-13 00:00 609 查看

摘要: HTML5规范保持了对现有HTML的最大兼容，并保留了绝大部分元素和属性，HTML推荐使用CSS来控制HTML文档样式

HTML5规范保持了对现有HTML的最大兼容，并保留了绝大部分元素和属性，HTML推荐使用CSS来控制HTML文档样式

一、HTML5保留的常用元素

1、基本元素

[b] HTML保留的基本元素有如下几个：[/b]

：定义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 lang="zh-CN">
<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 lang="zh-CN">
<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元素时可能会触发的事件

事件	事件源	描述
ondragstart	被拖动的HTML元素	开始拖动操作时触发该事件
ondrag	被拖动的HTML元素	拖动过程中会不断的触发该事件
ondragend	被拖动的HTML元素	拖动结束时触发该事件
ondragenter	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内时候
ondragover	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内拖动时会不断触发该事件
ondragleave	拖动时鼠标经过的元素	被拖动的元素离开本元素时触发该事件
ondrop	拖动时鼠标经过的元素	其他元素被放到了本元素中时触发该事件

下面的代码实现了一个可以自由拖动的<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>

3、DataTransfer对象

4、拖放行为

5、改变拖放图标

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5 元素

相关文章推荐

新的分享

章节导航