首页 前端知识 JavaWeb--HTML&CSS

JavaWeb--HTML&CSS

2024-04-29 12:04:35 前端知识 前端哥 566 106 我要收藏

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文档声明
<!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入门

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

  1. 使用记事本打开网页,在网页内开发代码
<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="UTF-8">
        <title>我的第一个网页</title>
    </head>
    <body>
        hello html!!!
    </body>
</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文档结构和内容的基本构建块。对于双标签:

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

上述代码片段中,<div><p><img> 都是标签,它们各自带有属性(如 classsrcalt),并可能包含文本或其他元素。整个 <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>
    密&nbsp;&nbsp;&nbsp;码 <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>

  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>

<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<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>也没有特定语义,主要用于包裹文本或小范围的元素,以便精确控制这些内容的样式。

代码示例分析

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

  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属性引入

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

<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标签的名字作为“钥匙”,比如inputph1等。


举个例子

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

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

在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>等)设置样式。它的特点是:

  1. 按标签选样式:告诉浏览器:“对所有名为‘X’的HTML标签应用这些样式。”
  2. 写法直观:在CSS中写成“X {样式规则}”,其中X是标签名,{}内是具体的样式设定。
  3. 仅影响同名标签:定义的样式只对与选择器标签名相同的HTML元素生效,其他标签不受影响。
  4. 样式通用,可能不够精细:所有同名标签都会得到同样的样式。若不同实例需不同样式,元素选择器可能范围过大,这时可结合其他选择器(如类选择器、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属性值来精确指定其样式的工具。其特点如下:

  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

<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属性值来指定其样式的工具

  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: leftfloat: right指定)移动,直到遇到其父容器的边缘或另一个浮动元素的边缘停止。
  • 其他后续的文档流元素会无视这个浮动元素原本占据的空间,继续按照正常的文档流进行排列。
  • 文本和内联元素会围绕浮动元素流动,填充其周围的空间。

  1. 浮动设计初衷与文字环绕图片

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


  1. 结论

简而言之,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工具查看盒子模型状态

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6564.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!