Java Web 第二章 HTMLCSS

第二章 HTML&CSS

一、HTML入门

1.1 HTML&CSS&JavaScript的作用

HTML（超文本标记语言）
- 主要用于构建网页的主体结构。它就像是建筑的框架，定义了网页内容的基本布局和层次关系。例如，通过HTML标签可以确定页面上哪里是标题、哪里是段落、哪里是列表等。比如创建一个简单的新闻页面，用<h1>标签定义新闻标题，<p>标签来写新闻内容的段落。
- 是一种标记语言，浏览器能够识别这些标签并将其渲染成可视化的网页。HTML文件本身是文本文件，通过不同的标签组合，可以引入各种资源，从而使网页内容丰富多样。
CSS（层叠样式表）
- 专注于页面元素的美化。可以控制网页元素的外观，包括颜色、字体、大小、间距、布局等方面。例如，改变一个段落<p>标签的文字颜色为红色，或者设置一个按钮<button>的背景色为蓝色，添加边框样式等。
- CSS样式可以通过多种方式应用到HTML元素上，如行内式、内嵌式和外部样式表。这使得网页的样式设计更加灵活，可以实现不同页面之间的风格统一，也方便对网页的样式进行维护和更新。
JavaScript
- 主要用于页面元素的动态处理。能够为网页添加交互功能，如响应用户的点击、鼠标移动、表单提交等操作。例如，实现一个图片的轮播效果，当用户点击按钮时切换图片；或者在用户提交表单时进行数据验证，检查输入的内容是否符合要求。
- 可以操作HTML和CSS，改变网页的内容和样式。通过DOM（文档对象模型）接口，JavaScript能够访问和修改HTML文档中的元素及其属性，同时也可以动态地改变CSS样式，从而创建出具有高度交互性的网页。

1.2什么是HTML

HTML的定义与发展
- HTML是Hyper Text Markup Language的缩写，意思是超文本标记语言。它是一种用于创建网页的标准标记语言。HTML的历史可以追溯到早期的互联网，随着网络技术的不断发展，经历了多个版本的更新。
- HTML5是HyperText Markup Language 5的缩写，它结合了HTML4.01的相关标准并进行革新。在2008年正式发布后，经过不断的完善，于2012年形成稳定版本，2014年10月28日，W3C发布了HTML5的最终版。HTML5技术符合现代网络发展要求，在互联网中得到了广泛应用。
- 与传统技术相比，HTML5的语法特征更加明显，并且结合了SVG（可缩放矢量图形）的内容。这使得在网页中处理多媒体内容更加便捷，例如可以更方便地嵌入音频、视频，并且能够对多媒体元素进行更好的控制。同时，HTML5还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作，提供了更多增强网络应用的标准。

1.3什么是超文本

超文本的概念与特点
- HTML文件本质是文本文件，但普通文本文件只能显示字符。而HTML通过标签可以把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中。例如，使用<a>标签可以创建超链接，链接到其他网页；使用<img>标签可以在网页中插入图片；使用<audio>和<video>标签分别可以引入音频和视频文件。
- 这种能够超越纯文本的限制，通过链接和嵌入多种媒体资源的方式，使网页呈现出丰富多样的内容，这就是超文本的含义。它极大地丰富了网页的信息展示方式，让用户可以通过点击链接在不同的网页之间跳转，或者在一个网页中同时浏览文字、图片、观看视频等多种内容。

1.4什么是标记语言

标记语言与编程语言的区别
- HTML是一种标记语言，与像Java这样的编程语言不同。编程语言通常具有常量、变量、流程控制（如条件判断、循环）、异常处理、输入输出（IO）等功能，用于实现复杂的逻辑和算法。
- 而HTML是由一系列标签组成的。每个标签都有固定的含义和确定的页面显示效果。例如，<p>标签表示一个段落，浏览器会将<p>标签内的内容按照段落的格式进行显示，自动添加段落间距等样式。
标签的类型
- 双标签：标签是通过一组尖括号+标签名的方式来定义的，如<p>HTML is a very popular fore - end technology.</p>。其中<p>叫开始标签，</p>叫结束标签，它们一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称标签体，这里的“HTML is a very popular fore - end technology.”就是标签体内容。
- 单标签：例如<input type="text" name="username" />，这种标签不需要成对出现，用于表示一些不需要包裹内容的元素，如输入框、换行符等。单标签在HTML5中一般需要在标签结尾处添加斜杠来明确表示标签的结束。
- 属性：属性一般在开始标签中，用于定义标签的一些特征。例如<a href="http://www.xxx.com">show detail</a>中的href="网址"就是属性，href是属性名，“网址”是属性值。属性可以提供更多关于标签的信息，如链接的目标地址、输入框的类型等。

1.5 HTML基础结构

文档声明
- HTML文件的第一行通常是文档声明，它用来告诉浏览器当前HTML文档的基本信息，其中最重要的是当前HTML文档遵循的语法标准。HTML有4和5这两个大的版本，HTML4版本的文档类型声明是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，而HTML5版本的文档类型声明是<!DOCTYPE html>。现在主流的技术选型都是使用HTML5，因为它提供了更多的功能和更好的兼容性，之前的版本基本很少使用了。
根标签
- html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。它就像是一个容器，包含了网页的所有内容，包括头部元素和主体元素等。
头部元素
- head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括很多重要的标签，如title标签（用于定义网页标题，会显示在浏览器的标题栏）、script标签（用于引入或编写JavaScript代码）、style标签（用于定义内部CSS样式）、link标签（用于引入外部CSS文件）、meta标签（用于提供关于文档的元数据，如字符编码、页面描述、关键字等）。
主体元素
- body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。这包括用户看到的文字、图片、链接、表格、表单等各种网页元素，是网页实际展示内容的主要部分。
注释
- HTML注释的写法是。注释是给开发人员看的，用于在代码中添加说明性的文字，浏览器在渲染网页时会忽略注释内容。例如，可以在代码中注释某一段HTML的功能，或者暂时注释掉一段不需要的代码进行调试。

1.6 HTML的入门程序

准备文件
- 首先要准备一个纯文本文件，拓展名为.html。可以在任何文本编辑器（如记事本）中创建这个文件。这一步很关键，因为HTML文件本质上就是文本文件，只是扩展名告诉操作系统和浏览器以HTML的方式来解析它。
编写代码
- 用记事本打开创建好的.html文件，在里面编写HTML代码。例如基本的HTML结构如下：

html"><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的第一个网页</title>
    </head>
    <body>
        hello html!!!
    </body>
</html>

- 这里的`<!DOCTYPE html>`是HTML5的文档声明，`<html>`标签是根标签，`<head>`标签内定义了网页的头部信息，包括字符编码（`meta charset="UTF-8"`）和网页标题（`title`标签），`<body>`标签内是网页主体内容，这里只是简单地写了一个“hello html!!!”的文本。

查看内容
- 编写好代码后，使用浏览器打开这个.html文件，就可以查看显示的内容。浏览器会解析HTML代码，并根据标签的定义将内容渲染成可视化的网页。不同的浏览器可能会对HTML代码的解析和渲染有一些细微的差异，但基本的功能和样式是相似的。

1.7 HTML概念词汇解释

标签
- 代码中的一个<>叫做一个标签。有些标签成对出现，称之为双标签，例如<p>和</p>，双标签用于包裹内容，并且可以对包裹的内容应用标签所定义的样式和功能。有些标签单独出现，称之为单标签，如<img>，单标签通常用于插入一些不需要包裹内容的元素，如图片、换行符等。
属性
- 一般在开始标签中，用于定义标签的一些特征。属性可以提供额外的信息，使标签能够按照预期的方式显示或行为。例如，<a href="http://www.example.com">链接文本</a>中的href属性定义了链接的目标地址；<input type="text" name="username">中的type属性定义了输入框的类型为文本框，name属性用于在表单提交时作为参数名。
文本
- 双标签中间的文字，包含空格、换行等结构。文本是网页内容的重要组成部分，通过标签的定义来控制文本的展示方式，如字体、颜色、排版等。例如在<p>标签中的段落文本，或者<h1>标签中的标题文本。
元素
- 经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称之为一个元素。元素是构成网页的基本单位，浏览器会根据元素的标签类型、属性设置和文本内容来渲染出相应的网页内容。例如一个<div>元素，它可能包含其他子元素，并且可以通过CSS样式来设置其布局、背景色等外观属性。

1.8 HTML的语法规则

根标签规则
- 根标签有且只能有一个，即<html>标签。它是整个HTML文档的最外层容器，所有其他的标签都必须嵌套在<html>标签内部，这保证了HTML文档结构的完整性和规范性。
标签关闭规则
- 无论是双标签还是单标签都需要正确关闭。双标签必须有对应的结束标签，如<p>标签必须以</p>结束。单标签在HTML5中一般需要在标签结尾处添加斜杠来明确表示标签的结束，如<img src="image.jpg" />。如果标签没有正确关闭，可能会导致浏览器解析错误，影响网页的显示效果。
标签嵌套规则
- 标签可以嵌套但不能交叉嵌套。例如，正确的嵌套方式是<div><p>内容</p></div>，而错误的方式像<div><p>内容</div></p>是不允许的。合理的嵌套可以构建出复杂的网页结构，如在一个<body>标签内可以嵌套多个<div>标签，每个<div>标签又可以包含其他的标签，如<h1>、<p>、<img>等。
注释规则
- 注释语法为，注意不能嵌套。注释用于在代码中添加说明性的文字，方便开发人员理解代码的功能和意图。在调试或多人协作开发时，注释可以帮助定位问题和理解代码逻辑。
属性规则
- 属性必须有值，值必须加引号。在HTML5中属性名和值相同时可以省略属性值，例如checked="checked"可以写成checked。属性值加引号可以确保属性的正确解析，避免因为特殊字符或空格等导致的错误。
字符串引号规则
- HTML中不严格区分字符串使用单双引号。这意味着在定义属性值等字符串内容时，可以使用单引号或双引号，如<input type='text' name="username">和<input type="text" name='username'>都是正确的。
标签大小写规则
- HTML标签不严格区分大小写，但是不能大小写混用。例如<p>和<P>在浏览器解析时是等效的，但<p>和<P>混合使用是不规范的，可能会导致解析错误。
自定义标签规则
- HTML中不允许自定义标签名，强行自定义则无效。HTML有一套预定义的标签，每个标签都有其特定的功能和用途，如果使用自定义的标签，浏览器将无法识别其含义，不会按照预期的方式进行渲染。

1.9开发工具VsCode的安装和使用

