今天初步了解一下 html5 的常用元素和属性, 如果大家觉得写的不错的话, 可以点击右上角的关注, 我会持续更新博客的, 谢谢
HTML5 保留的常用元素
&(保留的)基本元素 & 文本格式化元素 & 语义相关元素 & 超链接和锚点 & 列表相关元素 & 表格相关元素
1.1 基本元素
<!--...--> HTML 注释
<html> Html 文档的根元素
<head> 页面头部分
<title> 页面标题
<body> 页面主体, 这个标签还可以指 id,class,style,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup 等属性
, 这些属性用于指定 Javascript 脚本
<style> 样式定义
<h1><h2><h..><h6 > 定义的标题
<p> 段落定义, 可以定义 id,class,style 和 onclick 等各种事件属性
<br> 换行
<hr> 水平线
<div> 文档中的块, 可以定义 id,class,style 和 onclick 等各种事件属性
<span> 和 < div > 一样
注意: 由于 < div../>元素的滥用, 导致 HTML 页面中语义的清晰性下降, 为了避免这种情况, HTML5 规范推荐 HTML5 的文档结构元素如:<article../><section.../><nav.../>等代替 < div../>
1.2 文本格式相关元素
<b> : 定义粗体 wenben |
<i> : 定义斜体文本 |
<em> : 定义强调文本 |
<strong> : 定义粗体文本 |
<small> : 定义小号字体文本 |
<sup> : 定义上标文本 |
<sub>: 定义下标文本 |
<bdo>: 定义文本显示的方向 |
代码示例:
- <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 />
效果图:
如果需要对文本进行更丰富的样式的格式化, 则建议使用 CSS 样式单, 后续我会为大家讲解
1.3 语义相关元素元素
HTML5 保留了如下语义相关元素
<abbr> : 用于表示一个缩写。 使用该元素时通常建议指定 title 属性,该元素用于指定该缩写所代表的全称。 |
<address> : 用于表示一个地址。 浏览器通常会用斜体字显示 & lt;address.../> 所包含的文本。 |
<blockquote> : 用于定义一段长的引用文本。 浏览器会使用缩进的方式显示这段被引用的文本。 |
使用 <blockquote.../> 元素时可指定 cite 属性,该属性用于指定该引用文本所引用的网址 URL 或出处。 |
<q> : 用于定义一段短的引用文本。 浏览器会为这段被引用文本添加引号。 |
<cite> : 用于表示作品(一本书、一部电影、一首歌)的标题。 常常浏览器会用斜字体显示 & lt;cite../> 所包含的文本。 |
<code> : 用于表示一段计算机代码。 |
<dfn> : 用于定义一个专业术语。 浏览器通常会用粗体或斜字体显示 & lt;dfn../> 所包含的文本。 |
<del> : 定义文档中被删除的文本。 浏览器通常会以画线形式显示 & lt;del> 包含的文本。 |
<ins> : 定义文档中插入的文本。 浏览器通常会以画线形式显示 & lt;ins> 包含的文本。 |
<pre> : 用于表示该元素所包含的文本已经进行了 预格式化 。也就是说, |
<pre.../> 元素所包含文本中的空格、回车、Tab 键和其他格式字符都会被留下来,但浏览器会处理 & lt;pre.../> 元素内大部分 HTML 元素。 |
<samp> : 用于定义示范文本内容。 |
<kbd> : 用于定义键盘文本。该元素用于表示文本是通过键盘输入 。通常在计算机使用文档。使用说明中会经常使用该元素。 |
<var>: 用于表示一个变量。 浏览器通常会用斜体字显示 & lt;var../> 所包含的文本。 |
代码示例:
<!-- 使用 q 表示一段短的引用文本 -->
<p > 疯狂 Java 的精神是 < q > 疯狂源自梦想, 技术成就辉煌</q>
这也是所有疯狂 Java 程序员的精神</p>
- <div>
- <!-- 使用 blockquote 表示一段长的引用文本 -->
- <blockquote cite="李义山诗集">
锦瑟无端五十弦, 一弦一柱思华年 < 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../><adddress.../><code.../>等语义相关的元素来定义 HTML 页面
<!-- 使用 abbr 定义缩写 -->
疯狂 Java 教育中心的缩写是 < abbr title="疯狂 Java 教育">fkjava</abbr>
<!-- 使用 address 定义地址 -->
疯狂软件地址是 < address > 广州市天河区车陂大岗路 4 号沣宏大厦 3006-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>
效果图:
1.4 使用 a 元素添加超链接和锚点
HTML 页面使用超链接与网络上的另一个资源保持关联, 当用户点击页面上的超链接时, 浏览器会导航到超链接所值的资源 < a > 元素还有如下 6 个重要的属性:
href: 指定超链接所链接的另外一个资源。 |
hreflang : 指定超链接所链接的文档所使用的语言。 |
target: 指使用框架集中的哪一个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、__parent 四个值, |
分别表示自身、新窗口、顶层框架、父框架来装载新资源。 |
dowload: 用于让用户下载目标链接所指向的资源,而不是直接打开该目标链接。该属性的属性值指定用户保存下载资源时的默认文件名。 |
type : 指定被链接文档的 MIME 类型。 |
media : 指定目标 URL 所引用的媒体类型。默认值为 all。只要当指定了 href 属性时该属性才有效。 |
--------------downloadtypemedia 是 HTML5 新增的属性
<a.../>元素主要可以包含文本图像各种文本格式化元素和表单元素等内容
下面定义了四个超链接
- <!-- 在本窗口打开另一个资源 -->
- <a href="http://www.crazyit.org"><b > 疯狂 Java 联盟</b></a><br />
- <!-- 在新窗口中打开另一个资源 -->
- <a href="http://www.crazyit.org"
- target="_blank"><em > 疯狂 Java 联盟</em></a><br />
- <!-- 为图像增加超链接 -->
- <a href="http://www.crazyit.org"><img src="images/logo.jpg"
- alt="疯狂 Java 联盟"/></a><br />
- <!-- 基于相对路径指定另一个资源 -->
- <a href="text.html">文本格式化元素</a><br />
上面的代码定义了四个超链接, 分别是粗体字超链接斜体字超链接图像超链接和普通超链接, 单击前三个超链接中任意一个, 浏览器将导航到 -- 疯狂 Java 联盟 -- 站点; 单击最后一个则会链接到 text.html 当使用 < a.../>元素时, href 属性值既可以是绝对路径, 也可以是相对路径当指定绝对路径时, href 属性值为 URL(Uniform Resource Locator, 统一资源定位符),URL 用于对互联网上的文档 (其他资源) 进行寻找, 深入了解 URL
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> 超链接 </title>
- </head>
- <body>
- <!-- 在本窗口打开另一个资源 -->
- <a href="http://www.crazyit.org"><b > 疯狂 Java 联盟</b></a><br />
- <!-- 在新窗口中打开另一个资源 -->
- <a href="http://www.crazyit.org"
- target="_blank"><em > 疯狂 Java 联盟</em></a><br />
- <!-- 为图像增加超链接 -->
- <a href="http://www.crazyit.org"><img src="images/logo.jpg"
- alt="疯狂 Java 联盟"/></a><br />
- <!-- 基于相对路径指定另一个资源 -->
- <a href="text.html">文本格式化元素</a><br />
- </body>
- </html>
点击图片, 它并没有打开 logo.jpg, 而是下载 logo.jpg 图片, 并且默认文件名为: 疯狂 Java 联盟. jpg, 这就是 download 的作用
此外,<a > 元素还可以生成一个命名锚点, 在 HTML 页面中生成一个定位点, 这样允许超链接直接链接到指定页面的该定位点
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> 超链接 </title>
- </head>
- <body>
- <a href="anchor2.html#test">定位到 test 锚点</a><br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- <!-- 下面代码会生成一个命名锚点 -->
- <a name="test">test</a><br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- a<br>
- </body>
- </html>
1.5 列表相关元素
<ul>: 定义无须列表该元素只能包含 < li > 元素
<ol>: 定义有序列表, 在 HTML5 中, 该元素还可以指定下面三个属性
start: 指定列表项的起始数字默认是第一个, 如 1A 等
type: 指定使用哪种类型的编号, 例如 1 代表使用数字, A 或 a 分别代表使用大写或小写字母, I 或 i 代表使用大写或小写罗马数字该属性在 HTML5 规范中已经不推荐使用了, 推荐用 CSS 来定义
reversed: 该属性指定是否将排序反转很遗憾, 目前没有任何浏览器支持该属性
<li>: 定义列表项该元素里可以包含 < div > 完全类似的内容, 因此可以包含较多类型的子元素
<dl>: 用于定义术语列表该元素只能包含 < dt > 和 < dd > 两种子元素
<dt>: 定义标题列表项该元素只能包含文本图像超链接文本格式化元素和表单控件元素等
<dd>: 定义普通列表项该元素里可以包含 < div > 完全类似的内容, 因此可以包含较多类型的子元素
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> 列表相关元素 </title>
- </head>
- <body>
- <h4 > 定义反序的有序列表</h4>
- <ol reversed="true">
- <li > 疯狂 Java 讲义</li>
- <li > 轻量级 Java EE 企业应用实战</li>
- <li > 疯狂 Android 讲义</li>
- </ol>
- <h4 > 定义从 3 开始的有序列表</h4>
- <ol start="3">
- <li > 疯狂 Java 讲义</li>
- <li > 轻量级 Java EE 企业应用实战</li>
- <li > 疯狂 Android 讲义</li>
- </ol>
- <h4 > 定义使用小写字母编号的有序列表</h4>
- <ol type="a">
- <li > 疯狂 Java 讲义</li>
- <li > 轻量级 Java EE 企业应用实战</li>
- <li > 疯狂 Android 讲义</li>
- </ol>
- <h4 > 定义使用小写罗马数字从 4 开始的有序列表</h4>
- <ol type="i" start="4">
- <li > 疯狂 Java 讲义</li>
- <li > 轻量级 Java EE 企业应用实战</li>
- <li > 疯狂 Android 讲义</li>
- </ol>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> 列表相关元素 </title>
- </head>
- <body>
- <h2>dt 定义标题 dd 定义解释</h2>
- <dl>
- <dt>Java<dt>
- <dd>Java 是一门广泛使用的跨平台的开发语言</dd>
- <dt > 疯狂 Java 体系图书</dt>
<dd > 疯狂 Java 体系图书是李刚老师积十年之功创作的一套系统的 Java 学习图书,<br>
且多次升级保持与最新技术同步, 对广大初学者帮助很大</dd>
<dd > 疯狂 Java 体系图书均已得到广泛的市场认同, 多次重印成为超级畅销图书,<br>
并被多所 985211 高校选作教材,<br>
部分图书已被翻译成繁体中文版授权到台湾地区</dd>
- </dl>
- </body>
- </html>
1.6 表格相关元素
1.<table>: 用于定义表格, 有如下属性
cellpading: 指定单元格内容和单元格边框之间的间距该属性可以为百分比或素值
cellspacing: 指定单元格之间的间距
width: 指定表格的宽度
2.<caption>: 用于定义表格标题, 该元素只能包含文本图片超链接文本格式化元素和表单控件元素
3.<tr>: 定义表格行
4.<td>: 定义单元格
colspan: 指定该单元格跨多少列, 该属性值就是一个简单的数字
rowspan: 指定此单元格可横跨的行数
height: 指定该单元格的高度
width: 指定单元格的宽度
5.<th>: 定义表格的表头单元格, 和 < td > 元素的用法几乎一模一样, 只是浏览器呈现时有一定的差别
6.<tbody>: 定义表格的主体
7.<thead>: 定义表格头
8.<tfoot>: 定义表格脚
代码示例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> 带 tbody 的表格 </title>
- </head>
- <body>
- <table border="1" style="width:400px">
- <caption><b > 图书</b></caption>
- <thead>
- <tr>
- <th> </th>
- <th > 书名</th>
- <th > 作者</th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <td colspan="3" style="text-align:right">现总计: 4 本图书</td>
- </tr>
- </tfoot>
- <tbody>
- <tr>
- <th rowspan="2">Java 体系</th>
- <td>Java 讲义</td>
- <td > 李丽</td>
- </tr>
- <tr>
- <td > 轻量级 Java EE 企业应用实战</td>
- <td > 李刚</td>
- </tr>
- </tbody>
- <tbody>
- <tr>
- <th rowspan="2">iOS 体系</th>
- <td>Swift 讲义</td>
- <td > 李庭</td>
- </tr>
- <tr>
- <td > 疯狂 iOS 讲义</td>
- <td > 李框</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
如果决定使用 < tbody > 和 < tfoot > 元素, 只能在 < table > 元素内使用, 并且要按照顺序来, 除此之外, 如果需要在页面中为某列整体指定属性, HTML5 中有这两个元素:
<col> | 用于表格中的一个或多个列指定属性值,还可以指定 span 属性,用于指定该列可横跨多少列 |
<colgroup> | 用于表格中的一个或多个指定的属性值,它的作用只是用于多个 & lt;col> 元素 |
在 < table > 中使用 < col > 为表格指定属性, 那么 < col > 定义的表格列数就应该与表格内实际包含的列数相等
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> 带 col 的表格 </title>
- </head>
- <body>
<h4 > 通过 CSS 设置表格背景色为黑色, 单元格之间的间距为 1px<br>
通过设置背景色为黑色可以实现边框效果</h4>
- <table style="background-color:black;
- border-collapse:separate;border-spacing:1px;">
- <caption><b > 疯狂 Java 体系图书</b></caption>
- <!-- 定义所有列的背景色都是白色 -->
- <colgroup style="background-color:white;">
- <!-- 设置第一列宽 160px -->
- <col style="width:160px"/>
- <!-- 定义横跨两列, 设置这两列各宽 100px -->
- <col span="2" style="width:100px"/>
- </colgroup>
- <thead>
- <tr>
- <th > 书名</th>
- <th > 作者</th>
- <th > 价格</th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <td colspan="3" style="text-align:right">现总计: 2 本图书</td>
- </tr>
- </tfoot>
- <tbody>
- <tr>
- <td>Java 讲义</td>
- <td > 李丽</td>
- <td>109</td>
- </tr>
- <tr>
- <td > 轻量级 Java EE 企业应用实战</td>
- <td > 李刚</td>
- <td>89</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
来源: http://blog.csdn.net/sujin_/article/details/78550874