前端基础一、HTML5

1、HTML5语义结构

1.1、HTML介绍

HTML （Hyper Text Markup Language）超文本标记语言，是一种用来告知浏览器如何组织页面的标记语言，是负责描述文档语义的语言。学习html就是学习标签。

标记也称为标签（元素）
标签大小写都可以，建议小写
HTML由一系列的标签组成
文件以html为后缀（例如："1.html"）

使用软件trea，可以到官网下载 https://www.trae.cn/。

1.2、标签语法

(h1：一级标题，hr：水平分割线)

1.2.1、标签组成

符号：标签用<>表示
组成：开始标签、结束标签、内容
别称：标签也称为元素

1.2.2、标签分类

分为双标签和单标签，大部分是双标签，少数是单标签。

2、HTML文档框架组成

html框架创建，在编辑器中输入："!" (英文) + 回车。基础框架创建结果如下：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML的框架可以根据上图来理解。

2.1、文档类型

复制代码

<!DOCTYPE html>

HTML5的文档类型声明，它告诉浏览器当前页面是使用HTML5规范编写的。

2.2、<html>元素

复制代码

<html lang="en">
  
</html>

<html>元素，这个元素包裹了页面中所有的内容，有时被称为根元素 **，**在HTML中，lang用于声明页面的主要语言，帮助浏览器、搜索引擎等正确处理页面内容。

en 代表英语
zh-CN代表是中文

2.3、<head>元素

复制代码

<head>
    <!-- 字符集 -->
    <meta charset="UTF-8">
    <!-- 移动端页面适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <!-- 标题 -->
    <title>Document</title>
</head>

头部元素，包含了文档的元（meta）数据。主要保存供机器处理的信息，而非人可读的信息。

2.3.1、字符集

复制代码

<meta charset="UTF-8">

该文档的字符集设置为：UTF-8，UTF-8包括绝大多数人类书面语言的大多数字符。有了这个设置，页面现在可以处理它可能包含的任何文本内容，如果不加这句话可能会引起乱码。

2.3.2、移动端页面适配

复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它可以让开发者能确保网页在移动设备上最佳状态，提升用户浏览体验。

2.3.3、<title>元素

复制代码

<title>Document</title>

这可以设置页面的标题，也就是出现在该页面加载的浏览器标签中的内容。

2.4、<body>元素

复制代码

<body>
    <!-- 在这写页面的显示内容 -->
</body>

包含了页面所有显示在页面上的内容，包含文本、图片、视频、游戏等。

3、标签关系

1、2、3是并列关系，4、5、6是嵌套关系。

3.1、并列关系（兄弟关系）

概念

在HTML中，当多个标签处于同一个父标签内部，且它们在层级结构上处于同一级别时，这些标签之间就是并列关系，也被称为兄弟关系。这些兄弟标签在网页结构里相互独立又共同协作，按照代码中的先后顺序依次排列显示，在语义和功能上往往具有一定的平行性。

特点

层级相同：所有并列的标签都拥有同一个父标签，它们在 HTML 文档的层级结构中处于相同的层次。
顺序展示：在浏览器中渲染时，这些标签会按照在 HTML 代码里出现的先后顺序依次显示。
独立作用：每个标签都有自己独立的功能和语义，它们可以分别完成不同但相关的任务，共同为网页的整体功能和布局服务。

示例

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>并列关系示例</title>
</head>

<body>
    <header>
        <!-- 导航链接，处于并列关系 -->
        <a href="#">首页</a>
        <a href="#">产品介绍</a>
        <a href="#">联系我们</a>
    </header>
    <main>
        <!-- 段落和图片处于并列关系 -->
        <p>这是一段关于产品的描述文字。</p>
        <img src="product.jpg" alt="产品图片">
    </main>
    <footer>
        <!-- 版权信息和备案号处于并列关系 -->
        <p>版权所有 &copy; 2024</p>
        <p>备案号：XXXXX</p>
    </footer>
</body>

