HTML文档结构

曜兮

已于 2022-05-09 19:23:01 修改

阅读量2.4k

点赞数

文章标签： html 前端

于 2022-04-30 16:57:22 首次发布

本文链接：https://blog.csdn.net/yaowink/article/details/124511574

版权

HTML文档结构

标准的HTML文档是由标签和要显示在网页上的内容组成。HTML用于描述功能的符号称为“标签”，如<html>、<body>、<table>等。HTM L标签规定HTML文档的逻辑结构，并且控制文档的显示格式，然后由浏览器来负责解释并显示页面。通过使用标签可以区分文本文件的各个组成部分，对网页上的文字、表格、图片等多媒体数据所出现的位置、形式、顺序及网页间的超链接关系进行设定。

HTML标签：

标签都封装在一对尖括号“<…>”之中，标签只改变网页的显示方式，本身不会显示在窗口中。HTML文档中最先出现的标签是<html>标签，<html>标签是文档标识符，它是成对出现的，首标签<html>和尾标签</html>分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言（HTML）编写的，该标签不带任何属性。

事实上，我们现在常用的Web浏览器（FireFox和IE）都可以自动识别HTML文档，并不要求看<html>标签，也不对该标签做任何操作。但是，为了提高文档的适用性，使我们编写的HTML文档能够适应日新月异的Web浏览器，还是应该养成使用这个标签的习惯

在<html>．．．</html>之间主要包括了以下几个部分

头部标签<head>…</head>：

head使英文“头”的意思，习惯上用户把HTML文档分为文档头和文档主体两部分，文档主体部分就是在Web浏览器窗口的用户区内看到内容；而文档头部分用来规定该文档的不同（出现在Web浏览器窗口的标题栏中）和文档的一些属性，<head>标签对的作用就是控制文档的头部信息，此标签中间可以使用<title>…</title>,<script>…</script>标签对，在此标签中间可以放置用户编辑的JavaScript代码

HTML文档的标签是可以嵌套的；在一对标签中可以嵌入另一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在<head>…</head>标签对中使用代表主要有<title>标签

标题标签<title>…</title>

<title>标签是成对出现的，用来规定HTML文档的标题。在<title>和</title>之间的内容将显示在Web浏览器窗口的标题栏中。另外，<title>…</title>标签对，只能放在<head>…</head>标签对之间，而且其内部不能包含其他标签。

代码段“<title>个人资料</title>”，控制显示网页的标题。“个人资料”四个字出现在IE浏览器的最左上方

主体标签<body>…</body>

<body>标签是成对出现的。在<body>…</body>标签对之间的内容，将显示在Web浏览器窗口的用户区内，它是HTML文档的主体部分，可以把HTML文档的主体区域简单的理解为标题以外的所以部分，该部分可以包含<table>、<font>、<img>、<div>等标签。结束标签</body>指明主体区域的结尾。在<body>标签中可以规定整个文档的一些基本属性。

“bgcolor”：指定HTML文档的背景色

例：<body bgcolor=”00ff00”>

“text”：指定HTML文档中文字的颜色

“link”：指定HTML文档中待连接超链接对象的颜色

“alink”：指定HTML文档中连接中超链接对象的颜色

“vlink”：指定HTML文档中已连接超链接对象的颜色

“background”：指定HTML文档的背景文件

例：<body background=”1.jpg”>

特殊字符：

在HTML里有很多特殊的符号是需要特别处理的，例如，“<”、“>”这两个符号是用来表示标签的开始和结束的，是没有办法通过直接打“<”来呈现“<” 的，必须输入编码表示法：“<”。

通常情况下，HTML会自动截去多余的空格。不管加多少空格，都被看做一个空格。如果要显示空格多个空格，可以使用%nbsp；表示空格.

HTML格式标签：

HTML的格式标签的主要作用是在浏览器中控制文本对象的显示，包括段落、换行、水平线等标签，下面介绍几个常用的HTML格式标签。所有的格式标签都是嵌套在<body>…</body>标签对之间的

段落标签<p>

段落标签<p>的英文全称是Paragraph，几乎所有的HTML文档都离不开这个标签，而且在使用时必须成对出现。<p>… </p>标签对用于创建一个段落，在此标签中的文本以段落的方式显示在浏览器上。<p>… </p>段落标签对支持align属性设置对齐方式，语法如下：

属性align的功能是专门设定水平对齐位置，其常见的设定值有三个，也就是置左（align=“left”）、置中（align=“center”）、置右（align=“right”）。

