知识模块	课程内容	重点	课程目标
HTML 基础	HTML简介和发展史	☆	了解网页的基本组成了解浏览器种类及内核了解Web标准的三大部分了解HTML发展历史熟悉VSCode开发工具的使用掌握HTML的骨架组成
	浏览器及内核	☆
	Web标准	☆
	VSCode开发工具的使用	★
	HTML骨架的组成以及各部分的作用	★

HTML简介和发展史

什么是HTML

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

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

图1-1

HTML的发展历程

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 标准的最终版。

1.1.3 web标准

1.1.3.1 为什么需要web标准

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

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

图1-2

1.1.3.2 web标准的组成

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

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

结构标准：用于对网页元素进行整理和分类，主要包括XML和XHTML两部分。
表现标准：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是css。css(Cascading
Style Sheets)：层叠样式表。
行为标准：指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两部分。DOM(Document
Object Model)是文档对象模型。ECMAScript是ECMA(European Computer
Manufacturers Association)以javaScript为基础制定的标准脚本语言。

1.1.3.3 W3C

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

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

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

图1-3

开发中常见概念解释

1.2.1前端

前端即网站前台部分，运行在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

1.2.2后台

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

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

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

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

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

图1-6

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

浏览器通过 DNS 把域名解析成对应的IP地址；
根据这个 IP 地址在互联网上找到对应的服务器，建立连接；
客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档；
在服务器端，实际上还有复杂的业务逻辑比如服务器可能有多台，到底指定哪台服务器处理请求。都需要一个负载均衡设备来平均分配所有用户的请求，还有请求的数据是存储在分布式缓存里还是一个静态文件中，或是在数据库里，完成以上操作之后，服务器将相应的数据资源返回给浏览器；
客户端与服务器断开。由客户端解析HTML文档，在客户端屏幕上渲染图形结果。

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

图1-7

1.2.3 浏览器

浏览器即网页浏览器，是网页显示、运行的平台。常用的浏览器有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
开源项目及其他开源软件的网页浏览器。

1.2.3.1 浏览器内核

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

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

Trident内核

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

Gecko内核

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

WebKit内核

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

Presto内核

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

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网页的编写，但是如果开发大型复杂的网页，使用记事本则会显得效率非常低下，因此在开发过程中我们一般会借助于开发工具来进行编程。

1.4.1常见开发工具简介

市面上常见的开发工具有：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

1.4.2 Visual Studio Code

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

1.4.2.1 工具下载

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

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

图1-11

1.4.2.2 工具下载安装

点击下载按钮，根据操作系统平台下载对应的安装包，本书以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

1.4.2.3 插件安装和工具使用

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

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

插件安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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

编辑器的使用

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

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

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

图1-19

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

快捷键名称	功能
html:5 → tab 或 !	生成HTML骨架
div*5 → tab	自动生成多个元素
h$*6 → tab	生成h1-h6
shift+alt+键盘上下箭头	复制当前行文本
ctrl+shift+k	删除当前行
按住滚轮键不松手，向下拖动鼠标（不是滚动滚轮）	选中多个光标
Ctrl+键盘（+或者-）	放大或缩小文字

表1-1

1.4.3 编写第一个HTML文件

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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

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

图1-20

HTML骨架

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

1.5.1 DTD

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

<!DOCTYPE html>

<!>，表示警示标签。

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

1.5.2 html标签

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

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

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

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

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

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

1.5.3 字符集

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

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

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

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

什么是字符集呢？

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

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

字符集	字符集是否全面	优缺点
UTF-8	这个字库涵盖了地球上所有国家、民族的语言文字。非常全，每年更新，它是一个国际化的字库	每个汉字占3个字节。所以如果你想网页快一点打开，不能使用UTF-8。新华网的阿拉伯语频道、日语频道等都要使用UTF-8。
gb2312	gb是国标的意思，只有汉族的文字和少量其他符号。	每个汉字占2个字节。几乎所有的门户网站，都是gb2312。
gbk	gbk是gb2312的略微增*版，文字稍微多了点， gbk也是只有汉语，只不过多了点怪异汉语字，比如“喆”。	每个汉字占2个字节。几乎所有的门户网站，都是gbk。
ISO8859-1	包含英文字母、数字、一些特殊字符和一些西欧国家的字符	ISO-8859-1 是大多数浏览器默认的字符集。

表1-2

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

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

1.5.4 视口标签

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

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

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

图1-21 图1-22

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

1.5.5浏览器的私有设置

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

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

1.5.6 title

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

<!DOCTYPE html>

<head>

<title>我是title</title>

</head>

<body>

</body>

</html>

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

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

图1-23

1.5.7 keywords关键字

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

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

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

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

图1-24

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

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

图1-25

1.6 练习题

一、简答题

1.简述web标准。

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

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

4.简述HTML骨架标签。

HTML基础标签

知识模块	课程内容	重点	课程目标
HTML 基础标签	HTML基本语法	★	了解什么是HTML 熟悉HTML基本语法掌握常用HTML标签的意义和使用掌握超链接和图像的使用掌握什么是HTML语义化掌握VSCode开发工具的使用
	HTML常见标签	★
	超链接和图像	☆
	HTML语义化	★
	其它常见标签	☆

HTML基本语法

HTML元素和标签

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

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

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

2.1.1.1 HTML标签(标记)

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

双标签

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

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

<body> Hello world </body>

单标签

<标签名 />

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

<br />

2.1.1.2 HTML属性

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

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

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

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

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

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

2.1.1.3 HTML注释

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

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

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

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

标签使用注意事项

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

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

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

HTML语法中，认识标签的开始和结束，不论有没有换行都只认标签开始结束。
标签之间还认识嵌套关系。
在书写过程中，为了让代码是容易解读的，建议进行合理的换行和缩进。
在上传代码过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白，目的

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

2.文本的空白折叠现象

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

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

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

<p>

你好我是张三

</p>

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

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

图2-1

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

<p>

你好我是张三

</p>

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

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

图2-2

HTML常见标签

HTML标题

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

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

用法如下：

<!DOCTYPE html>

<head>

<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

HTML段落

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

示例：

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

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

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

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

超链接和图像

图像

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

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

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

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

示例：

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

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

图2-5

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

若上述代码修改为：

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

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

图2-6

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

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

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

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

图2-7

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

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

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

图2-8

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

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

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像的边框

表2-1

相对路径和绝对路径

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

相对路径

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

（/）：一个斜杠表示根目录。
（./）：一个点（.）后面跟一个斜杠表示当前目录，也就是当前文件所在目录。
（…/）：两个点（.）后跟一个斜杠表示当前文件所在目录的上一级目录。
（…/…/）：表示当前文件所在目录的上上级目录，以此类推。

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

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

图2-9

则路径引入应为：

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

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

图2-10

则路径引入为：

综合示例：

绝对路径

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

网络绝对路径（完整的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"。

例如：

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

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

图2-11

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

例如：

超链接类型

（1）空链接

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

示例：

（2）下载链接

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

示例：

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

锚点链接

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

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

方法一：

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

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

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

案例代码如下所示：

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

</p>

<p>张一鸣的童年，父母彼此聊的话题多是双方的朋友在国外搞了某项技术，做出了某个产品。现在很难去判断，在1980年代，这个小家庭里萌发的创新风潮是否影响了张一鸣未来的人生道路，但有一点可以确定，父母的宽松与这个家庭对商业的早早触碰让他在很小就接触到商业世界与创新之间的某种联系。

</p>

<p>在所有人眼里，极客的童年应该是早早立下成为科学家的志向，但张一鸣再次颠覆了大家对极客的想象。他说：“上大学的时候就想做出有价值的东西，比如能做出个芯片，芯片是一件很具体的事物，或者能够制药，有所突破。所谓科学家的梦想是在小学阶段的想法，早就消逝了。”

</p>

<p>中学阶段，化学成绩一直很好的他对化学实验课提不起劲，上实验课时，支酒精锅、倒试管的这些繁琐程序让他感觉到既琐碎又危险。

</p>

<p>现在无人能够说清，当年厌恶操弄酒精灯、化学药品坩埚的张一鸣是从何时起开始对自己的人生进行第一次规划，但他开始模糊地感知到，自己喜欢的是有体验感和参与感，并能够迅速见效的事物。他说：“你的行为，你的输出，都要快点看到变化。而计算机是最快的。”大学时，他报考了微电子专业，随后又转专业到软件工程。

</p>

<p>这种不甘于做常规、重复事情的性格也在他日后的创业中一再显现。大学毕业后的他曾经短暂进入微软，后因感觉大公司没有清晰*烈的目标，每天都在做一些离用户很远的基础开发，所以，他迅速选择离开。

</p>

<p>大学毕业后，张一鸣曾经详细地分析过网络信息传播的各个部分和角度，他发现，信息的组织与分发有最大空间。

</p>

<p>张一鸣从南开大学毕业后，一位师兄在BBS上看了他的背景资料，找他一起创业。当时这位师兄只在电话中简单地告诉张一鸣，他即将开发一款挺有需求的产品，市面上的产品都做得不好，但只要按照他的思路就能做出很好、很有用的产品。</p>

<p>张一鸣说：“这种对话就比较容易吸引我。不必要说上市、赚钱这些事情。先打电话再面对面吃饭。”那场对话两周后，张一鸣就决定加入。这种谈话方式至今仍在影响他招聘手下工程师的方法，张一鸣说，工作多数时间，他除了驯服算法，都在面试招聘员工。他与员工的对话也简单、纯粹，更多时候，他们会在咖啡厅聊产品理念和一些天马行空的想法。

</p>

<p>张一鸣在设计今日头条这套算法前加盟过四家公司，他的职业履历多数与技术有关。</p>

<p>2014年30岁的张一鸣，就是字节跳动（bytedance）的创始人，从牛仔裤上的油渍上你很容易看出他是一个典型的技术宅男。从高中时代起他就酷爱计算机，2001年进入南开大学先后就读于微电子和软件工程专业。他在大四时编写的电路板自动化加工软件PCBS曾获得过“挑战杯”二等奖。他已经直接参与了五家公司的创业，其中有两家是自己创立的，还有一家是合伙人。

</p>

<p>2005年大学一毕业，他就组成3人团队，开发一款面向企业的IAM协同办公系统。但产品的市场定位失误导致了创业失利，当时协同办公在中国根本还没有发展起来。</p>

<p>2006年2月张一鸣进入旅游搜索网站酷讯。作为酷讯的第一个工程师，他全面负责酷讯的搜索研发，一年后成为技术高级经理，手下管理着40多人，最终担任技术委员会主席。成为管理者之后，技术出身的张一鸣很想学习大公司的管理方法，于是在2008年离开酷讯去了微软。

</p>

<p>2009年10月，张一鸣开始了第一次独立创业，创办了垂直房产搜索引擎“九九房”。在九九房，张一鸣开始涉足移动开发，6个月间推出掌上租房、掌上买房等5款移动应用，在当时的移动互联网环境下实现150万用户，是房产类应用的第一名。

</p>

<p>2018年11月，陈林接替张一鸣担任今日头条CEO一职。[18] </p>

<p>2019年2月26日下午，胡润研究院发布《2019胡润全球富豪榜》，字节跳动CEO张一鸣财富上涨至2018年的近3倍，以950亿元进入前100。[19]

</p>

<p>2020年11月5日，福布斯中国发布中国富豪榜，张一鸣以1848.3亿位列第9位。[20]
</p>

<p>2021年5月20日，字节跳动创始人张一鸣发布内部全员信，宣布卸任字节跳动CEO一职。
[55] </p>

<p>2019年10月10日，张一鸣向母校南开大学捐赠1亿元，设立“南开大学创新基金”，通过公益方式，支持南开师生及毕业生的创新创业项目。
[21] </p>

<p>2020年7月入选福布斯2020中国慈善榜，排名第32，现金捐赠总额11,000万元。 [22]
</p>

方法二：

设置锚点的点为标签的id属性

例如：

锚点的点：由原来的a标签的name属性变为了其他标签id属性，id属性的值要和href一样，例如：

完整代码如下：

<p>

省略……

</p>

<p>

省略……

</p>

<p>

省略……

</p>

HTML语义化

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

2.4.1语义化的好处

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；

提升用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），以有意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

其它常见标签

2.5.1 br

<br> 可插入一个简单的换行符。

<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在
XHTML 中，把结束标签放在开始标签中，也就是 <br />。

请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到
<p>标签时，通常会在相邻的段落之间插入一些垂直的间距。

2.5.2 hr标签

<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。

在 HTML 中，<hr> 标签没有结束标签。

在 XHTML 中，<hr> 标签必须被正确地关闭，比如 <hr />。

例如：

<p>第一个段落</p><hr/>

<p>第二个段落</p>

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

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

图2-12

2.5.3 其它标签

标签名称	描述
<b></b>	定义粗体文本
<strong></strong>	定义加粗语气
<i></i>	定义斜体字
<em></em>	定义着重文本
<sub></sub>	定义下标字
<sup></sup>	定义上标文字
<del></del>	定义删除文本
<span></span>	定义组合文档中的行内元素

表 2-2

2.6 练习题

简答题

1.简述HTML单标签和双标签。

2.简述HTML标题和段落书写方式。

3.简述相对路径和绝对路径的区别。

4.简述你对HTML语义化的理解。

列表和表格

知识模块	课程内容	重点	课程目标
列表和表格	HTML列表	★	掌握列表的分类以及各种列表的使用场景了解表格的特性及使用场景掌握表格的基本使用
	表格	★

3.1 HTML列表

在页面很多的排版布局中，经常会使用列表来进行排版。HTML
支持有序、无序和定义列表。

列表最大的特点就是整齐、整洁、有序。

常见的列表有无序列表、有序列表、自定义列表等。

3.1.1 无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的，由两个标签组成，ul（容器级标签），li（容器级），其语法格式如下：

<ul>

…

</ul>

无序列表的基本使用：

<h2>古典四大名著</h2>

<ul>

</ul>

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

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

图3-1

如果需要修改无序列表前标记样式，可以通过type属性来修改，type属性的取值有disc(实心圆)，circle(空心圆)，square(实心方块)，示例如下：

</ul>

</ul>

</ul>

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

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

图3-2

小贴士：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的；

2. <li>与</li>之间相当于一个容器，可以容纳所有元素；

3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来。

列表的拓展，li标签内部可以继续嵌套列表结构，示例如下：

<ul>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

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

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

图3-3

由上面的示例可以观察出，无序列表的最大特点就是列表项目之间是没有顺序的，例如腾讯网：

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

图3-4

图3-4中的新闻内容是没有逻辑上的顺序的列表，因此这个时候就可以无序列表来实现。

3.1.2 有序列表

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

图3-5

有序列表即为有排列顺序的列表，同样，有序列表也是一列项目，其各个列表项使用数字进行标记按照一定的顺序排列定义。

有序列表始于 <ol> 标签。每个列表项始于 <li>
标签。有序列表的基本语法格式如下：

<ol>

…

</ol>

有序列表ol的用法特性与ul基本保持一致，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表的基本使用：

<h2>二年级排名情况</h2>

<ol>

</ol>

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

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

图3-6

有序列表最大的特点就是列表项目是有排列顺序的，因此本小节开头图3-5中奥运会金牌排名的示例就可以使用有序列表来实现。

小贴士：

项目开发过程中ol使用的较少，一般列表均使用ul来排版布局。

3.1.3 自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。自定义列表以
<dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd>
开始。其基本语法如下：

<dl>

…

…

</dl>

基本使用：

<h2>国内女明星</h2>

<dl>

<dd>作品：《三生三世》、《宫》、《仙剑奇侠传》等</dd>

<dd>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>

</dl>

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

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

图3-7

每个dt主题的后面可以跟0-多个解释的dd，每个dd解释的就是上一个最近的dt，所以上例又可以改造为如下：

<dl>

<dd>作品：《三生三世》、《宫》、《仙剑奇侠传》等</dd>

<dd>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>

</dl>

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

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

图3-8

同li一样，dt和dd都是容器级标签，内部可以存放任意内容。

使用自定义列表的场景常见于网站的页脚部分，如图3-9所示：

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

图3-9

3.2 表格

表格，是指按所需的内容项目画成格子，用于显示数字和其他项以便快速引用和分析。
类似于 office 中的 excel 表由一行或多行单元格组成。在 HTML 中表格由 <table>
标签来定义。表格现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。如下图所示：

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

图3-10

3.2.1 表格基础

表格主要有三个标签组成：

table英文：table，作用是定义了一个表格的结构；

tr英文是table rows作用定义了表格的行；

td英文是table dock作用是定义表格的单元格；

关系：table>tr>td

小贴士：

1. <tr></tr>中只能嵌套<td></td>。

2. <td></td>标签，他就像一个容器，可以容纳所有的元素。

利用上面的标签我们来实现一个三行四列的表格：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

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

图3-11

在上面的示例中，我们使用了table标签的两个常见的属性：border和style。其中border属性是用来设置表格的边框的，如果没有这个属性，边框不显示，例如border=”1”，就指定了表格有一个像素的边框。第二个属性style="border-collapse:collapse"是css样式，作用就是合并表格（css部分在后续的章节中会详细说明）。

3.2.2 表格的常见属性

表格标签提供了很多的属性供开发者使用，下表中列出了表格的常见属性：

属性名	含义	常用属性值
border	设置表格的边框(默认border=”0”无边框)	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值(默认两个像素)
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

表3-1

3.2.3 单元格合并

一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性：

rowspan: 上下跨行合并

colspan：左右跨列合并

属性值是数字，数字是几就代表跨几行或者跨几列，合并的顺序：先上，先左。

如下表格，若使用单元格合并来实现

1	2	3	4
5	6		7	8	9	10
	11	12	13		14
15		16	17	18

表3-2

那么我们来分析实现步骤：

确定一行有多少td；
然后我们再看一共有几行；
观察哪个单元格有合并，设置对应属性。

分析之后，通过如下代码来实现上表中的效果

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

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

图3-12

3.2.4 表格分区

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

图3-13

一个完整的表格主要包含三个部分：表格标题、表格表头、表格的主题

一个table内部实际还有三个分区标签组成

caption：定义表格的主题

thead：定义表格的头部，内部嵌套tr>th

tbody：定义表格主题，内部嵌套tr>td

因此，如果要实现一个相对完整的表格，例如图3-13的表格，则可以通过如下代码来实现：

<caption>各地区资产投资情况</caption>

<thead>

<tr>

</tr>

<tr>

<th>自年初累计（亿元）</th>

