HTML的全称为超文本标记语言（英语：HyperText Markup Language，简称：HTML），是一种用于创建网页的标准标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以用来声明文字，图形、动画、声音、表格、链接等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zvvcgx61-1639323437067)(media/afe2fed7841303d07426d04839eab479.jpeg)]

图1-1

1990 年，由于对 Web 未来发展的远见，Tim Berners-Lee 提出了超文本的概念，并于第二年在 SGML (en-US) 的基础上将其正式定义为一个标记语言。

IETF (en-US) 于 1993 年正式开始制定 HTML 规范，并在经历了几个版本的草案后于 1995 年发布了 HTML 2.0 版本。

1994 年，Berners-Lee 为了 Web 发展而成立了 W3C (en-US)。

1996 年，W3C 接管了 HTML 的标准化工作，并在1年后发布了 HTML 3.2 推荐标准。

1999 年，HTML 4.0 发布，并在 2000 年成为 ISO (en-US) 标准。

2014 年发布了 HTML5 标准的最终版。

遵循 Web 标准，有利于不同浏览器统一正确显示网页。浏览器开发商和 Web 程序开发人员遵守指定的标准更有利于 Web 更好地发展。开发人员按照 Web 标准制作网页，使网站更易于维护。遵守标准的 Web 页面可以使得搜索引擎更容易访问并收录网页，内容能被更广泛的设备访问，提高页面浏览速度等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EhOJQvnT-1639323437069)(media/d0b79cfa58318cc9ae67b518fb664f77.png)]

图1-2

Web 标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的 一系列标准。这些标准大部分由 W3C 起草发布，也有部分标准由 ECMA 起草发布。

Web标准主要包括：结构标准、表现标准和行为标准。

• 结构标准：用于对网页元素进行整理和分类，主要包括XML和XHTML两部分。

• 表现标准：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是css。css(Cascading Style Sheets)：层叠样式表。

• 行为标准：指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两部分。DOM(Document Object Model)是文档对象模型。ECMAScript是ECMA(European Computer Manufacturers Association)以javaScript为基础制定的标准脚本语言。

W3C 创建和维护Web标准。W3C是World Wide Web Consortium万维网联盟，创建于 1994 年是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

蒂姆·伯纳斯·李（Tim Berners-Lee）是万维网联盟创始人被称为互联网之父

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6bgRNIp0-1639323437070)(media/6dbeeb9be60a83718700a5e35f29519a.png)]。

图1-3

前端即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。

前端语言：HTML、HTML5、CSS、CSS3、JavaScript等

例如：电脑端天猫商城网站(如图：1-4所示)和移动端天猫商城(如图：1-5所示)均属于前端页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iEZXmCoZ-1639323437073)(media/a9d7455bfec1114c0b4e7593a755b421.png)]

图 1-4

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CtembHqG-1639323437076)(media/282f038f987ba4c2b2cbb5542760570a.jpeg)]

图1-5

后台又称后端或者服务器端，主要指运行在服务器上的应用程序，它负责监听特定端口，并接收客户端的请求以及对客户端的请求作出响应。

那么通过前面我们对前端和后台的了解，前端开发人员和后端开发人员是如何做数据对接的呢？

下面我们通过简单给大家介绍http协议，来了解一下前后端的交互逻辑。

一次完整浏览器的请求后端的过程如图1-6所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-09kqMPrg-1639323437081)(media/3cc667de2f15539f8a328ed5cef30b64.png)]

图1-6

整个过程可以描绘成如下：

1. 浏览器通过 DNS 把域名解析成对应的IP地址；

2. 根据这个 IP 地址在互联网上找到对应的服务器，建立连接；

3. 客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档；

4. 在服务器端，实际上还有复杂的业务逻辑比如服务器可能有多台，到底指定哪台服务器处理请求。都需要一个负载均衡设备来平均分配所有用户的请求，还有请求的数据是存储在分布式缓存里还是一个静态文件中，或是在数据库里，完成以上操作之后，服务器将相应的数据资源返回给浏览器；

5. 客户端与服务器断开。由客户端解析HTML文档，在客户端屏幕上渲染图形结果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XME5RoDz-1639323437085)(media/12528c0b17cbc62287ee70f32f5cdef1.png)]

