第1章
HTML简介和基本标签
主要内容
. HTML简介
. 浏览器简介
. HTML标签
. 常用标签
1. HTML简介
. HTML简介
HTML全称为HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。HTML是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。需要说明的是HTML不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。比如，文字以什么颜色、大小来显示，图片以什么尺寸、位置来显示等。这些描述都是用HTML标签来描述的。
. HTML历史
HTML的前身是SGML语言，SGML的前身是GML语言。
GML（Generalized Markup Language：通用标签语言）是一种IBM格式化文档语言，用于就其组织结构、各部件及其之间的关系进行文档描述。GML将这些描述标记为章节、重要小节和次重要小节（通过标题的级来区分）、段落、列表、表等。GML是SGML（Standard Generalized Markup Language，标准通用标记语言）的先驱和基础，SGML是当今创建结构化文档描述语言规则的战略集合。
. HTML语法
语法结构：HTML标签
<标签 属性="值">内容</标签>
<p> 是HTML中的段落标签，下面以 <p> 为例来详细解释标签。
语法格式：HTML标签
语法解析：
标签通常是成对出现的，分为开始标签（<p>）和结束标签(</p>)，结束标签只是在开始标签前加一个斜杠“/”。标签可以有属性（align），属性必须有值(center)。开始标签与结束标签中包含的内容称之为区域。标签不区分大小写，<p>和<P>是相同的。
. 网页分类
HTML使用标签编写网页，网页基本上可以分为3类。
1. 静态网页HTML
静态网页是指在不修改网页源文件的情况下，网页无论在何时何地被浏览，都将显示相同的内容，网页的内容不会发生变化。静态网页文件的扩展名包括html,htm等。
2. 动态网页DHTML
动态网页是指网页可以实时的发生变化，也可以根据用户的操作而发生相应的变化，虽然存在着一定的交互关系，但功能有限。它可以由JavaScript语言配合HTML和CSS来实现。这本书所讲解的就是静态网页和动态网页两部分内容。动态网页文件的扩展名包括html，htm等。
3. 交互式网页
交互式网页是指用户可以提供给网站信息，网站根据用户提交的信息响应用户的要求。如网上注册、论坛、调查等等。在这门课的最后部分我们会体验交互式网页，在第二学期将深入学习。交互式网页文件的扩展名包括aspx，jsp，php，asp等。
. 浏览器
网页运行在浏览器中，浏览器中的解释器将网页中的标签解释后就是我们在浏览器中
看到的网页。显然，浏览器在这里起到了两个作用，第一是解释HTML标签，第二是呈现网页。常用的浏览器包括
. Microsoft 公司的 Internet Explorer（IE）。
. Mozilla 公司的Firefox（火狐）。
. Google公司的 Chrome
. 使用记事本快速体验网页制作
现在就来创建我们的第一个网页。
1. 打开记事本
2. 将下面的代码示例写入记事本中，如图1所示。
代码演示：HTML简介
<html>
<head>
<title>HTML简介</title>
</head>
<body>
我的第一个网页
</body>
</html>
图1 HTML简介
3. 编写完成后保存该文档。点击记事本中的“文件”菜单，选择“另存为”命令，
弹出如图2所示的对话框，将文件保存到“我的文档”目录中，命名为index.html。这时我们已经完成了网页的创建。
图2 保存html文件
网页文件的扩展名为html或htm。
4. 打开“我的文档”目录，鼠标双击index.html文件，我们的网页已经运行在浏
览器中了，如图3所示。网页制作，是不是很简单。
图3 浏览网页
2. HTML文档结构
在上面的例子中用到了4个标签，除了<title>标签外，其余的三个标签构成了HTML
文档的结构，HTML文档结构包括三个部分，如图4所示。
1. <HTML> 标签
<html> 表示网页文件的开始,应该把它放在文档的最前面，其他所有的标签都应该放在<html>和</html>之间。
2. <HEAD>标签
<head>表示头部标签，<head>标签中通常放<title>标签、<meta>标签。
3. <BODY>标签
<body>表示主体标签，网页上所有要显示的内容都放在这个标签内。
图4 HTML文档的结构
代码演示：HTML文档结构
<html> ①
<head> ②
<title>HTML简介</title> ③
</head> ④
<body> ⑤
<!—在这里写注释--> ⑥
我的第一个网页
</body> ⑦
</html> ⑧
代码解析：
① <html> 表示网页的开始。
② <head> 表示头部的开始。
③ <title> 表示网页的标题，标题内的文本将显示在浏览器的标题栏。
④ </head> 表示头部结束。
⑤ <body> 表示正文部分的开始。
⑥ “<!-- -->”这对标签称为注释标签，<!-- 是注释的开始 -->是注释的结束。它的作用是提醒自己或帮助用户了解该文件的内容，所以注释标签不会显示在浏览器
HTML
HEAD
BODY
中。
⑦ </body> 表示正文部分的结束。
⑧ </html> 表示网页结束。
3. 使用Dreamweaver快速体验网页制作
. 开发工具
通过第一个例子，我们知道用记事本可以制作网页，不过在记事本中制作网页要编写大量的标签，效率很低。现在来学习一个专门制作网页的工具Dreamweaver ，Dreamweaver是网页三剑客之一，在本书中以Dreamweaver 8 版本开发网页。
网页三剑客是指Dreamweaver、Flash、Fireworks三个软件。
1. Dreamweaver 是网页制作工具。
2. Flash 是动画制作工具。
3. Fireworks 是图片制作工具。
. 使用Dreamweaver快速体验网页制作
在开始菜单中打开Dreamweaver 8工具，如图5所示。
图5 启动Dreamweaver
在“文件”菜单中选中“新建”命令，弹出如图6所示的对话框。
图6 新建网页文件
在图6中选择“基本页”中的“HTML”，点击“创建”按钮，这样我们就成功的创建了一个网页，如图7所示。在设计窗口中输入“我的第一个网页”，将标题更改为“HTML简介”。
图7 填写网页内容
输入完成后切换到代码窗口，如图8示。
图8 查看网页代码
这时，我们发现Dreamweaver已经帮我们生成了HTML标签，除了第1行和第4行的<meta>标签外，其余部分与我们讲过的HTML文档结构完全相同。接下来点击“文件”菜单，选择“保存”命令，在弹出的保存对话框中为文件命名为index.html，保存到桌面，如图9所示。
图9 保存网页文件
在桌面上找到“index.html”文件，鼠标双击后在浏览器中打开了这个网页，如图10所示。使用Dreamweaver是不是方便了许多，它帮我们生成了HTML标签。
图10 第一个网页运行结果
4. <META>标签
网页的<head>标签中除了包含<title>标签外还包括了<meta>标签，<meta>标签提供了关于网页的信息，包括作者、关键字、网页编码、自动刷新等。
. 网页编码
代码演示：Meta标签-编码
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> ①
<title>HTML简介</title>
</head>
<body>
使用meta标签确定编码格式。
</body>
</html>
代码解析：
① 这是<meta>标签，标签中的charset表示当前网页的编码格式，值GB2312表示简体中文编码，也就是说网页中的文字显示为简体中文，这时就要求操作系统中安
装GB2312字符集，否则就会显示乱码，不过中文操作系统中已经安装了。如果在英文操作系统中浏览了GB2312编码的网页就会出现乱码，因为英文操作系统中没有GB2312字符集。我们在浏览网页时偶尔会遇到网页显示乱码，多数是因为META标签中的编码设置不正确。
网页的常用编码有GB2312、UTF-8、BIG5、GBK：
1． GB2312是简体中文字符集，主要用于中国大陆和新加坡。
2． UTF -8可以理解为通用字符集。
3． BIG5是繁体中文字符集，主要在台湾和香港地区使用。
4． GBK是GB2312的后续标准，添加了更多的汉字和特殊符号。
. 刷新
代码演示：Meta标签-刷新1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<meta http-equiv="Refresh" content="2" /> ①
</head>
<body>
</body>
</html>
代码解析：
① <meta http-equiv="Refresh" content="2" />标签中的Refresh表示刷新， content="2"表示2秒钟。这个META标签实现了当网页下载2秒后重新刷新这个网页，就像点击了浏览器上的按钮。在网页中的一些聊天程序就使用了网页刷新功能，每隔几秒钟获取一次最新的聊天内容。
代码演示：Meta标签-刷新2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<meta http-equiv="refresh" content="2;URL=http://www.sohu.com"> ①
</head>
<body>
</body>
</html>
代码解析：
① <meta http-equiv="refresh" content="2; URL = http:// www. sohu.com/">标签中的Refresh表示刷新， content="2"表示2秒钟，URL表示网址。这个META标签实现了当网页下载2秒后转向到http://www. sohu.com/ 网址。例如，CSND的论坛在登录后会提示类似图11所示的内容，就是利用了刷新功能。
图11 Meta标签的刷新
URL(Uniform Resource Locator)是统一资源定位器，可以理解为Internet上的一个网址。如：http://www.google.com可以称作是URL。
5. 常用标签
HTML中有很多的标签，包括文本标签，段落标签等，下面我们介绍一些常用标签。见表1。
标签 说明
<b>
字体变粗体
<i>
文字变斜体
<u>
文字加下划线
<br>
换行
<p>
段落
<pre>
预格式化段落
<span>
行级层
<div>
块级层
<sub>
下标
<sup>
上标
<hr>
水平线
<hn>
文字标题
表1 常用标签
. <B> 、<I> 、<U>
这三个标签都属于文本标签，<b>标签用于将文字变为粗体，<i>标签用于将文字变为斜体，<u>标签用于为文字添加下划线。
代码演示：<B><I><U>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>粗体 | 斜体 | 下划线</title>
</head>
<body>
<b>粗体</b> <i>斜体</i> <u>下划线</u> ①
</body>
</html>
代码解析：
① <b>粗体的开始，</b>粗体的结束。
<i>斜体的开始，</i>斜体的结束。
<u>下划线的开始，</u>下划线的结束。
如图12所示的效果。
图12 粗体斜体下划线标签
. <BR>
<BR>标签用于换行。
代码演示：<BR>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>换行</title>
</head>
<body>
第一行<br> ①
第二行
</body>
</html>
代码解析：
① <br>表示换行，当浏览器遇到<br>
时就另起一行来显示<br>后面的文字。 图13 换行标签<br>
如图13所示的效果。
网页源代码中的回车在浏览器中并不表示换行。
. <P>
<P>标签表示段落。
代码演示：<P>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>段落</title>
</head>
<body>
<p align="center"> ①
<font color="#FF0000">第一个段落</font> ②
</p>
<p align="left">第二个段落</p>
</body>
</html>
代码解析:
① <p>表示段落，两个相邻的<p>之间
会空一行，如图14所示的效果。Align
是段落的对齐属性，有三个值“left”，
“center”，“right”,分别表示居左对
齐，居中对齐，居右对齐。<p>与<br>有
些相似，都表现出了换行，<br>换行时行
与行之间不空行。
图14 段落标签<p>
② <font>标签用来修饰字体，color属性表示字体的颜色，"#FF0000"是颜色值。
网页中的颜色用 # 开头，连接6位十六进制数表示，如 #336699。
. <PRE>
再来看看下面的代码演示，我们希望诗中的每一句话显示一行，但结果却没能实现，如图16所示。
代码演示：引入<pre>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>预定义格式</title></head>
<body>
<p>
静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</p>
</body>
</html>
代码解析：
图15 显示的结果中并没有按照预先定
义的格式显示。也就是说源代码中的回
车和空格是无效的。使用<pre>标签可以
轻松解决。
图15 引入pre
. <pre>
<pre>标签表示按照预定义格式显示段落。
代码演示：<pre>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>预定义格式</title></head>
<body>
<pre>
静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
</body>
</html> 图16 预格式化段落标签<pre>
代码解析：
① 如图16显示的结果，<pre>使得在HTML文件中采用的文字版面都原样显示在了浏览器中，这里的回车是有效的。
. <SPAN>
<SPAN>类似于<p>，也属于段落标签，通常称其为行级层，两个<span>之间不会空行，而是在同一行显示。
代码演示：<span>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>span</title>
</head>
<body>
<span>第一个span</span>
<span>第二个span</span> ①
</body>
</html>
代码解析:
① 两个并列的<span>显示在同一行，
如图17所示。
图17 <span>标签
. <DIV>
<DIV>类似于<SPAN>和<P>，也属于段落标签，通常称其为层。但是<DIV>是块级层，两个<DIV>之间会换行显示。
代码演示：<div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div</title>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div> ①
</body>
</html>
代码解析:
① 两个并列的<div>显示在两行，
如图18所示。
图18 <div>标签
Q 老师，块级层div与行级层span有什么区别呢？
A 块级层会另起一行来显示层中的内容，而行级层会在同一行显示内容，如图17是行级层，图18是块级层。
. <SUB>和<SUP>
<SUB>是下标标签， <SUP>是上标标签，它们属于文本标签，如图19所示。
代码演示：<sub>和<sup>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>sub和sup</title>
</head>
<body>
下标x<sub>y</sub><br>
上标x<sup>y</sup>
</body>
</html>
代码解析:
运行结果如图19所示。
图19 <sub>和<sup>标签
. <HR>
<HR>是水平线标签，如图20所示。
代码演示：<hr>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>hr</title>
</head>
<body>
<hr width="100" size="1" noshade> ①
</body>
</html>
代码解析:
① width="100"表示水平线的宽度为100px,
size="1"表示水平线的高度为1px。
noshade表示水平线没有阴影。
图20 水平线标签 <hr>
1． 在网页中宽度的单位叫像素，用px表示。
2． 当屏幕分辨率设置为1024 * 768 时，表示屏幕宽度平均分成1024个点，高度平均分成768个点，每一个点的大小是一个像素。
. <HN>
<Hn>表示文字的标题，属于文本标签，其中的n表示一个整数，取值范围是1-6,也就是说<hn>表示<h1> <h2> <h3> <h4> <h5> <h6>。代码演示如图21所示。
代码演示：<hn>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>hn</title>
</head>
<body>
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
</body>
</html>
代码解析:
运行结果如图21所示。
图21 标题标签<hn>
. 插入特殊字符
除了标签外，HTML中的特殊字符也有重要的作用。例如，要求在浏览器中显示<br>,如果将<br>直接写在源代码中，浏览器会将<br>解释成换行，而不会显示。
特殊字符以 & 开始，以 ; 结束。常用的特殊字符见表1。
代码演示：特殊字符
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>特殊字符</title>
</head>
<body>
<br> ①
</body>
</html>
代码解析:
① <是特殊字符，它被浏览器解释后
显示成< , >也是一个特殊字符， 图22 特殊字符
它被浏览器解释后显示成 > ，如图
22所示。
特殊字符 转义码
空格
<
<
>
>
￥
¥
“
"
.
©
.
®
±
±
‰
‰
÷
÷
表2 特殊字符
6. 本章总结
. HTML是超文本标签语言，用来描述网页中的内容。
. 常用的浏览器有IE、火狐和Chrome。
. HTML的文档结构包括HTML、HEAD和BODY。
. Meta标签中的charset用于设置网页的编码，gb2312是简体中文编码，Refresh用于网页的刷新。
. Dreamweaver是制作网页的工具。
. 常用的标签有<b><i><u><br><p><pre><span><div><sub><sup><hr><hn>。
HTML简介和基本标签
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
[转载]慎用标签 提交表单 [IE6无法提交表单][事件冲突]
我們都知道可以使用 [form].submit(); 來動態提交表單,但使用點擊<a/>標籤來提交表單, 會出現什麼情況呢?我們都知道, <a/>有個