第二节 HTML基本架构学习
一个基本的网页文件的组成，我们来看一个简单的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!
DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>这里是主题title</
title
>
<!--
Author 一个俗人
Company IT技术交流学习
Contact Info www.zixun.com
-->
</
head
>
<
body
bgcolor=”red” text=”blue”>
欢迎访问<
a
href
=
http
://www.zixun24.com>zixun24技术交流网页</
a
>!
<
br
>
<
p
>红色背景，蓝色文字</
p
>
</
body
>
</
html
>
|
<!DOCTYPE> 标签
文档类型定义标签。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
- <!DOCTYPE >标签中：
- html指定文件类型的名称。
- PUBLIC表明所依据的DTD文件可对于任何人公开访问，而不是某个公司的内部规范文件。
- “-//W3C//DTD HTML 4.01 Transitional//EN”指定改HTML版本的标识名称，是HTML4.0。
- “http://www.w3.org/TR/html4/loose.dtd”指定该HTML语言的定义规范文件在Internet上的位置。loose.dtd表明该网页文件包含HTML4.01指定的元素和不包含HTML4.01标准的元素。strict.dtd表明严格遵守HTML4.01指定的元素。frameset.dtd表明了包含HTML4.01包含的元素外还包含框架元素。
<html>标签
HTML 文档标签。
所有的HTML文档都应该有一个<html>标签,HTML标签都放在<html> </html>之间，并且是成对出现。
一对<html></html>标签可以包含两个部分:<head></head>和<body></body>。
<head>标签
<head> 标签用于定义文档的头部
<head></head>标签用于包含整个文件的一般信息，比如文件的标题（<title>标签用于包含标题），对整个文件的描述，文件的关键字等等。
<head></head>标签对之间的内容是大多数都是不会再浏览器中显示出来的。
<title>标签
<title> 元素可定义文档的标题。
<title></title>标签对之间所输入的内容，用于显示网页的主题。
<body>标签
body 元素定义文档的主体。
<body></body>标签对之间定义了HTML文件的主题部分，在此标签对之间的内容是需要在你浏览器中显示出来的内容。
<body>标签中的属性：
Text属性：用于设定这个网页的文字颜色。
link属性：用于设定一般的超链接文件的显示颜色。
alink属性：用于设定鼠标移动到超链接上时候，连接文本的显示颜色。
vlink属性：用于设定访问过的超链接文本的显示颜色。
background属性：用于设定背景墙纸所用的图像文件，可以时gif或者jpeg文件的绝对或者相对路径。
leftmargin属性：设定网页显示画面与浏览器窗口左边沿的间隙，单位为像素。
topmargin属性：设定网页显示画面与浏览器窗口上边沿的间隙，单位为像素。
class、name、id、style 等属性。
常用标签介绍
<a> 标签
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
超链接就像是书的索引一样，我们用鼠标点击超链接就会自动打开超链接指向的网页文件，这样就可以实现从一个网页跳转到另外一个网页的功能。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
<a>标签可以包含文本，也可以包含图片。
|
1
2
3
4
5
6
7
|
</
a
>
|
<b> 标签
<p>这是普通文本 – <b>这是粗体文本</b>。</p>
<u> 标签
使用 <u> 标签为文本添加下划线：
<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>
<i> 标签
<i> 标签显示斜体文本效果。
<i>italic</i>
<h1> 到 <h6> 标签
用来表示标题的标签。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<font>标签
用来改变字体、字号、文字颜色。
<font size="3" color="red">字号是3</font>
<font size="2" color="blue">字号是2</font>
<font face="黑体" color="green">黑体字</font>
<hr> 标签
<hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。
<h1>This is header 1</h1>
<hr width=”90%” color=”red” />
<p>This is some text</p>
<img> 标签
图像标签
<img>标签用于在页面上添加图片，src属性指定图片的地址，如果无法打开src指定的图片，浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src=”http://www.w3.org/Icons/valid-xhtml10″ alt=”图片简介” />
<p> 标签
段落标签。
由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。
|
1
2
|
<
p
>这是第一段。</
p
>
<
p
>这是第二段。</
p
>
|
也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。
<div> 标签
区域或者说是部分标签。
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
有时，要把文档看作不同的部分组合起来的，比如一个典型的页面可能包括三个部分：页头，主体，页脚。<div>标签专门用于标明不同的部分：
|
1
2
3
|
<
div
>页头内容</
div
>
<
div
>主体内容</
div
>
<
div
>页脚内容</
div
>
|
<dl> 标签
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
|
1
2
3
4
5
6
|
<
dl
>
<
dt
>计算机</
dt
>
<
dd
>用来计算的仪器 ... ...</
dd
>
<
dt
>显示器</
dt
>
<
dd
>以视觉方式显示信息的装置 ... ...</
dd
>
</
dl
>
|
<ul> 标签
HTML 无序列表标签。
无序列表表示一系列类似的项目，它们之间没有先后顺序。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
html
>
<
body
>
<
h4
>一个无序列表：</
h4
>
<
ul
>
<
li
>咖啡</
li
>
<
li
>茶</
li
>
<
li
>牛奶</
li
>
</
ul
>
</
body
>
</
html
>
|
<ol> 标签
HTML有序 列表标签。
有序列表中各个项目间的顺序是很重要的，浏览器通常会自动给它们产生编号。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!
DOCTYPE
html>
<
html
>
<
body
>
<
ol
>
<
li
>咖啡</
li
>
<
li
>牛奶</
li
>
<
li
>茶</
li
>
</
ol
>
<
ol
start
=
"50"
>
<
li
>咖啡</
li
>
<
li
>牛奶</
li
>
<
li
>茶</
li
>
</
ol
>
</
body
>
</
html
>
|
<pre> 标签
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
例如我们需要显示一段HTML代码：
|
1
2
3
4
5
|
<
pre
>
<
font
size
=
"3"
color
=
"red"
>字号是3</
font
>
</
pre
>
|
<frame> 标签
框架页标签。
框架页标签，曾经非常流行的技术，框架使一个窗口里能同时显示多个文档。主框架页里面没有<body>标签，取代它的是<frameset>。
<frameset> 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，<frameset> 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
<frameset>标签的属性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（宽度）。
<frameset>标签可以包含<frame>标签，每个<frame>标签代表一个文档（src属性指定文档的地址）。
如果觉得这样的页面还不够复杂的话，还可以在<frameset>标签里包含<frameset>标签。
|
1
2
3
4
5
6
7
|
<
frameset
rows
=
"15%,*"
>
<
frame
src
=
"top.html"
name
=
title
scrolling
=
no
>
<
frameset
cols
=
"20%,*"
>
<
frame
src
=
"left.html"
name
=
sidebar
>
<
frame
src
=
"right.html"
name
=
recipes
>
</
frameset
>
</
frameset
>
|
<!–…—> 标签
HTML中的注释
注释标签用于在源代码中插入注释。注释不会显示在浏览器中。
您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）：
|
1
2
3
4
5
6
7
|
<
script
type
=
"text/javascript"
>
<!--
function displayMsg(){
alert("Hello World!")
}
//-->
</
script
>
|
注释：注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 –> 标签。
HTML的注释标签不能嵌套使用。
HTML的特殊符号和字符
例如需要在网页上显示<html>这样的信息，就要用到 <html> 这样的字符来显示。
空格用：
例如需要在，“你好”和“世界！”之间输入五个空格
你好 世界！
这个用来表示HTML的特殊符号，就是HTML编码。
对于一些不能用键盘输入的符号也需要用HTML编码来表示。
HTML的编码是由：
&开头+字母+;结尾，或者&#+数字+;结尾。
用数字表示的方式被称为数值码，字母表示的方式被称之为引用实体，两种方式都可以表示HTML的编码。例如：
®
| 结果 | 引用实体 | 编码 |
| ∑ | ∑ | ∑ |
| ∅ | ∅ | ∅ |
| “ | " | " |
| ‘ | ' | ' |
| & | & | & |
| < | < | < |
| > | > | > |
| © | © | © |
| ® | ® | ® |
HTML 统一资源定位器
URL – Uniform Resource Locator
URL 也被称为网址。
URL的基本组成：协议、主机明、端口号、资源明。
例如网址：httt://www.zixun24.com:80/index.html，遵守以下的语法规则：
解释：
- scheme – 定义因特网服务的类型。最常见的类型是 http
- host – 定义域主机（http 的默认主机是 www）
- domain – 定义因特网域名，比如 zixun24.com
- :port – 定义主机上的端口号（http 的默认端口号是 80）
- path – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename – 定义文档/资源的名称
URL Schemes
以下是其中一些最流行的 scheme：
| Scheme | 访问 | 用于… |
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
URL 字符编码
URL 编码会将字符转换为可通过因特网传输的格式。
规则：
- URL 只能使用 ASCII 字符集来通过因特网进行发送。
- 对0-9，a-z，A-Z之间的字符保持不变。
- 由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
- URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
- URL 不能包含空格。URL 编码通常使用 + 来替换空格。
以上只是对一个网页文件的基本架构做了一个简单的概述，对没有接触过HTML的新手起到一个引导作用，让其可以对HTML有一个初步的印象。其中还有很多的HTML知识和标签都没有谈到后面的章节还会学习到一些，还有很多需要网友们自己去学习了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