图1-7

浏览器即网页浏览器，是网页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Edge、Safari和Opera等。我们平时称为六大浏览器，如下图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9DAGQTC-1639323437091)(media/f7efcb7dc077b89d68fcc3a24401cee0.png)]

图1-8

1.Chrome 浏览器

Chrome 浏览器是 google 旗下的浏览器。Chrome 浏览器至发布以来一直讲究简洁、快速、安全，所以 Chrome 浏览器到现在一直受人追捧。最开始 Chrome 采用 webkit 作为浏览器内核，直到 2013 年，google 宣布不再使用 webkit 内核，开始使用 webkit 的分支内核 Blink。

2. Firefox 浏览器

Firefox 浏览器是 Mozilla 公司旗下浏览器，也是网景公司后来的浏览器。网景被收购后， 网景人员创办了 Mozilla 基金会，这是一个非盈利组织，他们在 2004 年推出自己的浏览器 Firefox。Firefox 采用 Gecko 作为内核。Gecko 是一个开源的项目，代码完全公开，因此受到很多人的青睐。

3. Safari 浏览器

2003 年，苹果公司在苹果手机上开发 Safari 浏览器，利用自己得天独厚的手机市场份额使 Safari 浏览器迅速成为世界主流浏览器。Safari 是最早使用 webkit 内核的浏览器也是现在苹果默认的浏览器。

4. Opera 浏览器

Opera 是挪威 Opera Software ASA 公司旗下的浏览器。1995 年，Opera 公司发布第一版 Opera 浏览器，使用自己研发的 Presto 内核。2016 年奇虎 360 和昆仑万维收购了 Opera 浏览器，从此也丢弃了强大的 Presto 内核，改用当时 Google 开源的 webkit 内核。后来 Opera 浏览器跟随 Google 将浏览器内核改为 Blink 内核。自此 Presto 内核也淡出了互联网市场。

5. IE 浏览器

IE 是微软公司旗下浏览器，是目前国内用户量最多的浏览器。

6.Edge 浏览器

Microsoft Edge（简称ME浏览器）是由微软开发的基于 Chromium 开源项目及其他开源软件的网页浏览器。

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。

常见的浏览器内核有：Trident（也称 IE 内核）、webkit、Blink、Gecko等。

1. Trident内核

代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

1. Gecko内核

代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。

1. WebKit内核

代表作品有Safari、Chrome。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。

1. Presto内核

代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。但2016 年奇虎 360 和昆仑万维收购了 Opera 浏览器，从此也丢弃了强大的 Presto 内核，改用当时 Google 开源的 webkit 内核。后来 Opera 浏览器跟随 Google 将浏览器内核改为 Blink 内核。

1. Blink内核

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

渲染引擎即浏览器内核决定了浏览器如何显示网页的内容，不同的浏览器内核对网页编 写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能 不同，网页开发者需要实现跨浏览器的兼容，熟悉浏览器内核是非常有必要的。

纯文本：纯文本只包含文字内容，不能包含文字以外的，例如图片、视频等，不能传输文字样式，常见的纯文本格式文件.txt,.html,.css,.js。

超文本：超文本文件是一种含有特殊标记的文本文件，其作用类似于word中的排版标记，常用格式.doc，.ppt。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RKVFDR2K-1639323437093)(media/0cde825421ae675b45fd131fcb2529bc.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X52lIhat-1639323437096)(media/88442f6cc1d247ab030f1cbbe80b88ae.png)]

图1-9

在前端开发过程中，通过记事本即可以进行HTML网页的编写，但是如果开发大型复杂的网页，使用记事本则会显得效率非常低下，因此在开发过程中我们一般会借助于开发工具来进行编程。

市面上常见的开发工具有：Dreamweaver、sublime Text、webstorm、HBuilder、Visual Studio Code等。

Dreamweaver：Adobe Dreamweaver，简称“DW”，中文名称 “梦想编织者”，DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

Sublime Text：Sublime Text 是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

WebStorm：WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

HBuilder：HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