html" title=前端>前端开发角色的发展与分工
- html" title=前端>前端工程师“Front - End - Developer”源自于美国。大约从2005年开始正式的html" title=前端>前端工程师角色被行业所认可，到了2010年，随着互联网全面进入移动时代，html" title=前端>前端开发的工作越来越重要。
- 最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了html" title=前端>前端开发。在不同国家分工体制有所不同，在日本和一些人口比较稀疏的国家，如加拿大、澳大利亚等，流行“Full - Stack Engineer”，即全栈工程师，一个人可能负责从产品设计到项目开发再到后期运维的所有工作，甚至包括UI、配动画，也可能包括一些非技术的工作。而在美国等互联网环境比较发达的国家，项目开发的分工协作更为明确，整个项目开发分为html" title=前端>前端、中间层和后端三个开发阶段，这三个阶段分别由不同的人来协同完成。在国内，大部分互联网公司只有html" title=前端>前端工程师和后端工程师，中间层的工作有的由html" title=前端>前端来完成，有的由后端来完成。
- 开发流程一般是PRD（产品原型 - 产品经理） - PSD（视觉设计 - UI工程师） - HTML/CSS/JavaScript（PC/移动端网页，实现网页端的视觉展示和交互 - html" title=前端>前端工程师）。
VsCode的安装
- 安装过程：VsCode是html" title=前端>前端工程师比较推崇的一款开发工具，下载地址为https://code.visualstudio.com/。安装过程比较简单，在安装过程中一路点击“next”即可。需要注意的是，安装路径不要有中文、空格和特殊符号，以免出现一些潜在的问题。
插件安装
- Auto Rename Tag自动修改标签对插件：当修改一个HTML标签的开始标签或结束标签时，与之对应的标签也会自动修改，提高代码编写效率，减少错误。
- Chinese Language Pack汉化包：对于不熟悉英文界面的用户，安装汉化包可以方便地使用中文界面进行操作。
- HTML CSS Support HTML CSS支持：提供更好的HTML和CSS代码支持，包括语法检查、智能提示等功能，帮助开发人员更准确地编写代码。
- Intellij IDEA Keybindings IDEA快捷键支持：如果开发人员习惯了IntelliJ IDEA的快捷键，可以安装这个插件，使用熟悉的快捷键来操作VsCode。
- Live Server实时加载功能的小型服务器：这是一个非常实用的插件，它可以启动一个小型服务器，并且能够实时加载网页内容。当HTML文件发生修改时，浏览器会自动刷新显示最新的内容，方便开发过程中的调试。
- open in browser通过浏览器打开当前文件的插件：可以方便地在VsCode中通过快捷键或右键菜单等方式，使用默认浏览器打开当前编辑的HTML文件。
- Prettier - Code formatter代码美化格式化插件：能够自动按照一定的规则格式化代码，使代码风格更加统一、美观，提高代码的可读性。
- Vetur VScode中的Vue工具插件：如果开发Vue.js项目，这个插件提供了语法检查、代码补全、模板解析等功能，方便Vue项目的开发。
- vscode - icons文件显示图标插件：为不同类型的文件和文件夹在VsCode的文件管理器中添加图标，方便快速识别文件类型。
- Vue 3 snipptes生成VUE模板插件：可以快速生成Vue 3的模板代码，提高Vue 3项目的开发速度。
- Vue language Features Vue3语言特征插件：提供对Vue 3语言特性的支持，包括对Composition API等新特性的语法检查、智能提示等。
工作空间设置
- 直接用vscode打开某个目录即可将其作为项目代码存放的根目录。这样可以方便地在一个工作空间中管理多个项目文件，包括HTML、CSS、JavaScript等文件。在工作空间下，可以通过文件管理器方便地浏览和编辑文件，并且可以利用VsCode的各种功能，如代码搜索、版本控制集成等。
文件和目录操作
- 在工作空间下创建目录和文件很方便，点击带有“+”号的按钮即可创建文件或者目录。在HTML文件中，输入“!”并回车即可快速出现HTML的基本结构，这可以节省编写基础代码的时间。
Live Server的使用
- 点击右下角“Go Live”，或者在html编辑视图上右击“open with live Server”，会自动启动小型服务器，并自动打开浏览器访问当前资源。Live Server具有实时加载功能，当HTML文件被修改保存后，浏览器会自动刷新以显示最新的内容，这对于快速查看代码修改后的效果非常方便。在开发完成后，要记得关闭Live Server，避免不必要的资源占用。
其他常见设置
- 设置字体：通过点击齿轮图标，然后在搜索框中搜索“字体大小”，可以设置代码的字体大小，以满足不同用户的视觉需求。
- 设置字体大小可以用滚轮控制：在设置选项中搜索“Mouse Wheel Zoom”，开启此功能后可以使用鼠标滚轮来控制字体大小，方便在不同场景下查看代码。
- 设置左侧树缩进：在设置中搜索“树缩进”，可以调整文件管理器中目录树的缩进程度，使文件结构更加清晰。
- 设置文件夹折叠：搜索“compact”并取消第一个勾选，可以设置文件夹的折叠方式，方便管理文件。
- 设置编码自动保存：在设置中搜索“Auto Save”，选择“afterDelay”，可以让VsCode在一段时间后自动保存文件，避免因为忘记保存而丢失代码修改内容。

1.10在线帮助文档

http://www.w3school.com.cn是一个非常有用的在线帮助文档网站。它提供了HTML、CSS、JavaScript等多种html" title=前端>前端技术的详细文档和示例。无论是初学者学习基础知识，还是有经验的开发人员查阅特定的技术细节，都可以在这里找到相关的内容。文档内容包括标签和属性的详细解释、语法规则、代码示例以及各种技术的应用场景等。

二、HTML常见标签

2.1标题标签

标题标签的用途与级别
- 标题标签一般用于在页面上定义一些标题性的内容，如新闻标题、文章标题等。HTML提供了从h1到h6六级标题标签，h1是最高级别的标题，通常用于表示页面的主标题，h2 - h6标题级别依次递减，用于表示不同层次的子标题。例如，在一个新闻网站的页面中，文章的标题可以用h1标签，文章内各章节的标题可以用h2或h3标签来区分不同的层次结构。
代码示例与效果展示
- 代码如下：

html"><body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

- 效果是浏览器会根据标题标签的级别，以不同的字体大小和加粗程度来显示标题。h1标题字体最大且最粗，h6标题字体最小且最细，这样可以很直观地体现标题的层次关系。

2.2段落标签

段落标签的作用与自动分段效果
- 段落标签<p>一般用于定义在页面上要显示的大段文字。当浏览器解析到多个<p>标签时，会自动在段落之间实现分段的效果。这使得网页中的文字内容更具可读性，符合人们阅读文字的习惯。例如，在一篇博客文章中，每一段文字都可以用<p>标签包裹，浏览器会自动为每个段落添加适当的间距。
代码示例与效果展示
- 代码如下：

html"><body>
    <p>
        记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。
    </p>
    <p>
        工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，
        算力每投入1元，将带动3至4元的GDP经济增长。
    </p>
    <p> 
        近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。
        当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。
    </p>
</body>

- 效果是浏览器会将每个`<p>`标签内的内容作为一个独立的段落进行显示，段落之间会有一定的间距，使文字排版更加清晰。

2.3换行标签

换行标签与分隔线标签的功能
- 单纯实现换行的标签是<br>，它用于在不产生新段落的情况下进行换行。例如，在一行文字中如果需要强制换行，就可以使用<br>标签。如果想添加分隔线，可以使用<hr>标签，<hr>标签会在页面上生成一条水平分隔线，用于区分不同的内容部分。
代码示例与效果展示
- 代码如下：

html"><body>
        工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
    <br>
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。
    <hr>
        中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>

- 效果是当浏览器解析到`<br>`标签时，会在当前行进行换行；当解析到`<hr>`标签时，会在页面上显示一条水平分隔线，将上下内容分隔开。

2.4列表标签

有序列表（ol）与无序列表（ul）
- 有序列表（ol）：是分条列项展示数据的标签，其每一项前面的符号带有顺序特征。它由<ol>标签和<li>标签组成，<ol>标签定义有序列表，<li>标签定义列表项。例如，在展示一个步骤指南或者排名列表时，可以使用有序列表，让用户清楚地看到每个项目的顺序。
- 无序列表（ul）：同样是分条列项展示数据的标签，但每一项前面的符号不带有顺序特征，如圆形、方形等符号。也由<ul>标签和<li>标签组成，<ul>标签定义无序列表，<li>标签定义列表项。常用于展示一组相关但没有顺序要求的项目，如菜单选项、产品特点等。
代码示例与效果展示
- 有序列表代码与效果：

html"><ol>
    <li>JAVA</li>
    <li>html" title=前端>前端</li>
    <li>大数据</li>
</ol>

效果是浏览器会以数字1、2、3等作为列表项的前缀，依次显示列表内容。
- 无序列表代码与效果：

html"><ul>
    <li>JAVASE</li>
    <li>JAVAEE</li>
    <li>数据库</li>
</ul>

效果是浏览器会以默认的无序列表符号（如小圆点）作为列表项的前缀，显示列表内容。

嵌套列表
- 列表和列表之前可以嵌套，实现某一项内容详细展示。例如，在一个大的分类列表中，每个分类下又有子分类，可以通过嵌套列表来清晰地展示这种层次结构。
- 代码如下：

html"><ol>
    <li>
        JAVA
        <ul>
            <li>JAVASE</li>
            <li>JAVAEE</li>
            <li>数据库</li>
        </ul>
    </li>
    <li>html" title=前端>前端</li>
    <li>大数据</li>
</ol>

- 效果是在浏览器中，首先显示一个有序列表，当遇到嵌套的无序列表时，会在对应的有序列表项下面以无序列表的形式展示子项内容，清晰地呈现出层次关系。

2.5超链接标签

超链接标签（a）的属性与功能
- 超链接标签，也叫作a标签，是点击后带有链接跳转功能的标签。主要的属性有href和target。
- href属性：用于定义链接。它可以使用多种路径形式，如绝对路径（以“/”开头，始终以一个固定路径作为基准路径作为出发点）、相对路径（不以“/”开头，以当前文件所在路径为出发点），也可以定义完整的URL。通过href属性，可以将当前页面链接到其他网页、文件或者同一页面内的某个位置（通过锚点）。
- target属性：用于定义打开链接的方式。_blank表示在新窗口中打开目标资源，_self表示在当前窗口中打开目标资源。这可以根据实际需求来控制链接的打开方式，例如，对于外部链接可以使用_blank在新窗口打开，避免用户离开当前页面。
代码示例与效果展示
- 代码如下：

html"><body>
    <!-- 
        href属性用于定义连接
            href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点
            href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
            href中也可以定义完整的URL
        target用于定义打开的方式
            _blank在新窗口中打开目标资源
            _self在当前窗口中打开目标资源
     -->
   <a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br>
   <a href="/day01 - html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br>
   <a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br>
   
</body>

- 效果是当用户点击超链接时，浏览器会根据`href`属性的值进行跳转，并且按照`target`属性的设置在相应的窗口中打开链接。例如，点击“相对路径本地资源连接”会在新窗口中打开相对路径对应的本地HTML文件；点击“绝对路径本地资源连接”会在当前窗口中打开绝对路径对应的本地HTML文件；点击“外部资源链接”会在新窗口中打开指定的外部网站。

2.6多媒体标签

图片标签（img）
- 功能与属性：img标签是用于在页面上引入图片的重点标签。主要属性有src、title和alt。src用于定义图片的连接，它可以是本地路径（如src="img/logo.png"）或者网络路径（如src="http://example.com/image.jpg"）。title用于定义鼠标悬停时显示的文字，当用户将鼠标指针悬停在图片上时，会弹出一个包含title属性值的提示框，用于提供关于图片的额外信息。alt用于定义图片加载失败时显示的提示文字，如果因为网络问题或者图片路径错误等原因导致图片无法加载，浏览器会显示alt属性的值，让用户知道这里原本应该显示的是一张什么样的图片。
- 代码示例与效果展示：

html"><!-- 
src用于定义图片的连接
title用于定义鼠标悬停时显示的文字
alt用于定义图片加载失败时显示的提示文字
-->
<img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />

- 效果是当图片正常加载时，会在页面上显示指定的图片；当鼠标悬停在图片上时，会显示`title`属性定义的文字；如果图片无法加载，会显示`alt`属性定义的文字。

音频标签（audio）
- 功能与属性：audio标签用于在页面上引入一段声音。主要属性包括src（用于定义目标声音资源）、autoplay（用于控制打开页面时是否自动播放）、controls（用于控制是否展示控制面板，有控制面板用户可以暂停、播放、调节音量等）、loop（用于控制是否进行循环播放）。
- 代码示例与效果展示：

html">   <!-- 
    src用于定义目标声音资源
    autoplay用于控制打开页面时是否自动播放
    controls用于控制是否展示控制面板
    loop用于控制是否进行循环播放
    --> 
   <audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />

- 效果是当页面加载时，如果`autoplay`属性设置为`autoplay`，音频会自动播放；同时会根据`controls`属性的设置显示或隐藏控制面板；如果`loop`属性设置为`loop`，音频播放完后会自动循环播放。

视频标签（video）
- 功能与属性：video标签用于在页面上引入一段视频。其属性与audio标签类似，包括src（用于定义目标视频资源）、autoplay（用于控制打开页面时是否自动播放）、controls（用于控制是否展示控制面板）、loop（用于控制是否进行循环播放），还可以设置width（视频宽度）等属性来控制视频的显示尺寸。
- 代码示例与效果展示：

html"><body>
   <!-- 
    src用于定义目标视频资源
    autoplay用于控制打开页面时是否自动播放
    controls用于控制是否展示控制面板
    loop用于控制是否进行循环播放
    --> 
   <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>

- 效果是当页面加载时，根据属性设置来播放视频。如果`autoplay`设置为自动播放，视频会自动开始播放；`controls`属性会显示一个控制面板，方便用户操作视频的播放、暂停、音量调节等；`loop`属性可以让视频循环播放；`width`属性可以设置视频的宽度，从而控制视频在页面上的显示大小。

2.7表格标签（重点）

常规表格标签结构
- 表格标签（table）：代表整个表格，是表格的最外层容器。
- 表头标签（thead）：代表表头部分，可以省略不写。表头通常用于定义表格列的标题，使表格内容更易于理解。
- 表体标签（tbody）：代表表体部分，也可以省略不写。表体包含表格的主要数据内容，是表格的核心部分。
- 表尾标签（tfoot）：代表表尾部分，可以省略不写。表尾可以用于显示一些汇总信息，如总计、平均值等。
- 行标签（tr）：代表表格中的一行，每个<tr>标签内包含多个单元格标签，用于定义一行中的各个单元格。
- 单元格标签（td）：代表行内的一格，用于存放表格数据。如果在表头部分，还可以使用<th>标签，它自带加粗和居中效果的td，用于突出表头内容。
代码示例与展示效果
- 代码如下：

html">    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table  border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
    </table>

- 效果是在浏览器中显示一个带有边框的表格，表格有表头（包含“排名”、“姓名”、“分数”）和表体（包含员工的排名、姓名和分数信息），表格在页面中水平居中显示。

单元格跨行与跨列
- 跨行（rowspan）：通过td的rowspan属性实现上下跨行。例如，在一个表格中，如果某一个单元格需要占据多行，可以设置rowspan属性。这样可以使表格的布局更加灵活，适用于一些复杂的数据展示场景，如表格中有一些合并行的情况。
- 代码示例与效果展示（跨行）：

html">    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table  border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
            <td rowspan="3">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
    </table>

- 效果是“备注”列中的“前三名升职加薪”单元格跨越了三行，使得这个单元格在垂直方向上占据了更大的空间，方便展示一些与多行数据相关的汇总或说明信息。
- **跨列（colspan）**：通过`td`的`colspan`属性实现左右的跨列。当需要一个单元格在水平方向上占据多个列时，可以使用`colspan`属性。这对于创建一些不规则的表格布局很有用，比如表格中有合并列的情况。
- **代码示例与效果展示（跨列）**：

html">    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table  border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
            <td rowspan="6">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
        <tr>
            <td>总人数</td>
            <td colspan="2">2000</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td colspan="2">90</td>
        </tr>
        <tr>
            <td>及格率</td>
            <td colspan="2">80%</td>
        </tr>
    </table>

- 效果是在表格的底部，“总人数”、“平均分”和“及格率”这几行的单元格通过`colspan`属性进行了跨列操作，使得这些单元格在水平方向上占据了多个列的空间，能够更好地展示一些与表格整体相关的数据汇总信息。

2.8表单标签（重点）

表单标签（form）的作用与属性
- 表单标签是可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要的方式之一。form标签内部用于定义可以让用户输入信息的表单项标签。
- 主要属性有action和method。action属性用于定义信息提交的服务器的地址，它指定了表单数据将被发送到何处进行处理。method属性用于定义信息的提交方式，主要有get和post两种方式。get方式下，数据会缀到url后，以“?”作为参数开始的标识，多个参数用“&”隔开；post方式下，数据会通过请求体发送，不会在缀到url后。
表单项标签（input）的属性与类型
- input标签是主要的表单项标签，可以用于定义多种类型的表单项。主要属性包括name（用于定义提交的参数名）和type（用于定义表单项类型）。
- type属性可以定义多种类型的表单项，如text（文本框）用于用户输入文本信息；password（密码框）用于输入密码，输入的内容会以加密的形式显示，如黑点或星号；submit（提交按钮）用于提交表单；reset（重置按钮）用于将表单内的所有表单项都恢复为默认值。
代码示例与效果展示
- 代码如下：

html">   <form action="http://www.atguigu.com" method="get">
        用户名 <input type="text" name="username" /> <br>
        密&nbsp;&nbsp;&nbsp;码 <input type="password" name="password" /> <br>
        <input type="submit"  value="登录" />
        <input type="reset"  value="重置" />
   </form>

- 效果是在浏览器中显示一个包含用户名输入框、密码输入框、登录按钮和重置按钮的表单。当用户在文本框中输入内容，点击登录按钮时，根据`method`属性的设置（这里是`get`方式），数据会以`?username=输入的用户名&password=输入的密码`的形式附加在`action`属性指定的URL后面（如果是`post`方式则通过请求体发送），并尝试向服务器提交数据；点击重置按钮会将用户名和密码输入框的内容清空，恢复到默认状态。

2.9常见表单项标签（重点）

单行文本框
- 代码示例：

html">个性签名：<input type="text" name="signal"/><br/>

- 效果是在浏览器中显示一个用于输入单行文本的输入框，用户可以在这个框中输入个性签名等文本内容。输入框的宽度会根据内容自动调整，或者可以通过CSS样式来设置固定宽度。

密码框
- 代码示例：

html">密码：<input type="password" name="secret"/><br/>

- 效果是显示一个密码输入框，当用户在框中输入密码时，输入的内容会以加密的形式（如黑点或星号）显示，以保护用户的密码隐私。它的外观和单行文本框类似，只是在显示输入内容时有加密处理。

单选框
- 代码示例：

html">你的性别是：
<input type="radio" name="sex" value="spring" />男
<input type="radio" name="sex" value="summer" checked="checked" />女

- 效果是在浏览器中显示两个单选按钮，用于选择性别。`name`属性相同的`radio`为一组，组内互斥，即用户只能选择其中一个选项。当用户选择了一个`radio`并提交表单，这个`radio`的`name`属性和`value`属性组成一个键值对发送给服务器。通过设置`checked="checked"`属性可以设置默认被选中的`radio`，在HTML5中如果属性名和属性值一样，如`checked`，可以省略属性值。

复选框
- 代码示例：

html">你喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利

- 效果是在浏览器中显示一组复选框，用户可以选择多个选项。`name`属性用于在表单提交时作为参数名，`value`属性用于定义每个选项的值。通过设置`checked="checked"`属性可以设置默认被选中的复选框。

下拉框
- 代码示例：

html">你喜欢的运动是：
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>

- 效果是在浏览器中显示一个下拉框，用户可以点击下拉箭头来选择喜欢的运动。下拉列表用到了`select`标签和`option`标签，`select`标签用来定义下拉列表，`name`属性在`select`标签中设置；`option`标签设置列表项，`value`属性在`option`标签中设置，`option`标签的标签体是显示出来给用户看的，提交到服务器的是`value`属性的值。通过在`option`标签中设置`selected="selected"`属性实现默认选中的效果。

按钮
- 代码示例：

html"><button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>

- 效果是在浏览器中显示不同类型的按钮。普通按钮点击后无效果，需要通过JavaScript绑定单击响应函数来实现特定的功能；重置按钮点击后将表单内的所有表单项都恢复为默认值；提交按钮点击后提交表单，根据表单的`method`和`action`属性将数据发送到服务器。

隐藏域
- 代码示例：

html"><input type="hidden" name="userId" value="2233"/>

- 说明：通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。它用于设置一些需要和表单一起提交但是不希望用户看到的数据，例如用户id等信息，这些数据可以在服务器端用于识别用户或者进行其他相关的操作。

多行文本框
- 代码示例：

html">自我介绍：<textarea name="desc"></textarea>

- 效果是在浏览器中显示一个可以输入多行文本的文本框。`textarea`没有`value`属性，如果要设置默认值需要写在开始和结束标签之间，用户可以在这个框中输入较长的文本内容，如自我介绍等。

文件标签
- 代码示例：

html">头像:<input type="file" name="file"/>

- 效果是在浏览器中显示一个文件选择框，用户可以通过这个框选择本地的文件。不同浏览器显示的样式可能会有微小差异，但基本功能都是允许用户选择文件，在表单提交时，文件的相关信息（如文件名、文件路径等）会被发送到服务器，服务器可以根据这些信息来处理文件上传等操作。

2.10布局相关标签

div标签（块）
- 主要用于划分页面结构，做页面布局。div标签是一个块级元素，它在页面中会独占一行，默认情况下宽度是其父元素的100%。可以通过CSS样式设置div标签的宽度、高度、背景色、边距、内边距等属性来实现不同的布局效果。例如，可以将一个页面划分为多个div区域，每个区域用于放置不同的内容，如导航栏、主体内容、侧边栏、页脚等。
span标签（层）
- 俗称“层”，主要用于划分元素范围，配合CSS做页面元素样式的修饰。span标签是一个内联元素，它不会独占一行，而是根据内容的大小自动调整宽度，通常用于对一段文本或部分元素进行样式设置。例如，可以使用span标签包裹一段文字，然后通过CSS设置文字的颜色、字体大小等样式，或者用于在一段文本中标记特定的部分，如强调某个关键词。
代码示例与展示效果
- 代码如下：

html">    <div style="width: 500px; height: 400px;background-color: cadetblue;">
        <div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
            <span style="color: blueviolet;">页面开头部分</span>
        </div> 
        <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;">
            <span style="color: blueviolet;">页面中间部分</span>
        </div> 
        <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
            <span style="color: blueviolet;">页面结尾部分</span>
        </div> 
    </div>

- 效果是在浏览器中显示一个大的蓝色背景的`div`区域（外层`div`），在这个区域内有三个较小的不同背景色的`div`区域（内层`div`），每个内层`div`中有一个紫色文字的`span`标签。通过这种布局和样式设置，实现了一个简单的页面结构划分，并且对特定的文字部分应用了颜色样式。

2.11特殊字符

特殊字符的表示方法与用途
- 在HTML中，对于有特殊含义的字符，需要通过转义字符来表示。这是因为HTML标签是由尖括号等特殊字符组成的，如果直接在文本内容中使用这些特殊字符，可能会被浏览器误解为HTML标签，从而导致解析错误。例如，“<”和“>”在HTML中有标签定义的作用，所以如果要在文本中显示这些字符，需要使用转义字符<和>。
代码示例与效果展示
- 代码如下：

html">    &lt;span&gt;  <br>
    &lt;a href="http://www.atguigu.com"&gt;尚&nbsp;硅&nbsp;谷&lt;/a&gt; <br>
    &amp;amp;

- 效果是在浏览器中正确地显示了转义字符对应的内容。`<span>`会以文本形式显示“<span>”，而不是被解析为HTML标签；超链接会正确显示，其中的“&nbsp;”是HTML中的空格转义字符，用于在链接文本中添加空格；“&amp;amp;”会显示“&”字符，因为“&”在HTML中有特殊用途（用于开始转义字符序列），所以需要转义才能正确显示。

三、CSS的使用

3.1 CSS引入方式