<th>去年同期增长（%）</th>

<th>自年初累计（%）</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

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

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

图3-14

3.3 练习题

一、简答题

1.简述列表的三种书写方式。

2.简述表格的标签及各个属性。

二、上机题

1.实现以下效果：

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

注：灰色背景为鼠标移动行上显示的效果。

表单、字符和常用标签

知识模块	课程内容	重点	课程目标
表单、字符和常用标签	HTML表单	★	掌握HTML常见表单元素的使用了解字符实体的使用了解布局元素div和span的作用（本章只做简单介绍，后面章节将作为重点讲解。）
	字符实体	☆
	div和span	☆

4.1 HTML表单

HTML 表单用于收集不同类型的用户输入(采集数据)。

表单的基本组成部分包括表单区域、表单元素。

例如下图所展示的12306官网的注册页面，就是一个典型的表单页面。

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

图4-1

4.1.1 表单区域

表单是一个包含表单元素的区域，使用表单标签 <form> 来设置。

form是容器级标签，内部存放可输入的控件。如果输入的表单需要提交到数据，所有的控件需要被form表单包裹。

form标签的常见属性有：method和action。

method：方法的意思，指的数据提交的方法，属性值是post和get。

action：是数据提交的位置。

表单元素

</form>

4.1.2 常见的表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

4.1.2.1 input标签

<input/>标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input/>标签还可以定义很多其他的属性，常见属性如下表所示：

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像格式的提交按钮
	file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	Input控件中默认的文本值
size	正整数	Input控件在页面中显示的宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

表4-1

1. 输入框

输入框有两个重要属性，一个是value，一个placeholder

value：设置默认显示的内容，属性值为自定义内容

placeholder：属性作用是如果没有value的时候提示用户的文字占位符

例如：

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

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

图4-2

2. 密码框

通过将type属性的值设置为为password，则input就变成了密码框。

显示效果是输入后通过掩码形式显示的

例如：

运行效果如图4-3所示

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

图4-3

小贴士：

在大多数浏览器中，输入框的默认宽度是 20 个字符

单选按钮

通过将type属性的值设置为radio，则input就变成了单选按钮。需要注意的是单选按钮都是成组出现的。

要想实现一组单选按钮的互斥，需要设置相同的name属性。

例如：

<p>

性别：

<input type=“radio” name=‘sex’>男

<input type=“radio” name=‘sex’>女

<input type=“radio” name=‘sex’>保密

</p>

运行效果如图4-4所示：

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

图4-4

4. 复选框

也叫多选框，通过type值为checkbox设置；

复选框可以通过对自身进行多次点击实现选择或者取消；

多选框可以选择一个或者多个，建议同一组设置同样的name属性。

<p>

爱好：

<input type=“checkbox” name=“hobby”> 运动

<input type=“checkbox” name=“hobby”> 绘画

<input type=“checkbox” name=“hobby”> 音乐

<input type=“checkbox” name=“hobby”> 阅读

<input type=“checkbox” name=“hobby”> 其他

</p>

单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个checked=“checked”。

<p>

性别：

<input type=“radio” name=‘sex’ checked=“checked”>男

<input type=“radio” name=‘sex’>女

<input type=“radio” name=‘sex’>保密

</p>

<p>

爱好：

<input type=“checkbox” name=“hobby”> 运动

<input type=“checkbox” name=“hobby” checked=“checked”> 绘画

<input type=“checkbox” name=“hobby” checked=“checked”> 音乐

<input type=“checkbox” name=“hobby”> 阅读

<input type=“checkbox” name=“hobby”> 其他

</p>

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

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

图4-5

5. 普通按钮

<input type="button> 定义普通按钮。Value属性定义按钮显示的文本。

4.1.2.2 文本域

我们之前学习的input的单行输入框，只能输入单行文本，如果需要使用多行文本，就使用textarea标签。

textarea是一个双标签，是文本级标签。常见的属性有：

rows：定义文本域的可视区域有几行，单位是数字；

cols：当前行显示的字节数量（以英文为准），单位是数字。

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

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

图4-6

我们发现textarea默认是可以通过拖动右下角实现放大或者缩小文本域的，如果我们不希望缩放文本域。

我们可以通过设置style性的resize属性，值为none，去掉可拖拽区域。

运行效果如图4-7所示；

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

图4-7

小贴士：

通过css中的width和height属性可以更好的控制文本域的显示效果。

4.1.2.3 下拉菜单

<select> 标签定义下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

</select>

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

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

图4-8

我们观察上例的运行效果发现，现在默认的第一个是显示，如果希望默认被选中项是其它项，则可以通过设置selected属性来实现，selected属性的值也是selected。

</select>

运行效果如图4-9所示：

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

图4-9

小贴士：

表单元素的更多使用技巧：

1.我们可以通过设置表单元素的readonly 属性，规定输入字段为只读（不能修改）。

2.通过设置表单元素的disabled 属性，规定输入字段是禁用的。

4.2 字符实体

在网页中普通文字部分，有些内容在键盘中是打不出来的，比如我们的版权符号，商标符号等等在页面编写过程中，这些在键盘上找不到的字符也可以使用
HTML 源代码中提供的字符实体来替换。

字符实体的规定是以&开头的，常见的字符实体如下表所示：

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
	版权	©	©
	注册商标	®	®
	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

表4-2

还有一种场景就是替代字符，HTML会识别一部分字符，如下面的案例：

<div>

好神奇啊，今天老师带我们学习了<h1>标签的作用

</div>

我们发现浏览器会识别文本中的<h1>单独标签进行加载了，运行效果如图4-10所示：

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

图4-10

那么这个时候，如果想要让文本正确的显示，解决办法，利用字符实体进行转换，将>和<分别替换成对应的字符实体，如下：

<div>

好神奇啊，今天老师带我们学习了<h1>标签的作用

</div>

小贴士：

虽然 html 不区分大小写，但实体字符对大小写敏感。

4.3 div和span

div和span是没有语义的，使我们网页布局中主要的两个标签，俗称盒子。

div 就是 division 的缩写, 分割、分区的意思。

div是容器级标签，双标签。

span：小区域小跨度。

div主要作用是进行网页布局的拆分，没有明确的语义。

span标签的作用是一个极限小，只适用于文字的跨度划分。

语法格式如下：

div和span在网页布局中非常常见，例如下面的案例：

<div>

今天一共收入 <span style=“color:red;”>300</span> 元

</div>

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

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

图4-11

关于盒子布局和样式，这些内容我们将会在下面的章节中详细的讲解。

4.4 练习题

一、简答题

1.简述表单都有哪些标签。

2.简述input都有哪些属性及属性值。

3.写出空格的字符实体。

CSS基本介绍

知识模块	课程内容	重点	课程目标
CSS基本介绍	CSS基本介绍	☆	了解什么是CSS 掌握CSS基本语法掌握引入CSS样式的三种常用方法掌握文本字体属性掌握盒子常用的三个属性熟悉样式表的优先级掌握基本选择器的使用熟悉基础选择器优先级
	CSS常用属性	★
	CSS样式表	★
	基础选择器	★

5.1 CSS的基本介绍

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

5.1.1 css概述

CSS(Cascading Style Sheets)
通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

所有的主流浏览器均支持层叠样式表，你能够为每个 HTML
标签定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有标签均会自动地更新。

5.1.2 css语法

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如图5-1所示：

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

图5-1

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择符（又叫选择器）表示要定义样式的对象(标签名字)，可以是元素本身，也可以是一类元素或者制定名称的元素，简单来说就是给对应的元素起个名称。

语法说明：

选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式；
属性和属性值必须放在花括号内，并且以键值对形式存在；
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等；
每条声明用分号结束；
当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开；
在书写样式过程中，空格、换行等操作不影响属性显示。

5.1.3 css注释

css注释的语法：

/* 注释内容 */

注释是以/*开头，以*/结尾，中间是注释的内容部分。在vscode编辑工具中，可以通过ctrl+/来快速的注释和反注释。

5.1.4 css的三种引入方式

通过上面的内容我们已经掌握了css的语法，那么，该如何在HTML中使用css呢？其实在HTML中使用css通常有三种方式：内联样式表，内部样式表，外部样式表。

例如，设置段落标记的字体颜色和字体大小，分别使用三种方式来实现：

内联样式表

<p style=“color: red;font-size: 20px;”>欢迎来到蓝狐教育</p>

内部样式表

<head>

<title>Document</title>

<style>

p {

font-size: 20px;

color: red;

}

</style>

</head>

<body>

<p>欢迎来到蓝狐教育</p>

</body>

外部样式表

新建一个名为index.css的文件，然后在文件中插入如下代码：

p {

font-size: 20px;

color: red;

}

在页面中通过link标记引入index.css

<head>

<title>Document</title>

</head>

<body>

<p>欢迎来到蓝狐教育</p>

</body>

5.2 CSS常用属性

5.2.1 color 文本颜色

color属性用于定义文本的颜色，其取值方式有以下几种：

预定义的颜色值，如red，green，blue等。
十六进制表示法：可表示为：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。例如：＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。也可表示为：#RGB，值也必须为0到f之间，例如：#00f表示为蓝色。此方法是最常用的定义字体颜色的方法
rgb表示法：表示法为：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。例如：红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)
rgba表示法：表示法为：RGBA（红，绿，蓝，alpha）。
Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

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

图5-2

5.2.2 font-size 字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下表所示：

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素

表5-1

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

表5-2

小贴士：

每个浏览器都有自己最小的显示像素，比如Chrome最小字号为8px，ie浏览器最小字号是1px。

5.2.3 font-family 属性

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑：

p{ font-family:“微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

小贴士：

1.现在网页中普遍使用14px+；

2.尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug；

3.中文字体需要加英文状态下的引号，英文字体一般不需要加引号；

4.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

5.2.4 盒子常用三属性

盒子的三属性width、height、background-color。

width：是宽度的意思；

height：是高度的意思；

宽高的属性值都是以px为单位的数值。

background-color：背景颜色。属于background系列属性的一种。属性值和color一样分为单词和颜色值表示法。

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

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

图5-3

5.3 CSS样式表

css中样式表样式的书写方式有三种，内联样式、内部样式表、外部样式表。

5.3.1 内联样式

内联样式有可以称为行内样式、行间样式、内嵌样式，是通过给HTML元素添加style属性来实现的，基本语法格式如下：

<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

示例：

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

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

图5-4

小贴士：

内联样式将表现(css)和内容(HTML)混杂在一起，没有做到结构和表现相分离，内联样式会损失掉样式表的许多优势。

5.3.2 内部样式表

内部样式表又称内嵌式，内部样式表是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下:

<head>

选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。type=“text/CSS”
在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

color: red;

font-size: 18px

}

</style>

</head>

<body>

</body>

</html>

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

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

图5-5

5.3.3 外部样式表

外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>

</head>

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

注意：

css文件的内部不需要写任何的标签，直接属性css选择器和代码，因为css文件内部是不允许属性HTML骨架的。

小贴士：

link是单标签；

2)一个网页中可以使用多个link引入多个外部样式表。

5.3.4 导入式样式表（了解）

基本语法：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

@import url(css/1.css);

</style>

</head>

<body>

</body>

</html>

通过在head标签的内部title标签下面style标签内，通过@import进行导入样式表。

注意：

导入式必须写在style标签的最顶部。
url内部是css文件的引入地址。

5.3.5 样式表的优先级和使用总结

若在同一个HTML文件中出现了多种样式表，则就需要考虑不同样式表之间的优先级问题了，一般来说：

内联样式表的优先级别最高；

内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高；

同在一个样式表中的优先级和书写的顺序也有关，后书写的优先级别高。（被覆盖的只是相同属性的样式）。

优先级和几种样式表使用总结：

样式表名称	优点	缺点	使用情况	优先级
行内样式表	书写方便，样式设置精准，权重高	没有实现样式和结构的分离	较少	最高
内部样式表	部分结构和样式分离	样式和结构没有彻底分离	较多	大于导入式，和外部样式表权重相同
外部样式表	完全实现结构和样式的分离	需要引入	最多，*烈推荐	大于导入式，和内部样式表权重相同
导入式样式表	样式和骨架进行完全分离，一份css代码可以重复使用	导入式有样式问题，引入导入式涉及到加载顺序，说白了，页面会白一下，体验不好。	极少	最低

表5-3

5.4 基础选择器

5.4.1 标签选择器

标签选择器又称为元素选择器。

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如，设置页面中段落和div的样式：

div {

color: red;

font-size: 20px;

}

p {

line-height: 30px;

}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

5.4.2 class选择器

class选择器，也被称为类选择器。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用的时候用 class=“类名”即可。

示例：

hello world

</div>

在css中添加样式：

.one{width: 100px;height:100px;background-color: skyblue;}

结构中的class="one"与css样式中的.one对应。

注：类名始终使用字母、数字或连字符，并且始终建议以字母开头，除了“-"和“_"连接符不要使用其它特殊字符，类名会区分大小写！

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

小案例：实现如图5-3所示效果：

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

图5-6

示例代码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

span {

font-size: 100px;

}

.blue {

color: blue;

}

.red {

color: red;

}

.orange {

color: orange;

}

.green {

color: green;

}

</style>

</head>

<body>

</body>

</html>

小贴士：

css中类名的命名建议：

1.长名称或词组可以使用中横线来为选择器命名；

2.不建议使用“_”下划线来命名CSS选择器；

3.不要纯数字、中文等命名，尽量使用英文字母来表示。

5.4.3 id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，同一个页面中同样的id只能出现一次。

例如：

css中样式的写法如下：

#box {text-align: center;}

小贴士：

id选择器和类选择器的区别：

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，
比如:王刚、王伟、*国庆、*娜等。

id选择器就好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。

5.4.4 通配符选择器

通配符选择器用“*”号表示，单独使用时，这个选择器可以选取文档中的所有元素。他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

示例：以下代码通常用来选择页面上的所有元素，清除掉默认自带的内外边距。

*{ margin:0; padding:0; }

5.4.5 基础选择器优先级

优先级是浏览器是通过判断哪些属性值与元素最相关，从而在改元素上应用这些属性值。

如果选择器的优先级相同，CSS代码中，靠后的CSS规则优先级高于前面的规则。

优先级规则如下：

内联样式 > id 选择器 > class 选择器 > 元素选择器 > 通配符选择器 >
浏览器默认样式。

5.5 练习题

一、简答题

1.简述CSS引入样式常用的三种方式。

2.简述样式表的优先级。

3.简述CSS基础选择器有哪些。

二、上机题

1.实现以下效果：

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

选择器进阶

知识模块	课程内容	重点	课程目标
高级选择器	高级选择器语法	★	掌握几种常用的高级选择器的使用方法和使用场景
	高级选择器应用
CSS三大特性	层叠性、继承性、优先级	☆	了解CSS层叠性和继承性掌握CSS优先级计算方法

6.1 CSS高级选择器

6.1.1 后代选择器

后代选择器又称为包含选择器，可以选择作为某元素后代的元素。
**语法：**element element{ } 选择器之间用空格分隔。

作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性。

<head>

<title>Document</title>

<style>

.box ul li{

color: red;

}

.box2 ul li{

color: green;

}

</style>

</head>

<body>

<ul>

<li>box里面的li</li>

</ul>

</div>

<ul>

<li>box2里面的li</li>

</ul>

</div>

</body>

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

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

图6-1

需要注意的是，后代关系不一定是父子关系，例如：

.box li{

color: red;

}

上面例子的功能表示选择类名为box后代中的li。

6.1.2 子代选择器

与后代选择器相比，子代选择器（Child
selectors）只能选择作为某元素的子元素。以大于号（>）分隔。

例如下面的案例：将一级菜单的字号设置为18px

<head>

<title>Document</title>

<style>

ul li>a {

font-size: 18px;

}

</style>

</head>

<body>

<ul>

<li>

<div>

</div>

</li>

</ul>

</body>

在上面的案例中，li中有两类a，第一个是li的直接后代（子代），另一类是li中div内部的a。题目的要求是设置一级菜单的字号大小，此处不能使用后代选择器（否则li中所有的a的样式都会被修改），应该使用子代选择器。

6.1.3 并集选择器

并集选择器又称群组选择器。群组选择器选取所有具有相同样式定义的 HTML 元素。

语法：element,element { … } 选择器之间由逗号分隔。

如下面的例子：

h1 {

text-align: center;

color: red;

}

h2 {

text-align: center;

color: red;

}

p {

text-align: center;

color: red;

}

经过观察发现，h1，h2，p有相同的属性，这个时候我们可以通过并集选择器设置同样的属性值。

h1, h2, p {

text-align: center;

color: red;

}

对选择器进行分组，可以最大程度地缩减代码，方便在大型项目中公共样式的编写，提高代码的可维护性。

6.1.4 交集选择器

交集选择器由两个以上的单一选择器组成。

语法格式：将多个选择器连接书写，中间没有空格，不需要加任何符号。

例如下面的示例：

<head>

<title>Document</title>

<style>

p.par{

color: blue;

}

</style>

</head>

<body>

</body>

在上面的例子中，类名为par的有两个：div和p，若仅仅通过类选择器，则两个样式都会被修改。而通过”p.par”交集选择器，则含义为选择类名为par的p元素。

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

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

图6-2

6.1.5 伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。

语法：

选择器：伪类{样式}

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示。

例如：

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。链
接的样式可以用任何 CSS 属性（如颜色、字体、背景等）。

常见CSS伪类表

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容

表6-1

6.1.6 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling
selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent
sibling selector）。以加号（+）分隔。

以下实例选取了class为on的li的下一个 <li> 元素:

<head>

<title>Document</title>

<style>

ul li.on + li {

font-size: 30px;

}

</style>

</head>

<body>

<ul>

<li>Three</li>

</ul>

</body>

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

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

图6-3

6.1.7 后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。以波浪号（~）分隔。

以下实例选取了类名为on的li元素之后的所有相邻兄弟元素 <li> :

例如：

<head>

<title>Document</title>

<style>

ul li.on~li {

font-size: 30px;

}

</style>

</head>

<body>

<ul>

<li>Three</li>

</ul>

</body>

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

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

图6-4

6.2 CSS三大特性

6.2.1层叠性

层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

看下面的案例：

HTML结构：

文字

</p>

CSS样式：

<style>

color: red;

}

.par{

font-size: 20px;

}

#par {

/* 文字添加下划线 */

text-decoration: underline;

}

</style>

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

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

图6-5

通过上面的案例，我们发现一个标签可以被多个选择器选中，并设置对应的属性。