</html>

在上述示例中：

在 <header> 标签内部，三个 <a> 标签是并列关系，它们共同构成了网页的导航栏。
在 <main> 标签内部，<p> 标签和 <img> 标签是并列关系，分别用于展示文字描述和产品图片。
在 <footer> 标签内部，两个 <p> 标签是并列关系，分别显示版权信息和备案号。

3.2、嵌套关系（父子关系）

概念

嵌套关系是指一个标签被包含在另一个标签内部，形成了一种层次结构。外部的标签被称为父标签，内部的标签被称为子标签。这种关系可以多层嵌套，从而构建出复杂的网页结构。子标签通常继承父标签的一些特性，并且在语义和布局上是父标签内容的一部分。

特点

层级结构：嵌套关系形成了明显的层级结构，父标签包裹子标签，子标签可以继续嵌套其他标签，以此类推。
语义关联：父标签和子标签之间存在语义上的关联，子标签往往是对父标签内容的进一步细化或补充。
样式继承：子标签通常会继承父标签的一些 CSS 样式属性，除非子标签有自己单独的样式设置。

示例

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>嵌套关系示例</title>
</head>

<body>
    <!-- body 是父标签，div 是子标签 -->
    <div>
        <h2>产品列表</h2>
        <!-- ul 是父标签，li 是子标签 -->
        <ul>
            <!-- 每个 li 又可以作为父标签，嵌套 a 标签 -->
            <li><a href="#">产品 1</a></li>
            <li><a href="#">产品 2</a></li>
            <li><a href="#">产品 3</a></li>
        </ul>
    </div>
</body>

</html>

在上述示例中：

<body> 标签是 <div> 标签的父标签，<div> 标签是 <h2> 和 <ul> 标签的父标签。
<ul> 标签是 <li> 标签的父标签，每个 <li> 标签又作为父标签，嵌套了 <a> 标签。这种层层嵌套的结构清晰地展示了产品列表的层次关系。

4、HTML的标题和段落标签

4.1、标题标签h

在新闻和文章的页面中。都离不开标题，用来突出显示文章主题。

语法

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 语法 -->
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4>标题4</h4>
  <h5>标题5</h5>
  <h6>标题6</h6>
</body>

</html>

显示特点：标题文字会加粗显示，并且每行只显示一个
h1唯一性：最好只对每个页面使用一次<h1>------这是顶级标题，可以使用在新闻的标题、网页的logo部分
层次性：在现有的六个标题层次（h1~h6 一共6级）中，除非觉得有必要否则应该争取每页使用不超过三个。

4.2、段落标签p

表示文本的一个段落。

语法

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 语法 -->
  <p>这是一个段落</p>
  <p>这是一个段落</p>
</body>

</html>

<p> 标签用于定义段落。在默认样式下，段落中的文字会根据容器宽度自动换行。如需对段落的样式（如字体、颜色、边距等）进行设置，可使用 CSS 来实现。

4.3、语义化

指根据内容的结构和含义选择恰当的HTML元素。

示例

未语义化：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>HTML 的标题和段落
    HTML 的主要工作之一是赋予文本结构，使浏览器能够
    按照开发者的意图显示 HTML 文档。本文介绍了如何
    使用 HTML 通过定义标题和段落来提供基本的页面结
    构。
    实现结构层级
    所涉及的元素具体代表什么，完全取决于作者编辑的
    内容，只要层次结构是合理的。在创建此类结构时，
    只需要记住一些最佳实践。
    为什么我们需要结构化？
    这是因为没有元素给内容结构，所以浏览器不知道什
    么是标题，什么是段落。
    用户在阅读网页时，往往会快速浏览以查找相关内容，
    经常只是阅读开头的标题（我们通常在一个网页上会
    花费很少的时间)。如果用户不能在几秒内看到一些有
    用的内容，他们很可能会感到沮丧并离开。
    为什么我们需要语义？
    我们需要确保使用了正确的元素来给予内容正确的含
    义、作用以及外形。在这里，h1 元素也是一个语义元
    素，它所包裹的文本具有"页面上的顶级标题"的作
    用（或意义）。
    一般来说，浏览器会给它一个更大的字形来让它看上
    去像个标题。更重要的是，它的语义值将以多种方式
    被使用，比如通过上文提到过的搜索引擎和屏幕阅读
    器。</p>