Visual Studio Code：Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，MacOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1rLHTkiT-1639323437099)(media/8148865358b600076e47bda4c1b6a807.png)]

图1-10

编辑器是用来提升编程效率的工具，每一个开发者可以根据个人的喜好使用不同的编辑器，本书将采用Visual Studio Code作为开发工具来进行案例和项目的编写。

vscode官网https://code.visualstudio.com/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhJBC6d3-1639323437101)(media/926302a1f1ce7a4c2050322306a4d072.png)]

图1-11

点击下载按钮，根据操作系统平台下载对应的安装包，本书以Windows为例，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qP9EvtRb-1639323437102)(media/9fbbd3db5f04b1bb3ff27095738c2f58.png)]

图1-12

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QeueVlEI-1639323437104)(media/113b6403b385ced922dc46a3f67c9428.png)]

图1-13

下载之后的安装包，如图1-14所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TmOFrrgg-1639323437106)(media/3c21fb03f0fe0b1a0344d9a39c0dfd6a.png)]

图1-14

点击安装软件，安装完毕之后打开软件，如图1-15所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rvKrCpoi-1639323437108)(media/9c6cd82608b1216663814d8c974a1085.png)]

图1-15

vscode不仅工具自身强大，而且支持在线安装插件，通过安装各色的插件，可以使开发更加舒适和便捷。

在上一小节中，打开安装好的vscode编辑环境，我们发现页面均为英文的，因此可以通过安装插件来完成工具的汉化。

1. 插件安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WbqSIib5-1639323437110)(media/b7aab079ff9b8f1f84ff00513cc4dd10.png)]

图1-16

点击安装插件的按钮，输入“Chinese”，选择安装汉化插件，重启工具之后，即完成第一个插件的安装。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6AJGd985-1639323437112)(media/b97754682c6a844b4e88645072a22291.png)]

图1-17

重启之后的效果如图1-18所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZhSnBaGx-1639323437113)(media/74e0d2f10981c78ff4fba7f1529ebd54.png)]

图1-18

常用必备插件:Elm Emmet、HTML CSS Support、HTML Snippets、Sublime Text Keymap and Settings Importer

1. 编辑器的使用

可以通过开始菜单新建文件或文件夹，也可以通过新建文件夹之后拖拽到编辑器的编辑区来使用编辑器。

例如：首先新建自己的文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYR26Eqz-1639323437114)(media/fde1ab6ecb5df0c82f49066283ad1d45.png)]

图1-19

vscode部分常用快捷键如下表所示：

表1-1

使用工具新建一个名称为1-1.html的文件，在新建的文件中输入!（注意：英文），则会出现自动提示，按下回车键，则自动生成了如下页面结构：

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<title>Document</title>

</head>

<body>

</body>

</html>

在body中间输入“Hello world ！”，运行文件，则页面显示结果如图1-20所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVCfnjri-1639323437117)(media/81c00aca2523d4ea5c4c13503234d424.png)]

图1-20

一个简单的HTML页面骨架代码如下所示：

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<title>Document</title>

</head>

<body>

</body>

</html>

DTD（Document Type Definition，文本类型定义），必须出现在第一行。是为了告诉浏览器该文件的类型，让浏览器解析器知道应该用哪个规范来解析文档。

<!DOCTYPE html>

<!>，表示警示标签。

DOCTYPE表示文档类型，html就是HTML超文本标记语言。

整个网页必须被<html></html>包裹，它里面有<head></head>和<body></body>两部分。

<head></head> ： 网页的头部，一般用来进行网页的配置

<body></body> ： 网页的正式内容，浏览器可视区域

标签有一个属性lang，是英语language语言的意思，表示整个网页的主体语言。

en表示英语。中文的表示法有三种：zh、cn、zh-CN。

需要注意的是，无论哪种语言，都需使用英文开发。

<html lang=“en”>

<html lang=“zh-CN”>

在head标签中，是一个个文件的配置，而且几乎所有的配置都是写在meta标签中的。

meta就是“元”的意思，表示基本配置。<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

首先映入眼帘的是配置字符集：

<meta charset=“UTF-8”>

charset是英语character set文字集合的意思。

什么是字符集呢？