那么，如果多个选择器，设置了同一个属性，怎么办？

#par {

color:purple;

}

.par{

color: blue;

}

color: red;

}

我们看浏览器的效果是紫色的，运行效果如图6-6所示；

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

图6-6

我们看上图后两个选择器设置的内容被‘杠’掉了，我们叫做被层叠了，这个就是css的层叠性。

在前面的章节中，我们学习选择器的权重：id选择器>class类名选择器>标签选择器

如果被多个选择器同时选中，那么我们可以通过计算样式的权重值来判断。

我们看下面的案例：

<head>

<title>Document</title>

<style>

.box1 div.box2 #box3 p{

color: red;

}

#box1 #box2 div.box3 p{

color: blue;

}

#box1 div.box2 .box3 {

color: pink;

}

</style>

</head>

<body>

</div>

</body>

上面代码的运行结果字体颜色显示为蓝色。

但下面的案例又是另外一种情况了，例如：

<head>

<title>Document</title>

<style>

div{

color:red;

}

div{

color:blue;

}

</style>

</head>

<body>

<div>欢迎来到蓝狐科技</div>

</body>

上面代码，出现一个p
标签指定了相同样式不同值的情况，这就是样式冲突。通常出现样式冲突，会按CSS书写的顺序，以最后的样式为准。

（1）样式冲突，遵循的原则是就近原则。

（2）样式不冲突，不会层叠。

6.2.2 继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父标签即可。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。

子标签可以继承父标签的样式（大部分text-，font-，line-这些前缀开头的属性都可以继承，color属性,以及列表list-属性也可以继承给子标签）。

例如：

<head>

<title>Document</title>

<style>

.box{

color: red;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

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

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

图6-7

小贴士：

a标签继承不了父元素的color;标题标签继承不了父元素的font-size。

6.2.3 CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一标签上，这时就会出现优先级的问题。一般来说，选择器权值越大，样式优先级越高。

选择器的优先级权重表

选择器类型	权值
通配符选择器	0
标签选择器	1
类选择器，伪类选择器	10
ID选择器	100

表6-2

复合选择器的权值计算方式为，组成其所有单一选择器的权值之和。

示例：

#box .name .red{ … } /* 权值： 100+10+10 = 120 */

在考虑权重时还需要注意一些特殊的情况，具体如下：

（1）行内样式优先。应用style属性的标签，其行内样式的权重非常高，可以理解为远大于id选择器。总之，他拥有比上面提到的选择器都大的优先级。

（2）继承样式的权重为0。即在嵌套结构中，不管父标签样式的权重多大，被子标签继承时，他的权重都为0，也就是说子标签定义的样式会覆盖继承来的样式。

（3）CSS定义了一个!important命令,!important具有最大优先级。

（4）权重相同时，CSS遵循就近原则。也就是说排在最后的样式优先级最大。

6.3 练习题

一、简答题

1.简述CSS高级选择器有哪些。

2.简述CSS三大特性。

第七章 CSS属性

知识模块	课程内容	重点	课程目标
CSS属性	切图工具	★	熟练使用Fireworks中的7个常用工具测量网页中的CSS属性掌握CSS字体样式属性的使用掌握CSS文本属性的应用掌握表格样式的设置掌握列表样式的设置
	CSS字体样式属性	★
	CSS文本属性	★
	表格样式	★
	列表样式	★

7.1 切图工具

前端切图是前端工程师们还原设计稿的过程中必不可缺的一环，因此掌握基本的切图技能是每一个前端工程师必备的技能之一。

市面上的常见的可以进行切图的软件非常至多，例如：Photoshop、Adobe
xd、fireworks、摹客、蓝湖等都是非常*大和好用的软件。本章节就以fireworks为例，来介绍一下如何使用切图软件来进行切图。

7.1.1 Fireworks基本使用

fireworks是一款图形编辑软件，作用是用来绘制图形，对于我们开发者而言，主要用来测量css相关属性和Photoshop类型，不同的是fireworks比Photoshop更简单，更方便初学者使用。

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

图7-1

功能区介绍：

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

图7-2

下面我们将主要围绕工具箱进行学习。

7.1.2 缩放工具

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

图7-3

作用是用来放大或者缩小画布的

快捷键：ctrl+鼠标滚轮

7.1.3 抓手工具

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

图7-4

作用：用来移动画布的

快捷键：键盘空格键和按下鼠标后拖动

7.1.4 滴管工具

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

图7-5

作用拾取文字或者图形颜色的

快捷键：I

使用方法，通过滴管工具拾取颜色后，找到油漆桶，然后查看颜色面板

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

图7-6

7.1.5 文字工具

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

图7-7

作用是获取设计图的字号，字体，行高

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

图7-8

7.1.6 标尺和辅助线

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

图7-9

作用是用来测量图形的宽和高。

取消辅助线：

第一种：将辅助线拖回给标尺；

第二种：菜单栏的视图→辅助线→清除辅助线。

7.1.7 切片工具

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

图7-10

作用，我们使用切片工具进行测量宽和高，通常是小区域的。

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

图7-11

7.1.8 注意事项

导入图片的时候需要锁定位图。

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

图7-12

第二点是文字工具的配置。

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

图7-13

第三点，如果你编辑器和大家的不一样，选择展开模式。

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

图7-14

7.2 css字体样式属性

7.2.1 font-size 字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如表7-1和7-2所示：

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素

表7-1

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

表7-2

例如：

p{ font-size: 20px;}

7.2.2 font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑：

p{ font-family:“微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

小贴士：

1、现在网页中普遍使用14px+；

2、尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug；

3、中文字体需要加英文状态下的引号，英文字体一般不需要加引号；

4、尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

7.2.3 font-weight 字体粗细

font-weight 属性设置文本的粗细。

常用属性值：

normal 正常：定义标准的字符 ( 默认值 )。
bold 粗体：定义粗体字符。
关键字：100 ~ 900 为字体指定了 9 级加粗度

例如：

font-size: 20px;

font-weight: bold;

}

小贴士：

数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。

7.2.4 font-style 字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

例如：

<style>

.normal{

font-style: normal;

}

.italic{

font-style: italic

}

.oblique{

font-style: oblique;

}

</style>

……

<p class=“normal”>我是没有倾斜的字体</p>

<p class=“italic”>我是有斜体的样式</p>

<p class=“oblique”>我是倾斜的样式</p>

7.2.5 font 综合设置字体样式

font属性是字体复合属性，在一个声明中设置所有字体属性。语法格式如下：

选择器{font: font-style font-weight font-size/line-height font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

7.3 css文本属性

CSS 文本属性可定义文本的外观。

7.3.1 color 文本颜色

color属性用于定义文本的颜色，其取值方式有以下几种：

预定义的颜色值，如red，green，blue等。
十六进制表示法：可表示为：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。例如：＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。也可表示为：#RGB，值也必须为0到f之间，例如：#00f表示为蓝色。此方法是最常用的定义字体颜色的方法。
rgb表示法：表示法为：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。例如：红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
rgba表示法：表示法为：RGBA（红，绿，蓝，alpha）。Alpha参数是一个透明度设置，介于0.0（完全透明）和1.0（完全不透明）之间的参数。

例如：

<style>

.rgb{

color: rgb(0,0,255)

}

.sljz{

color: #aaffdd;

}

</style>

……

<p class=“rgb”>rgb文字颜色</p>

<p class=“sljz”>十六进制颜色</p>

7.3.2 line-height 行高

line-height：设置行高。常用的属性值：

1) normal默认。设置合理的行间距。

2) number设置数字，此数值会与当前的字体尺寸相乘来设置行间距。

3) length设置固定的行间距。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding: 0;

margin: 0;

}

font-size: 14px;

height: 200px;

line-height: 200px;

border:1px solid red;

width: 100px;

margin: 100px auto;

}

</style>

</head>

<body>

</body>

</html>

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

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

图7-15

7.3.3 text-align 水平对齐方式

text-align属性用于设置文本内容的水平对齐方式，其常见属性值有：

left居左对齐，默认值。
right居右对齐。
center居中对齐。

注意：此属性应该设置给块级元素，也就是说是让盒子里面的内容水平居中，而不是让盒子居中对齐。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

width: 200px;

height: 200px;

border:1px solid red;

text-align: right;

}

</style>

</head>

<body>

<p>

一个普通段落一个普通段落一个普通段落一个普通段落一个普通段落一个普通段落一个普

</p>

</body>

</html>

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

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

图7-16

7.3.4 text-indent首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
建议使用em作为设置单位。

例如：1em 就是一个字的宽度。如果是汉字的段落，1em就是一个汉字的宽度。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

width: 200px;

height: 200px;

border: 2px solid red;

text-indent: 2em;

}

</style>

</head>

<body>

<p>

一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字

</p>

</body>

</html>

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

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

图7-17

7.3.5 text-decoration 文本的装饰

text-decoration:经常被用来给文本添加装饰效果，常见属性如下表所示：

值	描述
none	默认定义标准的文本
underline	定义文本下的一条线。下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

表7-3

例如：

<style>

.none{

text-decoration: none;

}

.overline{

text-decoration: overline;

}

.line-through{

text-decoration: line-through;

}

.underline{

text-decoration: underline;

}

</style>

……

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

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

图7-18

7.4 表格样式

在前面的章节中我们发现通过table标签内置的一些属性可以调整表格的样式，让表格具有一定的美观性，但若想让表格在生产环境中呈现更加灵活的外观，则仅仅使用属性来控制表格外观就显得力不从心了，因此在项目开发中经常会使用CSS来控制表格的样式，而且使用
CSS 可以使 HTML 表格更美观。

7.4.1 表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

例如：

CSS代码：

<style>

table,tr,td {

border: 1px solid black;

}

</style>

HTMl代码：

<body>

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

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

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

图7-19

7.4.2 合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框。

常用属性值：

separate：边框独立
collapse：相邻边被合并

例如：

CSS代码：

<style>

.table{border-collapse:collapse;}

</style>

HTML代码：

<body>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

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

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

图 7-20

7.4.3 表格之间间距

border-spacing
设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距。

取值：用长度值来定义行和单元格的边框在横向和纵向上的间距，不允许负值。
如果提供全部两个长度值时，第一个作用于横向间距，第二个作用于纵向间距。
如果只提供一个长度值时，这个值将作用于横向和纵向上的间距。

例如：

CSS代码：

<head>

.table{

border-collapse: separate;

border-spacing: 10px 20px;

}

</head>

<body>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

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

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

图 7-21

7.4.4 表格宽高

下面这个例子将表的宽度设置为 100％，将 <th> 元素的高度设置为 50px。

CSS样式：

<style>

table {

border: 1px solid gray;

width: 100%;

border-collapse: collapse;

}

th,td {

height: 50px;

border: 1px solid gray;

}

</style>

HTML布局如下所示：

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Steve</td>

</tr>

<tr>

<td>Gates</td>

</tr>

<tr>

</tr>

</table>

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

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

图7-22

7.5 列表样式

在HTML中，列表主要有两种类型：无序列表（<ul>）和有序列表（<ol>）。列表是我们在开发中经常使用的布局结构，因此我们需要在不同的地方将列表修改为不同样式，CSS中内置了单独修改列表的样式，通过CSS就可以非常方便修改列表的样式。通过CSS列表属性使我们可以：

设置不同的列表项标记为有序列表；
设置不同的列表项标记为无序列表；
设置列表项标记为图像；
为列表和列表项添加背景色。

7.5.1 不同的列表项标记

list-style-type 属性指定列表项标记的类型。

例如：

<style>

ul.a {

list-style-type: circle;

}

ul.b {

list-style-type: square;

}

ol.c {

list-style-type: upper-roman;

}

ol.d {

list-style-type: lower-alpha;

}

</style>

<body>

<li>JavaScript</li>

</ul>

<li>JavaScript</li>

</ul>

<li>JavaScript</li>

</ol>

<li>JavaScript</li>

</ol>

</body>

在上面的例子中，我们通过css样式将ul、ol的list-style-type设置为不同的属性值，则会呈现出不同的效果，如图7-23所示。

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

图7-23

7.5.2 删除默认设置

有如下布局：

<li>JavaScript</li>

</ul>

上例中的代码，在未添加任何css样式的情况下，默认显示效果如图7-24所示：

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

图7-24

我们发现，默认情况下列表是带有标记●项目符号的，但是在项目开发中我们并不一定需要项目符号，因此可以通过list-style-type:none
属性来删除标记/项目符号。

<style>

ul.a{

list-style-type: none;

background:#ccc

}

</style>

在添加样式之后，运行效果如图7-25所示：

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

图7-25

上面代码运行之后我们发现，通过list-style-type可以清除列表默认的标记，但是列表默认的边距内容没有紧贴边沿，如果想清除默认的边距，则需要在样式中添加margin:0;padding:0。

<style>

ul.a{

list-style-type: none;

background: #ccc;

margin: 0;

padding: 0;

}

</style>

再次在浏览器中运行，效果如图7-26所示：

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

图7-26

7.6练习题

简答题

1.简述font-size相对长度单位。

2.如何合并表格单元格。

上机题

1.实现以下效果：

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

第八章盒子模型

知识模块	课程内容	重点	课程目标
盒子模型	盒子模型概念	☆	了解盒模型的概念掌握盒模型各属性的应用掌握盒子大小的计算方法了解CSS长度单位以及在实际应用过程中应该如何使用
	元素宽高	★
	元素边框	★
	元素内边距	★
	元素外边距	★
	盒子大小计算	★
	CSS长度单位	☆

在CSS中三个非常重要的模块：盒子模型、浮动、定位。从本章开始，我们就先学习盒子模型，在后面的章节中我们再学习浮动和定位的相关知识。

8.1 盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

图片8-1说明了盒子模型(Box Model)：

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

图8-1

通过盒模型我们能了解盒子的一个占位情况。盒模型允许我们在元素周围添加边框，并定义元素之间的空间。

元素框的内部是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

在学习盒模型的时候，我们需要思考一个问题，在网页布局中，我们是如何把里面的文字、图片，按照设计师给我们的效果图排列的整齐有序的呢？如图8-2所示小米官网：

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

图8-2

其实我们前面学习过双标签都是一个一个的盒子，盒子里面的内容就是文字、图片等。所以说通过盒模型布局，其实就是把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。使用盒模型划分小米官网，如图8-3所示：

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

图8-3

所以说，如果学会了CSS的盒模型，那么在以后的网页布局中，我们就可以像搭积木(图8-4)一样，*的、快速的排版出我们要的网页了。

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

图8-4

8.2 元素宽高

8.2.1 height 和 width 属性

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性可设置如下值：

auto — 默认。浏览器计算高度和宽度。
length — 以 px、cm 等定义高度/宽度。
% — 以包含块的百分比定义高度/宽度。
initial — 将高度/宽度设置为默认值。
inherit — 从其父值继承高度/宽度。

例如：

CSS代码：

div {

width: 200px;

height: 200px;

background-color: black;

}

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

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

图 8-5

小贴士：

1、height和width属性不包括内边距、边框或外边距。它设置的是元素内边距、边框

以及外边距内的区域的高度或宽度；

2、如果盒子(块级元素)不设置宽度，会默认撑满父盒子的宽度；

3、如果盒子不设置高度，会默认被内容撑高。

8.2.2 max-width和min-width属性：

max-width和min-width用来设置元素的最大宽度和最小宽度。

由于盒子(块级元素)始终占用可用的全部宽度（尽可能向左和向右伸展）。

设置盒子(块级元素)的 width
,则元素将占用指定的宽度，可以防止其延伸到其容器的边缘（如图8-6第一个div所示）。

但是当浏览器窗口小于元素的宽度时，上面这个 <div>
会发生问题。浏览器会将水平滚动条添加到页面。在这种情况下，使用 max-width
可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要，如图8-6(第二个div所示)。

<html>

<head>

<title>Document</title>

<style>

div.ex1 {

width: 500px;

/* margin: auto; */

border: 3px solid #73AD21;

}

div.ex2 {

max-width: 500px;

/* margin: auto; */

border: 3px solid #73AD21;

}

</style>

</head>

<body>

<h2>CSS Max-width</h2>

<div class=“ex1”>这个 div 元素的宽度是：500px;</div>

<br>

<div class=“ex2”>这个 div 元素的最大宽度是：500px;</div>

<p><b>提示：</b>将浏览器窗口拖动到小于500px的宽度，以查看这两个 div ！
</p>

</body>

</html>

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

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

图8-6

同样，min-width也有类似的功效，可以设置盒子的最小宽度。

8.2.3 max-height和min-height属性:

用来设置元素的最大高度和最小高度。

max-height：此属性很少使用，在布局中若为了避免内容太多将高度撑太高影响布局美化统一，这个时候我们设置最大高度限制。

min-height：在网页布局中有时设置一个对象盒子时候避免对象没有内容时候不能撑开，但内容多少不能确定所以又不能固定高度，这个时候我们就会需要css来设置min-height最小高度撑高对象盒子。当内容少的时候最小高度能将内容显示出，如果内容多余最小高度能装下时候，对象也会再随内容增多而增高。

8.3 元素边框

CSS 的border 属性允许我们指定元素边框的样式、宽度和颜色等。

8.3.1 CSS 边框样式

通过border-style属性可以修改边框的样式。

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

其常用的属性值如下：

dotted — 定义点线边框
dashed — 定义虚线边框
solid — 定义单实线边框
double — 定义双实线边框
none — 定义无边框，即忽略所有边框的宽度(默认值)
hidden — 定义隐藏边框

例如：

CSS代码：

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

HTML代码：

<body>

</body>

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

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

图 8-7

小贴士：

除了使用border-style设置边框样式外，也可以通过border-left-style，border-top-style，border-bottom-style，border-right-style分别设置元素的四个边框样式。

8.3.2 CSS边框的宽度

border-width
属性可以设置元素上、下、左、右四个边框的宽度。可以设置一到四个值（用于上边框、右边框、下边框和左边框）:

例如：

CSS代码：

<style>

p {

width: 200px;

}

p.one {

/* 上边框和下边框为 5px，其他边为 10px */

border-style: solid;

border-width: 5px 10px;

}

p.two {

/* 上边框和下边框为 10px，其他边为 5px */

border-style: solid;

border-width: 10px 5px;

}

p.three {

/* 上边框 5px，右边框 10px，下边框 15px，左边框 20px */

border-style: solid;

border-width: 5px 10px 15px 20px;

}

</style>

HTML代码：

<body>

<p class=“one”>第一个文本</p>

<p class=“two”>第二个文本</p>