</body>

</html>

语义化后：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>HTML 的标题和段落</h1>
  <p>HTML 的主要工作之一是赋予文本结构，使浏览器能够
    按照开发者的意图显示 HTML 文档。本文介绍了如何
    使用 HTML 通过定义标题和段落来提供基本的页面结
    构。</p>
  <h2>实现结构层级</h2>
  <p>所涉及的元素具体代表什么，完全取决于作者编辑的
    内容，只要层次结构是合理的。在创建此类结构时，
    只需要记住一些最佳实践。</p>
  <h2>为什么我们需要结构化？</h2>
  <p>这是因为没有元素给内容结构，所以浏览器不知道什
    么是标题，什么是段落。
    用户在阅读网页时，往往会快速浏览以查找相关内容，
    经常只是阅读开头的标题（我们通常在一个网页上会
    花费很少的时间)。如果用户不能在几秒内看到一些有
    用的内容，他们很可能会感到沮丧并离开。</p>
  <h2>为什么我们需要语义？</h2>
  <p>我们需要确保使用了正确的元素来给予内容正确的含
    义、作用以及外形。在这里，h1 元素也是一个语义元
    素，它所包裹的文本具有"页面上的顶级标题"的作
    用（或意义）。
    一般来说，浏览器会给它一个更大的字形来让它看上
    去像个标题。更重要的是，它的语义值将以多种方式
    被使用，比如通过上文提到过的搜索引擎和屏幕阅读
    器。</p>
</body>

</html>

语义化的好处

更清晰的代码结构
对搜索引擎更友好
更好的可访问性

5、强调与重要性标签、注释标签

5.1、强调与重要性标签

HTML也提供了相应的标签，使其具有加粗、倾斜、下划线等效果，来着重强调某些文字。

例如：

示例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>强调与重要性标签</title>
</head>

<body>
  <h2>有语义强调与重要性标签</h2>
  加粗： <strong>加粗文本</strong>
  <br>
  斜体： <em>斜体文本</em>
  <br>
  下划线： <ins>下划线文本</ins>
  <br>
  删除线： <del>删除线文本</del>
  <h2>无语义强调与重要性标签</h2>
  加粗： <b>加粗文本</b>
  <br>
  斜体： <i>斜体文本</i>
  <br>
  下划线： <u>下划线文本</u>
  <br>
  删除线： <s>删除线文本</s>
  
</body>

</html>

（<br>：换行）

5.1.1、有语义

复制代码

加粗： <strong>加粗文本</strong>
斜体： <em>斜体文本</em>
下划线： <ins>下划线文本</ins>
删除线： <del>删除线文本</del>

带有语义的推荐使用。（HTML标签的作用就是让内容具有语义）

5.1.2、无语义

复制代码

加粗： <b>加粗文本</b>
斜体： <i>斜体文本</i>
下划线： <u>下划线文本</u>
删除线： <s>删除线文本</s>

无语义不推荐使用。

5.2、注释标签

语法：

复制代码

<!-- 注释 -->

在HTML中，注释标签用于添加不会在浏览器中显示的注释或说明。（先选中要注释的内容，在按快捷键：ctrl + /）

6、块级元素和内联元素

在HTML中有两种元素类别：块级元素 和内联元素。分类不同决定着展示形式不一样。

块级元素

块级元素独占一行
它可以嵌套其他元素
常见的比如p、h、div等

内联元素

可以一行放多个，通常与文本一起使用
不能嵌套块级元素，可以嵌套其他内联元素
常见比如strong、em、a等