在计算机中所有的字实际上都是按某种规律排列而成。这个规律是什么呢？不同的字符集有不同的规律。

不同字符集中的字，在计算机内部表达不一样的，常见的字符集有ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等(如表1-2所示)。

表1-2

什么时候使用utf-8，什么时候使用gbk？

如果你的网页使用场景是面向群体是国际化的，使用utf-8，比如中华网；如果面向群体主要是国内，使用gbk比如腾讯网。

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

视口标签的添加与否有何区别呢？

如果不加这个视口，手机看这个网页是“俯瞰”模式，将以980px宽度俯瞰页面，如图1-21所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I8RxGBpD-1639323437119)(media/d300086b9f1e0d191d83ccde4a4594de.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-68MY2BHj-1639323437124)(media/967aace31ccf0484d531f6a66b7891a1.png)]

图1-21 图1-22

如果加上这个视口，手机看网页就是“APP”模式，将以APP的状态、字号看页面，如图1-22所示。

edge是win10中的IE升级版浏览器，下面代码的意思表示设置兼容性为让edge和ie渲染方式一样。

<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

类似的还有一些“双核浏览器”比如360浏览器、QQ浏览器、搜狗高速浏览器、百度浏览器、猎豹浏览器等，都可以加上这句话，表示尽可能的用高级核打开页面：

<meta name=“renderer” content=“webkit”>

title就是在浏览器选项卡的区域显示的文字：

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<title>我是title</title>

</head>

<body>

</body>

</html>

运行效果如图1-23所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IlSl4I7l-1639323437127)(media/83b79abfaf85e6b1f94a3ddfa39c3f7b.png)]

图1-23

SEO（search engine optimization，搜索引擎优化），最基本的SEO技术就是把keywords写好。keywords就是网页关键字。

name属性一定要设置为keywords，content就是关键字的内容，中间用逗号隔开。

<meta name=“keywords” content=“前端,HTML,JavaScript”>

以腾讯网为例，看到源码，keywords和description。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-58sx7x73-1639323437128)(media/f6637e1736e97ce76347d029849f1639.png)]

图1-24

搜索引擎搜索腾讯网展示的效果如图1-25所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DW89dIIP-1639323437130)(media/627794e73333db7272507338dde73b1f.png)]

图1-25

一、简答题

1.简述web标准。

2.简述前端和后台的联系。

3.简述快速生成HTML骨架的几种方式。

4.简述HTML骨架标签。

HTML 元素指的是从开始标签到结束标签的所有代码。

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <html>、<head>、<body>都是HTML骨架结构标签。

所谓标签就是放在“< >” 标签符中表示某个功能的编码命令。

标记(标签)有两种形式，我们分别称单标记和双标记(空标记和普通标记)

1. 双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。例如：

<body> Hello world </body>

1. 单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。例如：

<br />

标签属性是标签身上的一些特殊性质，通俗讲，给标签加上某个属性就相当于给标签赋予了职能，前提是标签必须具备这些职能。

属性提供了有关 HTML 元素的更多的信息。

属性总是在 HTML 元素的开始标签中规定,以名称/值对的形式出现，比如： name=“value”。

标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内。

一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序。

注：属性和属性值对大小写不敏感，推荐小写。例如下面的代码示例中：

<a href=“www.baidu.com” title=“我是title”></a>

在代码编写过程中，通过对代码添加注释可以增强代码的可读性，也可以通过添加注释来在HTML中放置通知和提醒信息。

浏览器不会显示注释的内容，也不会对网页结构造成影响。

<!-- 注释的内容 -->

注释是以<!–开始，以–>结束，中间是注释的内容。

<!-- 这是一段注释 -->

<p>这是一个段落。</p>

1.标签之间对空白换行缩进不敏感

文字的位置不会根据书写标签位置决定，而是根据标签的种类决定（块级还是行内级，后面CSS课程中讲）。

标签与其他标签之间对空白、换行、缩进等不敏感，有没有空白不影响浏览器加载效果。

2. HTML语法中，认识标签的开始和结束，不论有没有换行都只认标签开始结束。

3. 标签之间还认识嵌套关系。

4. 在书写过程中，为了让代码是容易解读的，建议进行合理的换行和缩进。