<p class=“three”>第三个文本</p>

</body>

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

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

图 8-8

小贴士：

边框的宽度同样也可以通过border-left-width、border-top-width、border-right-width、border-bottom-width来分别设置对应的边框宽度。

8.3.3 CSS边框的颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name — 指定颜色名，比如 “red”
HEX — 指定十六进制值，比如 “#ff0000”
RGB — 指定 RGB 值，比如 “rgb(255,0,0)”
transparent — 默认值，边框颜色为透明

例如：

CSS代码：

<style>

p.one {

border-style: solid;

border-color: blueviolet;

}

p.two {

border-style: solid;

border-color: #FD5A2C;

}

p.three {

border-style: dotted;

border-color: rgb(236, 65, 65);

}

</style>

HTML代码：

<body>

<p class=“one”>紫色实线边框</p>

<p class=“two”>橘黄色实线边框</p>

<p class=“three”>红色点状边框</p>

</body>

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

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

图 8-9

小贴士：

元素的边框颜色也可以使用border-left-color、border-top-color、border-right-color、border-bottom-color来分别设置。

8.3.4 CSS边框属性简写

我们书写CSS处理边框时要考虑许多属性。很多时候可能边框样式、宽度颜色等都要同时设置，因此为了缩减代码，可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

语法：

border : border-width || border-style || border-color

例如：

p {

border: 5px solid blueviolet;

}

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

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

图 8-10

也可只设置一个边。

例如：

p {

border-left: 5px solid blueviolet;

}

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

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

图 8-11

8.3.5 CSS圆角边框

border-radius 属性用于向元素添加圆角边框。

例如：

p {

border: 5px solid blueviolet;

border-radius: 5px;

}

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

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

图 8-12

若将border-radius的值设置为50%，则元素会呈现圆形。

<style>

div.one{

width: 150px;

height: 150px;

border: 3px solid black;

border-radius: 50%;

}

</style>

<body>

</body>

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

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

图8-13

8.4 元素内边距

padding属性用于设置内边距，是指边框与内容之间的距离。

8.4.1 基础用法

CSS 用于为元素的每一侧指定内边距的属性：

padding-top 设置元素的上内边距。
padding-right 设置元素的右内边距。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。

所有内边距属性都可以设置以下值：

length — 以 px、pt、cm 等单位指定内边距。
% — 指定以包含元素宽度的百分比计的内边距。
inherit — 指定应从父元素继承内边距。

注意：不允许有负值。

8.4.2 简写形式

padding属性也是一个复合属性，可以同时设置上下左右四个方向的边距。

但是由于padding属性的值部分内容是可以省略的，所以值为一个、两个、三个、四个分别代表不同的意思，下表就列出了不同个数的值代表的含义：

值的个数	表达的含义
1个值	padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3个值	padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

表8-1

8.4.3 综合案例

应用场景，一般是在一些导航条位置使用padding来设置四个方向内边距的样式，如：新浪导航。

参考源码：

<html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

p.nav {

height: 60px;

line-height: 60px;

padding-left: 30px;

border-bottom: 1px solid #ccc;

}

p.nav a {

text-decoration: none;

color: #333;

padding: 8px 15px;

}

</style>

</head>

<body>

</p>

</body>

</html>

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

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

图8-14

8.5 元素外边距

8.5.1 外边距基础写法

CSS margin
属性用于在任何定义的边框之外，为元素周围创建空间。也就是设置盒子与其他盒子之间的间距。

通过
CSS，我们可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top 设置元素的上外边距。
margin-right 设置元素的右外边距。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。

所有外边距属性都可以设置以下值：

auto — 浏览器来计算外边距。
length — 以 px、pt、cm 等单位指定外边距。
% — 指定以包含元素宽度的百分比计的外边距。
inherit — 指定应从父元素继承外边距。

注意：允许有负值。

8.5.2 外边距属性简写

（1）如果 margin 属性设置了一个值：

例如：margin: 10px;则代表四个外边距的值都是 10px。

（2）如果 margin 属性设置两个值：

例如：margin: 10px 20px;则代表上和下外边距是 10px,右和左外边距是 20px。

（3）如果 margin 属性设置三个值：

例如：margin: 10px 20px 30px;则代表的含义是：元素的上外边距是
10px，右和左外边距是 20px，下外边距是 30px。

（4）如果 margin 属性有四个值：

例如：margin: 10px 20px 30px 40px;则代表的含义是元素的上外边距是
10px，右外边距是 20px，下外边距是 30px，左外边距是 40px。

（5）auto 值

我们可以将 margin 属性设置为
auto，以使元素在其容器中水平居中。然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

小贴士：

外边距实现盒子居中要满足如下两个条件：

(1) 必须是块级元素；

(2) 盒子必须指定了宽度。

8.5.3 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将合并形成一个新的外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如图8-15所示：

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

图 8-15

当一个元素包含在另一个元素中时，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。如图8-16所示：

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

图 8-16

如何解决这种问题呢？可以采用下面的两种方案：

1、可以为父元素定义1像素的上边框或上内边距；

2、可以为父元素添加overflow:hidden。

8.6 盒子大小计算

使用 CSS 设置元素的 width 和 height
属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

例如：

CSS代码：

div {

width: 320px;

padding: 10px;

border: 5px solid gray;

margin: 0;

}

上述代码div的宽度为350px。

如图8-17所示：

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

图 8-17

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

知识拓展：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和
input除外）；

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

8.7 CSS长度单位

CSS
有几个不同的单位用于表示长度。一些设置CSS长度的属性有width，margin，padding，font-size，border-width等。

长度有一个数字和单位组成如 10px, 2em等。数字与单位之间不能出现空格。如果长度值为
0，则可以省略单位。对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

绝对单位：

单位	描述
cm	厘米
mm	毫米
px	像素

表8-2

相对单位：

单位	描述
em	相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
rem	相对于根元素的字体大小（font-size）
vw	相对于视口*宽度的 1%
vh	相对于视口*高度的 1%
%	相对于父元素

表8-3

小贴士：

为了更方便地控制网页中的元素，制作网页时可以通过如下代码清除元素的默认内外边距。

*{margin: 0;padding: 0;}

8.8 盒模型小练习

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

图8-18

参考源码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

p {

width: 680px;

padding: 20px 16px;

border: 1px solid #333333;

font-size: 14px;

font-family: “SimSun”;

color: #78902C;

text-indent: 2em;

}

</style>

</head>

<body>

<p>

***表示，中美建交35年关系发展的历程表明，两国的发展与繁荣给彼此带来机遇。不久前两国元首出席海牙核安全峰会期间成功会晤。新形势下，双方要相互尊重，在中美三个联合公报原则和国际关系基本准则基础上，扩大对话与合作，妥善处理分歧，推动中美关系健康稳定发展。

</p>

</body>

</html>

8.9练习题

简答题

1.简述你所理解的CSS盒模型。

2.简述CSS边框都有哪些属性。

3.简述外边距合并都有哪些情况。

二、上机题

1.实现以下效果：

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

背景样式和元素显示方式

知识模块	课程内容	重点	课程目标
属性扩展	清除默认样式	★	掌握CSS属性扩展中涉及到几个问题熟悉背景相关属性掌握网页中常见的背景设置方法掌握元素的大致分类以及特性掌握元素的互相转化掌握盒子的显示和隐藏属性掌握图片在父元素中居中的方法掌握处理图片间隙的方法
	居中对齐
	a标签的伪类
	height属性扩展
背景属性	背景属性	★
显示方式	块元素和行内元素	★
	元素显示模式转换
	元素的显示与隐藏
图片样式	图片水平居中	★
	图片间隙问题

9.1 CSS属性扩展

9.1.1 清除默认样式

在运用CSS进行界面样式设计的时候需要先将浏览器内置的默认CSS样式给清除一下，那么如何清除默认CSS样式？下面我们来看一下CSS清除默认样式的方法。

不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没清除默认的CSS样式往往会出现浏览器之间的页面差异。

每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。

通配符选择器

对于简单页面使用以下代码就可以去除默认样式：

*{ margin:0px; padding: 0px; }

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width: 200px;

height: 200px;

background-color: black;

}

</style>

</head>

<body>

</body>

</html>

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

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

图 9-1

由上例可以看到，黑色方块距离我们的浏览器边缘还有缝隙，这就是浏览器的默认样式导致的。解决办法如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0px;

height: 0px;

}

div {

width: 200px;

height: 200px;

background-color: black;

}

</style>

</head>

<body>

</body>

</html>

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

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

图 9-2

引入reset

html中有那么多的标签，如果我们每次去除样式都需要去逐个消除是很麻烦的，当然这是一个普遍需求，因此已经有前人为我们做好这项工作了，我们只需要在做的时候把文件直接引入就好了。我们把别人写好的代码写入到一个CSS文件里，然后使用外链式链入CSS。代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width: 200px;

height: 200px;

background-color: black;

}

</style>

</head>

<body>

</body>

</html>

CSS文件：

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: ‘’;

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

9.1.2 居中对齐

关于居中，主要有两种，一种是关于盒子的，一种是关于文字的。

9.1.2.1 元素居中对齐

要水平居中对齐一个元素(如 <div>)，可以使用 margin:
auto，设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

margin: auto;

width: 50%;

border: 5px solid blueviolet;

padding: 10px;

}

</style>

</head>

<body>

<div>元素居中对齐</div>

</body>

</html>

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

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

图 9-3

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

9.1.2.2 文本居中对齐

如果仅仅是为了文本在元素内水平居中对齐，可以使用 text-align: center。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

margin: auto;

width: 50%;

height: 80px;

border: 5px solid blueviolet;

padding: 10px;

text-align: center;

}

</style>

</head>

<body>

<div>元素居中对齐</div>

</body>

</html>

运行效果如图9-4所示：

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

图 9-4

在上例中，我们发现文字只是水平居中了，若想实现水平垂直均居中，则需要设置line-height的高度和盒子一样高。例如，可以将上例中的样式修改为如下代码：

<style>

div {

margin: auto;

width: 50%;

height: 80px;

line-height: 80px;

border: 5px solid blueviolet;

padding: 10px;

text-align: center;

}

</style>

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

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

图9-5

但是如果内容为多行文本，则此时设置垂直居中时就不能使用行高等于盒子高来实现了。如果多行文本想垂直居中，则需要盒子不设置高度，设置上下相同的padding属性值。

<style>

div {

margin: auto;

border: 5px solid blueviolet;

width: 100px;

text-align: center;

padding: 20px 0;

}

</style>

<div>

元素居中对齐

另一行内容

多行内容

</div>

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

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

图9-6

9.1.3 a标签的伪类

在支持 CSS
的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

如下：

a:link {/* 未访问的链接 */

color: #0f0;

}

a:visited {/* 已访问的链接 */

color: #f0f;

}

a:hover {/* 鼠标移动到链接上 */

color: #ff0;

}

a:active {/* 选定的链接 */

color: #0ff;

}

普通元素，非超级链接，也可以设置伪类状态，此时只有两个状态使用，分别是hover和active，伪类的权重和普通选择器权重是一样的。

小贴士：

1、在 CSS 定义中，a:hover 必须被置于 a:link之后，才是有效的。

2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

3、伪类名称对大小写不敏感。

在开发中经常会遇到通过设置超链接的hover状态来修改背景颜色的场景，如下例：

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

ul{

width: 505px;

list-style: none;

margin: 100px auto;

}

ul li{

width: 100px;

float: left;

line-height: 35px;

text-align: center;

border-right: 1px solid #fff;

}

ul li a{

display: block;

background: cyan;

text-decoration:none;

color: #fff;

}

ul li a:hover{

background: gold;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

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

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

图9-7

9.1.4 height属性扩展

在网页布局中，一个盒子必须有高度，否则看不到内容样式，高度可以有多个配置内容。

如果盒子没有设置高度，则被内容撑高；如果设置了高度，且内容高度大于盒子本身的高度，那么这时候超出的内容不会被隐藏，而是会自动溢出盒子。

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

width: 150px;

height: 100px;

background-color: blue;

}

</style>

</head>

<body>

<p>

你好，我是一段文字

</p>

</body>

上面的案例在浏览器中运行效果如图9-8所示：

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

图9-8

在上例中，我们发现内容最终溢出了盒子，这肯定不是我们所期望出现的效果，那么我们该如何解决溢出问题呢？其实在CSS中提供了一个属性overflow，通过设置该属性就可以解决内容溢出的问题了。

overflow属性有如下取值：

visible 可见的，默认的。
hidden 作用是超出高度部分，隐藏。
scroll
作用是给盒子添加滚动条样式，无论文字内容是否超出了盒子，都加滚动条样式。
auto 作用是盒子内容超出部分滚动条显示。

将上面的案例分别设置为：overflow：hidden；overflow：scroll；在浏览器中运行效果分别如图9-9和9-10所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p79NHQr6-1639323437446)(media/8d548f3436cf3ea8804a3a5b89a55bbe.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h50SWDud-1639323437448)(media/0163c0ab55ad8b88bb7adbc614ac5704.png)]

图9-9 图9-10

9.2 CSS背景属性

在前面的学习中我们有用过background-color，作用是给盒子设置背景颜色。其实background是个综合属性，用于定义HTML元素的背景效果。

9.2.1 background-color

background-color 属性可以用于定义了元素的背景颜色。

例如：

CSS代码：

<style>

div{

background-color: green;

}

</style>

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

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

图9-11

background-color属性在CSS中，颜色值通常以以下方式定义:

● 十六进制 — 如："#ff0000"

● RGB — 如：“rgb(255,0,0)”

● RGBA —
rgba模式是rgb模式的一种拓展，拓展的是透明度，a（alpha）就代表的是透明度，取值（0-1）之间，0表示完全透明，1表示纯色，如：“rgb(255,0,0,0.3)”

● 颜色名称 — 如：“red”

CSS代码：

<style>

div{

width: 200px;

height: 200px;

border: 4px dashed red;

background-color: rgba(0,255,0,0.3);

padding: 20px;

margin: 100px auto

}

</style>

HTML代码：

<body>

<div>

123

</div>

</body>

运行后效果如图9-12所示：

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

图9-12

9.2.2 background-image

background-image
属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。语法为：

url是统一资源资源定位符，后面必须要跟一对小括号，括号内部是图片的引入地址，可以是相对路径和绝对路径。

例如：

CSS代码：

<style>

div{

width: 300px;

height: 300px;

padding: 20px;

border: 5px dashed red;

margin: 100px auto;

background-color: yellow;

}

</style>

运行效果如图9-13所示：

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

图9-13

这时候我们需要思考一个问题，如果此时背景图片和背景颜色同时设置了，会怎么显示呢？例如：

background-color:gold;

运行效果如图9-14所示：

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

图9-14

通过上面的案例我们发现，背景图和背景色都会进行加载，只不过，背景图会覆盖背景颜色。

9.2.3 background-reapeat

默认情况下 background-image
属性会在页面的水平或者垂直方向平铺。如果需要控制图像在水平方向与垂直方向平铺，我们可以使用background-repeat设置图片是水平方向平铺或者是垂直方向平铺。background-repeat的常用属性有：

● repeat 背景重复，默认值。

● repeat-x 水平方向平铺。

● repeat-y 垂直方向平铺。

● no-repeat 背景图片重复状态为不重复。

示例：将background-reapeat设置为repeat，

CSS代码：

<style>

div{

width: 300px;

height: 300px;

padding: 20px;

border: 5px dashed red;

margin: 100px auto;

background-repeat: repeat;

}

</style>

运行效果如图9-15所示：

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

图9-15

将background-reapeat设置为no-repeat，运行效果如图9-16所示：

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

图9-16

将background-reapeat设置为repeat-x，运行效果如图9-17所示：

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

图9-17

将background-reapeat设置为repeat-y，运行效果如图9-18所示：

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

图9-18

案例：使用上下左右都对称的图片进行页面的背景设置。

CSS代码：

<style>

body{

}

ul{

width: 505px;

list-style: none;

margin: 100px auto;

}

ul li{

width: 100px;

float: left;

line-height: 35px;

text-align: center;

border-right: 1px solid #fff;

}

ul li a{

display: block;

text-decoration:none;

color: #fff;

}

ul li a:hover{

}

</style>

HML代码：

<body>

<ul>

</ul>

</body>

运行效果如图9-19所示：

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

图9-19

9.2.4 background-position

在网页开发中，有时候为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置，这时候就可以利用CSS提供的
background-position
属性改变图像在背景中的位置。background-position属性的用法如下：

background-position : length || length

background-position : position || position

不论哪种表示方法，都需要有两个值来进行设置，中间用空格隔开，而且第一个属性值描述的是背景图在盒子中水平方向的位置，第二个属性值描述的是背景图在盒子中垂直方向的位置。

小贴士：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0%
0%)。

关于background-position的属性值的取值，可以分为：单词表示法、像素表示法、百分比表示法。

9.2.4.1 单词表示法

两个属性都是使用单词表示定位的方向：

第一个属性的可选值：left、center、right，分别表示图片在水平方向居左、居中、居右；

第二个属性的可选值：top、center、bottom，分别表示图片在垂直方向居上，居中、居下书写时，可以在两个方向中挑任意两个进行组合。

background-position: right bottom;

例如：

CSS代码：

<style>

div{

width: 300px;

height: 300px;

padding: 20px;

border: 5px dashed red;

margin: 100px auto;

background-repeat: no-repeat;

background-position: right bottom;

}

</style>

运行效果如图9-20所示：

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

图9-20

关于单词表示法的应用场景

如果页面中盒子的宽和高是固定的，并且比背景图片要小，此时会提供一种解决方案，就是展示核心区域。

如图9-21所示

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

图9-21

如果不展示核心区域可能只有局部左上角状态如图9-22所示：

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

图9-22

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width: 200px;

height: 200px;

border: 5px solid red;

margin: 100px auto;

background-image:url(images/9.jpg);

background-repeat: no-repeat;

background-position: center center;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

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

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

图9-23

网页中会出现大的居中banner图片，如图9-24所示

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

图9-24

参考源码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body{

background-image:url(images/anhei.jpg);

background-repeat: no-repeat;

background-position: top center;

}

</style>

</head>

<body>

</body>

</html>

9.2.4.2 像素表示法

背景定位的两个属性值都是以px为单位的数值：

第一个属性值：表示水平方向，图片距离盒子左上角border以内的顶点距离；

第二个属性值：表示垂直方向，图片距离盒子左上角border以内的顶点距离。

例如：

CSS代码：

<style>

