devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML&CSS_html注释

作者：Gausst松鼠会 | 2024-04-08 16:36:41

赞

踩

html注释

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. 标记语言

  1. 标记语言概述

标记语言是一种特定类型的计算机语言，它使用一系列的标签（tag）来标记文本、图像、多媒体等内容，以便指示其结构、语义、样式或行为。这些标签是预定义的关键字，通常用尖括号 < 和 > 包裹起来，用来为文档或数据赋予额外的意义和指示如何处理这些信息。与编程语言不同，标记语言不涉及复杂的程序逻辑、变量赋值、条件判断、循环结构、函数调用等概念，其重点在于描述和组织内容的层次结构以及与之相关的元数据。

  1. 代码示例
  • 双标签（成对标签）

双标签，又称成对标签，由一对开始标签和结束标签构成，分别表示一个元素的开始和结束。例如：

<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文档声明：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "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>结束，如下所示：

  1. <html>
  2.   <!-- 其他HTML内容 -->
  3. </html>

所有其他HTML元素，包括<head>和<body>，都必须嵌套在<html>标签之内，形成文档的完整结构。

3. 头部元素（head）

<head>标签定义了文档的头部，其中包含了一系列非可视化信息，这些信息对于浏览器和搜索引擎等解析工具来说十分重要，但并不会直接呈现在网页的可见区域内。常见的头部元素包括：

  • <title>：定义网页的标题，显示在浏览器的标签页或窗口标题栏中，也是搜索引擎检索结果中的重要信息来源。
  • <script>：用于嵌入或链接JavaScript代码，提供网页的动态交互功能。
  • <style>：用于直接编写CSS样式代码，或者通过@import导入外部样式表。
  • <link>：用于链接外部资源，如CSS文件、图标（favicon）、预加载资源等。
  • <meta>：提供元数据信息，如字符编码、网页描述、关键词、 viewport设置等，影响浏览器对文档的处理和搜索引擎的索引。

例如：

  1. <head>
  2.   <title>网页标题</title>
  3.   <link rel="stylesheet" href="styles.css">
  4.   <script src="script.js"></script>
  5.   <meta charset="UTF-8">
  6.   <meta name="description" content="网页描述">
  7. </head>

4. 主体元素（body）

<body>标签包含了网页的所有可见内容，即用户在浏览器窗口中实际看到和交互的部分。包括文本、图片、视频、音频、表格、列表、表单、链接等各类HTML元素均应在<body>标签内进行定义。

例如：

  1. <body>
  2.   <header>
  3.     <!-- 页面顶部导航等内容 -->
  4.   </header>
  5.   <main>
  6.     <section>
  7.       <!-- 主要内容区段 -->
  8.     </section>
  9.     <article>
  10.       <!-- 文章或其他独立内容区块 -->
  11.     </article>
  12.   </main>
  13.   <footer>
  14.     <!-- 页面底部信息 -->
  15.   </footer>
  16. </body>

5. 注释

HTML注释用于在源代码中插入解释性文本，对代码进行说明，方便开发者阅读和理解。注释不会被浏览器解析和显示，对网页的布局和功能没有影响。

注释的写法如下：

<!-- 这是一个HTML注释，注释内容可以是任意文本，不会显示在网页上 -->

在实际开发中，注释常用于记录代码目的、功能、作者、修改日期等信息，或者暂时屏蔽某段代码以进行调试。保持良好的注释习惯有助于代码维护和团队协作。

1.5. HTML入门

  1. 准备一个纯文本文件,拓展名为html

  1. 使用记事本打开网页,在网页内开发代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4.         <meta charset="UTF-8">
  5.         <title>我的第一个网页</title>
  6.     </head>
  7.     <body>
  8.         hello html!!!
  9.     </body>
  10. </html>

  1. 使用浏览器打开文件,查看显示的内容

1.6. HTML概念词汇解释标签

标签

在HTML（HyperText Markup Language，超文本标记语言）中，标签 是构成其语法的基本单元，它们由一对尖括号 < 和 > 包裹，用来指示网页内容的结构、意义和呈现方式。标签分为两类：

  1. 双标签：双标签由一个开始标签和一个结束标签组成，它们以相同的名字但结束标签前多了一个斜杠 / 来表示。例如：
<p>这是一个段落。</p>

在这里，<p> 是开始标签，</p> 是结束标签，它们共同定义了一个段落元素。

  1. 单标签：单标签只有开始部分，没有对应的结束部分，通常用来表示无需闭合的内容或状态。单标签通常以一个斜杠 / 结尾，但有时也可以省略斜杠，仅由一个标签符号表示。例如：
<br/>

或简写为

<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文档结构和内容的基本构建块。对于双标签：

  1. <div class="container">
  2.   <p>这是一段文本。</p>
  3.   <img src="image.jpg" alt="描述性文本">
  4. </div>

