首页 前端设计正文

1.7 HTML的标记构成

kumb 前端设计 2020-06-02 21:28:57 652 0

1.7.1 HTML标记的使用技巧

1.HTML标记

一个HTML文件是由一系列的元素和标记组成的。元素是HTML文件的重要组成部分,如title(文件标题)、img(图像)及table(表格)等。元素名不区分大小写。HTML用标记来规定元素的属性和它在文件中的位置。

HTML的标记分单独出现的标记和成对出现的标记两种。

大多数标记成对出现,由首标记和尾标记组成。首标记的格式为<元素名称>,尾标记的格式为</元素名称>。其语法如下:


<元素名称>要控制的元素</元素名称>


成对标记仅对包含在其中的文件部分发生作用,例如<title>和</title>标记用于界定标题元素的范围,也就是说,<title>和</title>标记之间的部分是此HTML文件的标题。

单独标记的格式为<元素名称>,其作用是在相应的位置插入元素,如<br/>标记便是在该标记所在位置插入一个换行符。

说明 在每个HTML标记中,大、小写混写均可。例如<HTML>、<html>和<Html>,其结果都是一样的。

在每个HTML标记中,还可以设置一些属性,控制HTML标记所建立的元素。这些属性将位于所建立元素的首标记。首标记的基本语法如下:


<元素名称属性1="值1" 属性2="值2"……>


而尾标记的建立方式则为:


</元素名称>


因此,在HTML文件中某个元素的完整定义语法如下:


<元素名称属性1="值1" 属性2="值2"……>元素资料</元素名称>


说明 语法中,设置各属性所使用的""可省略。

2.元素的概念

当用一组HTML标记将一段文字包含在中间时,这段文字与包含文字的HTML标记被称为一个元素。

由于在HTML语法中,每个由HTML标记与文字所形成的元素内,还可以包含另一个元素,因此,整个HTML文件就像是一个大元素,其中包含了许多小元素。

在所有HTML文件中,最外层的元素是由<html>标记建立的。在<html>标记所建立的元素中,包含了两个主要的子元素,这两个子元素是由<head>标记与<body>标记所建立的。<head>标记所建立的元素的内容为文件头,而<body>标记所建立的元素的内容为文件主体。

3.HTML文件结构

在介绍HTML文件结构之前,先来看一个简单的HTML文件及其在浏览器上的显示结果。

下面开始编写一个HTML文件,使用任一文件编辑器,例如Windows自带的记事本。


<html>

<head>

<title>文件标题</title>

</head>

<body>

文件正文

</body>

</html>


运行效果如图1.1所示。

Image00002.jpg

图 1.1 HTML示例

从上述代码中可以看出,HTML文件的基本结构如图1.2所示。

Image00003.jpg

图 1.2 HTML文件的基本结构

其中,<head>与</head>之间的部分是HTML文件的文件头部分,用以说明文件的标题和整个文件的一些公共属性;<body>与</body>之间的部分是HTML文件的主体部分。下面介绍的标记,如果不加特别说明,均是嵌套在这一对标记中使用的。

1.7.2 开始标记<html>

在任何一个HTML文件里,最先出现的HTML标记就是<html>,它用于表示该文件是以超文本标记语言(HTML)编写的。<html>是成对出现的,首标记<html>和尾标记</html>分别位于文件的最前面和最后面,文件中的所有内容和其他HTML标记都包含在其中。例如:


<html>

文件的全部内容

</html>


该标记不带任何属性。

事实上,现在常用的Web浏览器(例如IE)都可以自动识别HTML文件,并不要求有<html>标记,也不对该标记进行任何操作。但是,为了提高文件的适用性,使编写的HTML文件能适应不断变化的Web浏览器,还是应该养成使用这个标记的习惯。

1.7.3 头部标记<head>

习惯上,把HTML文件分为文件头和文件主体两个部分。文件主体部分就是在Web浏览器窗口的用户区内看到的内容,而文件头部分用来规定该文件的标题(出现在Web浏览器窗口的标题栏中)和文件的一些属性。

<head>是一个表示网页头部的标记。在由<head>标记所定义的元素中,并不放置网页的任何内容,而是放置关于HTML文件的信息,也就是说它并不属于HTML文件的主体。它包含文件的标题、编码方式及URL等信息。这些信息大部分是用于提供索引、辨认或其他方面的用途。

写在<head>与</head>中间的文本,如果又写在<title>标记中,表示该网页的名称,并作为窗口的名称显示在这个网页窗口的最上方。

如果HTML文件并不需要提供相关信息,则可以省略<head>标记。

1.7.4 标题标记<title>

每个HTML文件都需要有一个文件名称。在浏览器中,文件名称作为窗口名称显示在该窗口的最上方,这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己很有用,今后想经常阅读,可以选择IE浏览器“收藏”菜单中的“添加到收藏夹”命令将它保存起来,供以后调用。网页的名称要写在<title>和</title>之间,并且<title>标记应包含在<head>与</head>标记之内。

HTML文件的标记是可以嵌套的,即在一对标记中可以嵌入另一对子标记,用来规定母标记所含范围的属性或其中某一部分内容。嵌套在<head>标记中使用的主要就是<title>标记。

1.7.5 主体标记<body>

<body>标记是成对出现的。网页中的主体内容应该写在<body>和</body>之间,而<body>标记包含在<html>标记里面。

1.7.6 编写文件时的注意事项

在编写文件的时候,要注意以下事项:

1)“<”和“>”是任何标记的开始和结束。元素的标记要用这对尖括号括起来,并且结束的标记总是由在开始的标记前加一个斜杠构成。

2)标记与标记之间可以嵌套,如:


<H3><CENTER>HTML文件</CENTER></H3>


3)在源代码中不区分大小写,如以下几种写法都是正确并且相同的标记:


<HEAD>

<head>

<Head>


4)任何回车和空格在源代码中不起作用。为了使代码清晰,建议在不同的标记之间加入回车。

5)HTML标记中可以放置各种属性,如:


<h3 align="center">HTML你好</h3>


其中align为属性,center为属性值,元素属性出现元素的<>内,并且和元素名之间由一个空格分隔,属性值可以直接书写,也可以使用""扩起来。如下面的两种写法都是正确的:


<h3 align="center">HTML你好</h3>

<h3 align=center>HTML你好</h3>


6)如果希望在源代码中添加注释,可以以“<!--”开始,编写注释内容,以“--!>”结束。如下代码:


<!------------------------------------------------!>

<!--文件范例:1.2.htm--!>

<!--文件说明:第一个HTML文件--!>

<!--------------------------------------------!>


注释语句只出现在源代码中,而不会在浏览器中显示。

我们致力于为三农(农业、农村、农民)提供专业物联网解决方案,同时也提供应用软件、微信小程序、手机App、企业网站的开发和跨境电商建站、网络营销等服务,站长微信号(mywit_net),添加后备注“黎辉物联网”,如有相关需求也可通过电子邮件(12tc@sina.cn)与我们取得联系

本站内容均来自互联网,如有涉及到侵权行为,请你及时与站长联系删除!

本文链接:https://kumb.cn/946.html

发表评论

评论列表(0人评论 , 652人围观)
☹还没有评论,来说两句吧...