div{

width: 400px;

height: 400px;

padding: 20px;

border: 5px dashed red;

margin: 100px auto;

background-repeat: no-repeat;

background-position: 100px 100px;

}

</style>

运行效果如图9-25所示：

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

图9-25

像素值可以为负数，分别表示向不同的方向移动：

正数：表示图片从左上顶点为参考点向右、下进行移动。

负数：表示图片从左上顶底为参考点向左、上进行移动。

9.2.4.3 百分比表示法

百分表示法两个属性值都是百分比：

水平方向 100% = （盒子的width）-图片的宽度。

垂直方向100% = （盒子的width）-图片的高度。

例如：

CSS代码：

<style>

div{

width: 400px;

height: 400px;

border: 5px dashed red;

margin: 100px auto;

background-repeat: no-repeat;

background-position: 100% 0;

}

</style>

运行效果如图9-26所示：

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

图9-26

9.2.5 background-attachment

attachment附着，附着物的意思。

作用：设置背景图是否随着页面滚动而滚走。

属性值：scroll，滚动的，默认值，表示会和页面一起滚动走。

例如：

CSS代码：

<style>

body{

height: 2000px;

background-repeat: no-repeat;

}

</style>

运行效果如图9-27所示

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

图9-27

属性值如果为fixed，表示的是固定的，表示图片会固定在浏览器左上顶点，随着页面滚动图片会保持状态，不会向下滚动。

例如：

CSS代码：

<style>

body{

height: 2000px;

background-attachment: fixed;

background-repeat: no-repeat;

}

div {

width: 300px;

height: 300px;

background: red;

}

</style>

运行效果如图9-28所示：

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

图9-28

9.2.6 background复合属性

在以上章节中我们可以看到页面的背景颜色通过了很多的属性来控制。在网页开发中为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。

关于background六个单独属性组成一个综合属性。

属性值:可以为1-5个，值之间可以使用空格隔开，顺序可以颠倒。

例如：

CSS代码：

<style>

div{

width: 200px;

height: 200px;

background: url(images/in_14.png) no-repeat center top scroll cyan;

}

</style>

运行效果如图9-29所示：

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

图9-29

9.2.7 背景精灵图

将我们布局使用的各种背景图片有规则的合并成一张背景图，然后用background-position来实现背景图片的定位技术。适用于一般小图标，不适合大背景大布局背景。

如图9-30所示：

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

图 9-30

优点：
（1）减少网页的 http 请求，从而大大的提高页面的性能；
（2）图片命名上的困扰；
（3）更换风格方便。
缺点：
（1）必须要限定容器大小符合背景图元素位置，需要计算；

（2）需要计算位置。

9.2.8 背景应用

9.2.8.1 logo替换文案

在前面的课程中，学习了h1标签通常是制作logo的，目的是为了优化搜索引擎，搜索引擎抓取的是文字而不是logo图片，所以我们可以利用文字和图片制作该效果。

案例一：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

h1{

width: 500px;

overflow: hidden;

}

h1 a {

display: block;

height: 58px;

width: 146px;

background:url(images/logo.png) no-repeat;

text-indent:-10em;

}

</style>

</head>

<body>

<h1>

淘宝网，购物

</a>

</h1>

</body>

</html>

运行效果如图9-31所示：

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

图 9-31

原理，就是使用背景图片替换文字，文字通过text-indent属性为负值之后除了h1盒子的显示范围，然后h1的overflow设置成hidden了，从而实现了logo替换文字。

9.2.8.2 利用padding制作背景图

案例二：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul{

list-style:none;

line-height: 30px;

}

ul li{

padding-left: 20px;

background: url(images/s2.png) no-repeat center left;

}

</style>

</head>

<body>

<ul>

<li>文字文字文字文字文字文字文字文字</li>

</ul>

</body>

</html>

运行效果如图9-32所示：

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

图 9-32

原理：将原来ul
的默认小黑点去掉（list-style：none）然后通过li标签的左padding挤出位置，由于背景是可以在padding中加载的，所以给每一个li标签设置背景图片即可。

9.2.8.3 背景精灵

精灵就是和背景定位反向而驰，背景定位都是图片小盒子大，如果此时盒子小，图片大怎么显示？答：只显示局部，我们可以利用这种只显示局部的特点制作背景精灵。

背景精灵测量方法：如果需要显示某个位置的图片，在fireworks中设置一个和页面盒子一样大小的切片，然后在目前区域中放置切片，通过获取属性面板的x和y值，整体设置为负数即可。

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

图 9-33

浏览器加载效果如图9-34所示：

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

图 9-34

背景精灵就是将很多的小的icon图标汇集在一起显示，利于网页速度的加载。

9.3 元素显示方式

9.3.1 块元素和行内元素

9.3.1.1 块元素

块元素又名块级元素(block
element)，是html规范中的概念。大多数HTML元素被定义为块级元素或内联元素。块元素一般都从新行开始，独占一行，相邻的块级元素将会在不同行显示。本身具有display:block;属性。

常见的块元素标签有：

<div>、<p>、<h1>~<h6>、<ul>、<table>等

块元素的特点：

（1）总是在新行上开始。

（2）高度，行高以及外边距和内边距都可控制。

（3）宽度缺省是它的容器的100%，除非设定一个宽度。

（4）它可以容纳内联元素和其他块元素。

例如：

<body>

<div>这是一个div标签</div>

<p>这是一个p标签</p>

<h4>这是一个h标签</h4>

</body>

运行效果如图9-35所示：

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

图 9-35

9.3.1.2 行内元素

行内元素又名内联元素(inline
element)，行内元素一般是一行内往后排。本身具有display:inline;属性。

常见的行内元素标签有：

<a>、<span>、<em>等

行内元素的特点：

（1）和其他元素都在一行上；

（2）高，行高及外边距和内边距不可改变；

（3）宽度就是它的文字或图片的宽度，不可改变；

（4）内联元素只能容纳文本或者其他内联元素。

例如：

<body>

<a href="">这是一个a标签</a>

<span>这是一个span标签</span>

<em>这是一个em标签</em>

</body>

运行效果如图9-36所示：

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

图 9-36

9.3.1.3 行内块元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。本身具有display:inline-block;属性。

常见的行内块元素标签有：<img>、<input>等。

行内块元素特点：

（1）不自动换行；

（2）能够识别宽高；

（3）默认排列方式为从左到右。

例如：

<body>

</body>

运行效果如图9-37所示：

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

图 9-37

9.3.2 元素显示模式转换

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：

（1）display:inline;转换为行内元素。

（2）display:block;转换为块状元素。

（3）display:inline-block;转换为行内块状元素。

9.3.3 元素的显示与隐藏

9.3.3.1 display和visibility

display属性设置一个元素应如何显示，visibility属性指定一个元素是可见还是隐藏。

隐藏元素 — display:none或visibility:hidden。

显示元素 — display:block或visibility:visible。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

（1）visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

（2）display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box1 {

width: 100px;

height: 100px;

background-color: cadetblue;

display: none;

}

.box2 {

width: 100px;

height: 100px;

background-color: blueviolet;

visibility: hidden;

}

</style>

</head>

<body>

</body>

</html>

运行效果如图9-38所示：

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

图 9-38

9.3.3.2 opacity属性

opacity属性指定了一个元素的透明度。

当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。

语法：opacity: value|inherit;

值	描述
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。

表 9-1

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.light {

width: 200px;

height: 20px;

background-color: blueviolet;

opacity: 0;

}

.medium {

width: 200px;

height: 20px;

background-color: blueviolet;

opacity: 0.5;

}

.heavy {

width: 200px;

height: 20px;

background-color: blueviolet;

opacity: 1;

}

.father {

width: 400px;

height: 20px;

background-color: blueviolet;

opacity: inherit;

}

</style>

</head>

<body>

<div class=“light”>元素完全透明</div>

<div class=“medium”>元素半透明</div>

<div class=“heavy”>元素完全不透明</div>

<div class=“son”>元素跟随父元素继承 opacity 属性的值</div>

</div>

</body>

</html>

运行效果如图9-39所示：

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

图 9-39

9.4 CSS图片样式

9.4.1 图片水平居中

（1）要让图片水平居中, 可以使用 margin: auto; 并将它放到块元素中。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

img {

display: block;

margin: 0 auto;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

运行效果如图9-40所示：

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

图 9-40

（2）利用文本的水平居中属性text-align:
center;但是这个属性要放到图片的父元素上面。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: center;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

运行效果如图9-41所示：

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

图 9-41

9.4.2 图片间隙问题

在进行页面的div+CSS排版时，浏览器中的图片元素img下出现多余空白。

如图9-42所示：

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

图 9-42

解决办法如下：

img变为block元素

img {

display: block;

}

给图片父元素设置font-size:0；

div {

font-size: 0;

}

设置图片的垂直对齐方式

img {

vertical-align:middle;

}

运行效果如图9-43所示：

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

图 9-43

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元素中，这个属性会设置单元格框中的单元格内容的对齐方式。

常用的值见下表：

值	描述
baseline	默认。元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

表 9-2

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

background-color: blueviolet;

padding: 10px;

}

span {

border: 1px solid white;

}

.baseline {

vertical-align: baseline;

}

.sub {

vertical-align: sub;

}

.super {

vertical-align: super;

}

.top {

vertical-align: top;

}

.middle {

vertical-align: middle;

}

.bottom {

vertical-align: bottom;

}

</style>

</head>

<body>

<div>

<span class=“super”>super</span>

<span class=“middle”>middle</span>

<span class=“bottom”>bottom</span>

</div>

</body>

</html>

运行效果如图9-44所示：

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

图 9-44

9.5 练习题

一、简答题

1.简述CSS盒子和文字居中对齐都有哪些方法。

2.简述元素常见三种显示模式与特性。

3.简述解决图片下间隙问题的几种方法。

二、上机题

1.实现以下效果：

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

第十章浮动

知识模块	课程内容	重点	课程目标
标准文档流	清除默认样式	☆	了解标准文档流的概念
显示模式	display显示模式	★	掌握display的三种显示模式
浮动	浮动属性的作用	★	掌握浮动属性的使用
	浮动对布局的影响	☆	了解浮动对布局的影响
	清除浮动影响的方法	★	掌握清除浮动影响的方法
	伪元素实用技巧	☆	掌握伪元素的写法和用法
	浮动对元素模式的影响	☆	了解浮动对元素类型的影响
	浮动最初解决的问题	☆	了解字围现象
元素类型	块级元素	★	掌握块级元素的特点
	行级元素		掌握行级元素的特点

10.1 标准文档流

思考一个问题，我们开发网页是更像写word还是更像画图？答更像写word，因为我们开发网页有自己的书写规律，从上往下，从左往右，前面内容的变化会影响后面内容的位置。

以上也是标准文档流的特性。

HTML文件就是一种标准文档流文件，也有自己的一些特性。

10.2 浮动的作用

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

例如(图10-1)：

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

图 10-1

注意：标签的水平方向浮动，意味着标签只能左右移动而不能上下移动。

10.3 元素类型

从HTML的角度讲元素分为两个级别：容器级和文本级。

从CSS的角度的讲将元素分为三种类型：块级元素，行内元素，行内块元素。

块级元素

特点：可以设置宽度、高度，元素独占一行。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width: 100px;

height: 100px;

background-color: red;

margin: 10px;

}

</style>

</head>

<body>

</body>

</html>

运行效果如10-2所示：

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

图 10-2

常用的块级元素：div、p、h1-h6、ul、ol、dl、table等等。

行内元素

特点：文字并排显示，不能设置盒子的宽度和高度。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

span{

background: pink;

}

</style>

</head>

<body>

<span>span文字1</span>

<span>span文字2</span>

</body>

</html>

运行效果如10-3所示：

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

图 10-3

常用的行内元素：span、a、b、u、i等等。

行内块元素

特点：可以设置宽度和高度，并且盒子也可以并排显示。

常见行内块元素：input、img。

例如：

<head>

<title>Document</title>

<style>

span{

background: pink;

}

input{

width: 300px;

}

</style>

</head>

<body>

</body>

运行效果如10-4所示：

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

图 10-4

10.4 display显示模式

大部分标签默认的时候都会以各自的显示状态（类型）进行加载，标签的显示状态并不是固定不变的，可以通过css属性display进行切换。

display属性值：

block：砖、块的意思，表示标签要以块级元素加载。

display: block;

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width: 200px;

height: 200px;

margin: 20px;

background: green;

display: block;

}

</style>

</head>

<body>

<div>我是div标签</div>

<div>我是div2标签</div>

</body>

</html>

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

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

图 10-5

inline: 行内，表示将标签以行内元素进行加载

display: inline;

例如：

display: inline;

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

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

图 10-6

inline-block: 行内块，表示将标签以行内块元素进行加载

display:inline-block;

例如：

display:inline-block;

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

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

图 10-7

如果一个网站只有标准文档流，很多效果是不能实现的，如果要实现非标准特点的页面就必须让标签去标准化。

让标签脱离标准流的方法：浮动、定位。

10.5 浮动的基本使用

浮动属性是专门用于进行网页并排布局的。

作用：脱离标准文档流，不在受元素等级的限制，又可以并排显示，又可以设置宽和高。

float：属性就是设置元素浮动。

属性值：left、right。

float: left;

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

div {

width: 1000px;

height: 50px;

border: 5px solid red;

}

p {

width: 40px;

height: 40px;

margin: 0 10px;

color: #fff;

background-color: green;

}