5. 在上传代码过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白，目的

就是为了压缩文件的大小。

2.文本的空白折叠现象

在普通文字之间，如果有空格、换行、缩进导致的空白，在浏览器中加载时会被折叠成一个空格显示，这就是空白折叠现象。一些空白要想在浏览器中正常显示，需要使用一些替换写法书写不同的空白。

空格：可以使用字符实体替换书写，在代码中书写 替换空格。

换行：可以使用br单标签进行书写。

<p>

你好 我是张三

</p>

上面你好之后的空格会被折叠为一个空格，这种现象叫做空白折叠现象。如图2-1所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNK6CRyt-1639323437132)(media/0093b0da1d886048bb9346d49035f8f9.png)]

图2-1

如果需要给文本增加多个空格需要使用字符实体 

<p>

你好       我是张三

</p>

增加了字符实体后，浏览器显示了多个空格。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5OM4CT7-1639323437135)(media/60b933c278e4de190289ec82f98e577f.png)]

图2-2

标题（Heading）是通过 <h1>~<h6> 标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。属于块级元素。

用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

用法如下：

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<title>Document</title>

</head>

<body>

<h1>我是一级标题</h1>

<h2>我是二级标题</h2>

<h3>我是三级标题</h3>

<h4>我是四级标题</h4>

<h5>我是五级标题</h5>

<h6>我是六级标题</h6>

</body>

</html>

运行效果如图2-3所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIyB9PWO-1639323437137)(media/abbfb17d0fddb8c7b20e33df27f0ce6e.png)]

图2-3

注意：请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

从我们对文本的定义来讲，权重就是文本的权重，比如设置h标签的文字就赋予了标题的语义。如果从浏览器的角度去考虑，它的权重在搜索引擎的优化，搜索引擎的优化除了会抓取meta标签配置的keywords之外还会优先抓取标题的内容，h1标签的权重是最高的，一个页面只使用一个h1，通常用来制作网页的logo，如果你在页面中设置了多个h1标签，搜索引擎会认为你在作弊，从而降低排名。

示例，腾讯官网，如图2-4所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fxcrYgdY-1639323437140)(media/2f62b038a79dd4401f1000ffe51ecb49.png)]

图2-4

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，段落是通过 <p> 标签定义的

示例：

<p> 这是一个段落 </p>

<p> 这是另一个段落 </p>

注意：浏览器会自动地在段落的前后添加空行（</p> 是块级元素）。

因此若希望在不产生一个新段落的情况下进行换行，请使用 <br> 标签。

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签。

在 HTML 中，图像由<img>标签定义，<img>标签是空标签，意思是说，它只包含属性， 没有结束标签。

<img>标签常见属性有src、alt和title，其中src和alt是必须的属性。

1. src: 作用是引入图片的路径

示例：

<img src="./images/1.jpg" alt=“蝴蝶”>

运行效果如图2-5所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1jwcvSzP-1639323437142)(media/3fec2d29b5ef86bc8821a908fa927f60.png)]

图2-5

2)alt属性：图片加载不出来时候的替换文本

若上述代码修改为：

<img src=“1.jpg” alt=“蝴蝶”>

运行效果如图2-6所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-um8ceJK0-1639323437145)(media/6b1f024fca3e3c960791adf01f0ead1b.png)]

图2-6

在上例中，由于src的路径是错误的，则图片无法正确显示，但由于设置了img标签的alt属性，所以会显示为alt属性的值。

1. width和height: 设置图片的宽度和高度

<img src="./images/1.jpg" alt=“蝴蝶” width=“220px” height=“30px”>

运行效果如图2-7所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dg0KI7vR-1639323437147)(media/5625c3d8d3bd277ffe2eda96a7fdd0c1.png)]

图2-7

我们看上图确实将图片设置为了固定的高度和宽度，但是实际工作中宽度和高度并不会共同使用，因为如果只单独设置一个属性比如宽度，高度会等比例进行缩放。

<img src="./images/1.jpg" alt=“蝴蝶” width=“220px”>

运行效果如图2-8所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-flL34BQa-1639323437148)(media/f385bbabd96bff7babb171101d13bc17.png)]