换行标签<br>

换行标签<br>的作用是在不另起一段的情况下将当前文本强制换行，它的起始标签必须有，而结束标签是禁止出现的，也就是说<br>标签属于单独出现的标签，使用换行标签的代码如下：

<html>

<head>

</head>

<body>

<p>这段文字一个<br>包含了两个<br>强制换行标签</p>

</body>

</html>

预格式化标签<pre>希望在浏览器中显示的格式和编辑时的格式相同，

在HTML文档中，有时候设计者需要按照自己的格式编写源文件，标签<pre>…</pre>标签对可以完整保留设计者在源文件中所定义的格式，包括空格，缩进，以及其他特殊格式，全都原封不动的反映在浏览器的页面上，使用<pre>标签进行预格式化的代码如下：

<pre>

锄禾日当午，

汗滴禾下土。

谁知盘中餐，

粒粒皆辛苦。

</pre>

列表标签：

HTML文档中使用的列表主要有无序列表、排序列表、目录列表、菜单列表、描述性列表五种类型，下面有重点地分别进行介绍：

1.无序列表（ul）<li>

例：<ul>

<li>hello test</li>

</ul>

输出:

hello test
hello test

2.排序列表（ol）<li>

例：<ol>

<li>hello test</li>

</ol>

输出：

hello test
hello test

3.目录列表

4.菜单列表

5.描述性列表（dl）<dt>列表头<dd>列表内容

HTML超链接标签

HTML最显著的优点就在于它支持文档的超链接，用户可以很方便地在不同文档，以及同一文档的各段段落之间跳转。HTML中的链接包括两部分：锚标和目标点。锚标就是链接的源点，当鼠标被移到锚标处时会变成小手状。此时，用户通过单击鼠标就可以到达链接的目标点，目标点可以一张图片、一个网络文档、一个多媒体文件等。

属性href：

href是hypertext reference的缩略词，用于设定链接地址，其链接地址必须是URL地址，必须给出具体的路径，其中URL地址可以为下面内容：

（1）网址：可以设置IP地址或者是网络的地址。例如，链接到Google站点首页可以表示为以下形式：

<a href=”http://www.google.com”>Google</a>

<a href=”http://64.233.189.104/”>Google</a>

（2）网页：链接到本机的网页可以直接指定网页所在的路径

<a href=”index.html”>回到主页面</a>

（3）可执行文件：当链接到的文件的扩展名不是htm（html）或者asp(lsp/php)时，而是其他可执行的文件，会将链接到的文件下载到本地计算机上或者直接执行，如果是文本文件（如Word格式），则在浏览器中打开文件并进行编辑

<a href=”word.dor”>word文档，打开文档进行编辑</a>

<a href=”sound.wav”>播放声音文件</a>

<a href=”Javascript.open()”>执行对应的应用程序</a>

（4）网页上的书签：通常使用在网页的长度超过屏幕时，可以使用书签直接跳转到该书签指向的具体内容，节省移动滚动条的时间

属性target：

打开链接的位置由target属性进行控制，属性值分为_blank、_self、_parent、_top。target=“_blank”在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。此目标是默认的，所以通常不需要指定它，target=“_parent”将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档将载入整个浏览器窗口。target=“_top”将链接的文档载入整个浏览器窗口，从而删除所有框架。

上述代码表示，在新的窗口中打开搜狐首页

属性title：

这是一个很实用的属性，title属性可以用来为链接添加附加的解释信息，当鼠标悬停在有超链接的文字或图片等对象上的时候，显示该超链接的解释信息。以下代码，在显示的时候，当把鼠标放在超级链接文字上面时，浏览器会以浮动提示的方式显示解释信息“欢迎你”

属性name：

超级链接标签<a>同样可以用来进行文档内部定位，设计者需要做的就是首先在文档内设定一个标签，称为“锚定位”，这样做相当于在文档中的一个位置放置一个标签，通过超链接标签<a>的href属性，可以跳转到已经设置好的“锚定位”标签的位置。利用标签<a>的name属性可以实现文档内部的定位。代码的说明如下：

<p><a name=”myanchor”>需要设置定位的文本</a>

链接到E-mail地址：

可以使用电子邮箱作为超级链接的目标。一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建E-mail的窗口。用<a>可以实现这样的功能。使用格式如下所示。

以下代码添加一个电子邮箱地址链接。

<a href=”mailto:puerlove@sina.com”>个人邮箱地址</a>

HTML图像标签：