上述代码片段中，<div>、<p> 和 <img> 都是标签，它们各自带有属性（如 class、src 和 alt），并可能包含文本或其他元素。整个 <div> 标签及其内部所有内容构成了一个 div 元素；<p> 标签及其包含的文本构成了一个 p 元素；而 <img> 标签虽然没有闭合标签和内部文本，但凭借其自身及属性构成了一个完整的 img 元素。这些元素共同组成了HTML文档的结构，浏览器根据这些元素的类型和属性来决定如何渲染和展示网页内容。

1.7. HTML语法规则

1. 根标签有且只能有一个

每个HTML文档必须有一个根元素，它作为所有其他元素的顶层容器。这个根元素就是 <html> 标签。一个文档中只能有一个 <html> 标签，且必须作为文档的第一级元素，如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.   <!-- 其他HTML内容 -->
  4. </html>

2. 无论是双标签还是单标签都需要正确关闭

  • 双标签 必须成对出现，每个开始标签 <tag> 必须有一个对应的结束标签 </tag>，确保它们名字相同以正确闭合。例如：
<p>这是段落内容。</p>
  • 单标签 虽然不需要单独的结束标签，但通常以 / 符号自我闭合。例如：
<br />

或者简写为

<br>

3. 标签可以嵌套但不能交叉嵌套

HTML标签可以相互嵌套，即一个标签可以作为另一个标签的内容。嵌套时，必须保持正确的层级关系，每个开始标签必须有相应的结束标签，并且嵌套顺序应为“先开后关”，即内层标签完全包含在它的外层标签之内。不允许标签交叉，例如：

  1. <!-- 正确嵌套 -->
  2. <ul>
  3.   <li>项目一</li>
  4.   <li>项目二</li>
  5. </ul>
  6.  
  7. <!-- 错误的交叉嵌套（禁止） -->
  8. <ul>
  9.   <li>项目一
  10.     </ul>
  11.       <li>项目二</li>
  12.   </li>
  13. </ul>

4. 注释语法为 <!-- --> ，注意不能嵌套

在HTML中添加注释以解释代码或临时屏蔽某些代码片段，使用 <!-- 开始注释，以 --> 结束注释。注释内容不会被浏览器解析和显示。注释不能嵌套，即注释内部不能再包含另一个注释：

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

5. 属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值

HTML标签的属性通常需要一个对应的值来指定其具体设置。属性值应当放在等号 = 后面，并用单引号 ' 或双引号 " 包围。在HTML5中，如果属性名和属性值相同，可以省略属性值，仅保留属性名。例如：

  1. <!-- 常规写法 -->
  2. <input type="text" value="Hello">
  3.  
  4. <!-- HTML5简化写法 -->
  5. <input type="text" value>

6. HTML中不严格区分字符串使用单双引号

在为HTML属性赋值时，既可以使用单引号 '，也可以使用双引号 " 来包裹字符串值，两者在功能上是等价的。选择使用哪一种取决于个人偏好或团队编码规范，但同一属性的值必须使用同一种引号开始和结束：

  1. <!-- 使用单引号 -->
  2. <img src='image.jpg' alt='描述文字'>
  3.  
  4. <!-- 使用双引号 -->
  5. <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. 在线帮助文档

w3school 在线教程

2. HTML常见标签

2.1. 标题标签<h1>

标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题

  1. <body>
  2.     <h1>一级标题</h1>
  3.     <h2>二级标题</h2>
  4.     <h3>三级标题</h3>
  5.     <h4>四级标题</h4>
  6.     <h5>五级标题</h5>
  7.     <h6>六级标题</h6>
  8. </body>

2.2. 段落标签<p>

段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果

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

2.3. 换行标签<br>

单纯实现换行的标签是br,如果想添加分隔线,可以使用hr标签

换行标签：<br>

分割线标签：<hr>

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

2.4. 列表标签

2.4.1. 有序列表<ol><li>

有序列表

分条列项展示数据的标签, 其每一项前面的符号带有顺序特征

  • 列表标签 ol
  • 列表项标签 li
  1. <ol>
  2.     <li>JAVA</li>
  3.     <li>前端</li>
  4.     <li>大数据</li>
  5. </ol>

2.4.2. 无序列表<ul><li>

无序列表

分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征

  • 列表标签 ul
  • 列表项标签 li
  1. <ul>
  2.     <li>JAVASE</li>
  3.     <li>JAVAEE</li>
  4.     <li>数据库</li>
  5. </ul>

2.4.3. 嵌套列表

列表和列表之前可以签到,实现某一项内容详细展示

  1. <ol>
  2.     <li>
  3.         JAVA
  4.         <ul>
  5.             <li>JAVASE</li>
  6.             <li>JAVAEE</li>
  7.             <li>数据库</li>
  8.         </ul>
  9.     </li>
  10.     <li>前端</li>
  11.     <li>大数据</li>
  12. </ol>

2.5. 超链接标签<a>

点击后带有链接跳转的标签 ,也叫作a标签

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

2.6. 多媒体标签

2.6.1. 图片标签<img>

img(重点) 图片标签,用于在页面上引入图片

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

2.6.2. 音频标签<audio>

用于在页面上引入一段声音

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