行内式
- 语法与应用方式：行内式是通过元素开始标签的style属性引入CSS样式。样式语法为“样式名:样式值;样式名:样式值;”。例如：

html">    <input 
        type="button" 
        value="按钮"
        style="
            display: block;
            width: 60px; 
            height: 40px; 
            background-color: rgb(140, 235, 100); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
    "/>

- 这种方式直接在HTML标签内部定义样式，能够快速地为某个特定元素设置样式。每个带有`style`属性的元素都可以有自己独立的样式设置。
- **缺点**：
    - **代码交织问题**：html代码和css样式代码交织在一起，增加了阅读难度和维护成本。当HTML结构复杂或者样式较多时，很难清晰地分辨出样式和结构之间的关系，不便于代码的修改和维护。
    - **复用性差**：css样式代码仅对当前元素有效，代码重复量高。如果需要为多个元素设置相同的样式，就需要在每个元素的`style`属性中重复编写相同的样式代码，不利于代码的复用，也不利于网站风格的统一。

内嵌式
- 语法与应用方式：内嵌式样式需要在head标签中，通过一对style标签定义CSS样式。例如：

html"><head>
    <meta charset="UTF-8">
    <style>
        /* 通过选择器确定样式的作用范围 */
        input {
            display: block;
            width: 80px; 
            height: 40px; 
            background-color: rgb(140, 235, 100); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
</body>

- 在`style`标签内，通过选择器（这里是`input`元素选择器）来确定样式的作用范围，然后在大括号内定义样式属性和值。CSS样式代码中的注释方式为`/* */`，可以用于添加注释说明样式的功能等。
- **特点与局限性**：虽然对样式代码做了抽取，将样式代码集中放在`head`标签中的`style`标签内，但CSS代码仍然在html文件中。并且内嵌样式仅仅能作用于当前文件，代码复用度还是不够高，对于一个大型网站或者多个页面的项目来说，不利于网站风格的统一，因为每个页面都需要单独定义相同的样式。

连接式/外部样式表
- 创建与引用方式：可以在项目单独创建.css样式文件，专门用于存放CSS样式代码。例如，在项目目录下创建一个名为buttons.css的文件，在其中编写CSS样式。然后在HTML文件的head标签中，通过link标签引入外部CSS样式，如：

html"><head>
    <meta charset="UTF-8">
    <link href="css/buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
</body>

- **优势**：
    - **代码分离与维护**：CSS样式代码从html文件中剥离出来，形成独立的CSS文件。这样使得HTML文件只专注于页面结构，而CSS文件专注于样式设计，代码结构更加清晰，利于代码的维护。当需要修改样式时，只需要在CSS文件中进行修改，而不需要在每个包含相关样式的HTML文件中逐一修改。
    - **复用与风格统一**：CSS样式文件可以被多个不同的html文件引入，只需要在一个CSS文件中定义样式，所有引用该CSS文件的HTML页面都会应用这些样式，有利于网站风格的统一。这对于大型网站的开发和维护非常重要，可以提高开发效率，减少重复代码。

3.2 CSS选择器

元素选择器
- 语法与作用：根据标签名确定样式的作用范围，语法为“元素名 {}”。例如：

html"><head>
    <meta charset="UTF-8">
   <style>
    input {
        display: block;
        width: 80px; 
        height: 40px; 
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: '隶书';
        line-height: 30px;
        border-radius: 5px;
    }
   </style>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
    <button>按钮5</button>
</body>

- 在上述代码中，通过`input`元素选择器，定义了所有`input`标签的样式。浏览器会将这些样式应用到页面中所有的`input`元素上，使它们具有相同的外观和样式。
- **局限性**：样式只能作用到同名标签上，其他标签不可用。并且相同的标签未必需要相同的样式，这种选择器会造成样式的作用范围太大，不够灵活。例如，如果只想为部分`input`元素设置特定样式，使用元素选择器就无法满足需求。

id选择器
- 语法与应用：根据元素id属性的值确定样式的作用范围，语法为“#id值 {}”。例如：

html"><head>
    <meta charset="UTF-8">
   <style>
    #btn1 {
        display: block;
        width: 80px; 
        height: 40px; 
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: '隶书';
        line-height: 30px;
        border-radius: 5px;
    }
   </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮1"/> 
    <input id="btn2" type="button" value="按钮2"/> 
    <input id="btn3" type="button" value="按钮3"/> 
    <input id="btn4" type="button" value="按钮4"/> 
    <button id="btn5">按钮5</button>
</body>

- 在这个例子中，只有`id`为`btn1`的元素会应用到定义的样式。`id`属性的值在页面上具有唯一性，所以`id`选择器也只能影响一个元素的样式。这使得它在为特定元素设置独特样式时非常有用，比如为页面上唯一的导航栏按钮设置特定样式。
- **缺点**：因为`id`属性值不够灵活，每个元素的`id`必须唯一，所以使用该选择器的情况较少。如果在多个地方需要类似的样式，使用`id`选择器就需要为每个元素定义不同的`id`并重复编写样式代码，不利于代码复用。

class选择器
- 语法与特点：根据元素class属性的值确定样式的作用范围，语法为“.class值 {}”。class属性值可以有一个，也可以有多个，多个不同的标签也可以使用相同的class值。例如：

html"><head>
    <meta charset="UTF-8">
   <style>
   .shapeClass {
        display: block;
        width: 80px; 
        height: 40px; 
        border-radius: 5px;
    }
   .colorClass{
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
    }
   .fontClass {
        font-size: 22px;
        font-family: '隶书';
        line-height: 30px;
    }

   </style>
</head>
<body>
    <input  class ="shapeClass colorClass fontClass"type="button" value="按钮1"/> 
    <input  class ="shapeClass colorClass" type="button" value="按钮2"/> 
    <input  class ="colorClass fontClass" type="button" value="按钮3"/> 
    <input  class ="fontClass" type="button" value="按钮4"/> 
    <button class="shapeClass colorClass fontClass" >按钮5</button>
</body>

- 在这个例子中，不同的`input`和`button`元素可以通过设置不同的`class`组合来应用不同的样式。多个选择器的样式可以在同一个元素上进行叠加，如`class="shapeClass colorClass fontClass"`的元素会同时应用这三个`class`对应的样式。
- **优势**：因为`class`选择器非常灵活，一个元素可以有多个`class`，不同元素可以共享相同的`class`，所以在CSS中，使用该选择器的情况较多。它可以方便地实现代码复用，同时又能根据不同的需求为元素组合应用不同的样式。

3.4 CSS浮动

浮动的概念与设计初衷
- CSS的Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。其设计初衷是为了解决文字环绕图片问题，浮动后一定不会将文字挡住。
- 文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。例如，当一个图片设置为浮动时，它会从文档的正常排列顺序中脱离出来，其他元素会按照浮动元素已经不存在的方式进行排列，但文字会环绕在浮动元素周围。
浮动原理
- 向右浮动：当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。例如：

html"><head>
    <style>
      .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            float: right;
        }
      .text {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p class="text">这是一段文本，用于展示向右浮动的效果。当框1向右浮动时，它会脱离文档流并向右移动，直到碰到包含框的右边缘。而这段文本会环绕在框1的周围。</p>
</body>

- **向左浮动**：当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。例如：

html"><head>
    <style>
      .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            float: left;
        }
      .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
      .box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

- **空间不足时的情况**：如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。例如：

