之前大致总结过HTML5的发展。
这里贴出之前的随笔:http://www.cnblogs.com/jiangxiaobo/p/5199924.html
我们就从HTML5的基础总结起。希望可以提高自身的基础。
HTML5不是革命式的发展,它是对HTML以前版本的继承和发展,因此HTML5保留了以前HTML版本绝大部分标签。
1. 基本元素
HTML5 保留的基本元素有如下几个。
1》 <!-- ... --> 定义HTML注释。位于<!-- 与 -->之间的内容会被当成注释处理。
2》 <html> 它是HTML5文档的根元素。但HTML5允许完全省略这个元素。
3》 <head> 它用于定义HTML5文档的页面头部分。但HTML5允许完全省略这个元素。
4》 <title> 它用于定义HTML5文档的页面标题。
5》 <body> 它用于定义HTML5文档的页面主体部分,该标签可以指定id、class、style等核心属性,还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性,这些属性用于指定JavaScript脚本。
6》 <style> 该元素用于引入样式定义。
7》 <h1>到<h6> 定义标题一到标题六。
8》 <p> 定义段落,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
9》 <br> 插入一个换行,该标签可以指定id、class、style等核心属性。
10》 <hr> 定义水平线,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。HTML5中<hr.../>还代表了主题结束的语义。
11》 <div> 定义文档中的节。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
12》 <span> 与<div>基本相似,区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。
2. 文本格式化元素
下面这些元素让文本内容在浏览器中呈现出特定效果。
1》 <b> 定义粗体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
2》 <i> 定义斜体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
3》 <em> 定义强调文本,实际效果与斜体文本差不多。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
4》 <strong> 定义粗体文本。与<b>标签的作用和用法基本相同。
5》 <small> 定义小号字体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
6》 <sup> 定义上标文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
7》 <sub> 定义下标文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
8》 <bdo> 定义文本显示的方向。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。除此之外,该标签也可以指定dir属性,该属性值只能是ltr或者rtl。
3. 语义相关元素
HTML5保留了如下语义相关元素。
1》 <abbr> 用于表示一个缩写。使用该元素时可指定如下属性。
title 该属性用于指定该缩写所代表的全称。
2》 <address> 用于表示一个地址。浏览器通常会用斜体字显示<address.../>所包含的文本。
3》 <blockquote> 用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用文本。使用<blockquote.../>元素时可指定如下属性。
cite 该属性指定该引用文本所引用的网址URL
4》 <q> 用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。
5》 <cite> 用于表示作品(一本书、一部电影、一首歌曲)的标题。常常浏览器会用斜体字显示<cite.../>所包含的文本。
6》 <code> 用于表示一段计算机代码。
7》 <dfn> 用于定义一个专业术语。浏览器通常会用粗体或斜体字显示<dfn.../>所包含的文本。
8》 <del> 定义文档中被删除的文本。浏览器通常会以中画线形式显示<del>包含的文本。
9》 <ins> 定义文本中插入的文本。浏览器通常会以下画线形式显示<ins>包含的文本。
<del>、<ins> 两个元素都可以指定如下两个属性:
cite 该属性值为一个URL,该URL对应的文本解释了文本被删除或插入的原因。
datetime 定义文本被删除或插入的日期、时间。
10》 <pre> 用于表示该元素所包含的文本已经进行了“预格式化”。也就是说,<pre.../>元素所包含文本中的空格、回车、Tab键和其他格式字符都会被保留下来,但浏览器会处理<pre.../>元素内大部分HTML元素。
11》 <samp> 用于定义示范文本内容。
12》 <kbd> 用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文本,使用说明中会经常使用到该元素。
13》 <var> 用于表示一个变量。浏览器通常会用斜体字显示<var.../>所包含的文本。
4. 超链接和锚点
HTML页面使用超链接与网络上的另一个资源保存关联,当用户单击页面上的超链接时,浏览器会导航到超链接所指的资源。
HTML5保留了定义超链接的<a.../>元素,该元素可以指定id、class、style等核心属性,也可以指定onclick等各种事件属性。它还可以指定如下三个重要属性。
href 指定超链接所关联的另一个资源。
target 指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、_parent四个值,分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。
media 指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。
<a.../>元素主要可以包含文本、图像、各种文本格式化元素和表单元素等内容。
完整网址遵循的语法规则:
scheme://host.domain:port/path/filename
关于这个URL地址的解释如下:
scheme 指定因特网服务的类型。最流行的类型是HTTP。
domain 指定因特网域名。
host 指定此域名的主机。如果被省略,HTTP的默认主机是www。
port 指定主机的端口号。端口号通常可以被省略,HTTP服务的默认端口是80。
path 指定远程服务器上的路径,该路径也可以被省略,省略该路径则默认被定位到网站的根目录。
filename 指定远程文档的名称。如果省略该文件名,通常会定位到index.html、index.htm等文件,或定位到Web服务器设置的其他文件。
画个表吧:
URL流行的scheme以及对应资源
scheme | 对应资源 |
file | 访问本地磁盘上的文件 |
ftp | 访问远程FTP服务器上的文件 |
http | 访问WWW服务器上的文件 |
news | 访问新闻组上的文件 |
telnet | 访问Telnet链接 |
gopher | 访问远程Gopher服务器上的文件 |
除此之外,<a.../>元素还可生成一个命名锚点,命名锚点用于HTML页面中生成一个定位点,这样允许超链接直接链接到指定页面的该定位点。
插入定位锚点需要指定name属性,name属性值就是该锚点的名称。例如如下代码:
<!-- 下面代码会生成一个命名锚点 -->
<a name="test"></a>
用浏览器浏览命名锚点时,该命名锚点不会生成任何显示内容,我们可以使用如下超链接来定位到该锚点:
<a href="anchor.html#test">定位到test锚点</a>
5. 列表相关元素
HTML5 还保留了如下几个列表相关元素。
1》 <ul> 定义无序列表。该元素可以指定id、class、style等属性,还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。
2》 <ol> 定义有序列表。该元素可以指定id、class、style等属性,还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。除此之外,再HTML5规范中,该元素还可以指定如下三个属性。
start 指定列表项的起始数字。默认是第一个,如1、A等。
type 指定使用哪种类型的编号,例如1代表使用数字,A和a代表使用字母,I和i代表使用罗马数字。该属性在HTML5规范中已经不推荐使用了,推荐使用CSS来定义。
reversed 该属性指定是否将排序反转。很遗憾,目前没有任何浏览器支持该属性。
3》 <li> 定义列表项目。该元素可以指定id、class、style等属性,还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容,因此可以包含较多类型的子元素。
4》 <dl> 也用于定义列表,该元素只能包含<dt.../>和<dd.../>两种子元素。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。
5》 <dt> 定义标题列表项。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。
6》 <dd> 定义普通列表项。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容,因此可以包含较多类型的子元素。
6. 图像相关元素
HTML5保留了<img.../>元素在页面中定义图像,这个元素只能是一个空元素,它不可以包含任何内容。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。不仅如此,使用该元素必须指定如下两个属性。
src 该属性指定图片文件所在的位置,该属性值既可以是相对路径,也可以是绝对路径。
alt 该属性指定一段文本,该文本将作为该图片的提示信息。
除此之外,该元素还可以指定如下两个可选属性。
height 指定该图片的高度,该属性值可以是百分比,也可以是像素值。
width 指定该图片的宽度,该属性值可以是百分比,也可以是像素值。
除此之外,与图片相关的还有如下两个标签。
<map> 用于定义图片映射。该元素主要可以包含一个或多个<area.../>子元素,每个<area.../>子元素定义一个区域,不同区域可链接到不同URL。
<area> 用于定义图片映射的内部区域。该元素只能是一个空元素,该元素可以指定id、style、class等属性,还可以指定onclick等事件属性,还可以指定onfocus、onblur等焦点相关属性。除此之外,还可以指定如下几个属性。
shape 指定该内部区域是哪种区域,该属性的默认值是“rect”,即矩形区域;除此之外,还可以是circle和ploy,分别代表圆形区域和多边形区域。
coords 指定多个坐标值,用于确定区域位置。
href 用于确定该区域所链接的资源。
alt 该属性指定一段文本,该文本将作为该图片提示信息。
target 指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、_parent四个值,分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。
media 指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。
一旦我们使用<map.../>元素定义了图片映射之后,就可以让指定图片使用该图片映射,通过为<img.../>元素指定usemap属性让该图片使用图片映射,设置usemap属性值为#mapname即可。
<img src="logo.jpg" width="300" height="120" border="0" usemap="#test" alt="logo图片" />
<!-- 定义图片映射 -->
<map name="test" id="test">
<!-- 为该图片映射定义2个区域 -->
<area shape="circle" coords="57,55,25" href="http://www.baidu.com" alt="百度一下" />
<area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.baidu.com" alt="百度一下" />
</map>