JavaWeb--HTML&CSS-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaWeb--HTML&CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. HTML入门

1.1. HTML / CSS / JavaScript概述

HTML 主要用于网页主体结构的搭建

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

CSS 主要用于页面元素美化

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

JavaScript 主要用于页面元素的动态处理

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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结构

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

使用记事本打开网页,在网页内开发代码

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

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

1.6. HTML概念词汇解释标签

标签

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

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

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

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

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

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

<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>，确保它们名字相同以正确闭合。例如：

<p>这是段落内容。</p>

单标签 虽然不需要单独的结束标签，但通常以 / 符号自我闭合。例如：

<br />

或者简写为

<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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

推荐插件

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语言特征插件

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

1.9. 在线帮助文档

w3school 在线教程

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2. HTML常见标签

2.1. 标题标签<h1>

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

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2.2. 段落标签<p>

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

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2.3. 换行标签<br>

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

换行标签：<br>

分割线标签：<hr>

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2.4. 列表标签

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

有序列表

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

列表标签 ol
列表项标签 li

<ol>
    <li>JAVA</li>
    <li>前端</li>
    <li>大数据</li>
</ol>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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

无序列表

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

列表标签 ul
列表项标签 li

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2.4.3. 嵌套列表

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

<ol>
    <li>
        JAVA
        <ul>
            <li>JAVASE</li>
            <li>JAVAEE</li>
            <li>数据库</li>
        </ul>
    </li>
    <li>前端</li>
    <li>大数据</li>
</ol>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2.6. 多媒体标签

2.6.1. 图片标签<img>

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

src属性：用于定义图片的连接
title属性：用于定义鼠标悬停时显示的文字
alt属性：用于定义图片加载失败时显示的提示文字

<img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2.6.2. 音频标签<audio>

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

src属性：用于定义目标声音资源
autoplay属性：用于控制打开页面时是否自动播放
controls属性：用于控制是否展示控制面板
loop属性：用于控制是否进行循环播放

<audio src="img/music.mp3" autoplay="autoplay" 
  controls="controls" loop="loop" />

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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：为表单字段指定一个名称，该名称作为提交数据的键，其对应的用户输入值作为提交数据的值。服务器端通过这些名称来识别和处理接收到的数据。

<body>
  <form action="https://www.bilibili.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>
</body>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2.8.1. 单行文本框<type=text>

单行文本框，input中的type属性为"text"

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

2.8.2. 密码框<type=password>

密码框，input中的type属性为"password"

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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 后，效果不变，依然表示该单选框默认被选中。

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

下拉列表用到了两种标签：

- <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="提交按钮"/>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

普通按钮 (<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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

多行文本框 <textarea>：

<textarea> 标签在HTML中用于创建一个可以输入多行文本的文本区域。用户可以在其中输入、编辑和查看多行文本内容，常用于收集用户的大段描述、评论、消息等。

没有 value 属性：

与其他表单控件（如<input>）不同，<textarea>标签并没有value属性。这是因为<textarea>的内容是由其标签之间的文本直接定义的，而不是通过属性指定。

设置默认值：

要为<textarea>设置默认显示的文本（即初始内容），只需在<textarea>标签的开始和结束标签之间直接书写您希望显示的文本即可。例如：

<textarea name="desc">我是默认显示的自我介绍内容...</textarea>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

在这个例子中，当页面加载时，文本区域会自动显示“我是默认显示的自我介绍内容...”。用户可以在此基础上进行修改，或者完全删除并输入自己的内容。

2.8.9. 文本标签<type=file>

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

作用：让用户从本地设备选择并上传文件到网页。
示例：<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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

外层 <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是一种设计网页外观的语言，用于：

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

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

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

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

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注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

缺点

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>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
</body>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

3.1.3. 连接式/外部样式表

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

在head标签中,通过link标签引入外部CSS样式即可

<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引入,利于网站风格统一

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

元素选择器是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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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属性。他们也有不同的工作方式，这取决于定位方法。

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
        br*100+tab
</body>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

3.5. CSS盒子模型

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

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

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

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习

<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>

html注释,# Java Web,# H5+CSS3,html,css,前端,笔记,学习