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>
在这里,<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
推荐插件
- 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六级标题
<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
<ol>
<li>JAVA</li>
<li>前端</li>
<li>大数据</li>
</ol>
2.4.2. 无序列表<ul><li>
无序列表
分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
- 列表标签 ul
- 列表项标签 li
<ul>
<li>JAVASE</li>
<li>JAVAEE</li>
<li>数据库</li>
</ul>
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属性:用于定义图片加载失败时显示的提示文字
<img src="img/logo.png" title="尚硅谷" alt="尚硅谷logo" />
2.6.2. 音频标签<audio>
用于在页面上引入一段声音
- src属性:用于定义目标声音资源
- autoplay属性:用于控制打开页面时是否自动播放
- controls属性:用于控制是否展示控制面板
- loop属性:用于控制是否进行循环播放
<audio src="img/music.mp3" autoplay="autoplay"
controls="controls" loop="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中暴露,且理论上能传输更大的数据量。
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>
密 码 <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 后,效果不变,依然表示该单选框默认被选中。
你的性别是:
<input type="radio" name="sex" value="spring" />男
<input type="radio" name="sex" value="summer" 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>
设置默认显示的文本(即初始内容),只需在<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>也没有特定语义,主要用于包裹文本或小范围的元素,以便精确控制这些内容的样式。
代码示例分析:
<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是一种设计网页外观的语言,用于:
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代码和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>
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>
<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>
元素选择器是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>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</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>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</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>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
br*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工具查看盒子模型状态