案例

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 块级元素 -->
  <h1>我是块级元素</h1>
  <p>我是块级元素<strong>666</strong></p>
  <!-- 行内元素（内联元素） -->
  <strong>我是行内元素</strong>
  <strong>我是行内元素</strong>
  <em>我是行内元素</em>
  <!-- 特殊情况 p内不能包含其他块级元素 -->
</body>

</html>

注意：

段落p标签内不要放其他块级元素，主要放文字相关，比如内联元素。
元素分类不是一直不可更改的，后面的css可以通过display改变他们显示模式。

7、图片标签

图片格式

jpeg/jpg：有压缩技术，放大缩小会变得模糊或有锯齿。适用场景：摄影照片、网页图片（非透明背景）。
png：无损压缩，支持透明度。适用场景：Logo、网页图形、需要透明度的图像。
gif：支持动画，最多256色（索引色）。支持简单动画和透明背景。适用场景：简单动画、表情包、低色彩图形。
webp：Google开发的现代格式。支持有损/无损压缩、透明度和动画。适用场景：网页优化（替代jpeg/png/gif）。
avif：基于AV1视频编码，支持高压缩率和HDR。压缩效率优于webp。适用场景：未来网页优化，需高性能压缩的场景。

语法

复制代码

<img src="" alt="">

单标签（空元素），默认包含两个属性：src 和 alt。
src属性：指向要插入到页面的图像地址（可以是本地地址和网址）。
alt属性：备选文本，用于在图片无法显示或者因为网速慢的情况下显示的文字。

案例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img src="https://b0.bdstatic.com//ugc/serverda7eeccf7f9621f4b444ab40850a61eb.jpeg@h_1280" alt="晚霞">
</body>

</html>

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img src="" alt="晚霞">
</body>

</html>

其他属性

width：设置图片宽度（建议css修改）
height：设置图片高度（建议css修改）
title：图像标题。鼠标悬停显示的文本

案例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img src="https://copyright.bdstatic.com/vcg/edit/9f9c43db337fe20a9a25af294abfdaec.jpg@h_1280" alt="动物" width="300px"
    title="动物">
  <br>
  <!-- 高度、宽度修改一个就行，剩下的等比例缩放 -->
  <img src="https://copyright.bdstatic.com/vcg/edit/9f9c43db337fe20a9a25af294abfdaec.jpg@h_1280" alt="动物" height="300px"
    title="动物">

</body>

</html>

属性总结

注意：

属性采用键值对 形式。属性 ="值"。
属性之间没有必要的先后顺序，但是属性之间必须有空格分割。

8、路径

在HTML中，路径用于指定文件（如图像、样式表或者其他网页）的位置,图片相对html文件的位置，html怎么找到图片。

相对路径 ：相对于当前文件位置的路径。图片相对于html文件的位置，html该怎么找到图片。
绝对路径：盘符路径 ，从根目录开始的完整路径，不用管html文件的位置，直接从根目录开始找图片，只适用于本地；网络路径，使用网络地址。

相对路径

同一级目录

语法：

直接写文件名即可（ . / 表示当前文件夹）

复制代码

<!-- 两种写法等效 -->
<img src="./1.webp" alt="" width="300px">
<img src="1.webp" alt="" width="300px">

下一级目录（重点）

"1.webp" 在图片这个文件夹中。

语法：

使用 "目录名/文件名"。

复制代码

<img src="图片/1.webp" alt="" width="300px">

上一级目录

"1.html"在代码这个文件夹中。

语法：

使用 " . . / " 返回上级目录。

复制代码

<img src="../1.webp" alt="" width="300px">

绝对路径

绝对路径是从根目录开始的完整路径，包含完整的URL地址。（了解即可）

复制代码

<!-- 1.盘符路径 -->
<!-- 不建议使用盘符路径，因为不同的电脑盘符路径不同 -->
<img src="D:\前端基础\H5\2.webp" alt="" width="300px">
<img src="D:/前端基础/H5/2.webp" alt="" width="300px">
<!-- 2.网络路径 -->
<img src="https://img2.baidu.com/it/u=122049414,4100514531&fm=253&app=138&f=JPEG?w=800&h=1455" alt="" width="300px">

