基本介绍
一个标准的 HTML 文件应该以<html>开始标签开始文档,中间包含<head>与<body> 等元素,其中<head>部分中可以定义页面的标题、简介、编码格式等内容,<body>部分为 在浏览器中显示的页面正文。下面的代码为一个不包含内容的标准 HTML 文档结构:
<html>
<head>
</head>
<body>
</body>
</html>
通过<title>元素可以指定页面的标题,标题会出现在浏览器的标题栏中,如果通过浏 览器收藏本页面,页面标题也会作为收藏夹中页面的名称。文档的内容是通过<body>元素 来指定的,在<body>元素的开始标签<body>和结束标签</body>之间放置文档的内容。如 果需要在页面上添加注释,可以使用符号包含注释内容,下面是一段设置了标题 和内容的 HTML 文件代码:
<html>
<head>
<title>页面标题</title> </head>
<body>
<!-- 这是一段注释 -->
这是在 HTML 中显示的文本。 注意:浏览器遇到连续的空格或换行时只会在页面上显示一个空格
</body>
</html>
字符引用和实体引用都是以一个和号(&)开始并以一个分号(;)结束。如果使用的 是字符引用,需要在和号(&)之后加上一个井号(#),之后是所需字符的十进制代码或 十六进制代码(ISO10646 字符集中字符的编码)。如果使用的是实体引用,在和号(&) 之后写上字符的助记符。常用特殊字符的字符引用和实体引用如表 1-1 所示。
<html>
<head>
<title>页面标题</title> </head>
<body>
HTML 中标题元素为<title> 所有的转义字符都以&符号作为开始
</body>
</html>
基本元素介绍
1.页面信息元素meta
页面信息元素可提供有关页面的元信息(Meta-Information),比如针对搜索引擎提供 的页面描述和关键词、指定页面编码等。该元素应该出现在<head>元素内部。
页面信息元素常用属性如下。
- http-equiv:设置本页面有关的信息,需要与 content 属性配合使用,常见的设置如下:
指定页面的文本编码格式:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
页面显示 5 秒钟后浏览器跳转到 www.google.com 页面:
<meta http-equiv="Refresh" content="5; Url=http://www.google.com">
浏览器可以缓存本页面直至 2011 年 2 月 23 日 18 点,超过此时间后浏览器必须重 新从服务器上取得此网页内容:
<meta http-equiv="Expires" content="Wed, 23 Feb 2011 18:00:00 GMT">
- name:描述网页内容,供搜索引擎收录,需要与 content 属性配合使用,常见的设置 如下:
设置本网页的关键词,多个关键词用英文逗号分割,为网页提供合适的关键词有利于提高网页在搜索引擎中的排名:
<meta name="Description" content="网页简述">
设置本网页的简述,告诉搜索引擎本网页的主要内容:
<meta name="Description" content="网页简述">
设置本网页的作者,可以是个人或公司名称:
<meta name="Author" content="张三">
2.段落元素p
段落元素用来表示一段文本,该元素会自动进行换行。
例 01_3.html
<p>普通段落</p>
<p align="left">左对齐段落</p>
<p align="center">居中段落</p>
<p align="right">靠右对齐段落</p>
其中,align 属性用于设置文字对齐方式,可选值有“left”、“center”、“right”,默认为 左对齐。
3.换行元素
换行元素用于同一段落内文字的换行显示,该元素没有属性,也不包含内容。
<p>
<br>元素可用于段落中文字的换行<br/> 因为浏览器对 HTML 中的换行符并不敏感, 所以这段话在浏览器中会连续显示
</p>
<p>段落间的留白比<br>元素更明显</p>
4.标题元素
标题元素用于将文字变为标题显示。
例 01_5.html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
5.文字修饰元素b、i、u
b、i、u元素用于修饰文字,作用分别为使文字变粗体、变斜体、加下画线。
例 01_6.html
<p><b>元素使文字变为<b>粗体</b></p>
<p><i>元素使文字变为<i>斜体</i></p>
<p><u>元素为文字添加<u>下画线</u></p>
<p><b>这些<u>元素<i>可以</i>组合</u>使用</b></p>
注意:还可以用strong元素取代b元素,用em元素取代i元素。
6.文字修饰元素font
font元素可用于修饰文字的颜色、大小和字体。
例 01_7.html
<p>
<font>元素可以修饰文字的<font color="gray">颜色</font>,
<font size="5">大小</font>和<font face="黑体">字体</font>
</p>
<p>也可以<font color="#B0B0B0" size="6" face="黑体">组合</font>使用</p>
<font>元素常用属性如下。
- color:设置文字的颜色,颜色可以使用英文单词或十六进制的数字指定。
- size:设置文字的大小,可选值为 1~7。
- face:设置文字的字体。
7.原样显示元素pre
原样显示元素用于原样显示文本,包括其中的换行符与连续的空格。
例 01_8.html
<pre>
用于原样显示文本,
包含换行符
</pre>
<pre>以及连续 的空格。</pre>
8.分割线元素
分割线元素用于显示分割线,可以通过属性设置分割线的外观。
例 01_9.html
<p><hr>元素用于显示分割线</p>
<hr color="red" noshade="noshade" width="400px" align="right" size="1"/>
分割线元素常用属性如下。
- color:设置分割线的颜色。
- noshade:设置是否显示阴影,无此属性则显示阴影。
- width:设置线的宽度,可以使用百分比或像素作为单位。
- align:分隔线的对齐方式,可选值有“left”、“center”、“right”,默认为居中对齐。
- size:线的粗细,单位为像素。