.left{

float: left;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

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

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

图 10-8

float: right;

例如：

CSS代码：

.right {

float: right;

}

HTML代码：

<div>

</div>

运行效果如图10-9所示：

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

图 10-9

浮动的特性：元素会按照书写的顺序进行依次贴边，同一个父盒子中，即可以设置左浮动，也可以设置右浮动。

例如：

HTML代码：

<div>

</div>

运行效果如图10-10所示。

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

图 10-10

补充知识点：所有的兄弟元素，如果一个有浮动了，剩下的所有兄弟元素必须都设置浮动。

如果浮动元素不设置宽度，不会撑满父盒子，而被内容撑宽。

10.5.1 浮动综合小练习

浮动在页面布局中非常常用，下面我们来看一个页面布局的例子，从例子中体会一下浮动float的用法。

参考源码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.inner{

width: 970px;

margin: 0 auto;

}

.inner .top{

height: 103px;

margin-bottom: 10px;

}

.inner .top .logo {

width: 277px;

height: 103px;

float: left;

background-color: red;

}

.inner .top .nav{

width: 679px;

height: 103px;

float: right;

}

.inner .top .nav .news {

width: 137px;

height: 49px;

background: greenyellow;

margin-bottom: 8px;

float:right;

}

.inner .top .nav .nav_li{

height: 46px;

background: #000;

background: greenyellow;

float: right;

width: 100%;

}

.inner .middle{

height: 435px;

margin-bottom: 10px;

}

.inner .middle .left {

width: 310px;

height: 435px;

background-color: orange;

float: left;

}

.inner .middle .right{

width: 650px;

height: 435px;

float: right;

}

.inner .middle .right .r_top{

height: 401px;

margin-bottom: 10px;

}

.inner .middle .right .r_top .r_top_left{

width: 450px;

height: 401px;

float: left;

}

.inner .middle .right .r_top .r_top_left .s_top{

height: 240px;

background: blue;

margin-bottom: 10px;

}

.inner .middle .right .r_top .r_top_left .s_center{

height: 110px;

background: blue;

margin-bottom: 10px;

}

.inner .middle .right .r_top .r_top_left .s_bottom{

height:30px;

background: blue;

}

.inner .middle .right .r_top .r_top_right{

width: 190px;

height:401px;

background: purple;

float: right;

}

.inner .middle .right .r_bottom{

height: 25px;

background: green;

}

.inner .bottom {

height: 35px;

background: navy;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

运行效果如图10-11所示:

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

图 10-11

10.6 浮动的性质

10.6.1 浮动的元素脱标

标准流元素是区分行、块的。我们知道了浮动元素是脱离标准流的，那么脱离标准流后，浮动元素有哪些特性？

答：浮动元素，脱离标准流后，既可以设置宽度和高度，也可以实现并排显示，不区分元素状态，也就是不区分行内元素和块级元素。

例如：

div p {

width: 100px;

height: 100px;

background: purple;

}

div span {

width: 100px;

height: 100px;

background: orange

}

p标签和span标签都设置了宽度和高度，但是由于元素类型的限制，span标签没有宽度和高度。

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

图 10-12

div内部元素浮动之后。

例如：

CSS代码：

div p {

width: 100px;

height: 100px;

background: purple;

float: left;

}

div span {

width: 100px;

height: 100px;

background: orange;

float: left;

}

运行效果如图10-13所示：

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

图 10-13

需要注意的是，兄弟元素如果有一个浮动了，剩下必须都要浮动。

如果此时p标签和span标签都没有设置宽度和高度，元素的宽度会被内容撑宽，不会自动撑满父盒子。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

div{

width: 200px;

height: 200px;

border: 1px solid red;

}

div p {

background: purple;

float: left;

}

div span {

background: orange;

float: left;

}

</style>

</head>

<body>

<div>

<p>我是p标签</p>

<span>span标签</span>

</div>

</body>

</html>

运行效果如图10-14所示:

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

图 10-14

10.6.2 依次贴边

如果父盒子的宽度不足以存下所有的子盒子，存放不下的会自动向前寻找，直到空余位置能够存放，从而进行贴边显示。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

div {

width: 400px;

height: 400px;

border: 5px solid red;

margin: 100px auto

}

div p{

width: 100px;

height: 100px;

float: left;

}

div p.par1{

height: 250px;

background: green;

}

div p.par2{

height: 200px;

background: blue;

}

div p.par3{

background: yellow;

}

div p.par4{

width: 300px;

background: cyan;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

运行效果如图10-15所示:

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

图 10-15

如果父盒子的跨度不够，子盒子会依次贴边，但是如果前面元素中有空隙当前需要贴边的元素不会钻空，不会出现钻空的现象，而只会查询剩余宽度实现依次贴边。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

div {

width: 600px;

height: 400px;

border: 5px solid red;

margin: 100px auto

}

div p {

width: 100px;

height: 100px;

float: left;

}

div p.par1 {

height: 250px;

background: green;

}

div p.par2 {

width: 330px;

background: blue;

}

div p.par3 {

height: 200px;

background: yellow;

}

div p.par4 {

width: 300px;

background: cyan;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

运行效果如图10-16所示:

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

图 10-16

如果某一个子盒子的宽度大于了父盒子，会有溢出状态。

CSS代码：

<style>

* {

margin: 0;

padding: 0;

}

div {

width: 600px;

height: 400px;

border: 5px solid red;

margin: 100px auto

}

div p{

width: 100px;

height: 100px;

float: left;

}

div p.par1{

height: 250px;

background: green;

}

div p.par2{

width: 330px;

background: blue;

}

div p.par3{

height: 200px;

background: yellow;

}

div p.par4{

width: 650px;

background: cyan;

}

</style>

运行效果如图10-17所示:

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

图 10-17

向右贴边的原理和向左相同，也是按照先后顺序进行贴边。

CSS代码：

<style>

margin: 0;

padding: 0;

}

div {

width: 600px;

height: 400px;

border: 5px solid red;

margin: 100px auto

}

div p{

width: 100px;

height: 100px;

float: right;

}

div p.par1{

height: 250px;

background: green;

}

div p.par2{

width: 130px;

background: blue;

}

div p.par3{

height: 200px;

background: yellow;

}

div p.par4{

width: 100px;

background: cyan;

}

</style>

运行效果如图10-18所示:

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

图 10-18

10.6.3 浮动依次贴边练习

在实际前端开发中，依次贴边经常用于页面布局，下面我们通过一个例子来看一下浮动依次贴边在页面布局中的应用。

参考源码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.outer {

height: 440px;

width: 940px;

padding: 10px;

border: 2px solid #000;

margin: 10px auto

}

.outer div {

float: left;

}

.outer .box1{

width: 300px;

height: 260px;

background: pink;

}

.outer .box2 {

width: 240px;

height: 260px;

background:cyan;

}

.outer .s_box{

width: 200px;

height: 130px;

}

.outer .box3 {

background: yellowgreen;

}

.outer .box4 {

background: greenyellow;

}

.outer .box7{

width: 300px;

height: 180px;

background: blueviolet;

}

.outer .s_box2 {

width: 160px;

height: 180px;

}

.outer .box5 {

background: purple;

}

.outer .box6 {

background: palegreen;

}

</style>

</head>

<body>

</div>

</body>

</html>

运行效果如图10-19所示:

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

图 10-19

10.6.4 浮动margin塌陷问题

父盒子的高度塌陷：父盒子高度本来是由子元素撑开的，父亲的高度计算是从内容的高度得来的，现在由于浮动元素脱离了标准文档流不占位置，所以子元素高度无法计算，父盒子的高度就塌陷了。

如下图：

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

图 10-20

10.6.5 浮动元素让出标准流

标准流中的元素都有自己的一个标准流位置，后面的元素只能在前面元素的后面进行加载。

浮动元素脱离了标准流，它会让后面的元素占有自己原来的位置，显示效果上来看仿佛是自己“飘”起来了，我们称之为脱标了。

标准流显示，如图10-21所示：

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

图 10-21

此时粉色盒子浮动了。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.outer{

width: 300px;

height: 300px;

margin: 100px auto;

}

.par{

width: 100px;

height: 100px;

background: pink;

float: left;

}

.box{

width: 200px;

height: 200px;

background: blue;

}

</style>

</head>

<body>

</div>

</body>

</html>

运行效果如图10-22所示:

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

图 10-22

10.6.6 字围现象

字围现象：同级元素中，前面元素如果浮动了，后面的标准流会占有前面元素的文字，后面盒子中如果有文字，不会和盒子一样占有前面盒子的位置，而是绕开浮动元素的位置，围绕着加载，实现字围现象。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.outer{

width: 300px;

height: 300px;

margin: 100px auto;

}

.par{

width: 100px;

height: 100px;

background: pink;

float: left;

}

.box{

width: 200px;

height: 200px;

background: cyan;

}

</style>

</head>

<body>

111文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

</div>

</body>

</html>

运行效果如图10-23所示:

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

图 10-23

我们可以利用字围实现网页中明星简介的案例。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

div{

width: 300px;

padding: 10px;

border: 1px solid red;

margin: 30px auto;

}

div img{

width: 100px;

float: right;

margin: 8px;

}

</style>

</head>

<body>

<div>

<p>

宋小宝，本名宋宝利，1981年1月5日出生，吉林省通化市辉南县楼街乡光明村人 [1]
，中国内地男演员，喜剧表演艺术家赵本山先生的第32 位徒弟。

</p>

<p>

2009年，因参加综艺节目《本山快乐营》小有名气。2011年，因参演辽
宁卫视春节晚会与师父赵本山合作小品《相亲》而获得更多关注。2012
年8月，凭借电视剧《樱桃》参加第四届新农村电视艺术节获最佳男主角 [2]
。同年12月10日，凭借电视剧《樱桃》参加第八届华鼎奖获当代
类最佳男演员。2013年10月，第十届华鼎奖获最受中国媒体欢迎的演员。
2014年8月，凭借电视剧《樱桃红》参加第十三届华鼎奖获中国当代题
材电视剧最佳男演员奖 [3] 。2015年参加中国首档明星喜剧竞赛真人秀
《欢乐喜剧人第一季》 [4] 。同年11月5日，参加《咱们穿越吧》庆
功会。同年12月9日，献唱电影《唐人街探案》推广曲《往事只能回味》。
2016年12月13日，献唱电影《东北往事之破马张飞》主题曲《全世界都在说东北话》。

</p>

</div>

</body>

</html>

运行效果如图10-24所示:

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

图 10-24

10.7 清除浮动

1、浮动带来的影响

标准流的盒子，如果不设置高度，会被内容自动撑高。

如果盒子内部的元素浮动了，子盒子脱标后，不能撑高父盒子。父盒子的高度就会为0，

会导致一些问题。

父盒子的高度不能被子元素撑高了。如图10-25所示：

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

图 10-25

如果父盒子后面还有其他兄弟标签，并且该兄弟标签内部也有浮动元素，前面的浮动会影响后面的贴边。如图10-26所示：

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

图 10-26

根据以上两个问题，需要整理方案解决以上问题。

10.7.1 清除浮动方法一：height属性

父盒子的高度不能被子盒子撑高，我们可以*制给父盒子设置一个高度，去管理内部的子元素。如图10-27所示：

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

图 10-27

缺点：父盒子的高度不可以随着子元素变高而增高，如果子盒子是动态的，父盒子还会出现原来的问题。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.box,.box1 {

width: 800px;

height: 80px;

border: 5px solid red;

}

.box1 {

border-color: blue;

}

.box p{

width: 80px;

height: 100px;

background: cyan;

margin: 0 5px;

float: left;

}

.box1 p{

width:80px;

height:100px;

background: orange;

margin: 0 5px;

float: left;

}

</style>

</head>

<body>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

运行效果如图10-28所示:

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

图 10-28

总结：使用height属性清除浮动影响只适用于父子都是固定高度的。

10.7.2 清除浮动方法二：clear属性

css有个clear属性，专门清除浮动元素带来的影响。

属性值：

left：清除前面左浮动的影响。

right：清除前面右浮动的影响。

both：清除前面所有浮动的影响。

clear: both;

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.box,.box1 {

width: 800px;

border: 5px solid red;

}

.box1 {

border-color: blue;

clear: both;

}

.box p{

width: 80px;

height: 100px;

background: cyan;

margin: 0 5px;

float: left;

}

.box1 p{

width:80px;

height:100px;

background: orange;

margin: 0 5px;

float: left;

}

</style>

</head>

<body>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

运行效果如图10-29所示:

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

图 10-29

总结：clear属性可以解决当前盒子的浮动影响。

缺点：父盒子还是不能被内部元素撑高，父盒子之间的margin显示有问题。

10.7.3 清除浮动方法三：隔墙法

方法：利用clear属性和height属性，制作一堵墙，将两个有浮动的元素父亲隔离起来。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.box,.box1 {

width: 800px;

border: 5px solid red;

}

.box1 {

border-color: blue;

}

.box p{

width: 80px;

height: 100px;

background: cyan;

margin: 0 5px;

float: left;

}

.box1 p{

width:80px;

height:100px;

background: orange;

margin: 0 5px;

float: left;

}

.cl {

clear: both;

height: 10px;

}

</style>

</head>

<body>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

运行效果如图10-30所示:

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

图 10-30

解决的问题：父元素位置稳定了，需要的上下间距也解决了。

缺点：子盒子还是不能撑满父盒子的高度。

10.7.4 清除浮动方法四：内墙法

方法：通过隔墙法演变而来，将墙放在了两个受影响父元素内部，所有的子元素最后，设置一堵内墙法，设置clear属性。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.box,.box1 {

width: 800px;

border: 5px solid red;

}

.box {

margin-bottom: 10px;

}

.box1 {

border-color: blue;

}

.box p{

width: 80px;

height: 100px;

background: cyan;

margin: 0 5px;

float: left;

}

.box1 p{

width:80px;

height:100px;

background: orange;

margin: 0 5px;

float: left;

}

.cl {

clear: both;

}

</style>

</head>

<body>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

运行效果如图10-31所示:

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

图 10-31

至此，解决了之前遇到浮动影响所有的问题。

10.7.5 清除浮动方法五：伪类

CSS选择器的一种（后面我们CSS3课程中会学习）

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.box,.box1 {

width: 800px;

border: 5px solid red;

}

.box {

margin-bottom: 10px;

}

.box1 {

border-color: blue;

}

.box p{

width: 80px;

height: 100px;

background: cyan;

margin: 0 5px;

float: left;

}

.box1 p{

width:80px;

height:100px;

background: orange;

margin: 0 5px;

float: left;

}

.clearfix::after {

content: ‘’;

display: block;

height: 0;

clear:both;

visibility: hidden;

}

</style>

</head>

<body>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

运行效果如图10-32所示:

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

图 10-32

10.7.6 清除浮动方法六：overflow属性

overflow属性清除浮动影响是一个小偏方，值必须是hidden，可以解决浮动的所有问题。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.box,.box1 {

width: 800px;

border: 5px solid red;

}

.box {

overflow: hidden;

margin-bottom: 10px;

}

.box1 {

border-color: blue;

overflow: hidden;

}

.box p{

width: 80px;

height: 100px;

background: cyan;

margin: 0 5px;

float: left;

}

.box1 p{

width:80px;

height:100px;

background: orange;

margin: 0 5px;

float: left;

}

</style>

</head>

<body>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

运行效果如图10-33所示:

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

图 10-33

通过overflow属性解决浮动影响的原因：overflow属性有BFC特性，BFC特性有一个特

点，设置是该属性的元素就拥有被内部元素撑高的特点。

实际工作中，使用内墙法或者overflow属性去解决浮动的影响是比较常用的方法。

10.7.7 浮动综合案例

针对以上我们学习的浮动的知识点，下面做一个复杂点的浮动案例来复习一下前面所学习的有关浮动的一些内容。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.outer {

width: 1000px;

height: 96px;

background: #F4F3F2;

margin: 100px auto;

padding: 15px 0;

}

.outer .pic {

width: 290px;

height: 96px;

float: left;

padding-left: 20px;

border-right: 1px solid #D0CDC7;

}

.outer .pic .top{

height: 65px;

}

.outer .pic .top img {

width: 83px;

float: left;

}

.outer .pic .top .t_cont{

float: left;

width: 197px;

padding-left: 10px;

font-size: 14px;

color: #0B335F;

}

.outer .pic .top .t_cont .tit {

line-height: 24px;

}

.outer .pic .top .t_cont .des{

font-size: 12px;

color: #666560;

line-height: 22px;

}

.outer .pic .top .t_cont .tit span{

color: #DA0000;

}

.outer .pic .bottom {

font-size: 14px;

color:#164560;

line-height: 30px;

}

.outer .news {

float: left;

padding-left: 32px;

line-height: 24px;

font-size: 14px;

color:#164560;

}

.outer .news ul {

list-style: none;

}

</style>

</head>

<body>

<span>快看|</span>2019我们一起想她表白

</p>

新中国70华诞，为祖国母亲而歌。

</p>

</div>

解放军最新地空导弹车曝光！战力惊人

</div>

<span>中国梦实践者|</span>大国工匠行业先锋创业圆梦

</p>

</div>

“家国情怀”是新时代一支*心剂

</div>

<ul>

<li>第七届中国网络视听大会</li>

<li>2019中国北京世界园艺博览会</li>

</ul>

</div>

</body>

</html>

运行效果如图10-34所示。

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

图 10-34

10.8 练习题

一、简答题

1.简述文档流。

2.简述浮动产生的问题以及解决方法。

二、上机题

1.实现以下效果：

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

2.实现以下效果：

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

第十一章定位

知识模块	课程内容	重点	课程目标
定位	定位属性详解	★	熟悉定位属性掌握四种定位的使用场景掌握子标签绝对定位，父标签加相对定位掌握定位实现居中的技巧掌握定位偏移属性特点，掌握如何设置层级属性

11.1 定位

定位就是将盒模型按照指定位置加载。

相对定位不脱离标准流，绝对定位和固定、定位是脱离标准流的。

Position：

作用：设置盒子针对某个参考元素进行位置偏移设置。

属性值：

static：静态定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

如果定位的元素想要发生位置偏移，必须搭配偏移量属性进行设置。

水平方向设置：left、right

垂直方向设置：top、bottom

11.1.1 静态定位

HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、

left 和 right 属性的影响。

position: static;的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

11.1.2 相对定位

属性值：relative，相对的意思。

参考元素：自身盒子的原始位置。

例如：

CSS代码：

<style>

margin: 0;

padding: 0;

}

div{

width: 300px;

margin: 100px auto;

}

width: 100px;

height: 100px;

background: cyan;

margin: 5px;

}

p.current{

background: green;

position: relative;

right: -100px;

bottom: -100px;

}

</style>

运行效果如图11-1所示:

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

图 11-1

相对的定位的性质：是不脱离标准流状态的，不会让出原始位置，盒子会在新的指定位置加载。

需要注意的是：

偏移量属性值是有正负之分的：

正数：表示偏移方向和属性名正好相反。

负数：表示偏移方向和属性名正好相同。

例如：

CSS代码：

position: relative;

left: -50px;

top: -50px;

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

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

图 11-2

在水平方向不能同时设置left和right属性，如果同时设置，只会加载left属性，垂直方向如果top和bottom同时设置，只会加在top属性。

例如：

CSS代码：

left: -50px;

top: -50px;

right: -50px;

bottom: -50px;

运行效果如图11-3所示:

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

图 11-3

提示：使用偏移量的时候，从水平和垂直方向各挑选出一个属性进行组合。

相对定位的参考位置是自身元素，此时就会有不同的参考点。

left、top：使用的是偏移之前的左上顶点作为参考点。

例如：

CSS代码：

left: 100px;

top: 100px;

运行效果如图11-4所示:

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

图 11-4

left、bottom：使用偏移前的左下顶点作为参考点。

例如：

CSS代码：

left: 100px;

bottom: 100px;

运行效果如图11-5所示:

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

图 11-5

right、top：使用偏移前的右上顶点作为参考点。

例如：

CSS代码：

right: 100px;

top: 100px;

运行效果如图11-6所示:

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

图 11-6

right、bottom：使用偏移前的右下顶点作为参考点。

例如：

CSS代码：

right: 100px;

bottom: 100px;

运行效果如图11-7所示:

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

图 11-7

11.1.2.1 相对定位使用场景1

相对定位在实际应用中经常在导航条的位置被使用，下面我学习一个例子，通过这个例子去理解一下相对定位的用法。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

div{

width: 605px;

height: 40px;

margin: 100px auto;

}

div ul li{

float: left;

list-style: none;

width: 120px;

height: 40px;

text-align: center;

line-height: 40px;

border-right:1px solid #fff;

background-color: cyan;

}

div ul li a{

text-decoration: none;

color: #fff;

display: block;

}

div ul li a:hover{

border-top: 5px solid red;

position: relative;

bottom: 5px;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

运行效果如图11-8所示:

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

图 11-8

11.1.2.2 相对定位使用场景2

在一些百度百科文章中或者论文中需要进一步解释说明的地方，也会使用到相对定位。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

width: 200px;

height: 200px;

border: 1px solid red;

margin: 100px auto;

}

p span{

color: red;

font-size: 12px;

position: relative;

top: -5px;

}

</style>

</head>

<body>

<p>

这是一段文字<span>[1]</span>这是一段文字这是一段文字这是一段文字
<span>[2]</span>这是一段文字这是一段文字这是一段文字<span>[3]</span>
这是一段文字这是一段文字<span>[4]</span>这是一段文字这是一段文字文字
<span>[1]</span>这是一段文字

</p>

</body>

</html>

运行效果如图11-9所示:

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

图 11-9

11.1.3 绝对定位

属性值：absolute，绝对的意思。

参考元素：参考的是距离最近的有定位的祖先元素，如果所有的祖先元素都没有设置定位，则参考body。

如果想要发生位置偏移，必须搭配偏移量属性。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

div{

width: 300px;

}

width: 100px;

height: 100px;

background: cyan;

margin: 5px;

}

p.current{

background: green;

position: absolute;

top: 50px;

left: 50px;

}

</style>

</head>

<body>

<div>

<p></p>

<p></p>

</div>

</body>

</html>

运行效果如图11-10所示:

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

图 11-10

绝对定位的性质：绝对定位元素是脱离了标准流的，让出了标准流的位置，后面的标准流元素会占领该元素脱标之前的位置，此时该元素脱标后不再受标准流的控制（比如span标签绝对定位后可以设置宽度和高度了），任意标签都可以设置绝对定位。

需要注意的是绝对定位的参考点是不固定的，有可能是某个祖先级，也有可能是body。

11.1.3.1 以body为参考元素的参考点

如果该绝对定位元素的所有祖先元素都没有设置定位，此时body就是该元素的参考点。

参考点：根据偏移方向组成的body页面首屏的四个顶点。

如果top参与的绝对定位，参考点是body左上顶点或者右上顶点。

left、top参考点是body时，参考位置是body的左上顶点，对比点就是自身的左上顶点。

例如：

CSS代码：

<style>

margin: 0;

padding: 0;

}

body{

height: 2000px;

}

width: 100px;

height: 100px;

background: cyan;

position: absolute;

left: 50px;

top: 50px;

}

</style>

运行效果如图11-11所示:

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

图 11-11

right、top参考点是body时，参考位置是body的右上顶点，对比点就是自身的右上顶点。

例如：

CSS代码：

right:50px;

top: 50px;

运行效果如图11-12所示:

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

图 11-12

left、bottom参考点是body时，参考位置是body的左下顶点，对比点就是自身的左下顶点。