图像可以使Web页面更加生动美观，富有生机，Web浏览器可以显示JPEG和GIF图像。其中GIF图像最多只能使用256钟颜色（即只能保存为8位颜色），而JPEG格式可保存为24位，对具有连续色调的图像有最佳效果。不过，GIF图像虽然在图像质量上不及JPEG图像，但其占存储空间小，下载速度快，因此应视不同情况而决定应使用哪种格式的图像。对于徽标，公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像，应采用GIF格式，而对于扫描图片、艺术作品这种对于显示质量要求很高的图像则采用JPEG格式。

在HTML文档中插入图像是通过<img>标签来实现的，它只有起始标签没有结尾标签，所有图形样式都由<img>的属性决定，用法如下：

属性src：

src属性用来定义<img>图片的URL（统一资源定位器）地址，它是图片必不可少的属性。如果图片URL地址指定错误，在浏览器页面中图片的位置将会出现一个红色“X“号。src属性的使用方法如下：

URL表示图片的路径和文件名，比如URL可以是绝对路径http://www.baidu.com/images/1.gif,也可以是个相对路径“../images/1.gif“

属性alt：

alt属性用来显示图片的替换文本。当打开网页的过程中，遇到网络传输错误，或者设计者设定图片文件路径错误，图片无法正常显示时，替换文本可以暂时代替图片功能，起到一定的说明作用。正常情况下，鼠标到图上时，说明文字就会自动出现。例如下面的代码：

现在大多数浏览器都支持图片载入，但是目前搜索引擎抓取工具无法识别图像所含的文字，而alt属性的一个重要功能是写上图片的说明，便于搜索引擎抓取网页的内容

属性height和width：

<img>标签用width和height两个属性来规定图像的大小。其中width属性用于确定图像的宽度，height属性用于确定图像的高度、这两个属性的参数值都是数字，表示图像的宽度（高度）所占的像素点数。默认时，浏览器窗口自动调整图像的显示尺寸。

属性align：

align属性的作用是对齐图片，可以改变图片的垂直对齐方式（居上、居中、局下）和水平对齐方式（居左、居中、居右）

例：<img src=”1.jpg” align=”center”>

属性border：

默认情况下，浏览器显示图片是没有功能的，即边框宽度为0。如果设计者想要人为的加上图片边框，可以利用border属性，border属性的参数值也是数字，表示边框宽度所占的像素点数，用法同height和width属性。

例：<img src=”1.jpg” border=1.px>

HTML表格标签：

表格标签对于网页制作是很重要的，使用表格最明显的好处就是以行列对齐的形式来显示文本和数字信息，表格还可以固定文本或图像的显示位置。在创建结构化的Web页面时，利用表格将整个页面划分为若干区域，然后再在各个区域中填充具体的页面内容。因此，使用表格对页面进行布局的做法非常流行。

表格中不可缺少的标签主要有<table>标签、<tr>标签、<td>标签、下面就表格中常用的标签，再详细介绍，并对它们的属性进行说明。

表格标签<table>…</table>

<table>和</table>标签用来创建一个表格，它具有以下属性：通过width和height属性来设置表格的宽度和高度；通过border和bordercolor属性设置表格边框的像素值和颜色值；通过cell spacing属性和cellpadding属性设置单元格之间的空间大小，以及单元格的边框与其内部的文字之间的空间大小。

行标签<tr>…</tr>

<tr>和</tr>标签用来创建表格的每一行。此标签只能放在<table>和</table>标签对之间，而且在此标签对之间加入文本是无效的。标签对<tr>具有以下一些属性：

1.属性align

2.属性valign

3.属性bgcolor

单元格标签<td>…</td>

<td>和</td>标签是用来创建表格中每一行里的每一个单元格，此标签对只能放在<tr>和</tr>标签对之间才是有效的。想要输入的文本只能放在<td>和</td>标签对之间。<td>标签具有以下一些属性：

1.属性width和height

2.属性align和valign

3.属性colspan和rowspantd

表头标签<th>…</th>

<th>和</th>标签，用来设置表头，通常是黑体字居中文字，与<td>和</td>标签没有太大区别。大多数表格式的数据包含一行和一列表头，用来说明某一行或某一列数据的属性类别，这种情况就可以利用<th>和</th>标签的特点，来设置表头，此标签用来告诉浏览器将一个单元格的内容格式化为表头。

说明标签<caption>…</caption>