html"><head>
    <style>
      .box1 {
            width: 100px;
            height: 150px;
            background-color: lightblue;
            float: left;
        }
      .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
      .box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
      .container {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

- 在这个例子中，由于`.container`的宽度为200px，无法水平容纳三个宽度为100px的浮动元素，`box2`和`box3`会向下移动，并且`box2`会被`box1`“卡住”，因为`box1`的高度更高。

浮动的样式名：浮动的样式名是float，其取值可以是left（向左浮动）、right（向右浮动）和none（不浮动，默认值）。通过设置float属性，可以控制元素的浮动方向和行为。

3.5 CSS定位

position属性与定位机制
- position属性指定了元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
- 元素可以使用top、bottom、left和right属性定位。然而，这些属性无法工作，除非先设定position属性。它们也有不同的工作方式，这取决于定位方法。
静态定位（static）
- 说明：不设置position属性的时候，元素的默认值就是static，即静态定位。在静态定位下，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列。静态定位的元素不受top、bottom、left、right属性的影响。
- 代码示例与效果：

html"><head>
    <meta charset="UTF-8">
    <style>
      .innerDiv{
                width: 100px;
                height: 100px;
        }
      .d1{
            background-color: rgb(166, 247, 46);
            position: static;
        }
      .d2{
            background-color: rgb(79, 230, 124);
        }
      .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

- 效果是三个`div`元素按照正常的文档流垂直排列，每个`div`占据自己的空间，没有因为`position`属性而产生特殊的位置变化。

绝对定位（absolute）
- 说明：absolute通过top、left、right、bottom指定元素在页面上的固定位置。定位后元素会让出原来位置，其他元素可以占用。绝对定位的元素是相对于最近的已定位祖先元素（即设置了position属性且值不为static的祖先元素）进行定位，如果没有这样的祖先元素，则相对于文档的初始包含块（通常是浏览器窗口）。
- 代码示例与效果：

html"><head>
    <meta charset="UTF-8">
    <style>
      .innerDiv{
                width: 100px;
                height: 100px;
        }
      .d1{
            background-color: rgb(166, 247, 46);
            position: absolute;
            left: 300px;
            top: 100px;
        }
      .d2{
            background-color: rgb(79, 230, 124);
        }
      .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

- 效果是`d1`元素从文档流中脱离，移动到距离页面左边300px，上边100px的位置，它原来的位置被`d2`元素占据，`d2`和`d3`元素会按照`d1`不存在的方式进行排列。

相对定位（relative）
- 说明：relative是相对于自己原来的位置进行定位。定位后保留原来的站位，其他元素不会移动到该位置。相对定位主要用于微调元素的位置，例如在元素原来位置的基础上进行偏移。
- 代码示例与效果：

html"><head>
    <meta charset="UTF-8">
    <style>
      .innerDiv{
                width: 100px;
                height: 100px;
        }
      .d1{
            background-color: rgb(166, 247, 46);
            position: relative;
            left: 30px;
            top: 30px;
        }
      .d2{
            background-color: rgb(79, 230, 124);
        }
      .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

- 效果是`d1`元素相对于它原来在文档流中的位置，向右移动30px，向下移动30px，但它原来的位置仍然保留，`d2`和`d3`元素不会占据`d1`原来的位置。

固定定位（fixed）
- 说明：fixed始终在浏览器窗口固定位置，不会随着页面的上下移动而移动。元素定位后会让出原来的位置，其他元素可以占用。固定定位通常用于创建一些始终可见的元素，如导航栏、返回顶部按钮等。
- 代码示例与效果：

html"><head>
    <meta charset="UTF-8">
    <style>
      .innerDiv{
                width: 100px;
                height: 100px;
        }
      .d1{
            background-color: rgb(166, 247, 46);
            position: fixed;
            right: 30px;
            top: 30px;
        }
      .d2{
            background-color: rgb(79, 230, 124);
        }
      .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
        <p>这是一段很长的文本，用于模拟页面滚动。当页面滚动时，你会发现框1始终固定在浏览器窗口的右上角，距离右边30px，上边30px的位置。</p>
        <p>这是一段很长的文本，用于模拟页面滚动。当页面滚动时，你会发现框1始终固定在浏览器窗口的右上角，距离右边30px，上边30px的位置。</p>
        <p>这是一段很长的文本，用于模拟页面滚动。当页面滚动时，你会发现框1始终固定在浏览器窗口的右上角，距离右边30px，上边30px的位置。</p>
        <p>这是一段很长的文本，用于模拟页面滚动。当页面滚动时，你会发现框1始终固定在浏览器窗口的右上角，距离右边30px，上边30px的位置。</p>
        <p>这是一段很长的文本，用于模拟页面滚动。当页面滚动时，你会发现框1始终固定在浏览器窗口的右上角，距离右边30px，上边30px的位置。</p>
        <p>这是一段很长的文本，用于模拟页面滚动。当页面滚动时，你会发现框1始终固定在浏览器窗口的右上角，距离右边30px，上边30px的位置。</p>
</body>

- 效果是`d1`元素固定在浏览器窗口的右上角，无论页面如何滚动，它的位置都保持不变。而`d2`和`d3`元素以及文本内容会正常显示和滚动，仿佛`d1`元素脱离了页面的正常滚动范围。

3.6 CSS属性

文字样式属性
- color：用于设置文字的颜色。可以使用多种方式指定颜色值，如颜色名称（如red、blue等）、十六进制值（如#FF0000表示红色）、RGB值（如rgb(255, 0, 0)也表示红色）。例如：

p {
    color: blue;
}

- **font - size**：设置文字的大小。常见的单位有像素（`px`）、百分比（相对于父元素字体大小的百分比）、`em`（相对于当前元素字体大小）等。例如：

h1 {
    font - size: 24px;
}

- **font - family**：指定文字的字体。可以指定多个字体，浏览器会按照顺序查找并使用系统中安装的字体。例如：

body {
    font - family: Arial, sans - serif;
}

- **font - weight**：设置文字的粗细。常见的值有`normal`（正常粗细）、`bold`（加粗）、`lighter`（更细），也可以使用数字100 - 900来精确指定粗细程度，400等同于`normal`，700等同于`bold`。例如：

strong {
    font - weight: bold;
}

- **font - style**：用于设置文字的样式，如`normal`（正常样式）、`italic`（斜体）、`oblique`（倾斜体，与斜体类似，但有些字体可能显示不同）。例如：

em {
    font - style: italic;
}

背景样式属性
- background - color：设置元素的背景颜色，取值方式与color属性类似。例如：

div {
    background - color: lightgray;
}

- **background - image**：用于设置元素的背景图像。通过`url()`函数指定图像的路径，可以是相对路径或绝对路径。例如：

body {
    background - image: url('images/bg.jpg');
}

- **background - repeat**：控制背景图像的重复方式。取值有`repeat`（默认值，在水平和垂直方向都重复）、`repeat - x`（仅在水平方向重复）、`repeat - y`（仅在垂直方向重复）、`no - repeat`（不重复）。例如：

div {
    background - image: url('images/pattern.png');
    background - repeat: no - repeat;
}

- **background - position**：指定背景图像的位置。可以使用关键字（如`top`、`bottom`、`left`、`right`、`center`）组合，也可以使用具体的长度值（如`50px 100px`，第一个值表示水平位置，第二个值表示垂直位置）。例如：

div {
    background - image: url('images/logo.png');
    background - repeat: no - repeat;
    background - position: center top;
}

- **background - size**：设置背景图像的大小。可以使用`cover`（使背景图像完全覆盖元素，可能会裁剪图像）、`contain`（使背景图像完全包含在元素内，可能会在元素周围留下空白），也可以使用具体的长度值或百分比来指定宽度和高度。例如：

body {
    background - image: url('images/big - bg.jpg');
    background - size: cover;
}

边框样式属性
- border - width：设置边框的宽度。可以为四个边分别设置宽度，也可以使用统一的值。例如：

div {
    border - width: 2px; /* 四个边宽度均为2px */
}
div.special {
    border - width: 1px 2px 3px 4px; /* 上、右、下、左边框宽度分别为1px、2px、3px、4px */
}

- **border - style**：指定边框的样式。常见的值有`solid`（实线）、`dashed`（虚线）、`dotted`（点线）、`double`（双线）等。例如：

p {
    border - style: solid;
}

- **border - color**：设置边框的颜色，取值方式与`color`属性相同。例如：

a {
    border - color: green;
}

- **border - radius**：用于创建圆角边框。可以设置一个值来使四个角都具有相同的圆角半径，也可以分别设置四个角的半径。例如：

button {
    border - radius: 5px; /* 四个角都为5px圆角 */
}
div.circle {
    border - radius: 50%; /* 使元素成为圆形，适用于正方形元素 */
}

盒模型相关属性
- width：设置元素的宽度，不包括边框和内边距。例如：

img {
    width: 300px;
}

- **height**：设置元素的高度，不包括边框和内边距。例如：

div {
    height: 200px;
}

- **padding**：内边距，用于设置元素内容与边框之间的距离。可以为四个边分别设置内边距，也可以使用统一的值。例如：

ul {
    padding: 10px; /* 四个边内边距均为10px */
}
li {
    padding: 5px 10px; /* 上下内边距为5px，左右内边距为10px */
}

- **margin**：外边距，用于设置元素与其他元素之间的距离。同样可以为四个边分别设置外边距，也可以使用统一的值。例如：

h2 {
    margin: 20px 0; /* 上下外边距为20px，左右外边距为0 */
}

- **box - sizing**：用于控制盒模型的计算方式。取值有`content - box`（默认值，宽度和高度仅包括内容，不包括边框和内边距）、`border - box`（宽度和高度包括内容、边框和内边距）。例如：

div {
    box - sizing: border - box;
    width: 200px;
    padding: 20px;
    border: 1px solid black;
    /* 此时元素总宽度仍为200px，包括边框和内边距 */
}
```### 3.7 CSS 选择器进阶
- **通配符选择器**
    - **语法与作用**：通配符选择器使用 `*` 表示，它会选中页面中的所有元素。语法为 `* { /* 样式声明 */ }`。例如，若想将页面上所有元素的 margin 和 padding 都设置为 0，可以这样写：
```css
* {
    margin: 0;
    padding: 0;
}

- **应用场景与注意事项**：通配符选择器在进行一些全局样式重置时非常有用，能快速统一页面所有元素的某些基础样式。然而，由于它会选中所有元素，过度使用可能会影响页面性能，尤其是在页面元素较多的情况下。因为浏览器需要对每个元素都应用这些样式，计算量较大。

群组选择器
- 语法与示例：当多个选择器需要应用相同的样式时，可以使用群组选择器。将多个选择器用逗号分隔，然后统一设置样式。例如，若想让 h1、h2 和 p 标签都具有相同的文本颜色和字体大小，可以这样写：

h1, h2, p {
    color: #333;
    font - size: 16px;
}

- **优势**：这种方式可以避免重复编写相同的样式代码，提高代码的复用性和简洁性。特别是在对多个不同类型但需要相同外观样式的元素进行设置时，群组选择器能大大减少代码量，使 CSS 代码更易维护。

后代选择器
- 语法与匹配规则：后代选择器用于选择某元素的后代元素。语法为 祖先元素后代元素 { /* 样式声明 */ }。例如，要选择 div 元素内部的所有 a 标签并设置其样式，可以这样写：

div a {
    color: blue;
    text - decoration: none;
}

- **应用场景**：后代选择器常用于对特定区域内的元素进行样式设置。比如在一个导航栏 `div` 中，只想设置导航链接 `a` 标签的样式，而不影响页面其他地方的 `a` 标签，就可以使用后代选择器。它能精确控制样式的作用范围，使页面不同部分的相同元素可以有不同的外观。

子选择器
- 语法与区别于后代选择器：子选择器用于选择某元素的直接子元素。语法为 父元素 > 子元素 { /* 样式声明 */ }。例如，若只想选择 ul 元素的直接子元素 li 并设置样式，可写为：

ul > li {
    list - style - type: none;
}

- 与后代选择器不同，后代选择器会匹配所有层级的后代元素，而子选择器只匹配直接子元素。例如，对于结构 `<ul><li><a href="#">链接</a></li></ul>`，`ul a` （后代选择器）会选中 `a` 标签，而 `ul > a` （子选择器）不会选中 `a` 标签，因为 `a` 不是 `ul` 的直接子元素。

相邻兄弟选择器
- 语法与应用：相邻兄弟选择器用于选择紧挨着某元素的下一个兄弟元素。语法为 前一个元素 + 后一个元素 { /* 样式声明 */ }。例如，若想让段落 p 后面紧挨着的 div 元素具有特定的背景颜色，可以这样写：

p + div {
    background - color: lightyellow;
}

- **使用场景**：在一些页面布局中，当需要对特定元素的下一个相邻元素进行特殊样式设置时，相邻兄弟选择器很有用。比如在文章内容中，可能希望段落后面的第一个图片 `img` 元素有不同的样式，就可以使用此选择器。

通用兄弟选择器
- 语法与功能：通用兄弟选择器用于选择某元素之后的所有兄弟元素。语法为 前一个元素 ~ 后一个元素 { /* 样式声明 */ }。例如，要让 h2 标题之后的所有 p 段落都具有灰色文本颜色，可以这样写：

h2 ~ p {
    color: gray;
}

- **与相邻兄弟选择器对比**：与相邻兄弟选择器相比，通用兄弟选择器不要求被选择的元素与指定元素直接相邻，只要是在其之后的兄弟元素都能被选中。这在一些需要对一组相关元素进行批量样式设置，但又不需要逐个指定的场景下非常实用。

3.8 CSS 伪类与伪元素

CSS 伪类
- 概念与作用：CSS 伪类用于向某些选择器添加特殊的效果，它基于元素的状态或与其他元素的关系来应用样式，而不是基于元素的实际结构。伪类通常以冒号 : 开头。
- 常见伪类示例
  - :hover：当鼠标悬停在元素上时应用样式。例如，为链接 a 标签添加 :hover 伪类，当鼠标悬停在链接上时改变其颜色和文本装饰：

a:hover {
    color: red;
    text - decoration: underline;
}

    - **`:active`**：用于设置元素被激活（如按钮被按下）时的样式。例如，对于按钮 `button` 元素，当按下时改变其背景颜色：

button:active {
    background - color: darkgray;
}

    - **`:visited`**：用于设置已访问链接的样式。例如，为了让用户能区分已访问和未访问的链接，可以设置已访问链接的颜色：

a:visited {
    color: purple;
}

    - **`:first - child`**：选择某个元素的第一个子元素。例如，在一个 `ul` 列表中，要设置第一个 `li` 元素的样式：

ul li:first - child {
    font - weight: bold;
}

    - **`:last - child`**：与 `:first - child` 相反，选择某个元素的最后一个子元素。例如，在一个 `ol` 列表中，设置最后一个 `li` 元素的样式：

ol li:last - child {
    color: green;
}

CSS 伪元素
- 概念与特点：CSS 伪元素用于创建一些不在文档树中的元素，并为其添加样式。伪元素通常以双冒号 :: 开头（在 CSS3 之前使用单冒号，为了与伪类区分，CSS3 推荐使用双冒号）。
- 常见伪元素示例
  - ::before：在被选元素的内容前面插入新内容。例如，为 h1 标题添加一个图标前缀：

h1::before {
    content: "📌 ";
    color: blue;
}

    - **`::after`**：在被选元素的内容后面插入新内容。例如，在段落 `p` 元素末尾添加一个特定符号：

p::after {
    content: " ★";
    color: orange;
}

    - **`::first - letter`**：选择文本的第一个字母并设置样式。常用于实现首字母大写或特殊样式，如在文章段落中使首字母变大并变色：

p::first - letter {
    font - size: 2em;
    color: red;
}

    - **`::first - line`**：选择文本的第一行并设置样式。例如，在一个长段落中，设置第一行文本的背景颜色：

p::first - line {
    background - color: lightblue;
}

3.9 CSS3 新特性

CSS3 颜色
- RGBA 颜色模式：在传统 RGB 颜色模式基础上增加了透明度（Alpha）通道。取值范围为 0 - 1，0 表示完全透明，1 表示完全不透明。例如，要设置一个半透明的红色背景，可以这样写：

div {
    background - color: rgba(255, 0, 0, 0.5);
}

- **HSLA 颜色模式**：H 代表色相（Hue），取值范围是 0 - 360，表示颜色在色轮上的角度；S 代表饱和度（Saturation），取值为 0% - 100%，0% 表示灰色，100% 表示完全饱和的颜色；L 代表亮度（Lightness），取值为 0% - 100%，0% 表示黑色，100% 表示白色；A 同样是透明度通道。例如，设置一个饱和度为 80%，亮度为 50%，透明度为 0.8 的蓝色背景：

body {
    background - color: hsla(240, 80%, 50%, 0.8);
}

CSS3 边框
- 圆角边框（border - radius）增强：除了之前提到的简单设置圆角半径，CSS3 允许更复杂的圆角设置。可以分别指定四个角的水平和垂直半径，例如：

div {
    border - radius: 10px 20px 30px 40px / 5px 15px 25px 35px;
    /* 前四个值表示水平半径，斜杠后四个值表示垂直半径 */
}

- **边框图片（border - image）**：可以用图片来作为元素的边框。通过 `border - image - source` 指定图片源，`border - image - slice` 定义图片的切割方式，`border - image - width` 定义边框宽度，`border - image - repeat` 定义图片的重复方式。例如：

div {
    border - image - source: url('border - image.png');
    border - image - slice: 30 fill;
    border - image - width: 10px;
    border - image - repeat: round;
}

CSS3 背景
- 多背景图像（background - image 多值）：允许在一个元素上设置多个背景图像。多个图像之间用逗号分隔，先声明的图像在最上层。例如：

body {
    background - image: url('top - bg.png'), url('bottom - bg.png');
    background - position: top left, bottom right;
    background - repeat: no - repeat, repeat - x;
}

- **背景尺寸（background - size）更灵活**：除了 `cover` 和 `contain` 等关键字，还可以直接指定宽度和高度值，或者使用百分比。例如，使背景图像宽度为元素宽度的 50%，高度自适应：

div {
    background - image: url('bg - pattern.jpg');
    background - size: 50% auto;
}

CSS3 渐变
- 线性渐变（linear - gradient）：创建一个线性方向的渐变。可以指定渐变方向（如 to top、to right、to bottom right 等），以及渐变的颜色断点。例如，从左到右的红到蓝渐变：

div {
    background: linear - gradient(to right, red, blue);
}

- **径向渐变（radial - gradient）**：创建一个从中心向四周扩散的渐变。可以指定渐变形状（如 `circle` 圆形、`ellipse` 椭圆形）、大小（如 `closest - side`、`farthest - corner` 等关键字）和颜色断点。例如，一个圆形的从中心白色到边缘黑色的渐变：

div {
    background: radial - gradient(circle, white, black);
}

CSS3 转换（Transform）
- 平移（translate）：通过 translateX()、translateY() 或 translate() 函数来移动元素。例如，将一个 div 元素向右移动 50 像素，向下移动 30 像素：

div {
    transform: translate(50px, 30px);
}

- **旋转（rotate）**：使用 `rotate()` 函数以指定的角度旋转元素。例如，将一个图片顺时针旋转 45 度：

img {
    transform: rotate(45deg);
}

- **缩放（scale）**：通过 `scaleX()`、`scaleY()` 或 `scale()` 函数来缩放元素。例如，将一个按钮在水平和垂直方向都放大 1.5 倍：

button {
    transform: scale(1.5);
}

- **倾斜（skew）**：使用 `skewX()`、`skewY()` 或 `skew()` 函数使元素倾斜。例如，使一个 `p` 元素在水平方向倾斜 20 度：

p {
    transform: skewX(20deg);
}

CSS3 过渡（Transition）
- 概念与语法：过渡用于在元素的属性值发生变化时创建平滑的过渡效果。通过 transition - property 指定要过渡的属性，transition - duration 指定过渡持续时间，transition - timing - function 指定过渡的时间函数（如 ease、linear、ease - in、ease - out 等），transition - delay 指定过渡延迟时间。例如，当鼠标悬停在按钮上时，背景颜色在 0.5 秒内平滑过渡：

button {
    background - color: blue;
    transition - property: background - color;
    transition - duration: 0.5s;
    transition - timing - function: ease - in - out;
}
button:hover {
    background - color: red;
}

CSS3 动画（Animation）
- 关键帧定义与动画应用：首先通过 @keyframes 规则定义动画的关键帧，然后使用 animation 属性将动画应用到元素上。例如，创建一个让元素从左到右移动的动画：

@keyframes move {
    from {
        left: 0px;
    }
    to {
        left: 500px;
    }
}
div {
    position: relative;
    animation: move 5s linear infinite;
    /* 应用动画，持续时间5秒，线性时间函数，无限循环 */
}
```### 3.10 响应式设计与媒体查询
- **响应式设计的概念**
    - 响应式设计是一种网页设计方法，旨在使网页能够适配不同设备（如桌面电脑、平板电脑、手机等）的屏幕尺寸和分辨率，为用户提供最佳的浏览体验。它通过灵活的布局、图像缩放以及对不同设备特性的适配，确保网页在各种设备上都能清晰显示、易于操作。例如，在手机上浏览网页时，导航栏可能会以折叠菜单的形式呈现，以节省屏幕空间；而在桌面电脑上，导航栏则可以完整地水平展示。
- **媒体查询的语法与作用**
    - 媒体查询是CSS3引入的一项功能，用于根据设备的特性（如屏幕宽度、高度、分辨率、设备方向等）来应用不同的CSS样式。其基本语法为：
```css
@media 媒体类型 and (媒体特性表达式) {
    /* 满足条件时应用的CSS样式 */
}

- **媒体类型**：常见的媒体类型有 `all`（适用于所有设备）、`screen`（适用于屏幕设备，如电脑屏幕、手机屏幕等）、`print`（适用于打印预览模式）等。例如，`@media screen` 表示仅针对屏幕设备应用样式。
- **媒体特性表达式**：用于指定具体的设备特性条件。例如，`(max - width: 768px)` 表示屏幕宽度小于或等于768像素，`(orientation: portrait)` 表示设备处于纵向模式。

示例：不同屏幕宽度下的布局调整
- 假设我们有一个网页，包含一个导航栏和一个主体内容区域。在桌面设备上，导航栏和主体内容可能并排显示；而在手机设备上，导航栏应在主体内容上方，并且以更紧凑的方式呈现。

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>响应式设计示例</title>
    <style>
        nav {
            background - color: #333;
            color: white;
            padding: 10px;
        }
        main {
            padding: 20px;
        }
        @media screen and (max - width: 768px) {
            nav {
                text - align: center;
            }
            main {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <nav>导航栏</nav>
    <main>主体内容区域，这里可以包含文章、图片等各种内容。</main>
</body>
</html>

- 在上述代码中，当屏幕宽度小于或等于768像素时（通常是平板电脑或手机的屏幕宽度），`@media` 规则生效。导航栏文本变为居中对齐，主体内容的内边距减小，以适应较小的屏幕尺寸。

多组媒体查询实现更细致的适配
- 可以使用多组媒体查询来针对不同范围的屏幕尺寸进行更细致的样式调整。例如，对于大屏幕桌面设备（宽度大于1200像素）、中等屏幕桌面设备（宽度在769 - 1200像素之间）和小屏幕设备（宽度小于或等于768像素）分别设置不同的样式。

@media screen and (min - width: 1200px) {
    /* 大屏幕桌面设备样式 */
    body {
        font - size: 18px;
    }
}
@media screen and (min - width: 769px) and (max - width: 1200px) {
    /* 中等屏幕桌面设备样式 */
    body {
        font - size: 16px;
    }
}
@media screen and (max - width: 768px) {
    /* 小屏幕设备样式 */
    body {
        font - size: 14px;
    }
}

- 这样，随着屏幕尺寸的变化，网页的字体大小会相应调整，以提供更舒适的阅读体验。

响应式图片处理
- 在响应式设计中，图片的处理也很关键。为了避免在小屏幕设备上加载过大的图片造成带宽浪费，可以使用 srcset 和 sizes 属性。

html"><img src="small - image.jpg"
     srcset="small - image.jpg 500w, medium - image.jpg 1000w, large - image.jpg 2000w"
     sizes="(max - width: 500px) 100vw, (max - width: 1000px) 50vw, 33vw"
     alt="示例图片">

- `srcset` 属性列出了不同分辨率的图片及其对应的像素密度描述符（`500w`、`1000w`、`2000w`）。`sizes` 属性根据屏幕宽度定义了不同情况下图片应占据的视口宽度比例。浏览器会根据设备的屏幕宽度和分辨率，自动选择最合适的图片进行加载。

3.11 CSS 预处理器简介

什么是CSS预处理器
- CSS预处理器是一种工具，它扩展了CSS的功能，允许开发者使用更强大的编程特性来编写CSS代码。通过引入变量、混合（Mixin）、函数、嵌套等功能，CSS预处理器使CSS代码更易于维护、复用和组织。常见的CSS预处理器有Sass（包括SCSS语法）、Less和Stylus。
Sass（SCSS）
- 变量：在Sass中，可以使用 $ 符号定义变量。例如，定义一个网站的主色调变量：

$primary - color: #007BFF;

body {
    background - color: $primary - color;
}

- **混合（Mixin）**：Mixin允许将一组CSS属性封装起来，以便在多个地方复用。例如，创建一个用于设置圆角边框的Mixin：

@mixin rounded - corners($radius) {
    border - radius: $radius;
}

button {
    @include rounded - corners(5px);
}

- **嵌套**：Sass支持选择器嵌套，使代码结构更清晰。例如：

nav {
    background - color: #333;
    ul {
        list - style - type: none;
        margin: 0;
        padding: 0;
        li {
            display: inline - block;
            a {
                color: white;
                text - decoration: none;
                padding: 10px;
                &:hover {
                    background - color: #555;
                }
            }
        }
    }
}

Less
- 变量：Less使用 @ 符号定义变量。例如：

@primary - color: #007BFF;

body {
    background - color: @primary - color;
}

- **混合（Mixin）**：在Less中定义和使用Mixin的方式与Sass类似。例如：

.rounded - corners(@radius) {
    border - radius: @radius;
}

button {
   .rounded - corners(5px);
}

- **嵌套**：Less同样支持选择器嵌套：

nav {
    background - color: #333;
    ul {
        list - style - type: none;
        margin: 0;
        padding: 0;
        li {
            display: inline - block;
            a {
                color: white;
                text - decoration: none;
                padding: 10px;
                &:hover {
                    background - color: #555;
                }
            }
        }
    }
}

Stylus
- 变量：Stylus中定义变量无需特定符号，直接赋值即可。例如：

primary - color = #007BFF

body
    background - color primary - color

- **混合（Mixin）**：在Stylus中定义Mixin的方式较为简洁。例如：

rounded - corners(radius)
    border - radius radius

button
    rounded - corners(5px)

- **嵌套**：Stylus的嵌套语法也很简洁：

nav
    background - color #333
    ul
        list - style - type none
        margin 0
        padding 0
        li
            display inline - block
            a
                color white
                text - decoration none
                padding 10px
                &:hover
                    background - color #555

CSS预处理器的优势与应用场景
- 优势：
  - 提高代码复用性：通过变量和混合等功能，避免了重复编写相同的CSS代码，减少了代码冗余。
  - 增强代码可维护性：变量和函数等特性使代码更易于理解和修改。例如，只需修改一个颜色变量，就能更新整个网站的主色调。
  - 改善代码结构：嵌套等功能使CSS代码的层次结构更清晰，更符合逻辑。
- 应用场景：适用于大型项目或需要频繁更新样式的项目。在团队开发中，CSS预处理器能规范代码风格，提高开发效率。同时，对于追求高效开发和良好代码组织的小型项目，CSS预处理器也能带来诸多便利。

3.12 CSS与网页性能优化

优化选择器的使用
- 避免过度使用通配符选择器：通配符选择器 * 会匹配页面上的所有元素，这在样式应用时会消耗大量的计算资源。例如，如果在一个有大量元素的页面中使用 * { margin: 0; padding: 0; }，浏览器需要为每个元素都应用这些样式，极大地增加了渲染时间。尽量精确地选择需要应用样式的元素，如使用更具体的元素选择器、类选择器或ID选择器。
- 减少选择器的嵌套深度：选择器的嵌套深度过深会增加浏览器的匹配难度和计算量。例如，body div ul li a 这样的深层嵌套选择器，浏览器需要从文档树的顶层开始，逐层向下匹配，效率较低。应尽量保持选择器简洁，将嵌套深度控制在3层以内，如使用 nav a 代替多层嵌套的选择器来选择导航栏中的链接。
- 避免使用后代选择器时的不必要嵌套：虽然后代选择器很有用，但如果使用不当，也会影响性能。例如，body div * p 这种选择器会匹配 body 内 div 元素下的所有 p 元素，包括深层嵌套的情况，范围过广且效率低。可以通过给相关元素添加类名，使用更精准的类选择器来提高性能。
优化样式表的加载与渲染
- 合并和压缩CSS文件：将多个CSS文件合并为一个，可以减少浏览器请求次数。每次请求都会带来一定的开销，包括建立连接、传输数据等。同时，使用工具（如UglifyCSS）对CSS文件进行压缩，去除不必要的空格、注释等，减小文件体积，加快下载速度。例如，将多个小的CSS文件合并成 styles.css，并压缩后，能显著提升页面加载速度。
- 使用媒体查询优化加载：对于不同设备的样式，可以通过媒体查询来按需加载。例如，对于大屏幕设备和小屏幕设备可能有不同的布局和样式需求，可以将这些样式分别放在不同的媒体查询块中。这样，浏览器在加载时可以根据设备特性只加载必要的样式，避免加载过多无用的样式代码。
- 将CSS放在文档头部：一般建议将CSS样式表放在HTML文档的 <head> 部分。这样浏览器在解析HTML文档时，能尽早获取样式信息，从而在渲染页面时可以更有效地构建渲染树，避免在渲染过程中因样式未加载而导致的重排和重绘。
合理使用CSS属性
- 避免使用昂贵的属性：某些CSS属性在计算和渲染时会消耗较多资源。例如，box - shadow 和 border - radius 属性虽然能为页面带来美观的效果，但过多或复杂的设置会增加渲染成本。在使用这些属性时，要权衡美观与性能，尽量简化其设置。例如，减少阴影的模糊度和扩展距离，避免设置过于复杂的圆角形状。
- 优化动画和过渡效果：动画和过渡效果能提升用户体验，但如果使用不当，也会影响性能。尽量使用CSS3的硬件加速属性（如 transform 和 opacity）来创建动画，因为这些属性在现代浏览器中可以利用GPU进行加速渲染。例如，使用 transform: translateX(50px) 来实现元素的移动动画，而不是通过改变 left 属性。同时，要控制动画的复杂度和时长，避免过多元素同时进行复杂的动画，导致浏览器卡顿。
- 谨慎使用 display: none 和 visibility: hidden：display: none 会使元素完全从渲染树中移除，不占据空间；visibility: hidden 则使元素不可见，但仍占据空间。频繁切换元素的 display 属性会导致浏览器重排，因为文档的布局会发生变化。而切换 visibility 属性只会导致重绘，相对开销较小。如果只是临时隐藏元素，且不希望影响布局，应优先使用 visibility: hidden。但如果元素长时间不需要显示，使用 display: none 能节省更多资源。
利用浏览器缓存
- 设置正确的缓存头：在服务器端设置合适的缓存头，告诉浏览器哪些CSS文件可以缓存以及缓存的时长。例如，对于不经常变化的CSS文件，可以设置较长的缓存时间，如 Cache - Control: max - age = 31536000（一年），这样浏览器在后续访问时可以直接从本地缓存中加载CSS文件，而无需再次从服务器获取，大大加快了页面加载速度。
- 版本控制与缓存更新：当CSS文件发生变化时，为了确保用户能获取到最新版本，需要进行版本控制。一种常见的方法是在CSS文件的URL中添加版本号，如 styles.css?v = 2。当文件内容更新时，更新版本号，这样浏览器会认为这是一个新的文件，不会使用旧的缓存，从而加载最新的CSS样式。

3.13 网页布局技巧与最佳实践

使用Flexbox进行灵活布局
- Flexbox基础概念：Flexbox（弹性盒子布局模型）是CSS3引入的一种用于创建灵活且响应式布局的技术。它基于弹性容器（display: flex的元素）和弹性项目（弹性容器的直接子元素）工作。通过设置弹性容器的属性，如 flex - direction（定义主轴方向，如 row 水平排列、column 垂直排列）、justify - content（在主轴上对齐弹性项目，如 center 居中对齐、space - between 两端对齐）和 align - items（在交叉轴上对齐弹性项目，如 stretch 拉伸填充、center 居中对齐），可以轻松实现各种布局效果。
- 常见布局应用：例如，创建一个水平居中且等间距排列的导航栏。首先将导航栏容器设置为 display: flex，justify - content: space - around，这样导航栏项目就会在水平方向上均匀分布且居中。再通过设置 flex - direction: row 确保项目水平排列。对于响应式设计，Flexbox也非常方便。例如，在小屏幕上，可以通过媒体查询将 flex - direction 切换为 column，使导航栏项目垂直排列，以适应较小的屏幕空间。
使用Grid进行复杂布局
- Grid布局模型：CSS Grid（网格布局模型）提供了一种更强大的二维布局方式，适用于创建复杂的网页布局。它基于网格容器（display: grid的元素）和网格项目（网格容器的直接子元素）。通过定义网格模板（如 grid - template - columns 定义列模板，grid - template - rows 定义行模板），可以精确控制元素在网格中的位置。例如，grid - template - columns: repeat(3, 1fr) 表示创建三列，每列宽度相等且自适应剩余空间。
- 复杂布局示例：假设要创建一个多栏式的博客页面，包含侧边栏、文章主体和相关推荐区域。可以使用Grid布局，将页面划分为不同的网格区域。通过 grid - area 属性为每个区域命名，然后在网格容器中使用 grid - template - areas 属性来定义这些区域的布局关系。例如：

.container {
    display: grid;
    grid - template - areas: "sidebar main related"
                         "sidebar main related";
    grid - template - columns: 200px 1fr 200px;
    grid - template - rows: auto;
}
.sidebar { grid - area: sidebar; }
.main { grid - area: main; }
.related { grid - area: related; }

响应式布局的最佳实践
- 以移动优先的原则设计：随着移动设备的广泛使用，优先考虑移动设备的布局和样式，然后逐步适配大屏幕设备。这样可以确保在资源有限的移动设备上提供良好的用户体验。在CSS中，可以先编写适用于小屏幕的样式，然后通过媒体查询逐步添加大屏幕设备的样式。例如，先设置一个简单的单列布局，然后在大屏幕上通过媒体查询切换为多列布局。
- 使用相对单位：在布局中尽量使用相对单位，如百分比（%）、em、rem 等。百分比单位可以根据父元素的大小进行自适应调整，em 和 rem 则与字体大小相关，有助于实现响应式字体和布局。例如，使用百分比设置元素的宽度，使其能根据父容器的宽度自动调整；使用 rem 设置字体大小，方便在不同设备上保持字体大小的一致性。
- 图像和媒体的适配：确保图像和媒体元素在不同设备上都能正确显示。如前文所述，使用 srcset 和 sizes 属性来提供不同分辨率的图像，让浏览器根据设备选择合适的图像。对于视频和音频元素，设置合适的宽度和高度，使其能在不同屏幕尺寸下自适应显示。
语义化布局与可访问性
- 语义化标签的使用：使用HTML5的语义化标签，如 <header>、<nav>、<main>、<article>、<section> 和 <footer> 等，而不是仅仅依赖于 <div>。语义化标签能使HTML结构更清晰，便于开发者理解和维护代码，同时也有助于搜索引擎优化（SEO）和屏幕阅读器等辅助技术更好地理解页面内容。例如，将网站的导航部分放在 <nav> 标签内，文章内容放在 <article> 标签内，使页面结构一目了然。
- 可访问性考虑：确保网页对于残障人士等特殊用户群体是可访问的。这包括为图像提供 alt 属性，以便屏幕阅读器能描述图像内容；使用清晰的颜色对比，方便视力不佳的用户阅读；以及确保键盘可操作性，使使用键盘导航的用户能够顺利浏览网页。例如，在按钮和链接上添加适当的 tabindex 属性，确保它们可以通过键盘聚焦和操作。

3.14 CSS框架简介

Bootstrap框架
- 特点与功能：Bootstrap是最流行的html" title=前端>前端CSS框架之一，由Twitter公司开发。它具有简洁、灵活的特点，能快速搭建响应式布局的网站。提供了丰富的CSS样式类，涵盖按钮、导航栏、表单、模态框等各种组件。例如，通过添加.btn类到按钮元素上，即可快速获得一个具有美观样式的按钮，.btn - primary类可将按钮设置为主要颜色风格。
- 响应式设计支持：内置了强大的响应式网格系统，通过.container类创建响应式容器，再结合col - xs - *（超小屏幕，如手机）、col - sm - *（小屏幕，如平板电脑）、col - md - *（中等屏幕，如笔记本电脑）、col - lg - *（大屏幕，如台式电脑）等类来定义不同屏幕尺寸下的列布局。例如，<div class="col - md - 4 col - sm - 6">表示在中等屏幕上占4列，小屏幕上占6列，方便实现不同设备上的布局适配。
- JavaScript插件扩展：不仅包含CSS样式，还提供了一系列JavaScript插件，如轮播图（Carousel）、下拉菜单（Dropdown）、滚动监听（Scrollspy）等，增强了网页的交互性。这些插件可以通过简单的HTML数据属性或JavaScript方法来调用和配置。
Foundation框架
- 响应式设计特性：Foundation也是一个优秀的html" title=前端>前端框架，以其卓越的响应式设计能力著称。它采用移动优先的设计理念，提供了一套灵活的网格系统，如row类用于创建行，small - 12、medium - 6、large - 4等类用于定义不同屏幕尺寸下的列宽，能轻松实现各种复杂的响应式布局。
- 丰富的组件与模板：提供丰富多样的组件，包括导航栏、表单、按钮、卡片等，且这些组件都具有良好的可定制性。同时，还提供了一些预建的模板，如网站首页、博客页面、电商页面等模板，开发者可以基于这些模板快速搭建项目，节省开发时间。
- 易用性与可维护性：Foundation的代码结构清晰，易于理解和维护。其文档详细，包含大量的示例和说明，无论是初学者还是有经验的开发者都能快速上手使用。
Tailwind CSS框架
- 实用类驱动的设计：Tailwind CSS是一种与众不同的CSS框架，它采用实用类驱动的设计模式。与传统框架不同，它不是提供预定义的组件样式，而是提供大量的基础实用类，开发者可以直接在HTML标签上组合这些类来构建页面样式。例如，要创建一个红色背景、白色文字、居中对齐且有一定内边距的按钮，可以这样写：<button class="bg - red - 500 text - white text - center p - 4">按钮</button>。
- 高度可定制性：Tailwind CSS允许开发者通过配置文件（如tailwind.config.js）对框架进行高度定制。可以自定义颜色、字体、间距等各种样式变量，以满足不同项目的设计需求。这使得它非常适合那些需要打造独特视觉风格的项目。
- 与现代开发工作流集成：易于与现代html" title=前端>前端开发工具和工作流集成，如Webpack、Vite等。可以通过插件扩展其功能，并且在使用过程中，其类名的直观性有助于快速开发和调试，提高开发效率。
Semantic UI框架
- 语义化设计理念：Semantic UI遵循语义化的设计理念，其类名和组件命名都具有很强的描述性，使得代码更易于理解和维护。例如，使用<div class="ui button primary">主要按钮</div>来创建一个按钮，ui表示Semantic UI框架，button表明是按钮组件，primary表示主要样式，从类名就能清晰知道该元素的用途和样式风格。
- 丰富的主题与组件：提供了丰富的主题选项，可以轻松切换网站的整体风格。同时，拥有大量的组件，如菜单、卡片、进度条、评级等，每个组件都经过精心设计，具有良好的视觉效果和交互性。
- 模块性与可复用性：Semantic UI的组件具有高度的模块性，可以方便地在不同项目中复用。通过将组件分解为独立的模块，开发者可以根据项目需求灵活组合和定制组件，提高开发效率和代码的可维护性。

3.15 CSS与html" title=前端>前端开发趋势

CSS在现代html" title=前端>前端架构中的角色
- 构建用户界面的基石：在现代html" title=前端>前端开发中，如使用Vue.js、React.js或Angular等框架构建单页应用（SPA）时，CSS依然是构建用户界面的重要基础。虽然这些框架提供了组件化的开发模式，但CSS负责定义组件的外观样式，从布局到视觉效果，使组件呈现出美观且易用的界面。例如，在React应用中，通过CSS Modules或styled - components等方式为React组件添加样式，实现页面的视觉设计。
- 与JavaScript的紧密协作：随着html" title=前端>前端应用的复杂性增加，CSS与JavaScript的协作愈发紧密。JavaScript可以动态地操作CSS样式，实现各种交互效果。例如，通过JavaScript监听用户的滚动事件，动态改变CSS的scroll - top属性来实现导航栏的固定或显示隐藏；或者根据用户的操作切换CSS类，改变元素的外观和布局。同时，CSS的过渡和动画效果也常与JavaScript结合，创建流畅的用户体验。
CSS的未来发展方向
- 新特性的不断演进：CSS标准持续发展，未来会有更多强大的特性出现。例如，CSS Houdini技术，它允许开发者通过JavaScript API来扩展CSS的能力，突破传统CSS的限制，实现更复杂的布局和渲染效果。又如，容器查询（Container Queries）的发展，它将使开发者能够根据元素的父容器大小来应用样式，而不仅仅依赖于视口大小，这对于组件化开发和响应式设计将提供更灵活的解决方案。
- 性能优化的持续提升：随着网页应用对性能要求的不断提高，CSS性能优化将更加重要。未来可能会出现更多自动化的性能优化工具和技术，帮助开发者更好地优化选择器、减少重排重绘、合理利用缓存等，确保网页在各种设备上都能快速加载和流畅运行。
CSS与响应式、自适应设计的深化
- 响应式设计的精细化：响应式设计将更加精细化，不再仅仅满足于适配常见的设备屏幕尺寸，而是要考虑到各种不同分辨率、不同屏幕比例的设备，甚至包括可折叠屏幕、虚拟现实设备等新兴设备。通过更灵活的布局技术（如Flexbox和Grid的进一步优化应用）和媒体查询的细化，实现全方位的响应式设计。
- 自适应设计的智能化：自适应设计将朝着智能化方向发展，借助机器学习和人工智能技术，根据用户的设备特性、浏览习惯等因素，自动调整网页的布局和样式。例如，通过分析用户的浏览历史和设备信息，为用户提供最适合其使用场景的页面布局和视觉效果。
CSS与Web设计趋势的融合
- 简约与轻量化设计：当前Web设计趋势倾向于简约和轻量化，CSS在其中发挥着关键作用。通过简洁的样式设置、合理的布局和优化的图像使用，打造出简洁明快的用户界面。减少不必要的装饰和复杂效果，提高页面加载速度，提升用户体验。
- 增强的用户体验设计：注重用户体验的设计趋势促使CSS不断发展。例如，通过CSS实现更流畅的动画效果、更自然的交互过渡，以及更好的视觉层次感，引导用户注意力，提高用户与网页的交互性和沉浸感。同时，考虑到不同用户群体的需求，CSS在可访问性设计方面也将不断完善，确保所有用户都能平等地使用网页。

3.16 CSS在不同领域的应用

Web应用开发
- 单页应用（SPA）中的CSS：在单页应用如使用Vue.js、React或Angular构建的项目里，CSS为每个组件赋予独特外观。以React为例，借助CSS Modules，每个组件的样式被封装在独立的CSS文件中，避免样式冲突。例如在一个电商SPA中，商品列表组件的样式通过CSS Modules定义，确保列表的布局、商品图片展示、价格字体等样式仅作用于该组件。
- 渐进式Web应用（PWA）的CSS优化：PWA需要快速加载和流畅交互，CSS在其中助力性能优化。通过压缩CSS文件、合理利用缓存以及采用高效布局方式，如Flexbox和Grid，确保在不同网络环境下都能快速呈现。例如，PWA的启动画面样式通过CSS精心设计，既能提供良好视觉体验，又不影响加载速度。
移动应用开发（WebView）
- 适配移动设备屏幕：当Web内容在移动应用的WebView中展示时，CSS要适配不同尺寸和分辨率的移动屏幕。利用媒体查询，针对手机和平板电脑的不同屏幕宽度，调整布局和样式。例如，在一个新闻移动应用的WebView中，文章页面在手机上以单列布局展示，方便阅读；在平板电脑上则采用多列布局，提高信息展示效率。
- 模拟原生应用体验：通过CSS模拟原生应用的视觉效果和交互体验。利用CSS动画和过渡效果，实现类似原生应用的页面切换、按钮点击反馈等。例如，使用CSS动画模拟原生应用中卡片式导航的滑动效果，让用户在WebView中感受到接近原生应用的流畅交互。
游戏开发（HTML5游戏）
- 创建游戏场景与界面：CSS用于创建HTML5游戏的场景和用户界面。通过背景图像、渐变、边框等CSS属性构建游戏背景、角色外观以及各种界面元素。例如，在一个2D益智游戏中，使用CSS渐变创建游戏关卡的背景，通过设置元素的边框和圆角来设计游戏道具的外观。
- 动画与交互效果实现：借助CSS的动画和过渡功能，实现游戏中的动画效果和交互反馈。例如，在角色移动、道具使用等场景中，利用CSS动画实现平滑的动作过渡；当用户点击游戏按钮时，通过CSS过渡效果提供视觉反馈，增强游戏的趣味性和交互性。
电子商务网站
- 产品展示样式优化：在电商网站中，CSS负责优化产品展示的样式。通过设置图片的样式、产品标题和描述的字体、颜色以及布局，突出产品特点，吸引用户购买。例如，使用CSS的box - shadow属性为产品图片添加阴影效果，使其更具立体感；调整产品价格的字体颜色和大小，吸引用户关注。
- 购物流程界面设计：从购物车到结算页面，CSS确保购物流程界面的清晰和易用。通过合理布局输入框、按钮和提示信息，优化用户体验。例如，使用CSS为结算页面的按钮添加悬停效果，引导用户操作；通过调整输入框的边框样式和背景颜色，使其易于识别和使用。
内容管理系统（CMS）
- 模板样式定制：在CMS如WordPress、Drupal中，CSS用于定制网站模板的样式。开发者可以根据网站的主题和需求，修改CSS文件来改变网站的整体风格，包括字体、颜色、布局等。例如，为一个博客CMS模板设置特定的字体和颜色搭配，营造独特的阅读氛围。
- 响应式与多设备适配：确保CMS生成的页面在不同设备上都能正常显示，CSS通过媒体查询和灵活布局，使文章、图片和导航等元素在桌面、平板和手机上都有良好的展示效果。例如，在手机上自动调整导航栏为折叠式菜单，方便用户操作。

3.17 CSS调试与工具

浏览器开发者工具
- 元素审查与样式调试：现代浏览器如Chrome、Firefox都提供了强大的开发者工具。通过“元素”面板，可实时查看HTML元素及其对应的CSS样式。例如，当页面元素显示异常时，在“元素”面板中选中该元素，就能看到应用在它上面的所有CSS规则，包括继承的样式。还能直接修改CSS属性值，实时查看效果，快速定位和解决样式问题。
- 性能分析与优化：“性能”面板可以记录和分析页面加载、渲染以及脚本执行的性能情况。通过它能查看CSS样式计算、布局和绘制所花费的时间，找出性能瓶颈。例如，如果发现某个元素的样式计算时间过长，可能是由于选择器过于复杂或使用了昂贵的CSS属性，从而针对性地进行优化。
代码编辑器中的CSS支持
- 语法高亮与智能提示：像Visual Studio Code、Sublime Text等代码编辑器，对CSS提供了良好的支持。它们通过语法高亮功能，使CSS代码中的选择器、属性和值以不同颜色显示，提高代码可读性。同时，智能提示功能能在输入时自动补全CSS属性和值，减少输入错误。例如，当输入“ba”时，编辑器会提示“background - color”等相关属性。
- 代码格式化与 linting：代码格式化工具可以按照一定的规则自动格式化CSS代码，使其结构更清晰。例如，Prettier插件能统一代码风格，将代码缩进、空格等规范化。而CSS linting工具（如stylelint）能检查CSS代码中的错误和潜在问题，如无效的属性值、未使用的选择器等，并给出提示，帮助开发者编写更规范的代码。
在线CSS调试工具
- CodePen与JSFiddle：CodePen和JSFiddle是常用的在线代码编辑器，特别适合CSS调试。它们允许开发者快速创建HTML、CSS和JavaScript代码片段，并实时预览效果。在调试CSS时，可以方便地修改代码，观察页面变化。而且这些平台上有大量的代码示例和开源项目，开发者可以借鉴学习，获取灵感。例如，在CodePen上搜索“CSS动画”，能找到各种精彩的动画示例，可直接查看和修改代码进行学习。
- CSS Compressor与Validator：CSS Compressor用于压缩CSS文件，去除不必要的空格、注释等，减小文件体积。而CSS Validator则能检查CSS代码是否符合CSS标准规范，报告语法错误和不规范的写法。例如，将CSS代码粘贴到CSS Validator中，它会指出代码中不符合规范的地方，如错误的属性名或不恰当的选择器使用，帮助开发者修正代码，确保其兼容性和稳定性。

Java Web 第二章 HTMLCSS

第二章 HTML&CSS

一、HTML入门

1.1 HTML&CSS&JavaScript的作用

1.2什么是HTML

1.3什么是超文本

1.4什么是标记语言

1.5 HTML基础结构

1.6 HTML的入门程序

1.7 HTML概念词汇解释

1.8 HTML的语法规则

1.9开发工具VsCode的安装和使用

1.10在线帮助文档

二、HTML常见标签

2.1标题标签

2.2段落标签

2.3换行标签

2.4列表标签

2.5超链接标签

2.6多媒体标签

2.7表格标签（重点）

2.8表单标签（重点）

2.9常见表单项标签（重点）

2.10布局相关标签

2.11特殊字符

三、CSS的使用

3.1 CSS引入方式

3.2 CSS选择器

3.4 CSS浮动

3.5 CSS定位

3.6 CSS属性

3.8 CSS 伪类与伪元素

3.9 CSS3 新特性

3.11 CSS 预处理器简介

3.12 CSS与网页性能优化

3.13 网页布局技巧与最佳实践

3.14 CSS框架简介

3.15 CSS与html" title=前端>前端开发趋势

3.16 CSS在不同领域的应用

3.17 CSS调试与工具

相关文章