例如：

CSS代码：

left:50px;

bottom:50px;

运行效果如图11-13所示:

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

图 11-13

right、bottom参考点是body时，参考位置是body的右下顶点，对比点就是自身的右下顶点。

例如：

CSS代码：

right: 50px;

bottom: 50px

运行效果如图11-14所示:

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

图 11-14

11.1.3.2 以祖先元素为参考点进行偏移

如果某个某几个祖先元素有定位，不论是什么类型（相对定位或者绝对定位等等），在HTML结构中谁距离目标定位元素最近，谁就是参考元素。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.box1{

width: 400px;

height: 400px;

border: 5px solid red;

margin: 100px auto;

position: relative;

}

.box2{

width: 200px;

height: 200px;

border: 5px solid green;

padding: 50px;

position: absolute;

left: 50px;

top: 50px;

}

.box3{

width: 200px;

height: 200px;

border: 5px solid blue;

}

width: 50px;

height: 50px;

background:gold;

position: absolute;

top: 50px;

left: 50px;

}

</style>

</head>

<body>

<p></p>

</div>

</body>

</html>

运行效果如图11-15所示:

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

图 11-15

作为绝对定位参考点，祖先元素可以是相对定位、绝对定位或者固定定位，不区分任何类型。

后代和祖先级组合方式一共有三种：子绝父相（常用），子绝父绝，子绝父固

由于相对定位元素不脱标，导致结构更加稳定，大部分都是用子绝父相。

祖先元素的参考点和之前的body的类似，区别就是范围更小，小到了某个有定位的元素上。

下面我们针对最常用的子绝父相做一个解释：

如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素以其父元素为标准来定位。

如果不这么做，子元素就会相对 body 或浏览器定位。

（1）子元素绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

（2）父盒子需要加定位限制子盒子在父盒子内显示。

（3）父元素布局时，需要占用位置，因此父亲只能是相对定位。

这就是子绝父相的由来。但是，在我们网页布局的时候，最常说的子绝父相是怎么来的呢？
请看如下图：

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

图 11-16

例如

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.show {

width: 300px;

height: 300px;

background-color: pink;

position: relative;

}

.show1,

.show2,

.show3,

.show4 {

width: 100px;

height: 100px;

background-color: red;

}

.show1 {

position: absolute;

}

.show2 {

position: absolute;

right: 0;

top: 0;

}

.show3 {

position: absolute;

left: 0;

bottom: 0;

}

.show4 {

position: absolute;

bottom: 0;

right: 0;

}

</style>

</head>

<body>

</div>

</body>

</html>

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

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

图 11-17

11.1.4 固定定位

属性值：fixed。

参考元素：浏览器的窗口。

参考点：是根据偏移组合方向不同，分别为浏览器窗口的四个顶点。

例如：

CSS代码：

<style>

body{

height: 2000px;

}

div{

width: 300px;

height: 500px;

}

width: 200px;

height: 200px;

background:blue;

position: fixed;

bottom: 100px;

left:100px;

}

</style>

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

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

图 11-18

性质：固定定位元素是脱标的，让出标准流位置，可以设置宽度和高度，也可以指定任意位置，不设置宽度和高度只能被内容撑高（宽）。

11.2 绝对定位使用场景

11.2.1 制作压盖

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

图 11-19

参考源码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

body{

background: cyan;

}

div{

width: 880px;

height: 550px;

margin: 20px auto;

background: url(images/c2.jpg) no-repeat center top;

position: relative;

}

width: 400px;

height: 300px;

background: #fff;

position: absolute;

top: 50%;

left: 50%;

line-height: 300px;

text-align: center;

margin-top:-150px;

margin-left: -200px;

/*下面的两个是CSS3的，可以先做了解，后期css3课程中会讲*/

border-radius: 8px;

box-shadow: 5px 1px 3px 1px rgba(0,0,0,.5);

}

</style>

</head>

<body>

<div>

<p>

你好，欢迎来到我的世界！！！

</p>

</div>

</body>

</html>

11.2.2 居中

绝对定位居中，在实际应用中非常常用，很重要。

通过对父亲的百分比定位设置，然后margin为负自己宽度（高度）的一半，从而实现居中显示。如果绝对定位偏移属性属性值为百分比，百分比参考的距离最近的有定位的祖先元素的宽度或者高度的百分比。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

div{

width: 400px;

height: 100px;

background:pink;

margin: 100px auto;

position: relative;

}

div p{

width: 100px;

height: 100px;

left: 50%;

background-color: gold;

position: absolute;

}

</style>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

首先设置left值为50%;

left:50%;

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

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

图 11-20

第二步将margin设置为负的自己宽度的一半。

margin-left: -50px;

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

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

图 11-21

11.3 压盖顺序

11.3.1 默认的压盖顺序

有定位的没有定位的，标准流的，如果同时叠到一起了，谁权重更高。此时关于优先级，定位元素是根据HTML的书写顺序决定的，而不是根据CSS书写顺序决定的。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

/* 兄弟级别 */

div.box1{

width: 400px;

height: 400px;

background:pink;

float: left;

}

div.box2{

width: 300px;

height: 300px;

background: skyblue;

position: relative;

left: 0;

top: 0;

}

div.box3{

width: 200px;

height: 200px;

background:orange;

position: absolute;

top: 0;

left:0;

}

div.box4{

width: 100px;

height: 100px;

background: yellowgreen;

position: fixed;

left: 0;

top: 0;

}

</style>

</head>

<body>

</body>

</html>

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

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

图 11-22

11.3.2 自定义压盖顺序

z-index属性是专门用于设置定位元素的压盖层级的。

属性值：数字，数字表示压盖层级。

例如：

CSS代码：

div.box1{

width: 400px;

height: 400px;

background:pink;

float: left;

}

div.box2{

width: 300px;

height: 300px;

background: skyblue;

position: relative;

left: 0;

top: 0;

z-index: 1;

}

div.box3{

width: 200px;

height: 200px;

background:orange;

position: absolute;

top: 0;

left:0;

z-index: 2;

}

div.box4{

width: 100px;

height: 100px;

background: yellowgreen;

position: fixed;

left: 0;

top: 0;

z-index: 3;

}

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

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

图 11-23

通过上面的例子，我们总结一下z-index的特点：

属性值大的压盖属性值小的，设置z-index属性的压盖没有设置z-index；
如果属性值相同，那么HTML后写的压盖先写的；
如果元素没有定位，则z-index失效；

z-index: 10;

如果是父子盒模型，不涉及关于覆盖互相比较权重的问题。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

/* 父子级别 */

div{

width: 200px;

height: 200px;

background: green;

position: relative;

left: 100px;

top: 100px;

/* 这里不会因为权重高而覆盖子元素 */

z-index: 10;

}

div p {

width: 100px;

height: 100px;

background: red;

position: absolute;

left: 0;

top: 0;

z-index: 9;

}

</style>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

运行效果如图11-24所示:

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

图 11-24

11.4 综合案例-轮播图

定位在实际应用中，我们会经常看到一种使用场景，就是轮播图，下面我们通过一个轮

播图的案例来体会一下定位的应用，如图11-25所示。

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

图 11-25

补充知识：

border-radius：属性是css3属性，属性作用是设置盒子的圆角状态，50%是圆形，前提盒子必须是正方形。属性值可以是百分比或者数值。

cursor：pointer：属性作用指的是鼠标移上之后的指针状态。

参考源码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

ul,li{

list-style:none;

}

.outer{

width: 800px;

height: 450px;

border: 5px solid #ccc;

margin: 100px auto;

position: relative;

}

.outer ul li{

position: absolute;

left: 0;

top: 0;

display: none;

}

.outer ul li.current{

display: block;

}

.outer .btns a{

text-decoration: none;

color:#fff;

position: absolute;

font-size: 40px;

font-family: serif;

top: 50%;

background-color: rgba(255,255,255,0.4);

width: 40px;

height: 80px;

text-align: center;

line-height: 80px;

margin-top: -40px;

}

.outer .btns a.right{

right: 0;

}

.circle{

width: 180px;

height: 20px;

position: absolute;

left: 0;

bottom: 10px;

background: rgba(255,255,255,0.4);

left: 50%;

margin-left: -90px;

padding: 5px 10px;

border-radius: 15px;

}

.circle ol li{

width: 20px;

height: 20px;

float: left;

background: #fff;

border-radius: 50%;

text-align: center;

font-size: 12px;

line-height: 20px;

margin: 0 5px;

cursor: pointer;

}

.circle ol li.current{

background-color: gold;

color: #fff;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<ol>

</ol>

</div>

</body>

</html>

11.5 练习题

一、简答题

1.简述定位模式对元素特性产生的影响。

二、上机题

1.实现以下效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWybIk3u-1639323437706)(media/b5b65854c341d8899720b0cc199860e2.GIF)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XJiGhPVN-1639323437709)(media/a2b6adbd1115ba9da20b6904ab1a2516.jpeg)]

2.实现以下效果：

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

注：下图是鼠标移上去当前图片放大一倍。

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

第十二章布局和兼容性

知识模块	课程内容	重点	课程目标
常见布局	两列自适应布局	★	掌握两列自适应布局原理及实现方案熟悉圣杯布局和双飞翼布局的原理及实现方案熟悉等高布局原理及实现方案
	圣杯布局	☆
	双飞翼布局
PC项目兼容问题	CSS Hack技术	☆	了解常见CSS Hack技术

12.1 常见布局

12.1.1 单列布局

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

图 12-1

常见的单列布局有两种：

·header,content 和 footer 等宽的单列布局

·header 与 footer 等宽,content 略窄的单列布局

对于第一种，先通过对 header,content,footer 统一设置 width：1000px;或者
max-width：1000px(这两者的区别是当屏幕小于 1000px
时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置 margin:auto
实现居中即可得到。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.header {

margin: 0 auto;

max-width: 960px;

height: 100px;

border: 2px solid black;

}

.content {

margin: 50px auto;

max-width: 960px;

height: 400px;

border: 2px solid black;

}

.footer {

margin: 0 auto;

max-width: 960px;

height: 100px;

border: 2px solid black;

}

</style>

</head>

<body>

</body>

</html>

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

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

图 12-2

对于第二种，header、footer 的内容宽度不设置，块级元素充满整个屏幕，但
header、content 和 footer 的内容区设置同一个 width，并通过 margin:auto
实现居中。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.header {

margin: 0 auto;

max-width: 960px;

height: 100px;

border: 2px solid black;

}

.content {

margin: 50px auto;

max-width: 800px;

height: 400px;

border: 2px solid black;

}

.footer {

margin: 0 auto;

max-width: 960px;

height: 100px;

border: 2px solid black;

}

</style>

</head>

<body>

</body>

</html>

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

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

图 12-3

12.1.2 两列自适应布局

两列自适应布局是指一列固定宽度，另一列宽度自适应的布局方式。

使用float浮动：

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.left {

width: 200px;

float: left;

border: 2px solid black;

height: 50px;

}

.right {

margin-left: 200px;

border: 2px solid black;

height: 50px;

}

</style>

</head>

<body>

<div class=“left”>左边宽度固定</div>

<div class=“right”>右边宽度自适应</div>

</body>

</html>

运行效果如图12-4所示：

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

图 12-4

使用position定位：

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.left {

position: absolute;

width: 300px;

height: 50px;

border: 2px solid black;

}

.right {

border: 2px solid black;

height: 50px;

margin-left: 300px;

}

</style>

</head>

<body>

<div class=“left”>左边宽度固定</div>

<div class=“right”>右边宽度自适应</div>

</body>

</html>

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

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

图 12-5

12.1.3 三列自适应布局

三列布局的要求一般为：

·先写中间列部分，实现中间列可以优先加载。

·左右两边宽度固定，中间宽度自适应。

·中间列的内容可以完整显示。

12.1.3.1 圣杯布局

1、中间自适应的区域在结构上要放在left和right之上。

2、content（即包裹在最外面的那一层div）他必须是box-sizing：border-box（这个属性是CSS3中的属性）。因为只有这样在后面设置其padding值时，他才会把内容里面的三个div全部挤进来而不是扩充出去。

3、负margin的使用原理是对float元素移动到上面。left的margin-left设置为-100%得到的值是-父元素的宽度，即left将会跑到main的左边。right设置为-200px则是让right移动到main的右边。但同时，由于float属性他们会挡住main的显示。

4、于是需要使用position定位，将left和right分别定位到最左端和最右端。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

.content {

box-sizing: border-box;

width: 100%;

padding-left: 200px;

padding-right: 200px;

}

.main {

background: blueviolet;

width: 100%;

float: left;

height: 100px;

}

.left {

background: pink;

width: 200px;

float: left;

margin-left: -100%;

position: relative;

left: -200px;

height: 100px;

}

.right {

position: relative;

right: -200px;

background: pink;

width: 200px;

float: left;

margin-left: -200px;

height: 100px;

}

</style>

</head>

<body>

中间自适应区域

</div>

左边宽度固定

</div>

右边宽度固定

</div>

</body>

</html>

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

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

图 12-6

12.1.3.2 双飞翼布局

同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

.content {

box-sizing: border-box;

width: 100%;

}

.main {

width: 100%;

float: left;

}

.main_content {

background: blueviolet;

margin: 0 200px;

height: 100px;

}

.left {

background: pink;

width: 200px;

float: left;

margin-left: -100%;

height: 100px;

}

.right {

background: pink;

width: 200px;

float: left;

margin-left: -200px;

height: 100px;

}

</style>

</head>

<body>

中间自适应区域

</div>

左边宽度固定

</div>

右边宽度固定

</div>

</body>

</html>

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

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

图 12-7

12.2 浏览器兼容性

12.2.1 浏览器兼容性问题

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

12.2.2 CSS hack

12.2.2.1 什么是CSS hack？

CSS
hack由于不同厂商的浏览器，比如Internet
Explorer、Safari、Mozilla
Firefox、Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS
hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS
hack为不同版本的浏览器定制编写不同的CSS效果。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if
IE)Hack。

（1）CSS 类内部Hack：比如
IE6能识别下划线"“和星号” * “，IE7能识别星号” *
“，但不能识别下划线”"，而firefox两个都不能认识。

（2）选择器Hack：比如 IE6能识别*html
.class{}，IE7能识别*+html
.class{}或者*:first-child+html .class{}。