<caption>和</caption>标签是表格的说明文字，通常出现在表格的上方，主要用来总结表格的内容和提供表格内容的简明信息。新的HTML规范（从HTML4.0标准开始）规定，如果有标题元素，它必须跟踪表格的起始标签<table>之后。

HTML框架标签：

一个浏览器文档窗口中一般只能显示一个网页文件。但是，使用框架标签就可以将一个浏览器文档窗口分割为多个子窗口，每个子窗口中都可以显示一个独立的网页文件。

框架是由英文Frame翻译过来，它代表浏览器文档窗口中的一个子窗口，每个框架都可以显示一个HTML文件，多个框架组成一个框架集（Frameset）、框架集通常的使用方法是在一个框架中放置一个网页，此网页含有可以链接到其他多个网页的超链接条目，访问者单击这些超链接条目后，可以将超链接指向的网页文件显示在另外一个指定的框架内。如果要求在单个应用窗口中显示一个以上是网页，就可以使用框架。

框架集标签<frameset>…</frameset>

框架标签<frame>：

<trame>标签放在<frameset>和</frameset>标签之间，用来定义某一个具体的框架窗口。<frame>标签具有两个比较重要的属性。src和name属性，这两个属性都是必须赋值的。src指定整个框架窗口中初始装载的网页文件的URL地址，浏览器将会在此框架中显示src指定的HTML文档；name指定框架窗口的名字，这个名字是用来供超文本链接标签<a href=“”target=““>中的target属性指定链接的HTML文档将显示在哪一个框架中。例如，定义了一个框架名字为main，其他某个框架窗口中的超链接标签的target属性值等于这个框架窗口的名字main。当那个超链接被单击后，它指向的HTML文档将显示在main框架中。

标签<noframes>：

<noframes>和</noframes>标签对的作用是当浏览器使用的浏览器太旧，不支持框架这个功能时，看到的将会是一片空白。为了避免这种情况，可使用<noframes>这个标签，当使用的浏览器看不到框架时，就会看到<noframes>…</noframes>之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个框架的网页，或能自动切换至没有框架的版本。在此标签对之间，应该先紧跟<body>和</body>标签。

浮动窗口标签<iframe>…</iframe>

其他具体标签参考“菜鸟”。

框架的高级设置：

在设计应用中，还会使用框架的一些高级设置，如框架的嵌套和框架之间的连接。

1.框架的嵌套

2.框架间的链接

在超链接中通过“<a href=”1.html”target=”zhu”>HTML入门</a>”设置了target=“zhu”的属性，将链接页面的目的地设置为“zhu”的框架。点击超链接的文字“HTML”，命名为“zhu”的框架中的内容会发生相应的变化。

HTML表单标签：

表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息，使网页具有交互的功能。一般是将表单设计在一个HTML文档中，当用户填写完信息后做提交（submit）操作，表单的内容就会被传送到服务器上，等处理完毕后，再将结果信息返回到客户端。

表单标签<form>…</form>

<form>和</form>标签用来创建一个表单，在标签对之间的都属于表单的内容。<form>标签有三个比较常用的属性，具体如下：

1.属性action，指定提交给哪个页面

2.属性method，指定用哪种方法提交

3.属性target，目标

用户输入区域标签<input type=“”>

表单中提供给用户的输入形式一般使用<input type=””>标签来实现，此标签用来定义一个用户输入区，用户可以在其中输入信息，这个标签必须放在<form>和</form>标签之间，<input type=“”>标签提供了多种类型的输入区域，具体是哪一种类型由属性type决定，具体如下：

1.单行文本输入框<input type=“text”>

2.多行输入框<input type=“textarea”>

3.密码输入框<input type=“password”>

4.单选框<input type=“radio”>

5.复选框< input type=“checkbox“>

6.下拉框< input type=“select”>

7.提交< input type=“submit“>

8.重置< input type=“reset”>

9.图片提交< input type=“image“>

10.列表框

11.隐藏控件

曜兮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML文档结构

HTML文档结构标准的HTML文档是由标签和要显示在网页上的内容组成。HTML用于描述功能的符号称为“标签”，如<html>、<body>、<table>等。HTM L标签规定HTML文档的逻辑结构，并且控制文档的显示格式，然后由浏览器来负责解释并显示页面。通过使用标签可以区分文本文件的各个组成部分，对网页上的文字、表格、图片等多媒体数据所出现的位置、形式、顺序及网页间的超链接关系进行设定。HTML标签：标签都封装在一对尖括号“<…>”之中...
复制链接

扫一扫