版权声明：本文为博主原创文章，如需转载请标明出去。 https://blog.csdn.net/sujin_/article/details/78550874
今天初步了解一下HTML5的常用元素和属性，如果大家觉得写的不错的话，可以点击右上角的关注，我会持续更新博客的，谢谢。
HTML5保留的常用元素
&(保留的)基本元素、&文本格式化元素、&语义相关元素、&超链接和锚点、&列表相关元素、&表格相关元素
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../>。
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样式单，后续我会为大家讲解
3 语义相关元素
HTML5保留了如下语义相关元素。
| <abbr>:用于表示一个缩写。使用该元素时通常建议指定title属性，该元素用于指定该缩写所代表的全称。 |
| <address>:用于表示一个地址。浏览器通常会用斜体字显示<address.../>所包含的文本。 |
| <blockquote>:用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用的文本。 |
| 使用<blockquote.../>元素时可指定cite属性，该属性用于指定该引用文本所引用的网址URL或出处。 |
| <q>:用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。 |
| <cite>:用于表示作品（一本书、一部电影、一首歌）的标题。常常浏览器会用斜字体显示<cite../>所包含的文本。 |
| <code>:用于表示一段计算机代码。 |
| <dfn>:用于定义一个专业术语。浏览器通常会用粗体或斜字体显示<dfn../>所包含的文本。 |
| <del>:定义文档中被删除的文本。浏览器通常会以画线形式显示<del>包含的文本。 |
| <ins>:定义文档中插入的文本。浏览器通常会以画线形式显示<ins>包含的文本。 |
| <pre>:用于表示该元素所包含的文本已经进行了预格式化。也就是说， |
| <pre.../>元素所包含文本中的空格、回车、Tab键和其他格式字符都会被留下来，但浏览器会处理<pre.../>元素内大部分HTML元素。 |
| <samp>:用于定义示范文本内容。 |
| <kbd>:用于定义键盘文本。该元素用于表示文本是通过键盘输入。通常在计算机使用文档。使用说明中会经常使用该元素。 |
| <var>:用于表示一个变量。浏览器通常会用斜体字显示<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>
效果图：
4 使用a元素添加超链接和锚点
HTML页面使用超链接与网络上的另一个资源保持关联，当用户点击页面上的超链接时，浏览器会导航到超链接所值的资源。<a>元素还有如下6个重要的属性：
| href：指定超链接所链接的另外一个资源。 |
| hreflang:指定超链接所链接的文档所使用的语言。 |
| target:指使用框架集中的哪一个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、__parent四个值，分别表示自身、新窗口、顶层框架、父框架来装载新资源。 |
| type:指定被链接文档的MIME类型。 |
| media:指定目标URL所引用的媒体类型。默认值为all。只要当指定了href属性时该属性才有效。 |
--------------download、type、media是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>
5 列表相关元素
- <ul>：定义无须列表。该元素只能包含<li>元素。
- <ol>：定义有序列表，在HTML5中，该元素还可以指定下面三个属性
- start：指定列表项的起始数字。默认是第一个，如1、A等。
- 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>
并被多所“985”、“211”高校选作教材，<br>
部分图书已被翻译成繁体中文版、授权到台湾地区。</dd>
</dl>
</body>
</html>
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> | 用于表格中的一个或多个指定的属性值，它的作用只是用于多个<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>
---------------------------如果大家喜欢我的博客，可以点击左上角的关注