2.7. 表格标签<table>(重点)

常规表格

  • table标签：代表表格
  • thead标签：代表表头 可以省略不写
  • tbody标签：代表表体 可以省略不写
  • tfoot标签：代表表尾 可以省略不写
  • tr标签：代表一行
  • td标签：代表行内的一格
  • th标签：自带加粗和居中效果的td

2.7.1. 基本操作

  1. <body>
  2.     <!-- 页面标题，居中显示 -->
  3.     <h3 style="text-align: center;">员工技能竞赛评分表</h3>
  4.     <!-- 创建一个表格，设置边框为1px，宽度为400px，居中显示 -->
  5.     <table  border="1px" style="width: 400px; margin: 0px auto;">
  6.         <!-- 表格表头，包含排名、姓名和分数三个列 -->
  7.         <tr>
  8.             <th>排名</th>
  9.             <th>姓名</th>
  10.             <th>分数</th>
  11.         </tr>
  12.         <!-- 表格数据行，展示员工的排名、姓名和分数 -->
  13.         <tr>
  14.             <td>1</td>
  15.             <td>张小明</td>
  16.             <td>100</td>
  17.         </tr>
  18.         <tr>
  19.             <td>2</td>
  20.             <td>李小东</td>
  21.             <td>99</td>
  22.         </tr>
  23.         <tr>
  24.             <td>3</td>
  25.             <td>王小虎</td>
  26.             <td>98</td>
  27.         </tr>
  28.     </table>
  29. </body>

2.7.2. 单元格上下跨行

通过td的rowspan属性实现上下跨行

  1. <body>
  2.   <h3 style="text-align: center;">员工技能竞赛评分表</h3> <!-- 标题居中显示 -->
  3.   <table  border="1px" style="width: 400px; margin: 0px auto;"> <!-- 创建一个居中、有边框的表格 -->
  4.       <tr> <!-- 表格表头行开始 -->
  5.           <th>排名</th>
  6.           <th>姓名</th>
  7.           <th>分数</th>
  8.           <th>备注</th>
  9.       </tr>
  10.       <tr> <!-- 表格数据行开始 -->
  11.           <td>1</td>
  12.           <td>张小明</td>
  13.           <td>100</td>
  14.           <td rowspan="3"> <!-- 备注信息跨三行显示 -->
  15.               前三名升职加薪
  16.           </td>
  17.       </tr>
  18.       <tr>
  19.           <td>2</td>
  20.           <td>李小东</td></td>
  21.           <td>99</td>
  22.       </tr>
  23.       <tr>
  24.           <td>3</td>
  25.           <td>王小虎</td>
  26.           <td>98</td>
  27.       </tr>
  28.   </table>
  29. </body>

2.7.3. 单元格左右跨行

通过td的colspan属性实现左右的跨列

  1. <body>
  2.   <h3 style="text-align: center;">员工技能竞赛评分表</h3>
  3.     <table  border="1px" style="width: 400px; margin: 0px auto;"> <!-- 创建一个居中、有边框的表格 -->
  4.         <tr>
  5.             <th>排名</th>
  6.             <th>姓名</th>
  7.             <th>分数</th>
  8.             <th>备注</th>
  9.         </tr>
  10.         <tr>
  11.             <td>1</td>
  12.             <td>张小明</td>
  13.             <td>100</td>
  14.             <td rowspan="6">
  15.                 前三名升职加薪
  16.             </td>
  17.         </tr>
  18.         <tr>
  19.             <td>2</td>
  20.             <td>李小东</td></td>
  21.             <td>99</td>
  22.         </tr>
  23.         <tr>
  24.             <td>3</td>
  25.             <td>王小虎</td>
  26.             <td>98</td>
  27.         </tr>
  28.         <!-- 下面的行展示比赛的统计信息 -->
  29.         <tr>
  30.             <td>总人数</td>
  31.             <td colspan="2">2000</td>
  32.         </tr>
  33.         <tr>
  34.             <td>平均分</td>
  35.             <td colspan="2">90</td>
  36.         </tr>
  37.         <tr>
  38.             <td>及格率</td>
  39.             <td colspan="2">80%</td>
  40.         </tr>
  41.     </table>
  42. </body>

2.8. 表单标签<form>(重点)

表单标签 是HTML中用于创建交互式界面的关键元素，它允许用户在网页上输入、选择或提交各种类型的数据。表单是向服务器发送数据的主要途径之一，常用于用户注册、登录、反馈、查询等场景。

1. form 标签

<form> 标签是表单的容器，定义了一个表单域，其中包含了供用户填写和交互的各种表单元素。form 标签具有以下重要属性：

  • action：此属性指定表单数据提交到的服务器地址（URL）。当用户提交表单时，浏览器会将表单内所有相关数据发送到这个指定的地址进行处理。
  • method：此属性决定了表单数据提交的方式，有两种常见值：
    • get：数据以URL查询字符串的形式附加到提交地址后面。查询字符串以问号 ? 开始，多个参数间用 & 分隔。由于URL长度有限制且数据会显示在地址栏中，因此不适合提交大量或敏感信息。
    • post：数据以HTTP请求体的形式发送，不会在URL中显示。这种方式适用于提交大量数据或包含敏感信息的表单，因为数据不在URL中暴露，且理论上能传输更大的数据量。

