2.1 HTML5保留的常用元素
2.1.1 基本元素
HTML文档是一份结构化的文档,HTML文档的根元素总是<html…/>元素,该元素内通常包含<head…/>和<body…/>两个子元素(HTML5允许省略它们,HTML5会隐式添加),这三个元素定义了HTML文档的基本结构。
HTML5保留的基本元素有如下几个:
<!--...-->:定义HTML注释,位于<!--与-->之间的内容会被当成注释处理;
<html>:它是HTML5文档的根元素,但HTML5允许完全省略这个元素;
<head>:它用于定义HTML5文档的页面头部分。但HTML5允许完全省略这个元素;
<title>:它用于定义HTML5文档的页面标题;
<body>:它用于定义HTML5文档的页面主体部分;
<h1>到<h6>:定义标题一到标题六;
<p>:定义段落;
<br>:插入一个换行;
<hr>:定义水平线,HTML5中它还代表了主题结束的含义;
<div>:定义文档中的节;
<span>:与<div>基本相似,区别是<span>只是表示一段一般性文本,该元素包含的文本内容默认不会换行。
2.1.2 文本格式相关元素
<b>:定义粗体文本;
<i>:定义斜体文本;
<em>:定义强调文本,实际效果与斜体文本差不多;
<strong>:定义粗体文本,HTML5为它增加了语义,使用它包起来的文本代表重要的文本;
<small>:定义小号字体文本,HTML5定义了该元素专门用于标识所谓的“小字印刷体”,通常用于标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字;
<sup>:定义上标文本;
<sub>:定义下标文本;
<bdo>:定义文本显示方向,该元素应该指定dir属性,该属性值只能是ltr或者rtl,用于指定文本的排列方向。
2.1.3 语义相关元素
<abbr>:用于表示一个缩写;
<address>:用于表示一个地址;(斜体字显示)
<blockquote>:用于定义一段长的引用文本(缩进显示),使用<blockquote.../>元素时可指定cite属性,该属性用于指定该引用文本所引用的网址url或出处;
<q>:用于定义一段短的引用文本,浏览器会为这段文本添加引号;
<cite>:用于表示作品的标题;(斜体显示)
<code>:用于表示一段计算机代码;
<dfn>:用于定义一个专业术语;(粗体或斜体显示)
<del>:定义文档中被删除的文本;(中画线形式显示)
<ins>:定义文档中插入的文本;(下画线形式显示)
<pre>:用于表示该元素所包含的文本已经进行了“预格式化”;
<samp>:用于定义示范文本内容;
<kbd>:用于定义键盘文本;
<var>:用于表示一个变量;(斜体字显示)
2.1.4 使用a元素添加超链接和锚点
HTML页面使用超链接与网络上的另一个资源保持关联,当用户单击页面上的超链接时,浏览器会导航到超链接所指资源。
1)<a…/>元素可以指定id、class、style、dir、title等通用属性,也可以指定onclick等各种事件属性,还可以指定如下6个重要属性。
href:指定超链接所链接的另一个资源;
hreflang:指定超链接所链接的文档所使用的语言;
target:指定使用框架集中的哪个框架来装载另一个资源,该属性的属性值可以是_self、_blank、_top、_parent四个值,分别代表使用自身,新窗口,顶层框架,父框架来装载新资源;
download:用于让用户下载目标链接所指向的资源,而不是直接打开该目标链接,该属性的属性值指定用户保存下载资源时的默认文件名。
type:指定被链接文档的MIME类型;
media:指定目标url所引用的媒体类型,默认值为all,只有当指定了href属性时该属性才有效。
注:<a…/>元素主要可以包含文本、图像、各种文本格式化元素和表单元素等内容。
2)<a…/>还可以生成一个命名锚点,命名锚点用于在HTML页面中生成一个定位点,这样允许超链接直接链接到指定页面的该定位点。
2.1.5 列表相关元素
<ul>:定义无序列表,该元素只能包含<li.../>子元素;
<ol>:定义有序列表,该元素可以指定id、class、style、dir、title等通用属性,也可以指定onclick等各种事件属性,该元素只能包含<li.../>子元素,该元素还可以指定如下三个属性:
1)start:指定列表项的起始数字,默认是第一个,如:1,A。
2)type:指定使用哪种的编号,例如:1代表使用数字,A或a分别代表使用大写或者小写字母,I或i代表使用大写或者小写罗马数字。该属性在HTML5规范中已经不推荐使用了,推荐使用CSS来定义。
3)reversed:该属性指定是否将排序反转。很遗憾,目前没有任何浏览器支持该属性。
<li>:定义列表项;
<dl>:用于定义术语列表。
<dt>:定义标题列表项。
<dd>:定义普通列表项。
2.1.6 使用img添加图片
HTML5保留了<img…/>元素在页面中定义图片,这个元素只能是一个空元素,它不可以包含任何内容,使用该元素必须指定如下两个属性:
1)src:该属性指定图片文件所在的位置,该属性值既可以是相对路径,也可以是绝对路径。
2)alt:该属性指定一段文本,该文本将作为该图片中的提示信息。
除此之外,该元素还可以指定如下两个可选属性:
1)height:指定该图片的高度,该属性值可以是百分比,也可以是像素值。
2)width:指定该图片的宽度,该属性值可以是百分比,也可以是像素值。
另外,与图片相关的还有如下两个元素:
1)<map>:用于定义图片映射,该元素主要可以包含一个或多个<area.../>子元素,每个<area.../>子元素定义一个区域,不同区域可链接到不同url。
2)<area>:用于定义图片映射的内部区域。
除此之外,还可以指定如下几个属性:
1)shape:指定该内部区域是哪种区域,该属性的默认值是“rect”;即矩形区域;除此之外,还可以是圆形区域circle和poly多边形区域。
2)coords:指定多个坐标值,用于确定区域位置。
3)href:用于确定该区域所链接的资源。
4)alt:该属性指定一段文本。
5)target:指定使用框架集中的哪个框架来装载另一个资源
2.1.7 表格相关元素
HTML5保留了定义表格的如下元素:
<table>:用于定义表格,<table.../>元素只能包含0个或1个<caption.../>子元素(定义表格标题),0个或1个<thead.../>子元素(定义表格头),0个或1个<tfoot.../>子元素(定义表格脚),多个<tr.../>子元素(定义表格行),多个<tbody.../>子元素(定义表格体)。该元素可以指定id、style和class等通用属性,也可以指定onclick等事件属性,除此之外,该元素还可以指定如下几个属性。
cellpadding:指定单元格内容和单元格边框之间的间距,该属性值既可是像素值,也可是百分比。
width:指定表格的宽度,该属性值既可是像素值,也可是百分比。
caption:用于定义表格标题。
tr:定义表格行,该元素只能包含<td.../>或者<th.../>两种元素。
td:定义单元格,除指定通用属性和事件属性外,该元素还可以指定如下几个属性:
colspan:指定该单元格跨多少列,该属性值就是一个简单的数字。
rowspan:指定此单元格可横跨的行数。
height:指定该单元格的高度。
width:指定该单元格的宽度。
th:定义表格的表头单元格。
tbody:定义表格的主体,该元素只能包含<tr.../>子元素,该元素可以指定id、style和class等通用属性,也可以指定onclick等事件属性。
thead:定义表格头。
tfoot:定义表格脚。