HTML5经常使用元素与属性
HTML5规范保持了对现有HTML的最大兼容，并保留了绝大部分元素和属性，HTML推荐使用CSS来控制HTML文档样式
1、HTML5保留的经常使用元素
一、基本元素
HTML保留的基本元素有以下几个： html
-
<!-- -->： 定义HTML注释 前端
-
<html>：HTML5文档的根元素 java
-
<head>：定义HTML5文档的页面头部分 android
-
<title>：定义HTML5文档的标题 程序员
-
<body>：定义HTML5文档的主体部分 web
-
<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>
二、文本格式化元素
-
<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>
三、语义相关元素
-
<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>
四、超连接和锚点
HTML5保留了定义超连接的<a.../>元素，它有以下3个重要的属性：
-
href：指定超连接所关联的另外一个资源
-
target：指定使用哪一种框架来装载资源，有_self、_blank、_top、 _parent四个值
-
media：指定目标URL所引用的媒体类型，默认为all，它是HTML5新 增的属性
五、列表相关元素
-
<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>
六、图像相关元素
HTML5保留了<img.../>元素在页面中定义图像，它是一个空元素，它必须制定如下两个属性：
-
src：指定图片文件所在的位置，能够是相对或绝对路径
-
alt：指定一段文本，做为图片的提示信息
<img>的两个可选属性：
-
height：图片高度
-
width：图片宽度
与<img>相关的标签：
-
<map>：定义图片映射
-
<area>：定义图片映射的内部区域
七、表格相关元素
<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>：该元素用于为表格中的一个或多个列指定属性值
八、框架相关元素
HTML5再也不推荐在页面中使用框架集，但保留了<iframe.../>元素，它有 一个属性src，
该属性指定一个URL，指定该iframe将装载那个页面
2、HTML5新增的通用属性
一、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>
二、designMode属性
designMode属性至关于一个全局的contentEditable属性，若是把整个页面的designMode属性设置为on，则该页面上全部可支持contentEditable属性的元素都编程可编辑状态
document.designMode = "on";
三、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>
四、spellcheck属性
HTML5为<input.../>、<textarea.../>等元素增长了spellcheck属 性，该属性支持 true和false两个值，若是为true，则浏览器会对用户 的输入进行语法检
<!-- 指定执行拼写检查 --> <textarea spellcheck="true" rows="3" cols="40"></textarea>
3、HTML新增的经常使用元素
一、文档结构元素
-
<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>
二、语义相关元素
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：指定进度条当前完成的进度值
4、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" />
5、HTML5新增的拖放API
HTML5新增的拖放API，可让HTML页面的任意元素变得能够被拖放，经过它能够开发出更友好的人机交互界面
一、启动拖动
在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>
二、接受“放”操做
为了让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>
三、DataTransfer对象
四、拖放行为
五、改变拖放图标
- 1. HTML5 a元素download属性
- 2. HTML笔记一，部分经常使用的元素与属性
- 3. HTML5 表单新增元素与属性
- 4. HTML5 input 经常使用属性
- 5. HTML中经常使用的元素属性或方法
- 6. HTML5 学习总结（二）——HTML5新增属性与表单元素
- 7. HTML5 学习笔记（二）——HTML5新增属性与表单元素
- 8. HTML5 杂谈 Video 元素的poster属性
- 9. HTML5新增属性和表单元素
- 10. html5--4-2 video元素的属性
- 更多相关文章...
- • XML 元素 vs. 属性 - DTD 教程
- • Spring Bean的配置及常用属性 - Spring教程
- • Composer 安装与使用
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。