2. input 标签

<input> 标签是表单中最常用的元素之一，用于创建各种类型的输入字段。input 标签通过 type 属性定义其类型，常见的类型包括：

  • text：创建一个单行文本输入框，用户可以在此输入文本信息。
  • password：创建一个密码输入框，用户输入的字符将以星号或圆点替代显示，保护密码隐私。
  • submit：创建一个提交按钮，点击后触发表单提交，将表单数据发送到指定的action URL。
  • reset：创建一个重置按钮，点击后将表单所有输入字段恢复到初始状态（通常是清除用户已输入的内容）。

此外，input 标签还具有重要的 name 属性：

  • name：为表单字段指定一个名称，该名称作为提交数据的键，其对应的用户输入值作为提交数据的值。服务器端通过这些名称来识别和处理接收到的数据。
  1. <body>
  2.   <form action="https://www.bilibili.com/" method="get">
  3.     用户名 <input type="text" name="username" /> <br>
  4.     密&nbsp;&nbsp;&nbsp;码 <input type="password" name="password" /> <br>
  5.     <input type="submit"  value="登录" />
  6.     <input type="reset"  value="重置" />
  7.   </form>
  8. </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 后，效果不变，依然表示该单选框默认被选中。
  1. 你的性别是：
  2. <input type="radio" name="sex" value="spring" />男
  3. <input type="radio" name="sex" value="summer" checked="checked" />女

2.8.4. 复选框<type=checkbox>

  1. <body>
  2.   你喜欢的球队是：<br>
  3.   <input type="checkbox" name="team" value="Brazil"/>巴西<br>
  4.   <input type="checkbox" name="team" value="German" checked/>德国<br>
  5.   <input type="checkbox" name="team" value="France"/>法国<br>
  6.   <input type="checkbox" name="team" value="China" checked="checked"/>中国
  7.   <input type="checkbox" name="team" value="Italian"/>意大利
  8. </body>

2.8.5. 下拉框<select><option>

  1. 你喜欢的运动是：
  2. <select name="interesting">
  3.     <option value="swimming">游泳</option>
  4.     <option value="running">跑步</option>
  5.     <option value="shooting" selected="selected">射击</option>
  6.     <option value="skating">溜冰</option>
  7. </select>

  1. 下拉列表用到了两种标签：
    • <select> 标签：这是一个HTML元素，用于创建一个下拉列表（也称为选择框），用户可以在其中从多个预定义选项中进行选择。整个下拉列表由这个标签定义。
    • <option> 标签：每个<option>标签代表下拉列表中的一个可选项目。用户点击下拉箭头后看到的每一项内容（如“游泳”、“跑步”等），都是由这些标签定义的。
  1. name属性在select标签中设置：
    • name="interesting"：在<select>标签中，name属性是非常重要的，它为下拉列表赋予一个名称。当用户提交包含此下拉列表的表单时，这个名称将被用来识别用户选择了哪个选项。服务器端脚本（如PHP、Python、Java等）或客户端JavaScript可以通过这个名字来访问和处理用户的选择。
  1. value属性在option标签中设置：
    • 如value="swimming"、value="running"等：每个<option>标签内的value属性为其所代表的选项指定一个值。这个值通常是看不见的（不像标签体文字那样直接显示给用户），但它是实际提交给服务器的数据。例如，即使用户看到并选择了“游泳”，提交给服务器的是与之对应的value="swimming"。
  1. option标签的标签体是显示出来给用户看的：
    • 在<option>标签内部的文字，如“游泳”、“跑步”等，是用户在打开下拉列表后能看到的实际选项文本。这些是直接呈现给用户的可视内容，帮助他们理解每个选项代表的意义。
  1. 提交到服务器的是value属性的值：
    • 当用户在下拉列表中做出选择并提交表单时，浏览器将发送<select>标签中被选中<option>的value属性值到服务器。服务器并不关心选项是如何显示给用户的，它只关注与每个选项关联的value值，以便进一步处理或存储用户的选择。
  1. 通过在option标签中设置selected="selected"属性实现默认选中的效果：
    • 在<option value="shooting" selected="selected">射击</option>这一行中，selected="selected"属性指示浏览器在页面加载时，自动选择这个选项作为下拉列表的初始状态。用户初次看到这个下拉框时，“射击”将是已经突出显示且被选中的项目。如果没有指定这个属性，通常第一个选项会被默认选中；如果有多个selected属性出现，则根据HTML规范，最后一个被解析的selected选项生效。