图2-8

只设置了宽度属性，我们看上图的高度是通过等比例缩放得到的。

<img>标签的常见属性总结如下表：

表2-1

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。路径分为相对路径和绝对路径。

1. 相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

1. （/）：一个斜杠表示根目录。

2. （./）：一个点（.）后面跟一个斜杠表示当前目录，也就是当前文件所在目录。

3. （…/）：两个点（.）后跟一个斜杠表示当前文件所在目录的上一级目录。

4. （…/…/）：表示当前文件所在目录的上上级目录，以此类推。

例如图片路径和资源文件关系如图2-9所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOwqV67k-1639323437152)(media/6f2d6bfade6cfbcbe988472db0a2ccfa.png)]

图2-9

则路径引入应为：

<img src=“images/1.png” alt="">

若图片在资源文件的上级目录，如图2-10所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ninq5mfY-1639323437156)(media/f838165225eb01e3b9c97d7e4223b2f9.png)]

图2-10

则路径引入为：

<img src="…/1.png" alt="">

综合示例：

<!-- 图像文件和HTML文件位于同一文件夹 -->

<img src=“logo.gif” alt="" />

<!-- 图像文件位于HTML文件的下一级文件夹 -->

<img src=“img/img01/logo.gif” alt="" />

<!-- 图像文件位于HTML文件的上一级文件夹 -->

<img src="…/logo.gif" alt="" />

1. 绝对路径

绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对 位置定义的位置，一种是本地从盘符出发的绝对位置。

1. 网络绝对路径（完整的URL地址，包括协议和域名）：

http://www.test.com/statics/images/logo.png 服务器能够将网址解析到服务器硬盘下 logo.jpg 图片文件。

（2）本地绝对地址（具体的盘符）：

E:\lanhu\images\logo.jpg

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

（1）在标签 <a> 中使用了 href 属性来描述链接的地址。

例如：

<a href=“https://www.baidu.com/”> 跳转到百度 </a>

（2）使用 target 属性，指定目标地址的打开方式。

常用值有：

● 在新窗口打开 target="_blank"。

● 在当前窗口打开 target="_self"。

例如：

<a href=“2-6_a标签的跳转.html” target="_blank" title=”我是鼠标移上的文字”> 跳转到6文件 </a>

运行效果如图2-11所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qLcBCd1-1639323437161)(media/cfb0dd104291021cb87574f16dbf9b4e.png)]

图2-11

（3）title属性定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示。

例如：

<a href=“2-6_a标签的跳转.html” target="_blank" title=“鼠标移上的文字”>跳转到6文件</a>

（1）空链接

如果当时没有确定链接的目标时使用空链。

示例：

<a href="#" > 商品 </a>

（2）下载链接

如果href里面的地址是一个文件或压缩包，会下载这个文件。

示例：

<a href=“1.txt” > 下载文本文件 </a>

1. 锚点链接

锚点的作用：实现点击超级链接从而实现页面内的跳转。

有两种方法可以实现锚点：

方法一：

设置一个空锚点，然后给这个空锚点设置一个name属性值和锚的href属性是一致的

锚，href属性，后面一定要加#号

<a href="#qxcz">求学成长</a>

锚点的点，name属性设置被跳转的点

<a name=“qxcz”></a>

案例代码如下所示：

<h2>张一鸣</h2>

<a href="#qxcz">求学成长</a>

<a href="#lxcy">连续创业</a>

<a href="#gycs">公益慈善</a>

<h3>求学成长</h3>

<a name=“qxcz”></a>

<p>1983年，他出生在福建龙岩的一个事业单位家庭，父亲在去东莞开办电子产品加工厂之前是市科委的工作人员，母亲是护士。与事业单位大院里其他父母对子女严加管束不同，热爱尝试新鲜事物的父母很早就给了张一鸣宽松环境，让他在很小的时候就能自主决定自己的人生走向。

</p>

语义化是指用合理的 HTML 标记以及其特有的属性去格式化文档内容。根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。例如，标题用 h1-h6、段落用 p 标签，合理的给图片添加 alt 属性。

为了在没有CSS的情况下，页面也能呈现出