9、视频标签和音频标签

作用是让网页更丰富，吸引用户。

视频标签

语法

复制代码

<video src=""></video>
<video src="video.mp4" width="600px" controls="controls"></video>
<!-- 当属性的键和值相同是可以简写 controls -->
<video src="video.mp4" width="600px" controls></video>

src属性：指向要插入到页面的视频地址。
controls属性：显示浏览器自带的播放控件。
width/height属性：设置视频的宽度和高度

视频标签的其他属性

autoplay：视频自动播放。
loop：视频循环播放。
muted：视频静音。
poster：视频预览图像（视频封面），填图片地址。

视频标签兼容性写法

浏览器可能不支持视频的某种格式，从而导致显示异常。

语法

复制代码

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.mp4" type="video/mp4">
    <source src="video.mp4" type="video/mp4">
    <p>您的浏览器不支持 HTML 5 video 标签，请升级浏览器或使用其他浏览器。</p>
</video>

将src属性放在几个单独的<source>元素当中，这些元素分别指向各自的资源。
浏览器会检查<source>元素，并且播放第一个于其自身相匹配的媒体。
每个<source>元素都含有type属性，浏览器也会通过检查这个属性来迅速跳过那些不支持的格式。如果没有添加type属性，浏览器会尝试加载每一个文件，直到一个能正确播放的格式，但是这样会消耗大量的时间和资源。

音频标签

语法

复制代码

<!-- 音频标签 -->
<!-- 音频标签不让自动播放 -->
<audio src="audio.mp3" controls></audio>

兼容性写法

复制代码

<!-- 兼容性写法 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
  <p>请升级您的浏览器或使用其他浏览器。</p>
</audio>

10、创建超链接

超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分。

语法

复制代码

<a href=""></a>
<a href="https://www.deepseek.com/">DeepSeek官网</a>

href属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。链接可以包含除了自身之外的其他元素，比如文字、标题、图片、视频等。

其他属性

titel属性：鼠标悬停的提示文字。
target属性：打开页面的方式："_self" 当前窗口打开， "_blank" 新窗口打开。

特殊链接

空链接：在HTML中，空链接通常指的是没有实际指向目标的超链接，符号是 "#"。
下载链接：如果是exe或者压缩包点击是下载。
邮件链接：某些简单场景或个人使用的情况下使用。流量大的情况下使用有风险。

音视频


百度
 deepseek

产品介绍

下载软件

联系我们

锚点链接

锚点链接允许用户在同一个页面内跳转到指定位置。非常适合长页面导航。

锚点链接滑动效果：

案例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 锚点链接与页面滑动效果</title>
  <style>
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>

<body>
  <nav>
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#section3">Section 3</a>
  </nav>

  <section id="section1">
    <h2>Section 1</h2>
    <p>这是第一个部分的内容。</p>
  </section>

  <section id="section2">
    <h2>Section 2</h2>
    <p>这是第二个部分的内容。</p>
  </section>

  <section id="section3">
    <h2>Section 3</h2>
    <p>这是第三个部分的内容。</p>
  </section>
</body>

</html>

11、布局标签

常见布局标签

网站结构标签：网页的外观多种多样，但是大概都包含页眉、导航栏、主内容、侧边栏、页脚等。
无语义标签：没有合适语义标签时，在进行一些布局时候可以选择 div 和span标签。
列表标签：HTML列表是网页内容组织的重要元素。可以让我们显示内容更加整齐有序。

网站结构标签

<header>，网页页眉（头部）。
<main>，网页内容，每个页面只能有一个。
<nav>，导航栏。
<article>，文章相关。
<section>，分块。
<aside>，侧边栏。
<footer>，页面页脚（底部）。

这些标签都是双标签 、块级元素，受浏览器兼容性问题影响（pc端），移动端则没有影响。