（3）HTML头部引用(if IE)Hack：针对所有IE：<!–[if
IE]><!–您的代码–><![endif]–>，针对IE6及以下版本：<!–[if lt IE
7]><!–您的代码–><![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力*的浏览器的CSS写在后面。

12.2.2.2 常用的CSS hack方式

（1）方式一条件注释法

只在IE下生效

<!–[if IE]>

这段文字只在IE浏览器显示

<![endif]–>

只在IE6下生效

<!–[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]–>

只在IE6以上版本生效

<!–[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]–>

只在IE8上不生效

<!–[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]–>

非IE浏览器生效

<!–[if !IE]>

这段文字只在非IE浏览器显示

<![endif]–>

（2）方式二类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表：

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

图 12-8

说明：在标准模式中

· “-″减号是IE6专有的hack。

· “\9″ IE6/IE7/IE8/IE9/IE10都生效。

· “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack。

· “\9\0″ 只对IE9/IE10生效，是IE9/10的hack。

（3）CSS hack方式三：选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是：

* 只在IE6中生效

*html .box { width: 200px; }

*+ 只在IE7中生效

*+html .box { width: 200px; }

在IE6/IE7中生效

@media screen\9{

.box { width: 200px; }

}

在IE6/IE7/IE8中生效

@media \0screen\,screen\9 {

.box { width: 200px; }

}

在IE8中生效

@media \0screen {

.box { width: 200px; }

}

在IE8/IE9/IE10/IE11中生效

@media screen\0 {

.box { width: 200px; }

}

在IE9/IE10/IE11中生效

@media screen and (min-width: 0\0) {

.box { width: 200px; }

}

12.3练习题

简答题

1.简述常见的布局以及实现要点。

2.简述CSShack的几种表现形式。

第十三章项目实战

知识模块	课程内容	重点	课程目标
项目规划与搭建	项目介绍	☆	了解项目的背景及项目分析掌握项目目录结构的搭建方法掌握初始化样式
	项目分析	☆
	项目目录结构	★
	HTML书写规范
	CSS书写规范

13.1 项目介绍

1.项目名称：方圆科技官网

2.项目介绍：方圆科技官网是一个典型的科技企业站类型的项目，该项目需要完成首页、产品中心、项目案例、服务支持、技术咨询、关于我们、联系我们等静态页面的实现

3.项目最终效果图如图3-1所示：

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

图13-1

13.2 项目分析

根据项目的原型图和效果图创建项目工程目录。

分析页面公共模块，规划创建公共模块的样式表文件，如页面头部和底部，方便重复使用。

13.3 项目工程搭建

13.3.1 项目目录结构

● css 样式文件夹

● images 图片文件夹

● js 脚本文件夹

● index.html 首页页面

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

图 13-1

13.3.2 HTML书写规范

13.3.2.1 HTML基础设施

（1）文档以"<!DOCTYPE…>“首行顶格开始，推荐使用”<!DOCTYPE htlm>"；

（2）文档必须申明编码charset，与文件本身编码保持一致，推荐<meta
charset=“UTF-8”>；

（3）根据页面内容和需求适当填写keywords和description；<meta name=“keywords”
content=""><meta name=“decription” content="">

（4）页面title是极为重要的一项。

13.3.2.2 结构顺序与视觉顺序基本保持一致

（1）按照从上到下，从左到右的顺序进行书写HTML；

（2）有时候为了便于搜索引擎抓取，我们要将重要内容在HTML结构中提前；

（3）用div替代table布局；

（4）当需要一些表现形式为表格的数据，使用<table>

13.3.2.3 html、css、js三者分离，避免内联

（1）使用link将css文件引入，置于head中；

（2）使用script将js文件引入，置于body底部。

13.3.2.4 保持良好的简介的树形结构

（1）每一个块级元素都另起一行，每一行都使用Tab缩进对齐。删除冗余的行尾的空格

（2）使用4个空格代替1个Tab（大多数编辑器均可设置）

（3）对于内容较为简单的表格，建议将<tr>写成单行

（4）大的模块之间，可以使用空行隔开，使结构更为清晰

13.3.3 CSS书写规范

13.3.3.1 CSS书写顺序

（1）位置属性(position, top, right, z-index, display, float等)

（2）大小(width, height, padding, margin)

（3）文字列(font, line-height, letter-spacing, color- text-align等)

（4）背景(background, border等)

（5）其他(animation, transition等)

13.3.3.2 CSS语法

（1）命名一般为小写英文字母。

（2）为了代码的易读性，在每个声明块的左花括号前添加一个空格。

（3）每条声明语句的 : 后应该插入一个空格。

（4）所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

（5）对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px
代替 -0.5px）。

（6）十六进制值应该全部小写，例如，#fff。

（7）尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

（8）避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

13.3.3.3 CSS的引入

CSS的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

13.4 项目开发实战

本小节由讲师带领学员在课堂上完成。

第十四章项目优化及上线

知识模块	课程内容	重点	课程目标
网站TDK	TDK的设置	★	掌握TDK的设置
网站favicon	favicon的设置	★	掌握favicon的设置
项目部署	项目部署上线的方法	★	掌握使用码云和git部署项目的方法

14.1 网站TDK

14.1.1 TDK的概述

TDK是个缩写，seo页面中的页面描述与关键词设置，其中“T”表示为网页定义标题title，“D”表示为网页定义描述description，“K”表示为搜索引擎定义关键词keywords。

标题、描述、关键词在seo界也被称为三个标签。

SEO是指搜索引擎优化。全称为(Search Engine
Optimization)，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

14.1.2 TDK的设置

（1）title设置应该包含用户的需求点同时还要具有吸引力，且长度要合理，title包含的关键词不宜太多，最好3个之内，太多容易导致权重分散，不利于排名，常用的标题形式：关键词1_关键词2_关键词3
—网站品牌。

（2）description在做到详尽的情况下，更加突出公司或者主营的服务，描述标签包含的关键词也不能太多，最好5个之内，如果网站做了竞价，最好在描述标签里显示你的网站联系方式，这样许多用户看到信息就会直接拨打电话询问，提高转化率的同时还能节约成本。

（3）keywords标签的关键词要做到简洁明了，多个关键词之间使用“,”隔开，关键词设置在3个之内为佳，网站发展到权重比较高以后，可以增加到5个左右。

注意：网站的TDK确定之后就不要频繁更改了，改动太过频繁的话，会被搜索引擎降权处理，但是不要害怕对TDK进行改动，只要能为用户创造更有价值的信息，就算修改后会暂时受到惩罚，但是长远的角度上看，过不了多久网站反而会远超之前的水平。

14.2 Favicon

14.2.1 什么是favicon

Favicon是favorites icon的缩写，亦被称为website icon（网页图标）、page
icon（页面图标）或urlicon（URL图标）。Favicon是与某个网站或网页相关联的图标。

例如百度，如图14-1所示：

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

图 14-1

14.2.2 favicon有什么用

从特定的技术角度看，
favicon也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用：一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时，
Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。

14.2.3 如何制作favicon

favicon.ico一般用于作为缩略的网站标志，它显示位于浏览器的地址栏或者在标签上，用于显示网站的logo。

建议制作一张400x400的jpg图像，然后等比缩小到你想转换的ico尺寸（一般为16×16，如百度；也可以制作成为32×32、48×48等）

最后用相关软件转换成ico图标格式。例如：http://www.bitbug.net/

14.2.4 如何使用favicon

将压缩文件中的favicon.ico图像放在根目录下，HTML页面引入favicon图标。

14.3 项目部署上线

14.3.1 域名空间

域名空间就是我们经常说到的
“域名+网站空间”,是二者的一个统称。因为我们做一个网站通常要用到两个东西，一个是域名，另一个就是空间。久而久之便有了这个称呼，而非表面字义域名的空间。

域名

域名（Domain
Name），是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）；是互联网上企业/个人或机构间相互联络的网络地址。

空间

一般俗称的“网站空间”就是专业名词“虚拟主机”的意思。就是把一台运行在互联网上的服务器划分成多个“虚拟”的服务器，每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持WWW、FTP、E-mail等）功能。

域名解析

域名和网址并不是一回事，域名注册好之后，只说明你对这个域名拥有了使用权，如果不进行域名解析，那么这个域名就不能发挥它的作用，经过解析的域名可以用来作为电子邮箱的后缀，也可以用来作为网址访问自己的网站，因此域名投入使用的必备环节是“域名解析”。域名是为了方便记忆而专门建立的一套地址转换系统，要访问一台互联网上的服务器，最终还必须通过IP地址来实现，域名解析就是将域名重新转换为IP地址的过程。一个域名只能对应一个IP地址，而多个可以同时被解析到一个IP地址。域名解析需要由专门的域名解析服务器(DNS)来完成。

免费空间申请地址：https://free.3v.do/

14.3.2 码云

14.3.2.1 码云的介绍

码云（Gitee.com）是专为开发者提供的稳定、高效、安全的云端软件开发协作平台。
无论是个人、团队、或是企业，都能够用码云实现代码托管、项目管理、协作开发。

码云于2013年正式推出，由开源中国基于 Gitlab 所开发，我们在 Gitlab
的基础上做了大量的改进和定制开发，致力于为国内开发者提供优质稳定的托管服务。目前已成为国内最大的代码托管系统。

14.3.2.2 码云的使用

码云的官网：https://gitee.com/

注册账号

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

图14-2

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

图14-3

创建仓库

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

图 14-4

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

图 14-5

注意：这里填仓库名字和路径，建议路径不需要太长，然后就选择公开或者不公开，其它的不用管，再点击创建。

（3）创建成功

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

图 14-6

（4）使用git

在你所需要上传的文件的根目录下右键，选择Git Bash Here出现Git命令框

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

图14-7

然后输入git init初始化本地git仓库

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

图14-8

输入git add .（注意有个小数点）
输入git commit -m “注释语句”(注释语句可以随便写写)

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

图14-9

输入git remote add origin 刚才记住的链接地址

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

输入git push -u origin master

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

图14-11

备注：中途可能会需要输入账号密码就输入码云的账号密码就好了，如果一开始创建报错fatal:
remote origin already exists.就执行一下git remote rm
origin命令后重新开始就好了，最后等上传完刷新一下码云仓库界面就可以看到文件在里面了。

14.4练习题

简述题

1.简述网站如何优化TDK的设置。

2.简述代码上传步骤。
ng=“en”>

<head>

<title>Document</title>

<style>

.left {

position: absolute;

width: 300px;

height: 50px;

border: 2px solid black;

}

.right {

border: 2px solid black;

height: 50px;

margin-left: 300px;

}

</style>

</head>

<body>

<div class=“left”>左边宽度固定</div>

<div class=“right”>右边宽度自适应</div>

</body>

</html>

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

[外链图片转存中…(img-6ZKMt2Be-1639323437723)]

图 12-5

12.1.3 三列自适应布局

三列布局的要求一般为：

·先写中间列部分，实现中间列可以优先加载。

·左右两边宽度固定，中间宽度自适应。

·中间列的内容可以完整显示。

12.1.3.1 圣杯布局

1、中间自适应的区域在结构上要放在left和right之上。

4、于是需要使用position定位，将left和right分别定位到最左端和最右端。

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

.content {

box-sizing: border-box;

width: 100%;

padding-left: 200px;

padding-right: 200px;

}

.main {

background: blueviolet;

width: 100%;

float: left;

height: 100px;

}

.left {

background: pink;

width: 200px;

float: left;

margin-left: -100%;

position: relative;

left: -200px;

height: 100px;

}

.right {

position: relative;

right: -200px;

background: pink;

width: 200px;

float: left;

margin-left: -200px;

height: 100px;

}

</style>

</head>

<body>

中间自适应区域

</div>

左边宽度固定

</div>

右边宽度固定

</div>

</body>

</html>

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

[外链图片转存中…(img-W1nhAUDN-1639323437726)]

图 12-6

12.1.3.2 双飞翼布局

例如：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

.content {

box-sizing: border-box;

width: 100%;

}

.main {

width: 100%;

float: left;

}

.main_content {

background: blueviolet;

margin: 0 200px;

height: 100px;

}

.left {

background: pink;

width: 200px;

float: left;

margin-left: -100%;

height: 100px;

}

.right {

background: pink;

width: 200px;

float: left;

margin-left: -200px;

height: 100px;

}

</style>

</head>

<body>

中间自适应区域

</div>

左边宽度固定

</div>

右边宽度固定

</div>

</body>

</html>

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

[外链图片转存中…(img-QqVjI0a4-1639323437727)]

图 12-7

12.2 浏览器兼容性

12.2.1 浏览器兼容性问题

12.2.2 CSS hack

12.2.2.1 什么是CSS hack？

简单的说，CSS
hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS
hack为不同版本的浏览器定制编写不同的CSS效果。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if
IE)Hack。

（1）CSS 类内部Hack：比如
IE6能识别下划线"“和星号” * “，IE7能识别星号” *
“，但不能识别下划线”"，而firefox两个都不能认识。

（2）选择器Hack：比如 IE6能识别*html
.class{}，IE7能识别*+html
.class{}或者*:first-child+html .class{}。

书写顺序，一般是将识别能力*的浏览器的CSS写在后面。

12.2.2.2 常用的CSS hack方式

（1）方式一条件注释法

只在IE下生效

<!–[if IE]>

这段文字只在IE浏览器显示

<![endif]–>

只在IE6下生效

<!–[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]–>

只在IE6以上版本生效

<!–[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]–>

只在IE8上不生效

<!–[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]–>

非IE浏览器生效

<!–[if !IE]>

这段文字只在非IE浏览器显示

<![endif]–>

（2）方式二类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表：

[外链图片转存中…(img-9ZZbWpFU-1639323437728)]

图 12-8

说明：在标准模式中

· “-″减号是IE6专有的hack。

· “\9″ IE6/IE7/IE8/IE9/IE10都生效。

· “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack。

· “\9\0″ 只对IE9/IE10生效，是IE9/10的hack。

（3）CSS hack方式三：选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是：

* 只在IE6中生效

*html .box { width: 200px; }

*+ 只在IE7中生效

*+html .box { width: 200px; }

在IE6/IE7中生效

@media screen\9{

.box { width: 200px; }

}

在IE6/IE7/IE8中生效

@media \0screen\,screen\9 {

.box { width: 200px; }

}

在IE8中生效

@media \0screen {

.box { width: 200px; }

}

在IE8/IE9/IE10/IE11中生效

@media screen\0 {

.box { width: 200px; }

}

在IE9/IE10/IE11中生效

@media screen and (min-width: 0\0) {

.box { width: 200px; }

}

12.3练习题

简答题

1.简述常见的布局以及实现要点。

2.简述CSShack的几种表现形式。

第十三章项目实战

知识模块	课程内容	重点	课程目标
项目规划与搭建	项目介绍	☆	了解项目的背景及项目分析掌握项目目录结构的搭建方法掌握初始化样式
	项目分析	☆
	项目目录结构	★
	HTML书写规范
	CSS书写规范

13.1 项目介绍

1.项目名称：方圆科技官网

3.项目最终效果图如图3-1所示：

[外链图片转存中…(img-39HSmwXF-1639323437729)]

图13-1

13.2 项目分析

根据项目的原型图和效果图创建项目工程目录。

分析页面公共模块，规划创建公共模块的样式表文件，如页面头部和底部，方便重复使用。

13.3 项目工程搭建

13.3.1 项目目录结构

● css 样式文件夹

● images 图片文件夹

● js 脚本文件夹

● index.html 首页页面

[外链图片转存中…(img-ANujvFPP-1639323437730)]

图 13-1

13.3.2 HTML书写规范

13.3.2.1 HTML基础设施

（1）文档以"<!DOCTYPE…>“首行顶格开始，推荐使用”<!DOCTYPE htlm>"；

（2）文档必须申明编码charset，与文件本身编码保持一致，推荐<meta
charset=“UTF-8”>；

（3）根据页面内容和需求适当填写keywords和description；<meta name=“keywords”
content=""><meta name=“decription” content="">

（4）页面title是极为重要的一项。

13.3.2.2 结构顺序与视觉顺序基本保持一致

（1）按照从上到下，从左到右的顺序进行书写HTML；

（2）有时候为了便于搜索引擎抓取，我们要将重要内容在HTML结构中提前；

（3）用div替代table布局；

（4）当需要一些表现形式为表格的数据，使用<table>

13.3.2.3 html、css、js三者分离，避免内联

（1）使用link将css文件引入，置于head中；

（2）使用script将js文件引入，置于body底部。

13.3.2.4 保持良好的简介的树形结构

（1）每一个块级元素都另起一行，每一行都使用Tab缩进对齐。删除冗余的行尾的空格

（2）使用4个空格代替1个Tab（大多数编辑器均可设置）

（3）对于内容较为简单的表格，建议将<tr>写成单行

（4）大的模块之间，可以使用空行隔开，使结构更为清晰

13.3.3 CSS书写规范

13.3.3.1 CSS书写顺序

（1）位置属性(position, top, right, z-index, display, float等)

（2）大小(width, height, padding, margin)

（3）文字列(font, line-height, letter-spacing, color- text-align等)

（4）背景(background, border等)

（5）其他(animation, transition等)

13.3.3.2 CSS语法

（1）命名一般为小写英文字母。

（2）为了代码的易读性，在每个声明块的左花括号前添加一个空格。

（3）每条声明语句的 : 后应该插入一个空格。

（4）所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

（5）对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px
代替 -0.5px）。

（6）十六进制值应该全部小写，例如，#fff。

（7）尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

（8）避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

13.3.3.3 CSS的引入

13.4 项目开发实战

本小节由讲师带领学员在课堂上完成。

第十四章项目优化及上线

知识模块	课程内容	重点	课程目标
网站TDK	TDK的设置	★	掌握TDK的设置
网站favicon	favicon的设置	★	掌握favicon的设置
项目部署	项目部署上线的方法	★	掌握使用码云和git部署项目的方法

14.1 网站TDK

14.1.1 TDK的概述

标题、描述、关键词在seo界也被称为三个标签。

14.1.2 TDK的设置

14.2 Favicon

14.2.1 什么是favicon

Favicon是favorites icon的缩写，亦被称为website icon（网页图标）、page
icon（页面图标）或urlicon（URL图标）。Favicon是与某个网站或网页相关联的图标。

例如百度，如图14-1所示：

[外链图片转存中…(img-OuBHphme-1639323437732)]

图 14-1

14.2.2 favicon有什么用

14.2.3 如何制作favicon

favicon.ico一般用于作为缩略的网站标志，它显示位于浏览器的地址栏或者在标签上，用于显示网站的logo。

建议制作一张400x400的jpg图像，然后等比缩小到你想转换的ico尺寸（一般为16×16，如百度；也可以制作成为32×32、48×48等）

最后用相关软件转换成ico图标格式。例如：http://www.bitbug.net/

14.2.4 如何使用favicon

将压缩文件中的favicon.ico图像放在根目录下，HTML页面引入favicon图标。

14.3 项目部署上线

14.3.1 域名空间

域名

空间

域名解析

免费空间申请地址：https://free.3v.do/

14.3.2 码云

14.3.2.1 码云的介绍

14.3.2.2 码云的使用

码云的官网：https://gitee.com/

注册账号

[外链图片转存中…(img-u6EoM331-1639323437734)]

图14-2

[外链图片转存中…(img-y6X64PcR-1639323437735)]

图14-3

创建仓库

[外链图片转存中…(img-cDD73D5c-1639323437738)]

图 14-4

[外链图片转存中…(img-ECdUoI3J-1639323437739)]

图 14-5

注意：这里填仓库名字和路径，建议路径不需要太长，然后就选择公开或者不公开，其它的不用管，再点击创建。

（3）创建成功

[外链图片转存中…(img-r6Jy5OlI-1639323437742)]

图 14-6

（4）使用git

在你所需要上传的文件的根目录下右键，选择Git Bash Here出现Git命令框

[外链图片转存中…(img-fBWaTUgS-1639323437744)]

图14-7

然后输入git init初始化本地git仓库

[外链图片转存中…(img-ofY2Mv19-1639323437748)]

图14-8

输入git add .（注意有个小数点）
输入git commit -m “注释语句”(注释语句可以随便写写)

[外链图片转存中…(img-dU9hJ5MN-1639323437749)]

图14-9

输入git remote add origin 刚才记住的链接地址

[外链图片转存中…(img-tYZqoILO-1639323437752)]
图14-10

输入git push -u origin master

[外链图片转存中…(img-daf2nauL-1639323437754)]

图14-11

14.4练习题

简述题

1.简述网站如何优化TDK的设置。

2.简述代码上传步骤。

【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

第一章HTML基础

HTML简介和发展史

什么是HTML

HTML的发展历程

1.1.3 web标准

1.1.3.1 为什么需要web标准

1.1.3.2 web标准的组成

1.1.3.3 W3C

开发中常见概念解释

1.2.1前端

1.2.2后台

1.2.3 浏览器

1.2.3.1 浏览器内核

纯文本和超文本的使用

开发工具的使用

1.4.1常见开发工具简介

1.4.2 Visual Studio Code

1.4.2.1 工具下载

1.4.2.2 工具下载安装

1.4.2.3 插件安装和工具使用

1.4.3 编写第一个HTML文件

HTML骨架

1.5.1 DTD

1.5.2 html标签

1.5.3 字符集

1.5.4 视口标签

1.5.5浏览器的私有设置

1.5.6 title

1.5.7 keywords关键字

1.6 练习题

HTML基础标签

HTML基本语法

HTML元素和标签

2.1.1.1 HTML标签(标记)

2.1.1.2 HTML属性

2.1.1.3 HTML注释

标签使用注意事项

HTML常见标签

HTML标题

HTML段落

超链接和图像

图像

相对路径和绝对路径

超链接

超链接属性

超链接类型

HTML语义化

2.4.1语义化的好处

其它常见标签

2.5.1 br

2.5.2 hr标签

2.5.3 其它标签

2.6 练习题

列表和表格

3.1 HTML列表

3.1.1 无序列表

3.1.2 有序列表

3.1.3 自定义列表

3.2 表格

3.2.1 表格基础

3.2.2 表格的常见属性

3.2.3 单元格合并

3.2.4 表格分区

3.3 练习题

表单、字符和常用标签

4.1 HTML表单

4.1.1 表单区域

4.1.2 常见的表单元素

4.1.2.1 input标签

4.1.2.2 文本域

4.1.2.3 下拉菜单

4.2 字符实体

4.3 div和span

4.4 练习题

CSS基本介绍

5.1 CSS的基本介绍

5.1.1 css概述

5.1.2 css语法

5.1.3 css注释

【自编教材】16万8千字的HTML+CSS基础适合从0到1-可收藏

第十章浮动