1. HTML入门
1.1. HTML / CSS / JavaScript概述
HTML 主要用于网页主体结构的搭建
CSS 主要用于页面元素美化
JavaScript 主要用于页面元素的动态处理
1.2. HTML概述
HTML5是什么？
HTML5是超文本标记语言（HyperText Markup Language）的第五个主要版本。这是一种专门用来创建网页的编程语言。你可以把它想象成一种特殊的"说明书"，它告诉电脑浏览器如何排列和展示网页上的文字、图片、视频、链接等各种内容。
HTML5的特点与优势
- 现代化与兼容性：HTML5是在HTML4.01的基础上进行了重大升级，旨在满足现代互联网的需求。它不仅保留了HTML4中有效的部分，还引入了许多新的功能和改进，确保网页能在不同类型的设备（如桌面电脑、平板、手机等）上顺畅显示，并提供一致的用户体验。
- 多媒体支持 ：HTML5的一大亮点是直接支持多媒体内容，如音频（
<audio>标签）和视频（<video>标签），无需借助外部插件（如Flash）。这意味着开发者可以直接在网页上嵌入音频和视频，用户无需安装额外软件就能观看和收听。 - 绘图与动画 ：HTML5引入了SVG（Scalable Vector Graphics，可缩放矢量图形） 的支持。SVG是一种基于XML的矢量图形格式，可以创建高质量的矢量图形、图表、动画等，并且这些图形可以无损缩放，非常适合响应式设计和高清显示。此外，HTML5还支持使用
<canvas>标签进行动态绘图和复杂图形渲染，为游戏、数据可视化等交互式应用提供了基础。 - 增强的表单功能：HTML5对表单控件进行了扩展，提供了更丰富的输入类型（如日期选择器、颜色选择器等）、内置验证机制，以及更方便的数据绑定，使得网页表单的创建和使用更加便捷、用户友好。
- 更好的结构化 ：HTML5引入了新的语义化标签，如
<header>、<nav>、<article>、<section>、<footer>等，它们有助于开发者更好地组织网页内容，提升代码可读性，并有利于搜索引擎理解页面结构，对SEO（搜索引擎优化）有积极影响。 - 离线存储与应用程序缓存：HTML5支持本地存储（如localStorage和sessionStorage）以及应用程序缓存，使得网页应用可以在用户离线时继续工作，或者在下次访问时更快地加载资源，提升了网页应用的性能和可用性。
- API扩展：HTML5提供了一系列JavaScript API（应用程序编程接口），如Geolocation（地理位置）、Web Workers（后台线程）、Web Sockets（双向通信）等，极大地扩展了网页的功能，使开发者能够创建更接近原生应用体验的网页应用。
总结
HTML5是构建现代网页和Web应用的关键工具，它通过一系列新特性和改进，使得网页不仅能更好地展示文本和图像，还能直接处理多媒体、创建交互式图形、实现复杂的前端逻辑，并具备更好的设备兼容性和离线能力。对于初学者来说，学习HTML5意味着掌握创建丰富、动态、响应式网页的基础技能，是进入Web开发领域的第一步。
1.3. 标记语言
- 标记语言概述
标记语言是一种特定类型的计算机语言，它使用一系列的标签（tag）来标记文本、图像、多媒体等内容，以便指示其结构、语义、样式或行为。这些标签是预定义的关键字，通常用尖括号 < 和 > 包裹起来，用来为文档或数据赋予额外的意义和指示如何处理这些信息。与编程语言不同，标记语言不涉及复杂的程序逻辑、变量赋值、条件判断、循环结构、函数调用等概念，其重点在于描述和组织内容的层次结构以及与之相关的元数据。
- 代码示例
- 双标签（成对标签）
双标签，又称成对标签，由一对开始标签和结束标签构成，分别表示一个元素的开始和结束。例如：
<p>HTML is a very popular front-end technology.</p>在这个例子中：
-
<p>是开始标签，用于指示一个段落（paragraph）的起始位置。 -
</p>是结束标签，标志着段落的结束。 -
两标签之间的文本
"HTML is a very popular front-end technology."被称为 标签体 或 元素内容 ，它是被<p>标签所包裹的文本内容。 -
单标签（自闭合标签）
单标签，又称自闭合标签，由一个单独的标签表示，无需配对的结束标签。单标签通常用于那些不需要包裹内容或内容为空的元素。例如：
<input type="text" name="username" />这里：
-
<input>是单标签，用于创建一个文本输入框（text input）。由于输入框本身不包含任何内部文本内容，所以它以自封闭形式表示。 -
type="text"和name="username"是 属性 ，它们提供了关于输入框特性和识别信息。属性总是出现在开始标签内，并以属性名="属性值"的格式书写。 -
属性
属性是标签的一部分，用于向元素添加附加信息或设置特定的行为参数。属性通常位于开始标签内，紧随标签名之后，并用等号 = 连接属性名和属性值。属性值通常被引号包围（既可以是单引号 ' 也可以是双引号 "），但某些情况下，当属性值仅包含字母、数字和连字符且无空格时，引号可以省略。例如：
<a href="http://www.xxx.com">show detail</a>在这个 <a> 标签（用于创建超链接）的例子中：
href是属性名，表示超链接的 指向目标（Hypertext Reference）。"http://www.xxx.com"是属性值，指定了链接所要跳转到的具体网页地址。
综上所述，标记语言如HTML通过标签、标签体和属性来构建结构化的文档，这些文档能够被浏览器等用户代理解析并呈现为可视化的网页。HTML标签定义了文档的各个组成部分及其相互关系，属性则提供了进一步的详细信息和指令，使文档具有丰富的交互性和语义表达能力。尽管HTML不具备传统编程语言的复杂逻辑控制能力，但它在网页开发中扮演着至关重要的角色，与CSS（层叠样式表）和JavaScript（脚本语言）共同构成了现代Web前端技术的基础。
1.4. HTML结构
1. 文档声明（Doctype）
文档声明是HTML文件的首行，用于告知浏览器当前文档所遵循的HTML规范或版本。这一声明对于浏览器正确解析和渲染页面至关重要。
-
HTML4文档声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
这个声明包含了详细的DTD（Document Type Definition，文档类型定义）信息，指示文档遵循HTML 4.01 Transitional标准。其中，"-//W3C//DTD HTML 4.01 Transitional//EN"指定了DTD的名称和类型，后面的URL则是该DTD的官方地址。HTML4有多个子版本（如Strict、Transitional等），分别对应不同的严格程度和兼容性要求。
-
HTML5文档声明：
<!DOCTYPE html>
HTML5的文档声明简化为一行，只包含一个简短的声明语句，即<!DOCTYPE html>。这种简洁的形式易于记忆和书写，同时适用于现代浏览器对HTML5标准的支持。
目前，由于HTML5提供了更强大的功能、更好的跨平台兼容性和更友好的开发者体验，已经成为Web开发领域的主流选择。因此，新开发的HTML文档通常使用HTML5的文档声明。
2. 根标签（html）
<html>标签作为整个HTML文档的根元素，是所有其他标签的容器。一个典型的HTML文档结构始于<html>标签，并以</html>结束，如下所示：
<html>
<!-- 其他HTML内容 -->
</html>所有其他HTML元素，包括<head>和<body>，都必须嵌套在<html>标签之内，形成文档的完整结构。
3. 头部元素（head）
<head>标签定义了文档的头部，其中包含了一系列非可视化信息，这些信息对于浏览器和搜索引擎等解析工具来说十分重要，但并不会直接呈现在网页的可见区域内。常见的头部元素包括：
<title>：定义网页的标题，显示在浏览器的标签页或窗口标题栏中，也是搜索引擎检索结果中的重要信息来源。<script>：用于嵌入或链接JavaScript代码，提供网页的动态交互功能。<style>：用于直接编写CSS样式代码，或者通过@import导入外部样式表。<link>：用于链接外部资源，如CSS文件、图标（favicon）、预加载资源等。<meta>：提供元数据信息，如字符编码、网页描述、关键词、 viewport设置等，影响浏览器对文档的处理和搜索引擎的索引。
例如：
<head>
<title>网页标题</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<meta charset="UTF-8">
<meta name="description" content="网页描述">
</head>4. 主体元素（body）
<body>标签包含了网页的所有可见内容，即用户在浏览器窗口中实际看到和交互的部分。包括文本、图片、视频、音频、表格、列表、表单、链接等各类HTML元素均应在<body>标签内进行定义。
例如：
<body>
<header>
<!-- 页面顶部导航等内容 -->
</header>
<main>
<section>
<!-- 主要内容区段 -->
</section>
<article>
<!-- 文章或其他独立内容区块 -->
</article>
</main>
<footer>
<!-- 页面底部信息 -->
</footer>
</body>5. 注释
HTML注释用于在源代码中插入解释性文本，对代码进行说明，方便开发者阅读和理解。注释不会被浏览器解析和显示，对网页的布局和功能没有影响。
注释的写法如下：
<!-- 这是一个HTML注释，注释内容可以是任意文本，不会显示在网页上 -->在实际开发中，注释常用于记录代码目的、功能、作者、修改日期等信息，或者暂时屏蔽某段代码以进行调试。保持良好的注释习惯有助于代码维护和团队协作。
1.5. HTML入门
- 准备一个纯文本文件,拓展名为html
-
使用记事本打开网页,在网页内开发代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> hello html!!! </body> </html> -
使用浏览器打开文件,查看显示的内容
1.6. HTML概念词汇解释标签
标签
在HTML（HyperText Markup Language，超文本标记语言）中，标签 是构成其语法的基本单元，它们由一对尖括号 < 和 > 包裹，用来指示网页内容的结构、意义和呈现方式。标签分为两类：
-
双标签 ：双标签由一个开始标签和一个结束标签组成，它们以相同的名字但结束标签前多了一个斜杠
/来表示。例如：这是一个段落。
在这里，<p> 是开始标签，</p> 是结束标签，它们共同定义了一个段落元素。
-
单标签 ：单标签只有开始部分，没有对应的结束部分，通常用来表示无需闭合的内容或状态。单标签通常以一个斜杠
/结尾，但有时也可以省略斜杠，仅由一个标签符号表示。例如：
或简写为
<br>这个标签表示一个换行符。
属性
属性 是HTML标签的一部分，它们提供额外的信息来修饰或配置标签的行为、样式或与外部资源的关联。属性总是出现在开始标签之内，并以键值对的形式存在，即由属性名和等号后紧跟的属性值构成。例如：
<a href="https://www.example.com" target="_blank">访问示例网站</a>在这个例子中，<a> 标签有两个属性：
href属性定义了链接的目标URL，其值为"https://www.example.com"。target属性指定了链接在何处打开，其值_blank表示在新窗口或标签页中打开链接。
文本
文本 是指在HTML双标签之间直接书写的文字内容、空格、换行以及其他可见字符。文本是网页中向用户传达信息的核心部分。例如：
<h1>欢迎来到我们的网站</h1>这里的文本是 "欢迎来到我们的网站"，它位于 <h1> 开始标签和相应的 </h1> 结束标签之间，表示一个一级标题。
元素
元素 是经过浏览器解析后的一个完整逻辑实体，它包括一个标签（可能是单标签或双标签对）、可能存在的属性，以及标签内部包含的所有内容（如文本、嵌套的其他元素等）。一个元素可以视为HTML文档结构和内容的基本构建块。对于双标签：
<div class="container">
<p>这是一段文本。</p>
<img src="image.jpg" alt="描述性文本">
</div>上述代码片段中，<div>、<p> 和 <img> 都是标签，它们各自带有属性（如 class、src 和 alt），并可能包含文本或其他元素。整个 <div> 标签及其内部所有内容构成了一个 div 元素；<p> 标签及其包含的文本构成了一个 p 元素；而 <img> 标签虽然没有闭合标签和内部文本，但凭借其自身及属性构成了一个完整的 img 元素。这些元素共同组成了HTML文档的结构，浏览器根据这些元素的类型和属性来决定如何渲染和展示网页内容。
1.7. HTML语法规则
1. 根标签有且只能有一个
每个HTML文档必须有一个根元素，它作为所有其他元素的顶层容器。这个根元素就是 <html> 标签。一个文档中只能有一个 <html> 标签，且必须作为文档的第一级元素，如下所示：
<!DOCTYPE html>
<html>
<!-- 其他HTML内容 -->
</html>2. 无论是双标签还是单标签都需要正确关闭
-
双标签 必须成对出现，每个开始标签
<tag>必须有一个对应的结束标签</tag>，确保它们名字相同以正确闭合。例如：这是段落内容。
-
单标签 虽然不需要单独的结束标签，但通常以
/符号自我闭合。例如：
或者简写为
<br>3. 标签可以嵌套但不能交叉嵌套
HTML标签可以相互嵌套，即一个标签可以作为另一个标签的内容。嵌套时，必须保持正确的层级关系，每个开始标签必须有相应的结束标签，并且嵌套顺序应为"先开后关"，即内层标签完全包含在它的外层标签之内。不允许标签交叉，例如：
<!-- 正确嵌套 -->
<ul>
<li>项目一</li>
<li>项目二</li>
</ul>
<!-- 错误的交叉嵌套（禁止） -->
<ul>
<li>项目一
</ul>
<li>项目二</li>
</li>
</ul>4. 注释语法为 ****，注意不能嵌套
在HTML中添加注释以解释代码或临时屏蔽某些代码片段，使用 <!-- 开始注释，以 --> 结束注释。注释内容不会被浏览器解析和显示。注释不能嵌套，即注释内部不能再包含另一个注释：
<!-- 这是一个注释 -->5. 属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值
HTML标签的属性通常需要一个对应的值来指定其具体设置。属性值应当放在等号 = 后面，并用单引号 ' 或双引号 " 包围。在HTML5中，如果属性名和属性值相同，可以省略属性值，仅保留属性名。例如：
<!-- 常规写法 -->
<input type="text" value="Hello">
<!-- HTML5简化写法 -->
<input type="text" value>6. HTML中不严格区分字符串使用单双引号
在为HTML属性赋值时，既可以使用单引号 '，也可以使用双引号 " 来包裹字符串值，两者在功能上是等价的。选择使用哪一种取决于个人偏好或团队编码规范，但同一属性的值必须使用同一种引号开始和结束：
<!-- 使用单引号 -->
<img src='image.jpg' alt='描述文字'>
<!-- 使用双引号 -->
<img src="image.jpg" alt="描述文字">7. HTML标签不严格区分大小写，但是不能大小写混用
HTML标签名、属性名对大小写不敏感，这意味着 <p>、<P>、<p> 都会被浏览器识别为同一个标签。尽管如此，为了代码的一致性和可读性，建议始终使用小写。但是，不推荐在同一标签或属性名称中混合使用大小写，如 <DiV> 或 claSs，因为这样会降低代码的清晰度和易维护性。
8. HTML中不允许自定义标签名，强行自定义则无效
HTML标准定义了一系列预设的标签，开发者必须使用这些已知标签来构建网页结构。自创的标签名（如 <myCustomTag>）在HTML中没有意义，浏览器无法识别并按预期处理这样的标签。若需要实现特定功能或自定义组件，可以使用诸如Web Components等现代Web技术，它们允许创建自定义元素并赋予它们行为和样式。在标准HTML中，直接使用未定义的标签名将被视为无效，浏览器可能会忽略这些标签或以错误的方式解析它们。
1.8. VSCode安装使用
Download Visual Studio Code - Mac, Linux, Windows
推荐插件
- Auto Rename Tag 自动修改标签对插件
- Chinese Language Pack 汉化包
- HTML CSS Support HTML CSS 支持
- Intellij IDEA Keybindings IDEA快捷键支持
- Live Server 实时加载功能的小型服务器
- open in browser 通过浏览器打开当前文件的插件
- Prettier-Code formatter 代码美化格式化插件
- Vetur VScode中的Vue工具插件
- vscode-icons 文件显示图标插件
- Vue 3 snipptes 生成VUE模板插件
- Vue language Features Vue3语言特征插件
1.9. 在线帮助文档
2. HTML常见标签
2.1. 标题标签<h1>
标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
2.2. 段落标签<p>
段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果
<body>
<p>
记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。
</p>
<p>
工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，
算力每投入1元，将带动3至4元的GDP经济增长。
</p>
<p>
近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。
当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。
</p>
</body>
2.3. 换行标签<br>
单纯实现换行的标签是br, 如果想添加分隔线,可以使用hr标签
换行标签：<br>
分割线标签：<hr>
<body>
工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
<br>
国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。
<hr>
中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>
2.4. 列表标签
2.4.1. 有序列表<ol><li>
有序列表
分条列项展示数据的标签, 其每一项前面的符号带有顺序特征
-
列表标签 ol
-
列表项标签 li
- JAVA
- 前端
- 大数据
2.4.2. 无序列表<ul><li>
无序列表
分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
-
列表标签 ul
-
列表项标签 li
- JAVASE
- JAVAEE
- 数据库
2.4.3. 嵌套列表
列表和列表之前可以签到,实现某一项内容详细展示
<ol>
<li>
JAVA
<ul>
<li>JAVASE</li>
<li>JAVAEE</li>
<li>数据库</li>
</ul>
</li>
<li>前端</li>
<li>大数据</li>
</ol>
2.5. 超链接标签<a>
点击后带有链接跳转的标签 ,也叫作a标签
- href属性用于定义连接
-
- href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点
- href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
- href中也可以定义完整的URL
- target属性用于定义打开的方式
-
- _blank在新窗口中打开目标资源
- _self 在当前窗口中打开目标资源
<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>
2.6. 多媒体标签
2.6.1. 图片标签<img>
img(重点) 图片标签,用于在页面上引入图片
-
**src属性：**用于定义图片的连接
-
**title属性：**用于定义鼠标悬停时显示的文字
-
**alt属性：**用于定义图片加载失败时显示的提示文字
2.6.2. 音频标签<audio>
用于在页面上引入一段声音
-
**src属性：**用于定义目标声音资源
-
**autoplay属性：**用于控制打开页面时是否自动播放
-
**controls属性：**用于控制是否展示控制面板
-
**loop属性：**用于控制是否进行循环播放
2.7. 表格标签<table>(重点)
常规表格
- **table标签：**代表表格
- **thead标签：**代表表头 可以省略不写
- **tbody标签：**代表表体 可以省略不写
- **tfoot标签：**代表表尾 可以省略不写
- **tr标签：**代表一行
- **td标签：**代表行内的一格
- **th标签：**自带加粗和居中效果的td
2.7.1. 基本操作
<body>
<!-- 页面标题，居中显示 -->
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<!-- 创建一个表格，设置边框为1px，宽度为400px，居中显示 -->
<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>99</td>
</tr>
<tr>
<td>3</td>
<td>王小虎</td>
<td>98</td>
</tr>
</table>
</body>
2.7.2. 单元格上下跨行
通过td的rowspan属性实现上下跨行
<body>
<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>
</body>
2.7.3. 单元格左右跨行
通过td的colspan属性实现左右的跨列
<body>
<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>
</body>
2.8. 表单标签<form>(重点)
表单标签 是HTML中用于创建交互式界面的关键元素，它允许用户在网页上输入、选择或提交各种类型的数据。表单是向服务器发送数据的主要途径之一，常用于用户注册、登录、反馈、查询等场景。
1. form****标签
<form> 标签是表单的容器，定义了一个表单域，其中包含了供用户填写和交互的各种表单元素。form 标签具有以下重要属性：
- action：此属性指定表单数据提交到的服务器地址（URL）。当用户提交表单时，浏览器会将表单内所有相关数据发送到这个指定的地址进行处理。
- method：此属性决定了表单数据提交的方式，有两种常见值：
-
- get：数据以URL查询字符串的形式附加到提交地址后面。查询字符串以问号
?开始，多个参数间用&分隔。由于URL长度有限制且数据会显示在地址栏中，因此不适合提交大量或敏感信息。 - post：数据以HTTP请求体的形式发送，不会在URL中显示。这种方式适用于提交大量数据或包含敏感信息的表单，因为数据不在URL中暴露，且理论上能传输更大的数据量。
- get：数据以URL查询字符串的形式附加到提交地址后面。查询字符串以问号
2. input****标签
****标签是表单中最常用的元素之一，用于创建各种类型的输入字段。 input 标签通过 type 属性定义其类型，常见的类型包括：
- text：创建一个单行文本输入框，用户可以在此输入文本信息。
- password：创建一个密码输入框，用户输入的字符将以星号或圆点替代显示，保护密码隐私。
- submit：创建一个提交按钮，点击后触发表单提交，将表单数据发送到指定的
actionURL。 - reset：创建一个重置按钮，点击后将表单所有输入字段恢复到初始状态（通常是清除用户已输入的内容）。
此外，input 标签还具有重要的 name 属性：
- name：为表单字段指定一个名称，该名称作为提交数据的键，其对应的用户输入值作为提交数据的值。服务器端通过这些名称来识别和处理接收到的数据。
<body>
<form action="https://www.bilibili.com/" method="get">
用户名 <input type="text" name="username" /> <br>
密 码 <input type="password" name="password" /> <br>
<input type="submit" value="登录" />
<input type="reset" value="重置" />
</form>
</body>
2.8.1. 单行文本框<type=text>
单行文本框，input中的type属性为"text"
个性签名：<input type="text" name="signal"/><br/>
2.8.2. 密码框<type=password>
密码框，input中的type属性为"password"
密码：<input type="password" name="secret"/><br/>
2.8.3. 单选框<type=radio>
-
单选框分组与互斥： 这里的两个单选框都有 name="sex"，这意味着它们属于同一组，用来让用户选择性别。因为是同一组，所以它们之间是互斥的，也就是说，用户在同一时间只能选择其中的一个（不能同时选"男"和"女"）。
-
提交表单时的信息传递： 假设用户选择了"女"单选框并提交表单，浏览器会将选中的单选框的信息发送给服务器。具体来说，会将单选框的 name（这里是"sex"）和 value（这里是选中的"女"对应的"summer"）组合成一个键值对，即 sex="summer"。服务器通过这个键值对就能知道用户选择了哪种性别。
-
设置默认选中项： 在代码中，<input type="radio" name="sex" value="summer" checked="checked" /> 女 这个单选框含有 checked="checked"，这表示当网页刚打开时，这个单选框（"女"）已经被默认选中了。用户可以直接看到它被选中，也可以选择取消并选另一个选项。
-
属性值的简写： 在这里，checked="checked" 可以简化为 checked，因为属性名（checked）和属性值（checked）相同。所以，上述代码中的 checked="checked" 改为 checked 后，效果不变，依然表示该单选框默认被选中。
你的性别是：
男
女
2.8.4. 复选框<type=checkbox>
<body>
你喜欢的球队是：<br>
<input type="checkbox" name="team" value="Brazil"/>巴西<br>
<input type="checkbox" name="team" value="German" checked/>德国<br>
<input type="checkbox" name="team" value="France"/>法国<br>
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
</body>
2.8.5. 下拉框<select><option>
你喜欢的运动是：
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射击</option>
<option value="skating">溜冰</option>
</select>
- 下拉列表用到了两种标签：
-
- <select> **标签：**这是一个HTML元素，用于创建一个下拉列表（也称为选择框），用户可以在其中从多个预定义选项中进行选择。整个下拉列表由这个标签定义。
- <option> **标签：**每个<option>标签代表下拉列表中的一个可选项目。用户点击下拉箭头后看到的每一项内容（如"游泳"、"跑步"等），都是由这些标签定义的。
- name属性在select标签中设置：
-
- name="interesting"：在<select>标签中，name属性是非常重要的，它为下拉列表赋予一个名称。当用户提交包含此下拉列表的表单时，这个名称将被用来识别用户选择了哪个选项。服务器端脚本（如PHP、Python、Java等）或客户端JavaScript可以通过这个名字来访问和处理用户的选择。
- value属性在option标签中设置：
-
- 如value="swimming"、value="running"等：每个<option>标签内的value属性为其所代表的选项指定一个值。这个值通常是看不见的（不像标签体文字那样直接显示给用户），但它是实际提交给服务器的数据。例如，即使用户看到并选择了"游泳"，提交给服务器的是与之对应的value="swimming"。
- option标签的标签体是显示出来给用户看的：
-
- 在<option>标签内部的文字，如"游泳"、"跑步"等，是用户在打开下拉列表后能看到的实际选项文本。这些是直接呈现给用户的可视内容，帮助他们理解每个选项代表的意义。
- 提交到服务器的是value属性的值：
-
- 当用户在下拉列表中做出选择并提交表单时，浏览器将发送<select>标签中被选中<option>的value属性值到服务器。服务器并不关心选项是如何显示给用户的，它只关注与每个选项关联的value值，以便进一步处理或存储用户的选择。
- 通过在option标签中设置selected="selected"属性实现默认选中的效果：
-
- 在<option value="shooting" selected="selected">射击</option>这一行中，selected="selected"属性指示浏览器在页面加载时，自动选择这个选项作为下拉列表的初始状态。用户初次看到这个下拉框时，"射击"将是已经突出显示且被选中的项目。如果没有指定这个属性，通常第一个选项会被默认选中；如果有多个selected属性出现，则根据HTML规范，最后一个被解析的selected选项生效。
2.8.6. 按钮<button>
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>
- 普通按钮 (<button type="button"> 或 <input type="button">)：
- 显示为"普通按钮"，点击后无内置效果。
- 需要通过JavaScript添加点击事件处理函数来赋予其具体功能（如执行某个操作、更新页面等）。
- 重置按钮 (<button type="reset"> 或 <input type="reset">)：
- 显示为"重置按钮"，点击后会将所在表单的所有表单项恢复到初始状态（如默认值或空白）。
- 提交按钮 (<button type="submit"> 或 <input type="submit">)：
- 显示为"提交按钮"，点击后会将所在表单的所有有name属性的表单项的值发送到服务器（URL由表单的action属性指定），通常用于数据提交和处理。
2.8.7. 隐藏域<type=hidden>
<input type="hidden" name="userId" value="2233"/>通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
2.8.8. 多行文本框<textarea>
自我介绍：<textarea name="desc"></textarea>
多行文本框 <textarea>：
<textarea>标签在HTML中用于创建一个可以输入多行文本的文本区域。用户可以在其中输入、编辑和查看多行文本内容，常用于收集用户的大段描述、评论、消息等。
没有 value****属性：
- 与其他表单控件（如
<input>）不同，<textarea>标签并没有value属性。这是因为<textarea>的内容是由其标签之间的文本直接定义的，而不是通过属性指定。
设置默认值：
-
要为
<textarea name="desc">我是默认显示的自我介绍内容...</textarea><textarea>设置默认显示的文本（即初始内容），只需在<textarea>标签的开始和结束标签之间直接书写您希望显示的文本即可。例如：
在这个例子中，当页面加载时，文本区域会自动显示"我是默认显示的自我介绍内容..."。用户可以在此基础上进行修改，或者完全删除并输入自己的内容。
2.8.9. 文本标签<type=file>
头像:<input type="file" name="file"/>
- 作用：让用户从本地设备选择并上传文件到网页。
- 示例：<input type="file" name="file">
- 功能：
-
- 点击后弹出文件选择对话框。
- 用户选择文件后，显示所选文件名。
- 提交表单时，将所选文件发送到服务器。
- 应用场景：头像上传、文档上传、图片上传等。
2.9. 布局相关标签<div><span>
<div> 标签：
- 俗称"块"，是一种通用的容器元素，用于划分页面结构，实现布局。
- 在HTML中，<div> 标签没有任何特定的语义含义（不像<header>、<footer>等语义化标签），纯粹是为了组织和分组其他HTML元素，便于CSS样式应用和JavaScript操作。
<span> 标签：
- 俗称"层"，是一种内联容器元素，用于划分文本或元素范围，配合CSS进行样式的修饰。
- 类似于<div>，<span>也没有特定语义，主要用于包裹文本或小范围的元素，以便精确控制这些内容的样式。
代码示例分析：
<body>
<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>
</body>
- 外层 <div>：
-
- 定义了一个宽度为500px、高度为400px、背景色为cadetblue的容器，用于承载整个布局。
- 通过CSS样式直接内联在style属性中。
- 三个内嵌 <div>：
-
- 每个<div>代表页面的一个部分（开头、中间、结尾），宽度均为400px、高度为100px，具有不同的背景色（beige、blanchedalmond、burlywood）。
- 使用margin: 10px auto;使这些<div>在父容器中水平居中，并上下留有10px的外边距。
- 这些<div>构成了页面的垂直布局，每个部分占据固定的高度。
- <span> 标签：
-
- 分别位于每个内嵌<div>内部，用于包裹描述各部分的文字（"页面开头部分"、"页面中间部分"、"页面结尾部分"）。
- 给每个<span>设置了颜色为blueviolet的文本样式，使得这部分文字具有特定的颜色。
3. CSS使用
CSS是一种设计网页外观的语言，用于：
-
设置元素颜色、字体、大小、布局等样式。
-
通过选择器（如元素名、类名、ID）精准定位要应用样式的元素。
-
实现样式层叠与继承，确保多个规则间的协调和简洁。
-
将样式写入外部文件，实现模块化和复用，保持网站整体风格一致。
CSS让网页看起来美观、布局有序。
3.1. CSS引入方式
3.1.1. 行内式
行内式：通过元素开始标签的style属性引入
样式语法为：样式名: 样式值;
<body>
<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; " />
</body>
缺点
- html代码和css样式代码交织在一起,增加阅读难度和维护成本
- css样式代码仅对当前元素有效,代码重复量高,复用度低
3.1.2. 内嵌式
-
内嵌式样式需要在head标签中,通过一对style标签定义CSS样式
-
CSS样式的作用范围控制要依赖选择器
-
CSS的样式代码中注释的方式为 //
-
内嵌式虽然对样式代码做了抽取,但是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> </body>
3.1.3. 连接式/外部样式表
- 可以在项目单独创建css样式文件,专门用于存放CSS样式代码
-
在head标签中,通过link标签引入外部CSS样式即可
<head> <meta charset="UTF-8"> <link href="css/buttons.css" rel="stylesheet" type="text/css"/> </head> <body> </body> -
CSS样式代码从html文件中剥离,利于代码的维护
-
CSS样式文件可以被多个不同的html引入,利于网站风格统一
3.2. CSS选择器
CSS选择器是CSS语言中用于指定哪些HTML元素应应用特定样式的规则。它帮助开发者精准地定位到需要设置样式的元素，而不影响其他元素。
简单解释就是：
CSS选择器就像是一把"标签钥匙"，您用它告诉浏览器："我想把这些特定的样式应用到使用了某个特定标签的所有HTML元素上。"
元素选择器 是CSS选择器的一种，是最简单的一种"标签钥匙"。它直接使用HTML标签的名字作为"钥匙"，比如input、p、h1等。
举个例子：
假设您有一堆彩色的贴纸（代表CSS样式），想把它们贴到所有写着"玩具"字样的箱子（代表HTML元素）上。您会怎么做呢？
- 制作"标签钥匙"：您决定用"玩具"这两个字作为"钥匙"，因为您想贴的就是写着"玩具"的箱子。
- 使用"标签钥匙"：您拿着写着"玩具"的"标签钥匙"，找到一个箱子，检查上面是否写着"玩具"。如果是，就把彩色贴纸贴上去。接着找下一个箱子，重复这个过程，直到所有写着"玩具"的箱子都被贴上贴纸。
在CSS中，这就是元素选择器的工作原理：
- 制作"标签钥匙" ：您在CSS代码中写一个元素选择器，比如
input，表示您想把样式应用到所有<input>元素上。 - 使用"标签钥匙" ：浏览器读到您的CSS代码后，会查找HTML文档中所有的
<input>元素。对于每一个找到的<input>元素，浏览器都会应用您在input选择器后面大括号{}里定义的那些样式。
所以，元素选择器就是用来指定一组CSS样式应该应用到所有使用了某个特定HTML标签的元素上的一种方式。
3.2.1. 元素选择器
<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>
元素选择器 是CSS中的一种工具，用于给特定类型的HTML标签（如<input>、<p>、<div>等）设置样式。它的特点是：
- 按标签选样式：告诉浏览器："对所有名为'X'的HTML标签应用这些样式。"
- 写法直观 ：在CSS中写成"
X {样式规则}"，其中X是标签名，{}内是具体的样式设定。 - 仅影响同名标签：定义的样式只对与选择器标签名相同的HTML元素生效，其他标签不受影响。
- 样式通用，可能不够精细：所有同名标签都会得到同样的样式。若不同实例需不同样式，元素选择器可能范围过大，这时可结合其他选择器（如类选择器、ID选择器等）进行更精确的样式设定。
3.2.2. id选择器
#id
<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选择器是CSS中用于根据HTML元素的id属性值来精确指定其样式的工具。其特点如下：
- 按ID选元素：告诉浏览器："找到ID为'Y'的元素，并应用这些样式。"
- 写法明确 ：在CSS中写成"
#Y {样式规则}"，其中#Y是ID选择器，Y是元素的id属性值，{}内是具体的样式设定。 - 一对一对应 ：由于HTML规定
id属性值在页面中必须唯一，因此每个ID选择器只能影响一个元素的样式。这意味着ID选择器提供了极高精度的样式定位。 - ID值固定，灵活性有限 ：由于
id属性值通常在HTML编写时就已确定，且要求在整个文档中保持唯一，这限制了其在动态调整样式或复用样式规则时的灵活性。因此，相较于类选择器等其他选择器，ID选择器的使用场景相对较少。
简单来说，ID选择器是CSS中用于精确控制单个元素样式的强大工具，它通过元素的id属性值实现一对一的样式绑定。但由于id属性值的固定性和唯一性限制，其在需要灵活调整或复用样式时的应用不如类选择器等广泛。
3.2.3. class选择器
.class
<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>
Class选择器是CSS中用于根据HTML元素的class属性值来指定其样式的工具
- 按类名选元素 ：告诉浏览器："找到所有
class属性包含'Z'的元素，并应用这些样式。" - 写法清晰 ：在CSS中写成"
.Z {样式规则}"，其中.Z是类选择器，Z是元素的class属性值，{}内是具体的样式设定。 - 多对多关系 ：一个元素可以拥有一个或多个
class属性值（用空格分隔），而一个类选择器可以应用于多个具有相同class值的元素。这意味着类选择器支持灵活的多对多关系，能够高效地批量或分组设置样式。 - 样式叠加 ：同一元素上可以应用多个类选择器，它们的样式会叠加生效。例如，一个元素同时具有
class="shapeClass colorClass fontClass"，则会同时继承这三个类选择器定义的所有样式。 - 高度灵活 ：由于
class属性值可在HTML中自由添加、修改或删除，且允许多个元素共享相同的class值，使得类选择器在动态调整样式、复用样式规则或实现模块化设计等方面具有极高的灵活性。因此，类选择器在CSS中被广泛应用。
简单来说，Class选择器是CSS中用于灵活、高效地批量或分组设置元素样式的常用工具。它通过元素的class属性值实现多对多的样式关联，并支持样式叠加，具有很高的灵活性和可复用性，故在实际项目中被广泛使用。
3.3. CSS浮动
该知识点建议结合视频教程一起看 ---> CSS_浮动
W3C的解释文档 ---> CSS 布局 - position 属性
CSS的float属性，简称为"浮动"，是一种布局技术，允许您将一个元素从正常的文档流（Document Flow）中移出，使其沿着指定的方向（通常是向左或向右）移动，并且使其周围的文本或其他内联元素环绕它。
- 文档流（Document Flow）
文档流是HTML元素在网页上默认的排列方式。想象一下，当你在文档中依次写下HTML标签时，就像在一张无限大的纸上从上到下、从左到右书写文字。每个元素占据一定的空间，并且按照它们在HTML源代码中出现的顺序依次排列：
- 块级元素（如
<div>、<p>等）通常独占一行，自上而下堆叠。 - 内联元素（如
<span>、文本）则在一行内从左到右排列，直到行宽不足时换行。
- 脱离文档流（Out of the Document Flow）
脱离文档流意味着某个元素不再遵循上述正常的排列规则，而是从常规布局中"浮"起来，不再占据原来在文档流中的固有位置。当元素浮动后：
- 它会向指定的方向（通过 float: left****或 float: right****指定）移动，直到遇到其父容器的边缘或另一个浮动元素的边缘停止。
- 其他后续的文档流元素会无视这个浮动元素原本占据的空间，继续按照正常的文档流进行排列。
- 文本和内联元素会围绕浮动元素流动，填充其周围的空间。
- 浮动设计初衷与文字环绕图片
浮动最初的设计目的 是为了实现文字环绕图片的效果，类似于在Word文档中插入图片时，文本能够自然地绕过图片分布。在早期网页设计中，float属性使得设计师能够轻松地将图片放在段落中，确保图片与文字和谐共存，互不影响对方的布局。
- 结论
简而言之，CSS浮动是一种布局技术，它使元素脱离正常的文档流布局，按照指定方向移动，并让周围的文本和其他内联元素环绕它。这一特性最初是为了实现文字环绕图片的布局效果，但现在常被用来创建多列布局、侧边栏等内容。理解浮动意味着理解元素如何在网页上非正常顺序地排列，以及这种排列方式如何影响其他元素的布局。
3.4. CSS定位
该知识点建议结合视频教程一起看 ---> CSS_定位
W3C的解释文档 ---> CSS 布局 - position 属性
position 属性指定了元素的定位类型。
- 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
- 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
3.4.1. 静态定位-static
不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列
<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>
3.4.2. 绝对定位-absolute
-
absolute ,通过 top left right bottom 指定元素在页面上的固定位置
-
定位后元素会让出原来位置,其他元素可以占用
<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>框1框2框3</body>
3.4.3. 相对定位-relative
-
relative 相对于自己原来的位置进行地位
-
定位后保留原来的站位,其他元素不会移动到该位置
<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>框1框2框3</body>
3.4.4. 固定定位-fixed
-
fixed 失踪在浏览器窗口固定位置,不会随着页面的上下移动而移动
-
元素定位后会让出原来的位置,其他元素可以占用
<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>框1框2框3br*100+tab </body>
3.5. CSS盒子模型
该知识点建议结合视频教程一起看 ---> CSS_盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
<head>
<meta charset="UTF-8">
<style>
.outerDiv {
width: 800px;
height: 300px;
border: 1px solid green;
background-color: rgb(230, 224, 224);
margin: 0px auto;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
/* margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; */
margin: 10px 20px 30px 40px;
}
.d1{
background-color: greenyellow;
/* padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px; */
padding: 10px 20px 30px 40px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</div>
</body>
- 在浏览器上,通过F12工具查看盒子模型状态