案例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>网页结构标签</h2>
  <header>网页头部标签</header>
  <nav>导航栏标签</nav>
  <main>
    <h3>网页主体标签</h3>
    <aside>侧边栏标签</aside>
    <article>主要内容区域标签</article>
    <section>内容区域标签</section>
  </main>
  <footer>网页底部标签</footer>
</body>

</html>

无语义标签

div标签

特点：

块级元素：默认占一行，前后会自动换行。
通常用于布局结构，作为其他元素的容器。
可以包含其他块级或行内元素。
默认没有语义。

span标签

特点：

行内元素：不会换行，仅包裹内容的一部分。
用于对文本或行内元素的局部样式或操作。
默认没有语义。

案例

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <h2>div和span标签</h2>
  <div>div标签：块级元素</div>
  <div>div标签：块级元素</div>
  <div>div标签：块级元素</div>
  <span>span标签：行内元素</span>
  <span>span标签：行内元素</span>
  <div>div标签：块级元素
    <span>span标签：行内元素</span>
    <span>span标签：行内元素</span>
  </div>
</body>

</html>

列表标签

分类：

无序列表（ul）：顺序无关紧要的列表。
有序列表（ol）：顺序有关紧要的列表。
描述列表（dl）：标记一组项目及相关描述。

无序列表

无序列表在我们布局中非常常用，常用于一些整齐对齐的模块中使用。

语法：

复制代码

<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

<ul>

定义列表的容器
只能包含 <li>元素

<li>

定义列表的选项
里面可以放其他html元素

有序列表

有序列表在我们布局中较少。了解即可，实际开发即使有顺序，我们一般也是用其他替代。

语法：

复制代码

<ol>
  <li>有序列表项1</li>
  <li>有序列表项2</li>
  <li>有序列表项3</li>
  <li>有序列表项4</li>
</ol>

<ol>

定义列表的容器
只能包含 <li>元素

<li>

定义列表的选项
里面可以放其他html元素

描述列表

描述列表在我们布局中主要是在页面底部。比如：

语法：

复制代码

<dl>
  <dt>描述项1</dt>
  <dd>描述项1的详细描述</dd>
  <dd>描述项1的详细描述</dd>
  <dd>描述项1的详细描述</dd>
  <dd>描述项1的详细描述</dd>
</dl>

<dl>

定义列表的容器
只能包含 <dt>和<dd>元素

<dt>

定义被描述的术语
通常显示为左对齐或加粗
一个<dt>可以对应多个<dd>

<dd>

包含术语的定义或描述
通常显示为缩进形式
可以包含段落、图片、链接等其他HTML元素

12、表格标签

表格作用：以结构化方式展示行列数据，使信息清晰、易读且便于对比。

网页场景：主要用于数据展示 或者后台管理系统的信息展示。

表格的组成

<table>：表格容器标签
<tr>：行标签
<td>：单元格标签
<th>：表头单元格

**注意：**美化表格是CSS的工作，所以这里千万不要花时间去美化表格，无意义。

案例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>表格标签基本语法</h2>
  <!-- border后期使用css来写，这里只是看效果 边框 -->
  <table border="1">
    <tr>
      <td>姓名</td>
      <td>年龄</td>
      <td>性别</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </table>
  <hr>
  <!-- th 表头单元格，可以让单元格中的内容加粗 水平和垂直居中 一般用于第一行或者第一列-->
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </table>
  <h2>表格结构标签</h2>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

表格结构标签

增强表格语义，让表格结构更加清晰。

<thead>：定义表格的头部区域
<tbody>：定义表格的主体内容
<tfoot>：定义表格的行末区域

案例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>表格结构标签</h2>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

合并单元格

表格开发中很少使用合并，因为会导致表格难以维护，且可能影响响应式适配（尤其在移动端）。如果特殊情况，可以借助于AI。

原理：