2.8.6. 按钮<button>

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

  1. 普通按钮 (<button type="button"> 或 <input type="button">)：
  • 显示为“普通按钮”，点击后无内置效果。
  • 需要通过JavaScript添加点击事件处理函数来赋予其具体功能（如执行某个操作、更新页面等）。
  1. 重置按钮 (<button type="reset"> 或 <input type="reset">)：
  • 显示为“重置按钮”，点击后会将所在表单的所有表单项恢复到初始状态（如默认值或空白）。
  1. 提交按钮 (<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>设置默认显示的文本（即初始内容），只需在<textarea>标签的开始和结束标签之间直接书写您希望显示的文本即可。例如：
<textarea name="desc">我是默认显示的自我介绍内容...</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>也没有特定语义，主要用于包裹文本或小范围的元素，以便精确控制这些内容的样式。

代码示例分析：

  1. <body>
  2.     <div style="width: 500px; height: 400px; background-color: cadetblue">
  3.       <div
  4.         style="
  5.           width: 400px;
  6.           height: 100px;
  7.           background-color: beige;
  8.           margin: 10px auto;
  9.         "
  10.       >
  11.         <span style="color: blueviolet">页面开头部分</span>
  12.       </div>
  13.       <div
  14.         style="
  15.           width: 400px;
  16.           height: 100px;
  17.           background-color: blanchedalmond;
  18.           margin: 10px auto;
  19.         "
  20.       >
  21.         <span style="color: blueviolet">页面中间部分</span>
  22.       </div>
  23.       <div
  24.         style="
  25.           width: 400px;
  26.           height: 100px;
  27.           background-color: burlywood;
  28.           margin: 10px auto;
  29.         "
  30.       >
  31.         <span style="color: blueviolet">页面结尾部分</span>
  32.       </div>
  33.     </div>
  34.   </body>

  1. 外层 <div>：
    • 定义了一个宽度为500px、高度为400px、背景色为cadetblue的容器，用于承载整个布局。
    • 通过CSS样式直接内联在style属性中。
  1. 三个内嵌 <div>：
    • 每个<div>代表页面的一个部分（开头、中间、结尾），宽度均为400px、高度为100px，具有不同的背景色（beige、blanchedalmond、burlywood）。
    • 使用margin: 10px auto;使这些<div>在父容器中水平居中，并上下留有10px的外边距。
    • 这些<div>构成了页面的垂直布局，每个部分占据固定的高度。
  1. <span> 标签：
    • 分别位于每个内嵌<div>内部，用于包裹描述各部分的文字（“页面开头部分”、“页面中间部分”、“页面结尾部分”）。
    • 给每个<span>设置了颜色为blueviolet的文本样式，使得这部分文字具有特定的颜色。

3. CSS使用

CSS是一种设计网页外观的语言，用于：

1. 设置元素颜色、字体、大小、布局等样式。

2. 通过选择器（如元素名、类名、ID）精准定位要应用样式的元素。

3. 实现样式层叠与继承，确保多个规则间的协调和简洁。

4. 将样式写入外部文件，实现模块化和复用，保持网站整体风格一致。

CSS让网页看起来美观、布局有序。

3.1. CSS引入方式

3.1.1. 行内式

行内式：通过元素开始标签的style属性引入

样式语法为：样式名: 样式值;

  1. <body>
  2.   <input type="button" value="按钮"
  3.       style="
  4.         display: block;
  5.         width: 60px;
  6.         height: 40px;
  7.         background-color: rgb(140, 235, 100);
  8.         color: white;
  9.         border: 3px solid green;
  10.         font-size: 22px;
  11.         font-family: '隶书';
  12.         line-height: 30px;
  13.         border-radius: 5px; " />
  14. </body>

缺点

  • html代码和css样式代码交织在一起,增加阅读难度和维护成本
  • css样式代码仅对当前元素有效,代码重复量高,复用度低

3.1.2. 内嵌式

  • 内嵌式样式需要在head标签中,通过一对style标签定义CSS样式
  • CSS样式的作用范围控制要依赖选择器
  • CSS的样式代码中注释的方式为  /   /
  • 内嵌式虽然对样式代码做了抽取,但是CSS代码仍然在html文件中
  • 内嵌样式仅仅能作用于当前文件,代码复用度还是不够,不利于网站风格统一
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <style>
  4.         /* 通过选择器确定样式的作用范围 */
  5.         input {
  6.             display: block;
  7.             width: 80px; 
  8.             height: 40px; 
  9.             background-color: rgb(140, 235, 100); 
  10.             color: white;
  11.             border: 3px solid green;
  12.             font-size: 22px;
  13.             font-family: '隶书';
  14.             line-height: 30px;
  15.             border-radius: 5px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <input type="button" value="按钮1"/> 
  21.     <input type="button" value="按钮2"/> 
  22.     <input type="button" value="按钮3"/> 
  23.     <input type="button" value="按钮4"/> 
  24. </body>

3.1.3. 连接式/外部样式表

  • 可以在项目单独创建css样式文件,专门用于存放CSS样式代码

  • 在head标签中,通过link标签引入外部CSS样式即可
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <link href="css/buttons.css" rel="stylesheet" type="text/css"/>
  4. </head>
  5. <body>
  6.     <input type="button" value="按钮1"/> 
  7.     <input type="button" value="按钮2"/> 
  8.     <input type="button" value="按钮3"/> 
  9.     <input type="button" value="按钮4"/> 
  10. </body>
  • CSS样式代码从html文件中剥离,利于代码的维护
  • CSS样式文件可以被多个不同的html引入,利于网站风格统一

3.2. CSS选择器

CSS选择器是CSS语言中用于指定哪些HTML元素应应用特定样式的规则。它帮助开发者精准地定位到需要设置样式的元素，而不影响其他元素。

简单解释就是：

CSS选择器就像是一把“标签钥匙”，您用它告诉浏览器：“我想把这些特定的样式应用到使用了某个特定标签的所有HTML元素上。”

元素选择器是CSS选择器的一种，是最简单的一种“标签钥匙”。它直接使用HTML标签的名字作为“钥匙”，比如input、p、h1等。

举个例子：

假设您有一堆彩色的贴纸（代表CSS样式），想把它们贴到所有写着“玩具”字样的箱子（代表HTML元素）上。您会怎么做呢？

  1. 制作“标签钥匙”：您决定用“玩具”这两个字作为“钥匙”，因为您想贴的就是写着“玩具”的箱子。
  2. 使用“标签钥匙”：您拿着写着“玩具”的“标签钥匙”，找到一个箱子，检查上面是否写着“玩具”。如果是，就把彩色贴纸贴上去。接着找下一个箱子，重复这个过程，直到所有写着“玩具”的箱子都被贴上贴纸。

在CSS中，这就是元素选择器的工作原理：

  • 制作“标签钥匙”：您在CSS代码中写一个元素选择器，比如input，表示您想把样式应用到所有<input>元素上。
  • 使用“标签钥匙”：浏览器读到您的CSS代码后，会查找HTML文档中所有的<input>元素。对于每一个找到的<input>元素，浏览器都会应用您在input选择器后面大括号{}里定义的那些样式。

所以，元素选择器就是用来指定一组CSS样式应该应用到所有使用了某个特定HTML标签的元素上的一种方式。

3.2.1. 元素选择器

  1. <head>
  2.     <meta charset="UTF-8">
  3.    <style>
  4.     input {
  5.         display: block;
  6.         width: 80px; 
  7.         height: 40px; 
  8.         background-color: rgb(140, 235, 100); 
  9.         color: white;
  10.         border: 3px solid green;
  11.         font-size: 22px;
  12.         font-family: '隶书';
  13.         line-height: 30px;
  14.         border-radius: 5px;
  15.     }
  16.    </style>
  17. </head>
  18. <body>
  19.     <input type="button" value="按钮1"/> 
  20.     <input type="button" value="按钮2"/> 
  21.     <input type="button" value="按钮3"/> 
  22.     <input type="button" value="按钮4"/> 
  23.     <button>按钮5</button>
  24. </body>

元素选择器是CSS中的一种工具，用于给特定类型的HTML标签（如<input>、<p>、<div>等）设置样式。它的特点是：

  1. 按标签选样式：告诉浏览器：“对所有名为‘X’的HTML标签应用这些样式。”
  2. 写法直观：在CSS中写成“X {样式规则}”，其中X是标签名，{}内是具体的样式设定。
  3. 仅影响同名标签：定义的样式只对与选择器标签名相同的HTML元素生效，其他标签不受影响。
  4. 样式通用，可能不够精细：所有同名标签都会得到同样的样式。若不同实例需不同样式，元素选择器可能范围过大，这时可结合其他选择器（如类选择器、ID选择器等）进行更精确的样式设定。

3.2.2. id选择器

#id

  1. <head>
  2.     <meta charset="UTF-8">
  3.    <style>
  4.     #btn1 {
  5.         display: block;
  6.         width: 80px; 
  7.         height: 40px; 
  8.         background-color: rgb(140, 235, 100); 
  9.         color: white;
  10.         border: 3px solid green;
  11.         font-size: 22px;
  12.         font-family: '隶书';
  13.         line-height: 30px;
  14.         border-radius: 5px;
  15.     }
  16.    </style>
  17. </head>
  18. <body>
  19.     <input id="btn1" type="button" value="按钮1"/> 
  20.     <input id="btn2" type="button" value="按钮2"/> 
  21.     <input id="btn3" type="button" value="按钮3"/> 
  22.     <input id="btn4" type="button" value="按钮4"/> 
  23.     <button id="btn5">按钮5</button>
  24. </body>

ID选择器是CSS中用于根据HTML元素的id属性值来精确指定其样式的工具。其特点如下：

  1. 按ID选元素：告诉浏览器：“找到ID为‘Y’的元素，并应用这些样式。”
  2. 写法明确：在CSS中写成“#Y {样式规则}”，其中#Y是ID选择器，Y是元素的id属性值，{}内是具体的样式设定。
  3. 一对一对应：由于HTML规定id属性值在页面中必须唯一，因此每个ID选择器只能影响一个元素的样式。这意味着ID选择器提供了极高精度的样式定位。
  4. ID值固定，灵活性有限：由于id属性值通常在HTML编写时就已确定，且要求在整个文档中保持唯一，这限制了其在动态调整样式或复用样式规则时的灵活性。因此，相较于类选择器等其他选择器，ID选择器的使用场景相对较少。

简单来说，ID选择器是CSS中用于精确控制单个元素样式的强大工具，它通过元素的id属性值实现一对一的样式绑定。但由于id属性值的固定性和唯一性限制，其在需要灵活调整或复用样式时的应用不如类选择器等广泛。

3.2.3. class选择器

.class

  1. <head>
  2.     <meta charset="UTF-8">
  3.    <style>
  4.     .shapeClass {
  5.         display: block;
  6.         width: 80px; 
  7.         height: 40px; 
  8.         border-radius: 5px;
  9.     }
  10.     .colorClass{
  11.         background-color: rgb(140, 235, 100); 
  12.         color: white;
  13.         border: 3px solid green;
  14.     }
  15.     .fontClass {
  16.         font-size: 22px;
  17.         font-family: '隶书';
  18.         line-height: 30px;
  19.     }
  20.  
  21.    </style>
  22. </head>
  23. <body>
  24.     <input  class ="shapeClass colorClass fontClass"type="button" value="按钮1"/> 
  25.     <input  class ="shapeClass colorClass" type="button" value="按钮2"/> 
  26.     <input  class ="colorClass fontClass" type="button" value="按钮3"/> 
  27.     <input  class ="fontClass" type="button" value="按钮4"/> 
  28.     <button class="shapeClass colorClass fontClass" >按钮5</button>
  29. </body>

Class选择器是CSS中用于根据HTML元素的class属性值来指定其样式的工具

  1. 按类名选元素：告诉浏览器：“找到所有class属性包含‘Z’的元素，并应用这些样式。”
  2. 写法清晰：在CSS中写成“.Z {样式规则}”，其中.Z是类选择器，Z是元素的class属性值，{}内是具体的样式设定。
  3. 多对多关系：一个元素可以拥有一个或多个class属性值（用空格分隔），而一个类选择器可以应用于多个具有相同class值的元素。这意味着类选择器支持灵活的多对多关系，能够高效地批量或分组设置样式。
  4. 样式叠加：同一元素上可以应用多个类选择器，它们的样式会叠加生效。例如，一个元素同时具有class="shapeClass colorClass fontClass"，则会同时继承这三个类选择器定义的所有样式。
  5. 高度灵活：由于class属性值可在HTML中自由添加、修改或删除，且允许多个元素共享相同的class值，使得类选择器在动态调整样式、复用样式规则或实现模块化设计等方面具有极高的灵活性。因此，类选择器在CSS中被广泛应用。

简单来说，Class选择器是CSS中用于灵活、高效地批量或分组设置元素样式的常用工具。它通过元素的class属性值实现多对多的样式关联，并支持样式叠加，具有很高的灵活性和可复用性，故在实际项目中被广泛使用。

3.3. CSS浮动

该知识点建议结合视频教程一起看 ---> CSS_浮动

W3C的解释文档 ---> CSS 布局 - position 属性

CSS的float属性，简称为“浮动”，是一种布局技术，允许您将一个元素从正常的文档流（Document Flow）中移出，使其沿着指定的方向（通常是向左或向右）移动，并且使其周围的文本或其他内联元素环绕它。

  1. 文档流（Document Flow）

文档流是HTML元素在网页上默认的排列方式。想象一下，当你在文档中依次写下HTML标签时，就像在一张无限大的纸上从上到下、从左到右书写文字。每个元素占据一定的空间，并且按照它们在HTML源代码中出现的顺序依次排列：

  • 块级元素（如<div>、<p>等）通常独占一行，自上而下堆叠。
  • 内联元素（如<span>、文本）则在一行内从左到右排列，直到行宽不足时换行。
  1. 脱离文档流（Out of the Document Flow）

脱离文档流意味着某个元素不再遵循上述正常的排列规则，而是从常规布局中“浮”起来，不再占据原来在文档流中的固有位置。当元素浮动后：

  • 它会向指定的方向（通过float: left或float: right指定）移动，直到遇到其父容器的边缘或另一个浮动元素的边缘停止。
  • 其他后续的文档流元素会无视这个浮动元素原本占据的空间，继续按照正常的文档流进行排列。
  • 文本和内联元素会围绕浮动元素流动，填充其周围的空间。
  1. 浮动设计初衷与文字环绕图片

浮动最初的设计目的是为了实现文字环绕图片的效果，类似于在Word文档中插入图片时，文本能够自然地绕过图片分布。在早期网页设计中，float属性使得设计师能够轻松地将图片放在段落中，确保图片与文字和谐共存，互不影响对方的布局。

  1. 结论

简而言之，CSS浮动是一种布局技术，它使元素脱离正常的文档流布局，按照指定方向移动，并让周围的文本和其他内联元素环绕它。这一特性最初是为了实现文字环绕图片的布局效果，但现在常被用来创建多列布局、侧边栏等内容。理解浮动意味着理解元素如何在网页上非正常顺序地排列，以及这种排列方式如何影响其他元素的布局。

3.4. CSS定位

该知识点建议结合视频教程一起看 ---> CSS_定位

W3C的解释文档 ---> CSS 布局 - position 属性

position 属性指定了元素的定位类型。

  • 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
  • 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

3.4.1. 静态定位-static

不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <style>
  4.         .innerDiv{
  5.                 width: 100px;
  6.                 height: 100px;
  7.         }
  8.         .d1{
  9.             background-color: rgb(166, 247, 46);
  10.             position: static;
  11.         }
  12.         .d2{
  13.             background-color: rgb(79, 230, 124);
  14.         }
  15.         .d3{
  16.             background-color: rgb(26, 165, 208);
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.         <div class="innerDiv d1">框1</div>
  22.         <div class="innerDiv d2">框2</div>
  23.         <div class="innerDiv d3">框3</div>
  24. </body>

3.4.2. 绝对定位-absolute

  • absolute ,通过 top left right bottom 指定元素在页面上的固定位置
  • 定位后元素会让出原来位置,其他元素可以占用
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <style>
  4.         .innerDiv{
  5.                 width: 100px;
  6.                 height: 100px;
  7.         }
  8.         .d1{
  9.             background-color: rgb(166, 247, 46);
  10.             position: absolute;
  11.             left: 300px;
  12.             top: 100px;
  13.         }
  14.         .d2{
  15.             background-color: rgb(79, 230, 124);
  16.         }
  17.         .d3{
  18.             background-color: rgb(26, 165, 208);
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.         <div class="innerDiv d1">框1</div>
  24.         <div class="innerDiv d2">框2</div>
  25.         <div class="innerDiv d3">框3</div>
  26. </body>

3.4.3. 相对定位-relative

  • relative 相对于自己原来的位置进行地位
  • 定位后保留原来的站位,其他元素不会移动到该位置
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <style>
  4.         .innerDiv{
  5.                 width: 100px;
  6.                 height: 100px;
  7.         }
  8.         .d1{
  9.             background-color: rgb(166, 247, 46);
  10.             position: relative;
  11.             left: 30px;
  12.             top: 30px;
  13.         }
  14.         .d2{
  15.             background-color: rgb(79, 230, 124);
  16.         }
  17.         .d3{
  18.             background-color: rgb(26, 165, 208);
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.         <div class="innerDiv d1">框1</div>
  24.         <div class="innerDiv d2">框2</div>
  25.         <div class="innerDiv d3">框3</div>
  26. </body>

3.4.4. 固定定位-fixed

  • fixed 失踪在浏览器窗口固定位置,不会随着页面的上下移动而移动
  • 元素定位后会让出原来的位置,其他元素可以占用
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <style>
  4.         .innerDiv{
  5.                 width: 100px;
  6.                 height: 100px;
  7.         }
  8.         .d1{
  9.             background-color: rgb(166, 247, 46);
  10.             position: fixed;
  11.             right: 30px;
  12.             top: 30px;
  13.         }
  14.         .d2{
  15.             background-color: rgb(79, 230, 124);
  16.         }
  17.         .d3{
  18.             background-color: rgb(26, 165, 208);
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.         <div class="innerDiv d1">框1</div>
  24.         <div class="innerDiv d2">框2</div>
  25.         <div class="innerDiv d3">框3</div>
  26.         br*100+tab
  27. </body>

3.5. CSS盒子模型

该知识点建议结合视频教程一起看 ---> CSS_盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

  1. <head>
  2.         <meta charset="UTF-8">
  3.        <style>
  4.         .outerDiv {
  5.             width: 800px;
  6.             height: 300px;
  7.             border: 1px solid green;
  8.             background-color: rgb(230, 224, 224);
  9.             margin: 0px auto;
  10.         }
  11.         .innerDiv{
  12.             width: 100px;
  13.             height: 100px;
  14.             border: 1px solid blue;
  15.             float: left;
  16.             /* margin-top: 10px;
  17.             margin-right: 20px;
  18.             margin-bottom: 30px;
  19.             margin-left: 40px; */
  20.             margin: 10px 20px 30px 40px;
  21.            
  22.         }
  23.         .d1{
  24.             background-color: greenyellow;
  25.             /* padding-top: 10px;
  26.             padding-right: 20px;
  27.             padding-bottom: 30px;
  28.             padding-left: 40px; */
  29.             padding: 10px 20px 30px 40px;
  30.         }
  31.         .d2{
  32.             background-color: rgb(79, 230, 124);
  33.         }
  34.         .d3{
  35.             background-color: rgb(26, 165, 208);
  36.         }
  37.        </style>
  38.     </head>
  39.     <body>
  40.        <div class="outerDiv">
  41.             <div class="innerDiv d1">框1</div>
  42.             <div class="innerDiv d2">框2</div>
  43.             <div class="innerDiv d3">框3</div>
  44.        </div> 
  45.     </body>

  • 在浏览器上,通过F12工具查看盒子模型状态

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/386846
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号