访客留言网站网站快照优化公司
HTML 网页的介绍
HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建网页的标准标记语言,是一种与Python不同的编程语言。网页文件的扩展名通常为,html或.htm,这两种扩展名都可使用,并不会影响文件内容
简单的 HTML 网页框架
每一个HTML网页都包含一个基础框架,其他的内容都是在基础框架内进行扩充的。示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这里是标题</title>
</head>
<body>在这里填入正文</body>
</html>这是一个较为基础的HTML网页代码框架,读者可以将此代码单独保存为一个文件，需要注意的是文件的扩展名为.html而不是.py，如图14-1所示。使用浏览器打开此文件将会显示图14-2所示的网页，网页标题名称显示为“这里是标题”，网页中的内容显示为“在这里填入正文”
严格来说，HTML并不属于编程语言,而是一种标记语言,其代码以标签的形式来表示网页的内容。标签是由角括号(<>)括起来的具有特定语法功能的关键词组合而成的,例如以上示例代码中第5行的<title>。标签通常成对出现，以Ktit1e>这里是标题</title>为例，第1个<title>表明<title>功能标签的开始，第2个<title>的标签名前面有一个,表示<title>功能标签的结束,成对标签之间的内容为标签的内容，即“这里是标题”是<title>标签对的内容，一个完整的标签也可以称为网页中的一个元素。
框架分析
据14.1.1小节的HTML网页代码框架可知,网页的基础框架包含6个标签,下面将分别介绍这些标签的含义。<!DOCTYPE html>标签:用于声明此HTML网页为HTML5网页,此标签在整个网页中只需要一个HTML存在多个版本,例如HTML 2.0、HTML 3.2、HTML 4.1等。此标签的作用是帮助浏览器快速识别当前网页中的标签使用的是哪个版本，不同版本的HTML在标签上有差别。
示例代码(HTML 4.01的声明):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/htm14/loose,dtd"><html lang="en">标签:表示HTML网页的根元素,此标签需要成对出现,第1个<html>标签表示HTMI页面的开始,第2个</htmI>标签表示HTML网页的结束,标签之间是HTML网页的全部内容。此外标签中的屦性lang是language的缩写,表示该网页使用哪种语言,en表示english,即该网页使用的是英文。如果是中文网页则使用lang="zh-CN"。
ed标签:网页的头部标部;此标签需要成对出现。标签之间通常播入HTML品面的保圆、样式、元数内餐(此部分的内容并不是网页窗口中显示的内现内c charseT”UTE82标签:其中的<meta)标签用于福速基本的元教题,此标签在整个网页中只需项、为单标签，通常用和装明通设的描述、美键词、字符编码式幕的元数照，整作8,测览器获取到
meta name="keywords" content="python语言、办公自动化、网页"
该标签代码描述了网页的关键词为"PythOn语言、办公自动化、网页”、便于利用物素引警(例如百度)通过建词搜索到此网页。在搜索引擎中输入一段中文时，首先使用分词功能《所知用调素引繁(唱部)超司系将其与网页中的关键词相匹配，匹配概率最大的网页往往会被优先物索到(ite>标签;用于设置网页的标题,此标签需要成对出现，标签中的内容为网页标题。如图14-2所示的网
而最顶端显示了网页的标题为“这里是标题”cbody>标签:用于显示在网页窗口中的内容,即网页的正文，此标签需要成对出现,表示标签之间的内容都会显示在网页窗口中，例如图14-2所示的网页正文内容为“在这里填入正文”。<body标签中的内客可以入多个内容标签来充分地展示多元化的网页信息。
常用标签
本节主要介绍在HTML网页中的常用标签,例如标题标签、段落标签、超链接标签、注释标签等
标题标签
在HTML网页中，可以使用标签<h1>~<h6>来表示网页中正文内容的标题(不同于网页的标题),不同标题的显示效果不同，<h1>标签的标题级别高于<h2>标签的标题级别,依次类推,<h6>标签的标题级别最低。示例代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><h2>我是标题2</h2><h3>我是标题3</h3><h4>我是标题4</h4><h5>我是标题5</h5><h6>我是标题6</h6></body>
</html>该代码仅编写了网页正文<body>部分,整体框架内容可参考14.1.1</body>小节。使用浏览器打开该代码文件，会显示如图14-3所示的内容,其中(h1>标签对中的内容显示在网页的上方,且标签的内容显示效果(字体大小)为<h1>大于<h2>大于<h3>大于<h4>大于<h5>大于<h6>。
段落标签
在HTML网页中，可以使用<p>标签来表示一个段落的内容。示例代码:
<body><h1>我是标题1</h1><p>这里可以写一个段落的文字信息</p>
010203
04</body>第3行代码使用<p>标签对输入一段文字，用浏览器打开该代码冶田崖病文件后的网页显示效果如图14-4所示。
超链接标签
超链接标签<a>可用于实现在网页中单击某个信息链接后自动跳转到另一个网页。其使用形式如下:kahref-"链接的网址">链接的文字内容</a>
示例代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><p>这里可以写一个段落的文字信息</p><a href="https://www.ptpress.com.cn/">链接到人民邮电出版社</a></body>
</html>
第4行代码中的超链接标签内容为“链接到人民邮电出版社”,链接的网址为https://www.ptpress.comcn/periodical。其中href表示标签的属性(详见14.2.5小节),使用浏览器打开该代码文件后的网页显示效果如图14-5所示。A器警化州胞社红限公
这里是标影①localhost6334A
单击文字“链接到人民邮电出版社时，网页会自动跳转
我是标题1
に哎 镉
到人民邮电出版社的
这里可以写一个段落的文字信息
链接到人民邮电出版社
官网，如图14-6所示
注释标签
在HTML中也有和Python相同含义的注释功能,即当运行.html格式文件时,文件中的部分代码不会被执行,浏览器在读取标签时,也不会将此部分当成元素进行渲染。注释标签常用于开发人员对HTML网页的解释或备注中。注释标签由<!--->和<!-->构成。其使用形式如下:K!--在此处写注释->...内容く!-->
注释标签中的两个横线之间(在此处写注释)可用于描述备注,由注释标签包括起来的内容将不会被执行
示例代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><p>这里可以写一个段落的文字信息</p><h2>我是标题1</h2></body>
</html>第3行一第5行代码使用了注释标签，因此第4行代码不会发微行，目第3行代码给这段被注释的代码的备注为“下面的<p>标签发注了”将该代码文件保存并使用浏览器打开后的网页盘示效美组图1-所示,网页中没有显示<p>标签的内容。
标签属性
一个标签除了标签名、标签内容外，还可以包含标签属性。标签属性用于给标签设置附加功能，类似于python语言中类的方法,当通过类创建出一个对象时，如果对象包含武他的属性和方法，该对象便具备更多的功能。同理当给标签赋予多种不同含义的属性后，标签也能具备更多的功能。
属性一般位于开始标签的标签名右边，且属性的值为字符唱类型，需要用引号引起来
示例代码:
kahref-"https://www.ptpress.com.cn">链接到人民邮电出版社</>
这是一个名为a的标签，其属性herf表示超链接,可以实现单击<a>标签的内容便能链接到其他网站、标签图片等。该标签的属性值为人民邮电出版社官网网址，单击“链接到人民邮电出版社”即可自动跳转到该网址。常用的标签属性有class、id、style和title。
class:为HTML网页元素定义一个或多个类名。
id:定义元素的唯一id,此id值在整个网页中是唯一的。
style:定义标签的行内样式。
title:设置标签的额外信息，当鼠标指针移到此标签上时会显示一段提示文本。示例代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><p>这里可以写一个段落的文字信息</p><h2>我是标题1</h2></body>
</html>第4行代码使用了<h3>,设置其属性id为'python'(在学习第15章的内容时会经常利用id的值来查找标05</body>签),以便获取标签内的信息。属性title的值为'我是提示信息’，当用户把鼠标指针放在<h3>标签的内容上时,网页会自动弹出提示信息,如图14-8所示。属性style="color:#799961;"表示定义此标签的样式,其中样式值为"color: #799961;",即设置标签内容的颜色(颜色为十六进制符号，可参考本书附录中的“常见颜色码对照表”)。更多的style属性值会在14.3节中详细介绍。