确定是跨行 (rowspan)还是跨列合并(colspan)
找到目标单元格（左上原则），写合并数量
删除多余单元格

案例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单表格合并示例</title>
</head>

<body>
  <table border="1">
    <!-- 表头 -->
    <tr>
      <!-- 合并两列 -->
      <th colspan="2">个人信息</th>
      <th>联系方式</th>
    </tr>
    <!-- 表格数据行 -->
    <tr>
      <td>姓名</td>
      <td>年龄</td>
      <td>电话</td>
    </tr>
    <tr>
      <!-- 合并两行 -->
      <td rowspan="2">张三</td>
      <td>25</td>
      <td>13800138000</td>
    </tr>
    <tr>
      <td>26（明年）</td>
      <td>无变化</td>
    </tr>
  </table>
</body>

</html>

13、表单标签

表单：是用于收集用户输入数据，并将数据提交到后端进行处理。场景：用户登录/注册、搜索框、联系表单、问卷调查、订单支付、文件上传等。

表单的核心标签有三部分组成：

表单容器<form>：定义表单的容器，包裹所有表单控件。默认包含action属性。
表单控件 ，包含 <input> 通用输入控件、<textarea> ：多行文本输入框**<select>** 下拉选择框、<button>：自定义按钮等。

辅助标签<label>：关联输入控件的文本标签，提升可访问性（点击标签可聚焦输入框）更好的提高表单的用户体验。

13.1、表单容器

form 标签，作用：定义表单的容器，包裹所有表单控件。

语法：

复制代码

<form action=""></form>

action 属性定义了在提交表单时，应该把所收集的数据送给谁（URL）去处理.目前我们还不涉及数据交互，所以这里暂且为空即可。

13.2、表单控件

input表单：通用输入控件，包含输入框、单选框、复选框等

textarea 表单：多行文本输入框

select下拉表单：下拉选择框
button按钮：自定义按钮

1、input表单

输入标签<input> 是最常用的表单元素之一，它可以创建文本输入框、密码框、单选框、复选框等。type 属性定义了输入框的类型。

text：单行文本框
password：密码框
radio：单选框
checkbox：复选框
file：文件域

单行文本框和密码框（text/password）

其他属性

placeholder：提示信息
name：元素的名称
maxlength：允许的最大字符数
accesskey：使元素获得焦点的快捷键
autocomplete：用于控制表单的自动填充行为，帮助浏览器决定是否根据用户历史输入自动填充字段值取值 on / off

单选框和复选框（radio/checkbox）

其他属性

name：表单名称实现分组
value：表单值
checked：是否默认选中

文件域 file

其他属性

accept：允许上传的文件类型
multiple：允许选择多个文件

2、textarea表单

<textarea> 元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景，例如评论或反馈表单。textarea 多行文本框也称为文本域。

语法：

复制代码

<textarea></textarea>

常见属性

name：表单名称
placeholder：提示信息
rows 文本行数，正整数，默认为2
cols 文本列数，正整数，默认20

文本域textarea利用CSS来设定样式，比如宽高边框等

3、select下拉表单

<select>元素表示一个提供选项菜单的控件。

语法：

复制代码

<select name="city" id="">
  <option value="0">北京</option>
  <option value="1">上海</option>
  <option value="2">广州</option>
  <!-- 默认值是深圳 -->
  <option value="3" selected>深圳</option>
</select>

<select> 元素是容器， <option>是每一个选项标签，每个选项要跟一个值

要想默认选中一个选项，可以添加selected属性。

因为select很难修改为好看的效果，大部分下拉列表可以通过其他标签模拟实现。

4、button按钮

<button> 标签定义一个按钮。元素内部可以放置内容，比如文本或图像。

语法：

复制代码

<button>搜索</button>
<button disabled>搜索</button>

disabled 属性可以禁用按钮，无法点击

13.3、辅助标签

<label>表示用户界面中某个元素的说明。提升可访问性（点击标签可聚焦输入框）。

两种使用方式：

方式一：利用for和id相关联

复制代码

<label for="nan"> 男 </label>
<input type="radio" id="nan" name="sex">

方式二：直接包含

复制代码

<label> 男
<input type="radio" name="sex">
</label>

案例

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单标签</title>
</head>

<body>
  <form action="">
    <!-- 1.单行文本框和密码框 -->
    <ul>
      <li>
        <label>
          账号：
          <input type="text" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off">
        </label>
      </li>
      <li>
        <label>
          密码：
          <input type="password" placeholder="请输入密码" name="password" maxlength="6">
        </label>
      </li>
      <!-- 2.单选框 复选框和文件域 -->
      <li>
        性别：
        <!-- label 方式1 for id 属性关联 -->
        <input type="radio" id="nv" name="gender" value="0" checked>
        <label for="nv">女</label>
        <input type="radio" id="nan" name="gender" value="1">
        <label for="nan">男</label>
      </li>
      <li>
        爱好：
        <!-- label 方式2  -->
        <label>
          <input type="checkbox" name="hobby" value="0"> 足球
        </label>
        <label>
          <input type="checkbox" name="hobby" value="1"> 篮球
        </label>
        <label>
          <input type="checkbox" name="hobby" value="2"> 跑步
        </label>
        <label>
          <input type="checkbox" name="hobby" value="3" checked> ikun
        </label>
      </li>
      <li>
        上传文件：
        <input type="file" name="file" multiple accept=".jpg,.png,.gif,.mp4,.avi,.mov">
      </li>
      <li>
        留言：
        <textarea name="msg" cols="30" rows="10" placeholder="请输入留言"></textarea>
      </li>
      <li>
        <select name="city" id="">
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3" selected>深圳</option>
        </select>
      </li>
    </ul>
    <button>登录</button>
  </form>
</body>

</html>

14、字符实体

字符实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。

常用于显示保留字符和不可见的字符（如"不换行空格"）。

案例：

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>特殊字符</h2>
  <p>
    &lt; 小于号
    &gt; 大于号
    &amp; 与号
    &copy; 版权符号
    &reg; 注册商标符号
    &trade; 商标符号
    &euro; 欧元符号
    &pound; 英镑符号
    &yen; 日元符号
    &cent; 分符号
    &times; 乘号
    &divide; 除号
    &nbsp; 空
    &nbsp;
    &nbsp;
    &nbsp; 格

  </p>
</body>

</html>

前端基础一、HTML5

1、HTML5语义结构

1.1、HTML介绍

1.2、标签语法

1.2.1、标签组成

1.2.2、标签分类

2、HTML文档框架组成

2.1、文档类型

2.2、<html>元素

2.3、<head>元素

2.3.1、字符集

2.3.2、移动端页面适配

2.3.3、<title>元素

2.4、<body>元素

3、标签关系

3.1、并列关系（兄弟关系）

概念

特点

示例

3.2、嵌套关系（父子关系）

概念

特点

示例

4、HTML的标题和段落标签

4.1、标题标签h

语法

4.2、段落标签p

语法

4.3、语义化

示例

5、强调与重要性标签、注释标签

5.1、强调与重要性标签

5.1.1、有语义

5.1.2、无语义

5.2、注释标签

6、块级元素和内联元素

块级元素

内联元素

案例

7、图片标签

图片格式

语法

其他属性

属性总结

8、路径

相对路径

同一级目录

下一级目录 （重点）

上一级目录

绝对路径

9、视频标签和音频标签

视频标签

语法

视频标签的其他属性

视频标签兼容性写法

音频标签

语法

兼容性写法

10、创建超链接

语法

其他属性

特殊链接

锚点链接

11、布局标签

网站结构标签

无语义标签

div标签

span标签

案例

列表标签

无序列表

有序列表

描述列表

12、表格标签

表格的组成

表格结构标签

合并单元格

13、表单标签

13.1、表单容器

13.2、表单控件

下一级目录（重点）

单选框和复选框（radio/checkbox）