Web基础认知
认识网页
Web标准中分成三个构成：
|
构成
|
语言
|
说明
|
|
结构
|
HTML
|
页面元素和内容
|
|
表现
|
CSS
|
网页元素的外观和位置等页面样式（如：颜色、大小等）
|
|
行为
|
JavaScript
|
网页模型的定义与页面交互的动态效果
|
HTML 定义
HTML (HyperText Markup Language)：超文本标记语言。
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
标记是什么？
标记也叫标签，带尖括号的文本
标签语法
标签的结构图：
结构说明：
①标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词(小写)或字母(小写)称为标签名
②常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容. 结束标签比开始标签多 /
③少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
HTML 基本骨架
- html标签：表示整个网页(网页的整体)
- head标签：表示网页头部，用来存放给浏览器看的信息，例如CSS
title标签：网页标题
- body标签：网页主体(网页的身体)，用来存放给用户看的信息，例如图片、文字
- title标签：网页的标题
标签的关系
父子关系（嵌套关系）:
子级标签换行且缩进（Tab键）
兄弟关系（并列关系）:
双标签（也称为容器标签）
双标签由一个开始标签和一个结束标签组成，两者之间可以包含内容。
当你需要在标签内部放置文本或其他元素时使用双标签。
<标签名>内容</标签名>
常用的一些双标签
标题标签：h1 ~ h6（双标签）
标题标签显示特点：• 文字加粗• 字号逐渐减小 ,并且从h1 → h6文字逐渐减小• 独占一行（换行）• 一共就6级
- h1 标签在一个网页中只能用一次， h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<div></div>
<div> 是一个功能强大但无语义的容器标签，主要用于布局和分组内容。用于对页面中的内容进行分组或划分区域。它本身没有任何语义化意义，只是一个“无语义”的块级元素。
- 默认情况下，
<div>是块级元素，会占据一整行（独占一行）。 - 它通常用来与其他 HTML 元素、CSS 或 JavaScript 配合使用，构建页面布局或实现动态交互。
- 将页面划分为不同的逻辑部分（如页眉、内容区、侧边栏、页脚等）。
- 包裹一组相关的元素，便于样式化（通过
class或id属性）。 - 实现复杂的布局（如网格布局、弹性布局等）。
<div> 的使用场景
- 创建复杂的页面布局（如网格系统、响应式设计）。
- 包裹一组相关的元素，便于样式化或操作。
- 作为 JavaScript 的目标元素，用于动态修改内容或样式。
//在这个例子中，<div> 用于将页面划分为三个主要部分：页眉、内容区和页脚。
<!-- 头布局 -->
<div class="header">
<h1>网站标题</h1>
</div>
<!-- 内容布局 -->
<div class="content">
<p>这是主要内容。 </p>
</div>
<!-- 内容布局 -->
<div class="container">
<div class="sidebar">侧边栏</div>
<div class="main-content">主要内容</div>
</div>
<!-- 脚布局 -->
<div class="footer">
<p>版权所有 © 2025</p>
</div>
文本格式化标签:
作用：为文本添加特殊格式，以突出重要性的强调语境。常见的文本格式：加粗、倾斜、下划线、删除线等。strong、ins、em、del标签，表示的强调语义更强烈！
1.加粗文本标签
<strong></strong> 标签：
加粗形式显示文本，但可以通过CSS修改其样式。
适用于需要突出显示重要内容的地方，比如警告信息、关键点等。它告诉搜索引擎这段文字比普通文本更为重要。具有更强的语义含义，表明内容的重要性或紧急性。
<b> </b> 标签:
只是简单地使文本变粗，并不赋予任何额外的重要性或强调意义。
<!-- “重要提示”不仅在视觉上被加粗显示，而且对于使用屏幕阅读器的用户来说，这部分内容会被特别强调读出。 -->
<p>这是一个包含<strong>重要提示</strong>的句子。</p>
<!-- “玫瑰花”只是视觉上被加粗显示，没有额外的语义强调，不会对屏幕阅读器用户产生特殊的强调效果。 -->
<p>这是一篇关于如何种植<b>玫瑰花</b>的文章。</p>
2.斜体文本标签：
<em> </em>标签:
不仅在视觉上将文本变为斜体，更重要的是传达了强调的信息。
<i> </i>标签:
<i>标签的原始用途:
- 语义：表示斜体文本（源自 "italic"），用于差异化展示（如技术术语、外语短语等）。只是简单地使文本变为斜体，并不赋予任何额外的强调意义
- 默认样式：浏览器会渲染为斜体（
font-style: italic）。- 示例：
<p>这是普通文本，<i>这是斜体文本</i>。</p>现代用法（HTML5 规范）
<i>标签的用途:HTML5 重新定义了
<i>的语义用途，不再单纯表示斜体，而是用于：
- 图标字体（如 Font Awesome）：通过
class关联图标。<head> <!-- 加载 Font Awesome 5 免费版 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> </head> <body> <i class="fas fa-user"></i> <!-- 应显示用户图标 --> </body>
- 语气或语境变化：表示不同语气（如讽刺、想法等）。
<p>她今天<i>居然</i>迟到了。</p>
注意事项:
语义化：如果仅需斜体效果，建议用
<em>（强调）或 CSS（font-style: italic）。图标场景：现代开发更推荐使用
<span>或专用元素（如<svg>），但<i>因简洁仍被广泛用于图标字体。
场景 推荐标签 原因 斜体文本 <em>或 CSS更语义化（ <em>表示强调）图标 <i>（图标字体）传统约定俗成，但需配合 class自定义图形 <span>或<svg>更灵活，无默认样式干扰
<!-- “非常重要”不仅在视觉上被斜体显示，而且对于使用屏幕阅读器的用户来说，这部分内容会被特别强调读出。 -->
<p>我确实认为这 <em>非常重要</em>。</p>
<!-- 强调“显著的”，突出说明该药物的效果非常突出。 -->
<p>根据最新研究，这种药物对治疗某些疾病的效果是<em>显著的</em>。</p>
<!-- “量子力学”只是视觉上被斜体显示，没有额外的语义强调，不会对屏幕阅读器用户产生特殊的强调效果。 -->
<p>这是一篇关于<i>量子力学</i>的文章。</p>
<!-- 使用 <i> 来标识书籍标题《活着》，这是一种传统的排版方式，但在语义上并不强调其重要性。 -->
<p>《<i>活着</i>》是中国作家余华的一部著名小说。</p>
<p>这是普通文本，<i>这是斜体文本</i>。</p>
3.带有下划线的文本标签:
<ins> </ins>标签:
不仅在视觉上添加了下划线，还传达了这部分内容是后来添加插入的或更新的，常用于记录文档的变更历史。
适用于需要标识文档中新增内容的场合，比如文章更新、合同修改等。可以与
<del>标签配合使用，后者用来标记被删除的内容。
可添加的属性:
datetime属性：指定插入的时间。cite：指向解释插入原因的文档链接。
<u> </u>标签:
只是简单地标记文本，使其具有下划线效果。视觉上的变化不赋予任何特殊的语义意义。不过，由于容易与超链接混淆，现代实践中较少直接使用
<u>标签。注意:HTML5规范建议避免仅为了装饰目的使用
<u>标签，因为下划线容易让用户误认为是超链接。
<!-- “这是2025年4月29日添加的更新。”不仅在视觉上被下划线显示，而且对于使用屏幕阅读器的用户来说，这部分内容会被特别强调为新增内容。 -->
<p>原始文本。<ins datetime="2025-04-29T15:31:00Z">这是2025年4月29日添加的更新。</ins></p>
<!-- “拼写错误”只是视觉上被下划线显示，没有额外的语义强调，不会对屏幕阅读器用户产生特殊的强调效果。 -->
<p>这个单词<u>拼写错误</u>应该修正。</p>
4.带有删除线（贯穿线）的文本标签:
<del></del> 标签:
不仅在视觉上添加了删除线，还传达了这部分内容是被移除或不再适用的信息。
适用于需要标识文档中被删除或不再有效的内容，比如文章修订、合同修改等。常与
<ins>标签配合使用，后者用来标记新增加的内容。可添加的属性:
datetime：指定删除的时间。cite：指向解释删除原因的文档链接。
<s> </s>标签:
只是简单地标记文本，使其具有删除线效果。视觉上不赋予任何特殊的语义意义。例如价格过时、产品下架等特殊情况。
注意:HTML5规范建议避免仅为了装饰目的使用
<s>标签，因为删除线容易让用户误认为内容不再有效。
<!-- “这是已被删除的内容。”不仅在视觉上被删除线显示，而且对于使用屏幕阅读器的用户来说，这部分内容会被特别强调为已删除内容。 -->
<p>原始文本。<del datetime="2025-04-29T15:31:00Z">这是已被删除的内容。</del></p>
<!-- 使用 <del> 来标记“100元”，明确指出这是之前的定价，现在已经不再适用。 -->
<p>我们之前的价格是<del>100元</del>，现在调整为80元。</p>
<!-- “100元”只是视觉上被删除线显示，没有额外的语义强调，不会对屏幕阅读器用户产生特殊的强调效果。 -->
<p>这款商品原价<s>100元</s>，现在特价80元。</p>
<!-- 使用 <s> 来标识“已下架”，主要是为了告知用户该信息已经不再相关或有效。 -->
<p>这款手机<s>已下架</s>，请查看我们的新款机型。</p>
<p></p>:段落标签
<p></p>:段落标签，适合展示文本内容。 一般用在新闻段落、文章段落、产品描述信息等等。在新闻和文章的页面中，用于分段显示.
段落之间存在间隙，会独自占据一整行。- 它主要用于表示文本内容中的段落，适合展示大段文字。
- 浏览器会自动在段落之间添加垂直间距（即段落之间的空白）。 段落之间存在间隙.
<p> 标签的 class 属性:
<p>标签的class属性用于指定一个或多个类名（class names），这些类名可以用来标识特定的样式规则、JavaScript 操作或其他 HTML 特性。通过class属性，你可以对一组元素应用相同的样式或行为，而不需要为每个元素单独定义样式。css文件 可以通过
.classname选择器引用这些类名，从而对相应元素应用特定的样式。
class属性的作用
- 样式应用：最常见的是与 CSS 结合使用，通过
.classname选择器来为具有相同类名的所有元素应用一致的样式。- JavaScript 操作：可以通过 JavaScript 或者 jQuery 等库根据类名来选择和操作页面上的元素。
- 语义化标记：有助于提高代码的可读性和维护性，通过有意义的类名来描述元素的角色或用途。
案例1: class 属性="1个类名"
在html文件中,
<p>标签表示这是一个段落。
属性class="intro"定义了一个名为intro的类，这个类可以被 CSS 或 JavaScript 使用。
<p class="intro">这是一个使用 CSS 样式的段落。</p>
定义一个外部
styles.css文件 ，其中包含以下样式规则：这表示所有带有
class="intro"的<p>元素将应用上述样式规则，即字体大小为 18 像素且颜色为绿色。
/*
给带有intro 类的段落添加样式
*/
.intro {
font-size: 18px;
color: green;
font-weight: bold;
}
案例2: class 属性="多个类名"
你还可以为单个元素p标签指定多个类名(intro important)，只需在
class属性值中用空格分隔各个类名即可。
<p class="intro important">这是一个重要的介绍段落。</p>
在css文件中,该段落会同时应用
.intro和.important类所定义的所有样式规则。那么这段文本将会是绿色、加粗并且带有下划线的文字。
/* 自定义类样式
给带有 intro 类的段落添加样式
*/
.intro {
font-size: 18px;
color: green;
}
/* 自定义类样式
给带有 important 类的段落添加样式
*/
.important {
font-weight: bold;
text-decoration: underline;
}
<p> 的使用场景：
- 编写文章、博客、新闻等内容中的段落。
- 在页面中展示多段文字信息。
- 与标题标签（如
<h1>,<h2>等）配合使用，形成清晰的内容结构。
<h1>欢迎来到我的网站</h1>
<p>这是一个段落，介绍我的网站内容。</p>
<p>这是另一个段落，详细说明网站的功能。</p>
<h2>关于我</h2>
<p>我是开发者，喜欢编写代码。</p>
<p>我擅长前端开发和后端架构设计。</p>
<a></a>:超链接标签
<a>标签是 HTML 中非常重要的一个标签，用于创建超链接（Hyperlink）。它的全称是 "anchor"（锚点），主要用于在网页之间、页面内部或外部资源之间建立连接。通过<a>标签，用户可以点击链接跳转到其他页面、下载文件、发送邮件等。
场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、锚链接
代码：
特点:
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
<a> 标签添加核心属性 href用途:
<a>标签添加属性href,href指定了链接的目标地址。点击跳转到其他页面。
<a href="目标地址">链接文本</a>
外部链接： <a href="https://www.baidu.com">跳转到百度</a>
内部链接： <a href="./目标网页.html">本地网页</a>
href属性指定了链接的目标地址 可以是：①
href属性链接目标地址-->URL：指向其他网页的URL地址。②
href属性链接目标地址--> 相对路径：指向当前网站中的其他页面或资源。③
href属性链接目标地址-->锚点：指向页面内的某个位置（通过id定位）。④
href属性链接目标地址-->链接到文件的路径,点击下载文件⑤
href属性链接目标地址-->特殊协议：如mailto:（发送邮件）、tel:（拨打电话）等。⑥
href属性链接目标地址--># 表示空链接，页面不会跳转，在当前页面刷新一次。
(1) href属性链接目标地址-->URL：指向其他网页的URL地址。
<!-- 外部链接 -->
<p>访问:<a href="https://www.baidu.com">百度</a> (默认在当前窗口/标签页中打开)</p>
<!-- 外部链接 -->
<p>访问 <a href="https://www.baidu.com" target="_blank">百度</a>(在新窗口/标签页中打开)</p>
(2) href属性链接目标地址--> 相对路径：指向当前网站中的其他页面或资源。
<!-- 相对路径 -->
<a href="/about">关于我们</a>
<br>
<a href="./contact.html">联系我们</a>
(3)href属性链接目标地址-->锚点：指向页面内的某个位置（通过 id 定位）。
<a>标签添加核心
href属性,使用href的锚点功能，可以通过#加上目标元素的id来实现。
<!-- 内部锚点 -->
<!-- 页面顶部 -->
<h2 id="section1">第一部分</h2>
<p>这是第一部分内容。</p>
<!-- 页面底部 -->
<a href="#section1">返回第一部分</a>
(4) href属性链接目标地址-->链接到文件的路径,点击下载文件
通过链接到文件的路径，用户点击后可以下载文件。
<!-- 文件下载 -->
<!-- 不能独占一行 -->
<a href="example.pdf" download>下载PDF文件</a>
<!-- 独占一行 -->
<p><a href="example.pdf" download>下载PDF文件</a></p>
<!-- 独占一行 -->
<p>资源: <a href="example.pdf" download>下载PDF文件</a></p>
(5) href属性链接目标地址-->特殊协议：如 mailto:（发送邮件）
使用
mailto:协议，用户点击后会打开默认的邮件客户端。
<!-- 发送邮件 -->
<!-- 不能独占一行 -->
<a href="mailto:example@example.com">联系我们1</a>
<!-- 不能独占一行 -->
<a href="mailto:example@example.com">联系我们2</a>
<!-- 独占一行 -->
<p>联系我们: <a href="mailto:example@example.com">740701076@qq.com</a></p>
(6) href属性链接目标地址-->特殊协议：如 tel:（拨打电话）
在移动端设备上，使用
tel:协议可以拨打电话。
<!-- 拨打电话 -->
<p>拨打电话: <a href="tel:+1234567890">123-456-7890</a></p>
(7)href属性链接目标地址--># 表示空链接，页面不会跳转，在当前页面刷新一次。
点击之后回到网页顶部
开发中不确定该链接最终跳转位置，用空链接占个位置
<!-- 空链接 -->
<p>空链接: <a href="#">www.baidu.com</a></p>
以下是一个综合示例，展示了 <a> 标签的各种用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a标签的使用</title>
</head>
<body>
<h1>超链接示例</h1>
<!-- 外部链接 -->
<p>访问:<a href="https://www.baidu.com">百度</a> (默认在当前窗口/标签页中打开)</p>
<!-- 外部链接 -->
<p>访问 <a href="https://www.baidu.com" target="_blank">百度</a>(在新窗口/标签页中打开)</p>
<!-- 相对路径 -->
<a href="/about">关于我们</a>
<br>
<a href="./contact.html">联系我们</a>
<!-- 内部锚点 -->
<!-- 页面顶部 -->
<h2 id="section1">第一部分</h2>
<p>这是第一部分内容。</p>
<!-- 页面底部 -->
<a href="#section1">返回第一部分</a>
<!-- 文件下载 -->
<!-- 不能独占一行 -->
<a href="example.pdf" download>下载PDF文件</a>
<!-- 独占一行 -->
<p><a href="example.pdf" download>下载PDF文件</a></p>
<!-- 独占一行 -->
<p>资源: <a href="example.pdf" download>下载PDF文件</a></p>
<!-- 发送邮件 -->
<!-- 不能独占一行 -->
<a href="mailto:example@example.com">联系我们1</a>
<!-- 不能独占一行 -->
<a href="mailto:example@example.com">联系我们2</a>
<!-- 独占一行 -->
<p>联系我们: <a href="mailto:example@example.com">740701076@qq.com</a></p>
<!-- 拨打电话 -->
<p>拨打电话: <a href="tel:+1234567890">123-456-7890</a></p>
<!-- 空链接 -->
<p>空链接: <a href="#">www.baidu.com</a></p>
</body>
</html>
<a> 标签添加属性 target 用途:
<a>标签 添加target属性, 指定链接目标网页打开的方式。
-
_self：（默认值）链接目标网页默认在当前窗口/标签页中打开(覆盖原网页) _blank：链接目标网页在新窗口/标签页中打开(保留原网页)。_parent：在父框架中打开（如果存在）。_top：在整个窗口中打开（忽略框架）。
<p>访问:<a href="https://www.baidu.com">百度</a> (默认在当前窗口/标签页中打开)</p>
<!-- 外部链接 -->
<p>访问 <a href="https://www.baidu.com" target="_blank">百度</a>(在新窗口/标签页中打开)</p>
<a> 标签添加属性 download 用途:
提示浏览器下载链接的资源，而不是导航到该资源。
<!-- 文件下载 -->
<!-- 不能独占一行 -->
<a href="example.pdf" download>下载PDF文件</a>
<!-- 独占一行 -->
<p><a href="example.pdf" download>下载PDF文件</a></p>
<!-- 独占一行 -->
<p>资源: <a href="example.pdf" download>下载PDF文件</a></p>
<a> 标签添加属性 title 用途:
为链接添加额外的说明信息，当用户悬停在链接上时会显示。
<!-- title属性 -->
<a href="https://www.example.com" title="更多详情...">嘻嘻</a>
<div class="container" id="main" title="这是主容器">哈哈</div>
<div style="color: blue; font-size: 20px;" title="字体样式" >蓝色大号字体。</div>
<a> 标签添加属性 rel用途:
定义链接与目标资源之间的关系，常用于 SEO 或安全性设置。例如：
noopener：防止新窗口获取对当前窗口的访问权限。nofollow：告诉搜索引擎不要跟踪该链接。
<!-- rel属性 -->
<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">安全链接</a>
<audio ></audio>音频标签:
在页面中插入音频
音频标签常见属性：
src(必须属性): 音频URL 支持 MP3 Ogg Wav
controls属性: 显示音频控制面板
loop属性: 循环播放
autoplay属性: 自动播放。 为了提升用户体验 浏览器一般会禁用自动播放功能
<!-- 当前html文件引用 当前目录里的一个子目录(子文件夹)media的资源文件music 可省略 ./ -->
<p><audio src="./media/music.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio> </p>
<!-- 当前html文件引用 当前目录里的一个子目录(子文件夹)media的资源文件"周杰伦 - 夜曲"" 可省略 ./ -->
<p><audio src="media/周杰伦 - 夜曲.mp3" autoplay controls loop></audio> </p>
</body>
<video></video>视频标签
在页面中插入视频
<videosrc="视频的URL"></video>
视频标签常见属性：
src(必须属性): 视频URL 支持 MP4 Ogg WebM
controls属性: 显示视频控制面板
loop属性: 循环播放
muted属性: 静音播放
autoplay属性: 自动播放。 为了提升用户体验 浏览器支持在静音状态下自动播放
(google浏览器中需要配合muted属性实现静音播放)
<!-- 谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted -->
<p> <video src="./video.mp4" controls autoplay muted loop></video></p>
单标签（也称为空标签）
单标签没有结束标签，因为它不包裹任何内容。有些单标签可能具有属性但不包含文本内容。
注意： 在XHTML或更严格的HTML文档中，单标签需要以
/>结尾，如<img />、<br />等。但在HTML5中，这种做法更多是出于习惯，并不是强制要求。
<标签名 />
<标签名>
常用的一些单标签：
常见的单标签包括
<img>（插入图片）、<br>（换行）、<input>（输入框）、<hr>（水平线）等：
<img src="image.jpg" alt="描述">
<br>
<input type="text" name="username">
<hr>
<br>:换行单标签
场景：让文字强制换行显示
- <br>单标签
- 让文字强制换行
<body>
第一行内容
<br>
第二行内容
</body>
<hr>:水平线单标签
分割不同主题内容的水平线
- <hr>单标签
- 在页面中显示一条水平线
<img>:图像标签
在网页中插入图片。
<img>标签的必须属性:src
- src指定目标图像的位置路径和名称
<img>标签的alt属性:
- 当图片加载失败时，才显示alt的文本
- 当图片加载成功时，不会显示alt的文本
<img>标签的title属性:
- 提示文本,鼠标悬停在图片上时显示提示文本
- 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
<img>标签的width height属性:
- 图片的宽高数值 没有单位
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
- 如果同时设置了width和height两个，若设置不当此时图片可能会变形
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性名="属性值"
- 属性之间没有顺序之分
- 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
<!-- 如果图片加载失败 显示alt文本显示 -->
<p><img src="./imgs/pig.jpg" alt="图片加载失败或图片不存在"></p>
<!-- 如果图片加载显示成功 alt文本不显示 -->
<p> <img src="./imgs/dog.jpg" alt="图片加载失败或图片不存在"></p>
<p> <img src="./imgs/dog.jpg" alt="图片加载失败或图片不存在" title="这是一张ai生成的小狗图片" width="150" height="150" > </p>
object-fit 属性介绍
object-fit定义:通过指定
object-fit的值，用于控制替换元素（如<img><video>）的内容的宽高尺寸是应该被填充、裁剪还是缩放以适应其容器。这对于保持图像比例或强制它们填充特定区域而不失真非常有用。
object-fit主要作用:
就是让图片或视频等替换元素，在指定宽高的容器中，按照你希望的方式去适应容器，而不是简单粗暴地让替换元素拉伸变形。
- 保持图像比例：在响应式设计中，当图像被放入具有固定尺寸的容器时，
object-fit可以帮助确保图像不失真。- 控制溢出内容：决定是裁剪、缩放还是填充超出容器的内容。
object-fit的应用场景:由于替换元素的内容不受CSS直接控制，因此使用
object-fit可以有效地管理这些元素如何适应其容器的尺寸。这对于确保图像、视频等媒体在响应式设计中不失真地缩放特别有用。例如，在固定宽高的容器中放置一张图片时，通过设置object-fit: cover;可以让图片按比例缩放并裁剪以覆盖整个容器，同时保持图片的宽高比不变。这为网页设计师提供了强大的工具来优化页面布局，尤其是在处理多媒体内容时。替换元素不设置 object-fit属性,会有什么问题吗：
- 直接拉伸内容以填满容器
- 不保持原始比例
- 可能导致图片变形
- 图像可能失真
- 内容可能会超出或留白
- 对响应式布局支持差
替换元素的默认“显示方式”:
比如一张图片(替换元素)本身的尺寸是 600x400（比例 3:2），但你强制把图片显示在 200x100（比例 2:1）容器里，那么图片就会被拉伸变形填充整个容器。这就是替换元素的默认的“显示方式”。
注意:
object-fit属性 只能用于“替换元素” ，这些元素的内容由外部资源决定，而不是由 CSS 控制。- 当替换元素(img video)没有显式设置 object-fit 属性时，默认行为等同于 object-fit: fill。
object-fit的属性值:
|
| 功能 | 使用后效果 | 是否保持宽高比例 | 是否可能裁剪 | 是否可能留白 |
|
没有添加 | 当替换元素(img video)没有显式设置 object-fit 属性时，默认行为等同于 object-fit: fill。 导致图像失真或变形，因为它的比例不再保持原样。 | ||||
fill（默认值） |
媒体内容(图像)的宽高尺寸将会拉伸变形以完全填满整个容器 ，可能会改变原始的宽高比。 |
媒体内容(图像)强制拉伸填充容器 | ❌ 否 | ❌ 否 | ❌ 否 |
| 导致图像失真或变形，因为它的比例不再保持原样。 | |||||
contain |
❶ 媒体内容(图像)按比例缩放，以适应容器，完整显示在容器内 保持原始宽高比例， ❷媒体内容(图像)可能会无法填充满容器 可能会在容器内留有空白空间。 |
媒体内容(图像)按比例缩放，完整显示在容器里 | ✅ 是 | ❌ 否 | ✅ 是 |
|
|
❶媒体内容(图像) 按宽高比例缩放调整大小 直到宽度或高度与容器匹配为止，填充满整个容器 不会拉伸变形 ❷但媒体内容(图像)部分内容可能会被裁剪掉， 显示不全 以保持原始宽高比。
|
媒体内容(图像)按比例缩放，完全覆盖填充满整个容器，超出部分隐藏(裁剪) | ✅ 是 | ✅ 是 | ❌ 否 |
none |
❶在容器里 媒体内容(图像) 不缩放大小，不会调整自己的尺寸大小,以其原始宽高尺寸显示， ❷图像将不会根据容器大小 调整大小， 可能导致图像超出容器边界。 |
❶如果图像的原始宽高尺寸大于容器，则部分图像可能会超出容器边界； | ✅ 是 | ✅ 是（如果原图大于容器） | ✅ 是（如果原图小于容器） |
scale-down |
类似于 图像选择不缩放或按比例缩小到最小尺寸 |
当不确定是使用原始尺寸还是包含模式更适合时。 | ✅ 是 | 视情况而定 | 视情况而定 |
替换元素
替换元素指的是其内容不由CSS控制，而是由外部资源决定的HTML元素。换句话说，替换元素的内容不是通过DOM树中的文本或子元素来定义的，而是由外部资源（如图像文件、视频文件等）或浏览器内置的方式呈现。
特点
- 内容来源：替换元素的内容来源于外部资源(网络 服务器)而非HTML文档本身。
- 尺寸和外观：它们的显示形式通常依赖于外部资源本身的特性，例如图片的实际大小、视频的播放控件等。
- 不可直接修改内部结构：对于这些元素，你不能像操作普通HTML元素那样去改变它们内部的结构或者样式（比如在
<img>标签内添加文本）。常见的替换元素包括：
<img>: 显示图像文件。<video>和<audio>: 分别用于嵌入视频和音频文件。<iframe>: 内嵌另一个HTML文档。<object>和<embed>: 用于嵌入各种类型的外部应用或交互式内容（如Flash、PDF等）。- 表单元素：
<input type="image">: 图像按钮。<textarea>: 多行文本输入框。<input>: 各种类型的表单输入控件（文本框、复选框、单选按钮等）。<canvas>: 虽然它可以通过JavaScript绘制图形，但在默认情况下也被视为替换元素，因为它最终显示的内容是由脚本生成而非HTML文档中直接定义的。非替换元素 vs 替换元素
- 非替换元素（如
<div>,<p>,<span>等）的内容是完全由HTML文档定义，并且可以通过CSS进行详细的样式调整。- 替换元素则不然，它们的行为更多地受到所引用资源特性的限制。例如，你不能直接给一个
<img>标签内的内容设置字体颜色，因为它的内容实际上是一个外部图像文件，而不是HTML文本。替换元素的常见问题与缺陷 及解决方案
问题 描述 解决方案 尺寸控制困难 替换元素的默认尺寸通常由外部资源决定（例如图片的实际大小），这可能导致布局上的不一致或溢出。 使用CSS明确设置宽度和高度（如
width,height属性）来确保替换元素适应设计要求。使用
object-fit属性来更好地控制如何调整替换元素以适应指定的宽高。响应式问题 在不同设备上，特别是屏幕尺寸变化时，替换元素可能无法良好地适应新的布局需求，导致显示失真或内容不可见。 应用响应式设计原则，比如使用百分比宽度、
max-width: 100%等技术来确保图像或其他媒体能够根据容器大小自动调整。对于视频等媒体，可以考虑使用媒体查询来提供不同分辨率的资源。
性能影响 如果替换元素包含大量的数据（例如高清图片或长视频），可能会导致页面加载时间延长，影响用户体验。 使用适当的格式和压缩技术减少文件大小而不显著降低质量。
实施懒加载策略，即仅当用户滚动到相关内容时才加载相应的资源。
交互性和可访问性挑战 某些替换元素（如嵌入的对象或iframe内的内容）可能难以通过标准的HTML/CSS进行样式化或增强交互性，并且可能对辅助技术的支持不够友好。 提供替代文本（alt属性）和其他形式的描述，帮助屏幕阅读器用户理解内容。
对于复杂的交互，考虑使用JavaScript增强功能的同时确保基本的功能可用性。
浏览器兼容性 虽然现代浏览器对替换元素的支持已经相当成熟，但在一些旧版浏览器中仍可能存在兼容性问题。 进行广泛的跨浏览器测试。
使用Polyfill或其他兼容性库来弥补不足。
将一张 1125x435 像素的图片放入 345x92 像素的容器里 使用不同的 object-fit 值看看图片的适配情况案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container {
width: 92vw;
height: 24.4vw;
background-color: pink;
}
.noaddfit img {
width: 100%;
height: 100%;
/* img 没有添加object-fit属性 默认行为等同于 object-fit: fill。 */
}
.fill img{
width: 100%;
height: 100%;
object-fit: fill; /* object-fit: fill;默认值 图像会拉伸变形以完全填充容器，失去原始比例。 */
}
.contain img {
width: 100%;
height: 100%;
object-fit: contain; /* 媒体内容(图像)按比例缩放，完整显示在容器内 保持原始比例， 媒体内容(图像)可能会无法填充满容器 可能会在容器内留有空白空间。 */
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover; /* 媒体内容(图像) 按比例缩放 填充满整个容器 不会拉升变形 保持原始比例， 媒体内容(图像)可能会被裁剪 显示不全 */
}
.none img {
width: 100%;
height: 100%;
object-fit: none; /* 媒体内容(图像) 以其原始尺寸显示， 不缩放大小；图像将不会根据容器调整大小， 可能导致图像超出容器边界。 */
}
.scale-down img {
width: 100%;
height: 100%;
object-fit: scale-down; /* 如果原始尺寸小于容器，则显示原始尺寸；否则，效果类似于 contain。*/
}
</style>
</head>
<body>
<h3> 没有添加object-fit属性</h3>
<div class="container noaddfit">
<img src="../imgs/banner01.jpeg" alt="没有添加object-fit属性" >
</div>
<h3>object-fit: fill;默认值</h3>
<div class="container fill">
<img src="../imgs/banner01.jpeg" alt="fill" >
</div>
<h3>object-fit: contain;</h3>
<div class="container contain">
<img src="../imgs/banner01.jpeg" alt="contain" >
</div>
<h3>object-fit: cover;</h3>
<div class="container cover">
<img src="../imgs/banner01.jpeg" alt="cover" >
</div>
<h3>object-fit: none;</h3>
<div class="container none">
<img src="../imgs/banner01.jpeg" alt="none">
</div>
<h3>object-fit: scale-down;</h3>
<div class="container scale-down">
<img src="../imgs/banner01.jpeg" alt="scale-down" >
</div>
</body>
</html>
路径
路径指的是查找文件时，从起点到终点经历的路线。
路径分类：
本地路径:
本地路径通常指的是直接在本地文件系统中使用的路径，主要用于开发和测试环境。这类路径可以直接指向本地磁盘上的文件。
- 仅适用于本地环境，不能直接用于在线发布的网站。
- 使用本地路径不利于代码的可移植性，因为路径依赖于具体的机器配置。
示例：
- Windows系统
<!-- 当前文件 引用本地路径的资源文件logo -->
<p><img src="file:///E:\Android\my\myHtml\myHtmlProject\imgs\logo.png" alt="引用本地路径的资源文件logo"> </p>
- Unix/Linux/MacOS系统：
<img src="file:///home/user/projects/mywebsite/images/logo.png" alt="Logo">
相对路径：
概念普及：
当前文件：当前的html网页
目标文件：要引用找到的图片/文件
定义:
相对路径： 相对于从 当前 HTML文件所在的目录位置 出发查找 目标资源文件的路径
(这意味着它依赖于当前文件所在的目录位置，而不是从系统的根目录或某个固定的起点开始计算。)
相对路径中的“相对”，指的是当前HTML文件所在的目录位置。
当你在 HTML 文件中使用相对路径（如
images/logo.png或../css/style.css）时，浏览器会根据这个 HTML 文件所在的位置，去查找你要引用的资源。
- “相对路径” ≠ 从硬盘根目录开始找文件
- “相对路径” ≠ 从网站服务器根目录开始找文件
- “相对路径”: 指相对于从 当前 HTML文件所在的目录位置 出发查找 目标资源文件的路径
相对路径分类：
相对路径-同级目录： ./
同级目录：当前html文件和目标文件在同一目录中.
类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）
生活中：两个人独处一室，我想找你，直接喊名字即可！
代码步骤：同级目录：直接写：直接写目标文件的名字即可
(VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！)
方法一：<imgsrc="目标图片.gif"> 方法二：<imgsrc="./目标图片.gif">相对路径-下级目录: 子文件夹名/
下级目录：目标文件在下级目录(子文件夹)中
类似于：
我在大厅，你累了去卧室休息了，我现在要找到你！
①先知道你去了哪一个房间→ 房间名：卧室
②进入这个房间→ 进入
③此时又独处一室→ 直接喊你名字
代码步骤：下级目录：直接写：子文件夹名/目标文件名字
①先知道在哪个文件夹里面→ 文件夹名字
②进入这个文件夹→ /
③此时看到目标文件直接喊她→ 直接写目标文件名字
(VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！)
相对路径-上级目录: ../
上级目录：目标文件在上级目录中
类似于：
乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！
①先要出卧室，来到大厅→ 出去
②此时又独处一室(大厅)→ 直接喊你名字
代码步骤： 上级目录：直接下：../目标文件名字
①先出当前文件夹，到上一级目录→ ../
②此时看到目标文件直接喊她→ 直接写目标文件
(VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可！)
| 符号 | 含义 | 示例 |
|
./ (同级目录) |
./当前文件 引用 当前目录里的资源文件 (当前html文件所在的位置与所需要引用资源文件位置在同级目录下 可直接引用省略了./) |
|
|
子文件夹名/ (下级目录) |
进入指定的某个子文件夹 (需要引用的资源文件 位于当前HTML文件所在目录里的一个子目录中， 则需要指定子目录名。) |
|
|
../ (上级目录) |
../表示返回到上一级(父级)目录中去寻找资源 (需要引用资源文件位于当前HTML文件所在目录的上一级父目录中， |
../imgs/logo.png 通过../返回到上一级父目录, 然后在进入到 imgs 文件夹中的找到需要引用的资源图片logo.png 文件
../logo.png 通过../返回到上一级父目录, 直接在父目录myHtmlProject中找到需要引用的资源图片logo.png 文件(不是在imgs 文件夹中找)
|
相对路径示例:
项目目录结构:
project/
├── index.html
├── about.html
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/
│ └── logo.png
│
└── pages/
│ ├── contact.html
│ └── blog/
│ └── post.html
│
│
└── assets/
├── css/
│ └── style.css
└── images/
└── logo.png
示例10：当前文件为 index.html，想要引用 style.css
- 相对路径：可以写作
assets/css/style.css或者更明确地写作./assets/css/style.css。- 解释：从
index.html所在的目录project/出发，先进入assets文件夹，再进入css文件夹找到style.css文件。
<img src="./assets/css/style.css">
示例11：当前文件为 index.html，想要引用 logo.png
- 相对路径：可以写作
assets/images/logo.png或者./assets/images/logo.png。- 解释：同样是从
index.html文件 所在的目录project/出发，通过assets/images/路径找到logo.png文件。
<img src="./assets/images/logo.png">
示例12：在 assets/css/style.css 文件中想要引用 logo.png文件
- 相对路径：可以写作
../images/logo.png。- 解释：这里我们从
css文件夹通过../返回到上一级目录（即assets文件夹），然后再进入images文件夹找到logo.png文件。
<img src=" ../images/logo.png">
示例13：在 index.html 文件中引用 logo.png
因为 index.html 在项目的根目录下，所以它会去根目录下的 images/ 文件夹找图片logo
<img src="images/logo.png">
示例14：在contact.html 文件中引用 logo.png
- 当前文件
contact.html位置：pages/contact.html- 要引用资源logo相对路径：
images/logo.png- 使用 "../" 返回上一级目录（即 project 根目录） 找到
images/logo.png成功！
<img src="../images/logo.png">
图解：
project/
├── [images/]
│ └── logo.png
│
├── pages/
│ └── contact.html ← 当前文件在这里
│ ↑
│ └──── 使用 "../" 返回上一级目录（即 project 根目录）
│
└── ...
示例15：在about.html文件中 引用 main.js
- 当前文件
about.html的位置：about.html- 要引用
main.js文件相对路径位置：js/main.jsabout.html和js/同在根目录project里，可以直接在根目录project里js/main.js文件
<script src="js/main.js"></script>
图解：
project/
├── about.html ← 当前文件在这里
│ ↓
│ "js/main.js" 直接从根目录下找
├── [js/]
│ └── main.js ← 找到了！
│
└── ...
示例21：在 about.html文件中 引用 logo.png
about.html 也在根目录下，所以也能找到根目录下的 images/ 文件夹里的图片logo
<img src="images/logo.png">
示例22：在post.html文件中 引用 style.css
- 当前文件
post.html所在位置：pages/blog/post.html- 要引用
style.css文件的相对路径：css/style.css- 在"blog/" 文件夹,第一次 "../" 返回到上一级目录 "pages/"
- 第二次 "../" 返回到 project 根目录。
- 然后进入 [css/] 文件夹找到 style.css 成功找到 style.css文件！
<link rel="stylesheet" href="../../css/style.css">
图解：
project/
├── [css/]
│ └── style.css
│
├── pages/
│ └── blog/
│ └── post.html ← 当前文件在这里
│ ↑
│ └──── 在"blog/" 文件夹,第一次 "../" 返回到上一级目录 "pages/"
│ ↑
│ └──── 第二次 "../" 返回到 project 根目录
│ ↓
│ 然后进入 [css/] 文件夹找到 style.css
│
└── ...
示例3：现在我们将 about.html 移动到一个新的 pages/ 文件夹中：
project/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── main.js
├── images/
│ └── logo.png
└── pages/
└── about.html
在 about.html 文件中<img src="images/logo.png">
错误！因为现在 about.html 在 pages/ 目录下，它会去 pages/images/logo.png 找图片(不存在)，但图片实际在上层目录的 images/ 文件夹里。
<img src="images/logo.png">
正确。../ 表示返回上一级目录，也就是回到项目的根目录，那里才有 images/ 文件夹。
<img src="../images/logo.png">
绝对路径：
本地文件系统的绝对路径:
在操作系统（如 Windows、Mac、Linux）中：
本地文件系统的绝对路径：
指的是文件在本地计算机上的确切位置.
是指从 盘符 （如 C:\）或 磁盘根目录 出发开始查找的完整路径的目标本地文件。(它表示的是一个文件在计算机上的物理位置).
Windows电脑从盘符出发查找
Mac电脑从根目录（/）出发查找Windows默认是\，其他系统是/，建议统一写为/
示例:Windows系统本地文件的绝对路径：
盘符C:\开头：C:\Users\Tom\Desktop\project\index.html
盘符D:\开头：D:\day01\images\1.jpg
盘符E:\开头：E:\Android\my\myHtml\myHtmlProject\imgs\dog.jpg
<img src="file:///C:/Users/YourUsername/Pictures/logo.png" alt="Logo">
<!-- 加载本地绝对路径的一个文件dog.jpg -->
<p> <img src="C:\Users\andy\Desktop\前端基础第一天\04-代码\imgs\dog.jpg" alt="图片加载失败或图片不存在"></p>
<!-- 加载本地绝对路径的一个文件dog.jpg -->
<p> <img src="E:\Android\my\myHtml\myHtmlProject\imgs\dog.jpg" alt="图片加载失败或图片不存在" width="150" height="150" ></p>
示例： Mac/Linux系统本地文件的绝对路径：
/home/tom/project/index.html
<img src="file:///home/yourusername/pictures/logo.png" alt="Logo">
Web(HTML 和网页)网络的绝对路径:
在 Web开发网页（HTML）中，我们说的“绝对路径”通常是 以服务器根目录或完整URL为起点 的路径。
在 HTML 和网页开发中，“绝对路径”指的是：
类型1：带协议（如 http://, https://）的 完整 URL路径（网络上的绝对路径）
也叫 Web 全限定路径，是浏览器能直接访问的地址：
<link rel="stylesheet" href="https://yourwebsite.com/css/style.css">
<p> <img src="https://baidu.com/img.jpg" alt="图片加载失败或图片不存在"> </p>
<p> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&h=340" alt="图片加载失败或图片不存在"> </p>
类型2：以网站根目录为起点的路径（服务器相对绝对路径）
这种路径以
/开头，表示从网站的服务器根目录/开始找文件：虽然看起来像是“相对”的，但它实际上是相对于服务器的根目录，所以也被称作“绝对路径”。
<img src="/images/logo.png">
双单标签添加属性
无论是双标签还是单标签，大多数标签都可以在其起始标签的
<>内添加属性。
双标签添加属性
双标签通常用于包裹内容，它们几乎都可以添加属性。
//在这个例子中，<a>标签是一个双标签，它可以通过href属性指定链接地址，
//通过target属性定义打开方式。
<a href="https://example.com" target="_blank">链接到示例网站</a>
单标签添加属性
单标签虽然不包裹内容，但也可以添加属性。
//<img> 是一个单标签，使用了 src 和 alt 属性。
<img src="image.jpg" alt="描述图片">
//<input> 也是一个单标签，使用了 type、name 和 placeholder 属性
<input type="text" name="username" placeholder="请输入用户名">
属性
通用属性（全局属性）
某些属性是几乎所有双单标签都支持的，称为通用属性（全局属性）
class：
指定一个或多个CSS类名，这些类名可用于样式化元素。
<p class="highlight important">这段文本将被高亮显示并强调。</p>
id：
为元素提供一个唯一的标识符，通常用于CSS选择器或者JavaScript中操作该元素。
<button id="submitBtn">提交</button>
style：
直接在元素内嵌入CSS样式。
<div style="color: blue; font-size: 20px;">蓝色大号字体。</div>
title：
为元素提供附加信息。当鼠标悬停在元素上时显示提示文本。
<!-- title属性 -->
<a href="https://www.example.com" title="更多详情...">嘻嘻</a>
<div class="container" id="main" title="这是主容器">哈哈</div>
<div style="color: blue; font-size: 20px;" title="字体样式" >蓝色大号字体。</div>
hidden
隐藏元素，使其不可见且不渲染。
<p hidden>这个段落不会显示。</p>
data- 属性*
自定义数据属性，允许你在HTML元素上存储额外的信息，这些信息可以通过JavaScript获取。
<article id="product" data-product-id="12345">
<h1>产品标题</h1>
</article>
特定属性
一些属性只能用于特定的标签。
如果你尝试在一个标签上使用它不支持的属性，浏览器通常会忽略这些属性，不会报错，但也不会生效。
href:
适用于 <a>（锚点）标签中的一个核心属性，用于指定超链接的目标 URL。它不仅限于网页之间的链接，还可以指向文件、电子邮件地址、电话号码等资源。
通过在 <a> 标签中使用 href 属性，你可以创建一个点击后可以跳转到特定位置或执行特定操作的超链接。
<a href="目标地址">链接文本</a>
<a href="https://developer.mozilla.org">MDN Web Docs</a>
<div href="https://example.com"></div>
href 接受多种类型的值：
1. href 接受完整URL,指向另一个网站上的页面
<a href="https://www.baidu.com">访问百度网站</a>
2. href 接受相对路径.指向当前网站内的其他页面或资源。
<a href="/about">关于我们</a>
<!-- 或者 -->
<a href="./contact.html">联系我们</a>
3. href 接受内部锚点.使用 # 后跟元素的 id 来定位页面内的某个部分。
<a href="#section1">跳至第一部分</a>
<h2 id="section1">第一部分内容</h2>
4. href 接受下载文件
- 当
href指向一个文件时，用户点击链接会触发文件下载。结合download属性可更明确地提示浏览器这是一个下载链接。
download属性: 提示浏览器下载链接的资源，而不是导航到该资源。
<a href="example.pdf" download>下载PDF文档</a>
<a href="example.jpg" download>下载图片</a>
5. href 接受一个发送邮件
- 使用
mailto:协议可以直接打开默认的邮件客户端并新建一封邮件。
<a href="mailto:740701076@qq.com?subject=主题&body=邮件内容">发送邮件</a>
6. href 接受一个号码,可以拨打电话
- 在移动设备上，可以使用
tel:协议来发起电话呼叫。
<a href="tel:+1234567890">拨打123-456-7890</a>
target:
<a>, <form> 等标签 添加target属性, 指定链接打开的方式。
-
_self：在当前窗口/标签页中打开（默认） _blank：在新窗口/标签页中打开。_parent：在父框架中打开（如果存在）。_top：在整个窗口中打开（忽略框架）。
<p>访问:<a href="https://www.baidu.com">百度</a> (默认在当前窗口/标签页中打开)</p>
<!-- 外部链接 -->
<p>访问 <a href="https://www.baidu.com" target="_blank">百度</a>(在新窗口/标签页中打开)</p>
src:
适用于 <img>, <script>, <iframe> 等标签.指定资源的位置，如图片、脚本文件等。
<img src="image.jpg" alt="描述图片">
alt :
适用于 <img> 标签.提供图像无法加载时显示的替代文本。
<img src="missing.png" alt="这是一张丢失的图片">
type:
适用于 <input>, <button>, <script> 等标签. 根据不同的元素，type有不同的含义，例如在<input>中它决定了输入字段的类型（文本、密码、复选框等）。
<input type="text" placeholder="请输入文本">
value :
value 属性用于指定表单元素的初始值（默认值）或当前值。它常用于 <input>, <option>, <textarea> 等表单控件。
最常见于 <input> 标签（特别是文本输入框、密码框、隐藏输入框等），也可以用于 <button> 和 <option> 标签。
//在这个例子中，文本框将预填充“默认文本”。对于提交表单时，value 的值是实际发送的数据。
<input type="text" value="默认文本">
placeholder ：
placeholder 属性提供一种简短的提示，告知用户应该输入什么样的信息。提示会在用户输入内容前显示在输入框内，并且当输入框获得焦点或用户开始输入时自动消失。
主要用于 <input> 和 <textarea> 元素，帮助改善用户体验。
//在此示例中，文本框将在用户未输入任何内容时显示灰色的“请输入您的姓名”文本作为提示。一旦用户开始输入，该提示即会消失。
<input type="text" placeholder="请输入您的姓名">
<textarea placeholder="在此输入您的反馈"></textarea>
rel：
定义链接与目标资源之间的关系，常用于 SEO 或安全性设置。例如：
noopener：防止新窗口获取对当前窗口的访问权限。nofollow：告诉搜索引擎不要跟踪该链接。
<!-- rel属性 -->
<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">安全链接</a>
有些标签不能添加属性
实际上，所有标准HTML标签都可以添加属性（至少支持全局属性）。但有些标签由于其用途非常简单，可能很少或不需要额外的属性。
<br>：
换行标签，通常不需要任何属性
<hr>：
水平线标签，虽然支持一些属性（如 style 或 class），但在现代HTML中，这些属性很少使用。
有些标签可能因为其语义化设计而没有太多需要自定义的属性
<meta>：
虽然可以添加属性（如 name 和 content），但它本身没有内容。
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签
<link>：
用来引入外部 CSS 文件,这是
<link>最常见的用法.
<link>标签在HTML中有多种用途，除了链接样式表和添加网站图标之外，它还可以用于预加载资源、指定文档关系等。
<link>标签的基本格式<link rel="relationship" href="url" other_attributes>
- rel（必选）：定义当前文档与被链接文档之间的关系。
- href（通常必选）：指定被链接文档的位置。
- 其他属性：根据
rel属性的不同，可能还需要指定其他属性，如type,media,sizes等。
- type：指定被链接文档的 MIME 类型。
- media：指定文档适用的设备或情形。
- sizes：通常用于图标链接，指定了图标的尺寸。
rel属性:对应的常见属性值
stylesheet: 链接到外部CSS文件。icon: 指定网页的图标（favicon）。preload: 提前加载某些关键资源。alternate: 指向文档的替代版本，比如不同的语言或格式（如RSS, Atom feeds）。canonical: 指定页面的规范URL，用于SEO。dns-prefetch: 提前解析DNS，提高页面加载速度。href属性:对应的属性值
- 属性值必须是一个有效的URL，指向目标资源的位置。
type属性:对应的属性值
- 规定了被链接文档的MIME类型。
- 示例值：
text/css（对于CSS文件），image/png（对于PNG图片）。media属性:对应的属性值
- 指定了文档适用的设备或情形。
- 示例值：
screen,(max-width: 600px)。sizes属性:对应的属性值
- 通常用于图标链接，指定了图标的尺寸。
- 示例值：
16x16,32x32,any。crossorigin属性:对应的属性值
- 用于跨域请求时，指定如何处理响应。
- 示例值：
anonymous,use-credentials。
link案例1:引入外部CSS样式表
用来引入外部 CSS 文件,这是
<link>最常见的用法.使用
rel="stylesheet"表示这是一个样式表链接，href指向了CSS文件的位置，type="text/css"明确了资源类型为CSS。
<link rel="stylesheet" href="styles.css" type="text/css">
link案例2:给网页设置ico图标
使用
<link>标签来添加网站的图标，这个图标会在浏览器标签上显示。
rel="icon"表示这是网站图标链接，href指向了图标文件的位置，type="image/x-icon"明确了资源类型为ICO图标。
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">
//添加不同尺寸的图标
<link rel="icon" href="/path/to/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/path/to/favicon-32x32.png" sizes="32x32" type="image/png">
link案例3: 预加载关键资源
可以使用
<link rel="preload">来告诉浏览器提前加载某些关键资源，以提高页面加载速度。
rel="preload"表示提前加载资源，as="font"指明了资源类型是字体，type="font/woff2"明确了资源的具体类型，crossorigin="anonymous"表示使用匿名模式进行跨域请求。
<link rel="preload" href="/fonts/awesome-font.woff2" as="font"
type="font/woff2" crossorigin="anonymous">
link案例4: 关联RSS或Atom Feeds
如果你的网站有更新内容的订阅源，可以通过
<link>标签来关联这些 feeds。这使得用户能够通过他们的新闻阅读器订阅你的内容更新。
rel="alternate"表示这是文档的一个替代版本，type="application/rss+xml"明确了资源类型为RSS feed，title提供了描述信息，href指向了feed文件的位置。
<link rel="alternate" type="application/rss+xml" title="My RSS Feed" href="/rss.xml">
link案例5: 设置规范URL
rel="canonical"用于SEO，帮助搜索引擎识别页面的原始URL，避免重复内容问题。href指向了该页面的标准URL。
<link rel="canonical" href="https://example.com/original-page.html">
列表
作用：布局内容排列整齐的区域。列表分类：无序列表、有序列表、定义列表。
无序列表(最常用)：
布局排列整齐的不需要规定顺序的区域。无序列表标签：ul标签:ul 是无序列表,表示无序列表的整体,ul标签 嵌套包裹 li标签li标签:li 是列表条目 。表示无序列表的每一项(每一行),用于包含每一行的内容。特点:ul 标签里面只能包裹 li 标签li 标签里面可以包裹任何内容(其他标签 文本 图片)列表的每一项前默认显示圆点标识<ul><li>第一项</li><li>第二项</li><li>第三项</li>……</ul>
<body>
<h3>您喜欢的水果？</h3>
<ul>
<li><img src="./images/women.jpg"> 芒果</li>
<li><img src="./images/women.jpg"> 香蕉</li>
<li><img src="./images/women.jpg"> 苹果</li>
<li><img src="./images/women.jpg"> 梨子</li>
</ul>
<h3>友情链接</h3>
<ul>
<li><a href="http://www.baidu.com"> <img src="./images/women.jpg"> 百度 </a> </li>
<li><a href="http://www.sina.com"> <img src="./images/women.jpg" > 新浪 </a></li>
<li><a href="http://www.sohu.com"> <img src="./images/women.jpg" > 搜狐</a></li>
<li><a href="http://www.163.com"><img src="./images/women.jpg" > 网易</a></li>
</ul>
</body>
有序列表(偶尔用)：
在网页中表示一组有顺序之分的列表，如：排行榜
有序列表标签：ol标签：ol是有序列表，表示有序列表的整体。ol 嵌套包裹 li标签。li标签: li 是列表条目。表示有序列表的每一项(每一行),用于包含每一行的内容。特点:ol 标签里面只能包裹 li 标签li 标签里面可以包裹任何内容(其他标签 文本 图片)列表的每一项前默认显示序号标识<ol><li>第一项</li><li>第二项</li><li>第三项</li>……</ol>
<body>
<ol>
<li><img src="./images/women.jpg"> 熊大</li>
<li><img src="./images/women.jpg"> 熊二</li>
<li><img src="./images/women.jpg"> 光头强</li>
<li><img src="./images/women.jpg">翠花</li>
</ol>
</body>
自定义列表(底部导航用) ：
在网页的底部导航中通常会使用自定义列表实现。
自定义列表标签：
dl (大佬)是定义列表。表示自定义列表的整体。dl 只能嵌套包裹 dt 和 dd。
dt(大腿) 是定义列表的标题/主题。dt 里面可以包含任何内容
dd (弟弟)表示自定义列表的针对主题的每一项内容。dd 里面可以包含任何内容
特点:
dl标签 里面只能包含dt 和 dd标签
dt /dd 里面可以包含任何内容
dd前会默认显示缩进效果<dl><dt>列表标题</dt><dd>列表描述 / 详情</dd>……</dl>
<body>
<dl>
<dt>北京市</dt>
<dd>顺义区</dd>
<dd>昌平区</dd>
<dd>朝阳区</dd>
<dd>平谷区</dd>
</dl>
<dl>
<dt>昌平区</dt>
<dd>天通苑街道</dd>
<dd>回龙观</dd>
<dd>西三旗</dd>
<dd>北七家</dd>
</dl>
</body>
<body>
<dl>
<dt>选购指南</dt>
<dd><a href="#"><img src="./images/women.jpg"> 手机</a></dd>
<dd><a href="#"><img src="./images/women.jpg"> 电视</a></dd>
<dd><a href="#"><img src="./images/women.jpg"> 笔记本</a></dd>
<dd><a href="#"><img src="./images/women.jpg"> 平板</a></dd>
</dl>
<dl>
<dt>选购指南</dt>
<dd><a href="#"><img src="./images/women.jpg"> 服务中心</a></dd>
<dd><a href="#"><img src="./images/women.jpg"> 申请售后</a></dd>
<dd><a href="#"><img src="./images/women.jpg"> 售后政策</a></dd>
<dd><a href="#"><img src="./images/women.jpg"> 维修服务</a></dd>
</dl>
</body>
表格
在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
表格的基本标签：
表格的基本标签：table标签：表格整体。table用于包裹多个 tr。tr标签: 表格每行，tr用于包裹td (每一行都需要使用该行标签)td标签: 表格单元格 td用于包裹内容基本标签的嵌套关系：table(表) > tr(行) > td(格)
<!-- table 包含 tr, tr包含td -->
<table border="1" width="300" height="200" >
<!--tr标签: 第一行 -->
<!-- 第一行使用td标签: 单元格 -->
<tr>
<td>姓名</td><td>语文</td><td>数学</td><td>总分</td>
</tr>
<!--tr标签: 第二行 -->
<!-- 第二行使用td标签: 单元格 -->
<tr>
<td>张三</td><td>99</td><td>100</td><td>199</td>
</tr>
<!--tr标签: 第三行 -->
<!-- 第三行使用td标签: 单元格 -->
<tr>
<td>李四</td><td>98</td><td>100</td><td>198</td>
</tr>
<!--tr标签: 第四行 -->
<!-- 第四行使用td标签: 单元格 -->
<tr>
<td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td>
</tr>
</table>
表格相关属性:
设置表格基本展示效果
表格相关属性:
border属性: 表格整体边框线宽度 border="n" (n 边框宽度数值)
(表格默认没有边框线,添加border属性可以为表格添加边框线)
width属性:表格的宽度
height属性:表格的高度
实际开发时针对于样式效果推荐用CSS设置
表格整体大标题和表头单元格标签：
在表格中表示整体大标题和(第)一行小标题
其他标签:
caption标签:表格整体大标题,默认在表格整体顶部居中位置显示。 caption标签书写在table标签内部.
th标签:表头单元格。th标签书写在tr(行)标签内部（用于替换td(格)标签）
(th既然叫着表头单元格,顾名思义 ,就是使用在表格的第一行才能使用)
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<!--tr标签: 第一行 -->
<!-- 第一行才能使用th标签: 表头-->
<tr>
<th>姓名</th><th>语文</th><th>数学</th><th>总分</th>
</tr>
<!--tr标签: 第二行 -->
<!-- 第二行使用td标签:单元格 -->
<tr>
<td>张三</td><td>99</td><td>100</td><td>199</td>
</tr>
<!--tr标签: 第三行 -->
<!-- 第三行使用td标签:单元格 -->
<tr>
<td>李四</td><td>98</td><td>100</td><td>198</td>
</tr>
<!--tr标签: 第四行 -->
<!-- 第四行使用td标签:单元格 -->
<tr>
<td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td>
</tr>
</table>
表格结构标签 （了解）
让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
表格结构标签 ：thead标签:表格头部,用于表格头部内容。
tbody标签:表格主体(中间),用于主要内容区域。
tfoot标签:表格底部,用于汇总信息区域。
注意:
表格结构标签写在table标签内部表格结构标签内部用于包裹tr(行)标签
以上表格结构标签在使用中都可以省略不用的
<body>
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<!-- thead表格结构标签:表格头部,用于表格头部内容。 -->
<!--tr标签: 第一行 -->
<!-- 第一行才能使用th标签: 表头-->
<thead>
<tr>
<th>姓名</th><th>语文</th><th>数学</th><th>总分</th>
</tr>
</thead>
<!-- 第二三行是表格的主体内容区域,使用tbody表格结构标签：表格主体(中间) -->
<!--tr标签: 第二行 -->
<!-- 第二行使用td标签:内容单元格 -->
<tbody>
<tr>
<td>张三</td><td>99</td><td>100</td><td>199</td>
</tr>
<!--tr标签: 第三行 -->
<!-- 第三行使用td标签:内容单元格 -->
<tr>
<td>李四</td><td>98</td><td>100</td><td>198</td>
</tr>
</tbody>
<!-- 第四行是表格底部,使用 tfoot表格结构标签:表格底部,-->
<!--tr标签: 第四行 -->
<!-- 第四行使用td标签:内容单元格 -->
<tfoot>
<tr>
<td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td>
</tr>
</tfoot>
</table>
</body>
合并单元格
将水平或垂直多个单元格合并成一个单元格，以合并同类信息。
合并单元格的步骤：
1.明确合并哪几个单元格2.保留最左(开始合列的第一列单元格)最上(开始合行的第一行单元格)的单元格，添加对应的属性（取值是数字，表示需要合并的单元格数量）
–跨多行合并(上下合并)：只保留最上(开始合行的第一行单元格)单元格td，并添加属性rowspan="n"(n合并单元格个数),删除其他单元格。
–跨多列合并(左右合并)：保留最左(开始合列的第一列单元格)单元格td，并添加属性colspan="n"(n合并的列数)，删除其他单元格。
3. 给被保留的单元格设置属性：跨行合并（rowspan）或者跨列合并（colspan）rowspan="n" :n合并单元格个数 , 跨多行合并(上下合并),将多行的单元格垂直合并。
colspan="n":n合并单元格个数 , 跨多列合并(左右合并)，将多列的党员个水平合并。
注意：
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
什么意识呢? 就是只能在各自的 表格结构标签 约束范围内进行跨行或跨列进行合并。
<body>
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<!-- thead表格结构标签:表格头部,用于表格头部内容。 -->
<!--tr标签: 第一行 -->
<!-- 第一行才能使用th标签: 表头-->
<thead>
<tr>
<th>姓名</th><th>语文</th><th>数学</th><th>总分</th>
</tr>
</thead>
<!-- 第二三行是表格的主体内容区域,使用tbody表格结构标签：表格主体(中间) -->
<!--tr标签: 第二行 -->
<!-- 第二行使用td标签:内容单元格 -->
<tbody>
<tr>
<td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td>
</tr>
<!--tr标签: 第三行 -->
<!-- 第三行使用td标签:内容单元格 -->
<tr>
<td>李四</td><td>98</td> <!-- <td>100</td> --> <td>198</td>
</tr>
</tbody>
<!-- 第四行是表格底部,使用 tfoot表格结构标签:表格底部,-->
<!--tr标签: 第四行 -->
<!-- 第四行使用td标签:内容单元格 -->
<tfoot>
<tr>
<td>总结</td><td colspan="3">全市第一</td> <!-- <td>全市第一</td> --> <!-- <td>全市第一</td> -->
</tr>
</tfoot>
</table>
</body>
表格单元格的边框合并
让相邻表格边框进行合并，得到细线边框效果代码：border-collapse：collapse；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
border: 1px solid #000;
/* 注意: 一定要加给table标签 : 做细线表格 */
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- border="1" width="400" height="300"cellspacing="0" -->
<table>
<caption><h3>前端与移动开发学员学习情况</h3></caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小姐姐</td>
<td>女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>小哥哥</td>
<td>男</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>大姐姐</td>
<td>女</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总成绩</td>
<td colspan="2">300</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单
disabled 属性
disabled是 HTML 中的一个布尔属性，用于禁用交互式元素（如按钮、输入框、下拉菜单等），使其不可操作、不可聚焦，且数据不会随表单提交。
disabled的特性(1) 表单提交时会被忽略(不能提交)
disabled的输入框数据不会提交到服务器（FormData里没有username）元素变灰（浏览器默认样式）
<form> <input type="text" name="username" value="admin" disabled> <button type="submit">提交</button> </form>(2) 无法接收焦点（focus）
键盘
Tab键无法聚焦 。键盘Tab键会跳过disabled元素JavaScript
element.focus()也无法聚焦(3) 不会触发事件
lick、keydown、input等事件不会触发但可以用 CSS
:disabled伪类修改样式无法点击、无法输入、无法选中
场景 推荐方式 禁用按钮 <button disabled>禁用输入框（不提交） <input disabled>禁用输入框（提交） <input readonly>动态控制禁用 element.disabled = true/false自定义样式 :disabled伪类
disabledvsreadonly
特性 disabledreadonly是否可以聚焦 ❌ 不能 ✅ 能 是否提交数据 ❌ 不提交 ✅ 提交 是否可以修改 ❌ 不能 ❌ 不能（但可选中、复制） 适用元素 <button>,<input>,<select>,<textarea><input>,<textarea>常见问题
Q1: 如何让
disabled的输入框提交数据？
改用
readonly或用 JavaScript 在提交前移除
disabled：form.addEventListener("submit", () => { input.disabled = false; });Q2:
disabled的按钮能否触发点击事件？❌ 不能，但可以用
<div>+ CSS 模拟禁用效果Q3: 如何让
disabled元素仍然可读？
改用
readonly（适用于<input>）或用 CSS
pointer-events: none模拟禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 伪类选择器 被禁用的表单元素 按钮 */
button:disabled {
opacity: 0.6;
cursor: not-allowed;
background: #e0e0e0;
color: #999;
border: none;
box-shadow: none;
}
/* 伪类选择器 被禁用的表单元素 输入框 */
input:disabled {
background: #f0f0f0;
border: 3px solid #ccc;
}
</style>
</head>
<body>
<!-- 禁用按钮 -->
<button disabled>禁用按钮</button>
<!-- 禁用输入框 -->
<input type="text" disabled value="不能修改">
<!-- 禁用下拉菜单 -->
<select disabled>
<option>选项1</option>
<option>选项2</option>
</select>
<!-- 禁用复选框/单选框 -->
<input type="checkbox" disabled>
<input type="radio" disabled>
<script>
/* 获取/设置 disabled 状态 */
const button = document.querySelector("button");
// 检查是否禁用
console.log(button.disabled); // true/false
// 禁用按钮
button.disabled = true;
// 启用按钮
button.disabled = false;
/* 监听 disabled 变化 */
const input = document.querySelector("input");
// 观察 disabled 变化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === "disabled") {
console.log("disabled 状态变化了！");
}
});
});
observer.observe(input, { attributes: true });
</script>
</body>
</html>
appearance: none属性
作用：
用于移除浏览器对表单元素的默认原生样式。重而让这些表单元素看起来像普通的
<div>或<span>一样，从而方便自定义外观。
- 浏览器会给
<input>、<select>、<button>等表单元素添加默认样式（如阴影、圆角、背景色等）。appearance: none;会清除这些默认样式，使元素变成“空白”状态。- 常用于自定义表单控件：比如把
<input type="checkbox">改成自定义开关，或把<select>下拉框改成更美观的设计。何时用：需要完全自定义表单元素外观时（如设计统一风格的 UI 控件）。
何时不用：依赖浏览器默认样式或需要快速原型开发时。
appearance: none;是前端开发中“深度自定义”表单控件的关键工具！适用表单元素(标签)
<input>（所有类型：checkbox、radio、range等）
<select>
<button>
<textarea>
<meter>
<progress>
属性 作用 appearance: none;移除浏览器默认样式 border: none;移除边框 outline: none;移除聚焦时的轮廓线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#custom-checkbox {
appearance: none; /* 移除默认样式 */
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 3px;
}
#custom-checkbox:checked {
background-color: #1890ff; /* 选中状态 */
}
select {
appearance: none; /* 移除默认箭头 */
background: url("./images/custom-arrow.png") no-repeat right center; /* 添加自定义箭头 */
padding-right: 20px;
}
</style>
</head>
<body>
<input type="checkbox" id="custom-checkbox">
<label for="custom-checkbox">同意协议</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
<option>武汉</option>
</select>
</body>
</html>
required 属性
required是 HTML5 中的一个表单输入属性，用于指定某个输入字段（如<input>、<textarea>、<select>）在提交表单时必须填写，否则浏览器会阻止提交并显示错误提示。
required是前端表单验证的快捷方式，适合快速实现必填校验，但对复杂规则仍需配合 JavaScript。作用
强制用户填写该字段，否则无法提交表单。
浏览器会自动验证并显示提示（无需额外 JavaScript）。
浏览器行为
如果用户尝试提交空字段：
浏览器会阻止表单提交。
显示默认错误提示（例如：“请填写此字段”）。
提示样式和语言取决于浏览器的语言设置。
<!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>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
textarea {
display: block;
width: 300px;
height: 100px;
margin: 10px 0;
padding: 8px;
}
button {
padding: 8px 16px;
background: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
/* 自定义错误提示样式 */
textarea:invalid {
border: 2px solid #ff6b6b;
}
textarea:invalid + .error-message {
display: block;
color: #ff6b6b;
font-size: 14px;
}
.error-message {
display: none;
}
</style>
<body>
<form id="myForm">
<textarea
id="myText"
required
placeholder="请输入内容"
></textarea>
<div class="error-message">内容不能为空！</div>
<button type="submit">提交</button>
<script>
document.getElementById("myForm").addEventListener('submit',function(e){
// 阻止表单默认提交
e.preventDefault();
alert("表单验证通过！");
})
</script>
</body>
</html>
resize属性
resize是 CSS 的一个属性，用于控制用户是否可以调整元素的 垂直高度。它通常用于<textarea>、<div>或其他可调整大小的元素。作用：
允许用户通过拖动元素的右下角（或底部边缘）来 垂直调整高度。
不影响元素的宽度（水平方向不可调整）。
resize属性值 说明 none
(其他元素（
<div>）默认值)用户无法调整元素大小。 both
(textarea元素 的默认值)
可同时调整宽度和高度。 horizontal 只能调整宽度。 vertical 只能调整高度（最常用）。 block 沿块方向调整（取决于书写模式，通常同 vertical）。 inline 沿行内方向调整（通常同 horizontal）。
元素类型 默认 resize默认 overflow是否需要显式设置 overflow？<textarea>both非 visible否（除非用 resize: none）<div>等普通元素nonevisible是（必须设为非 visible）关键注意事项：
1.必须配合
overflow属性：
- 要使
resize生效，元素的overflow属性不能是visible（可以是auto、hidden、scroll等）。textarea元素 默认是 overflow: auto/hidden 不会产生内容溢出
其他元素(
<div>、<p>) ,默认overflow: visible，会产生内容溢出,此时直接设置resize会无效,所以需要显示把overflow改为非visible的值（如auto、hidden、scroll）,设置resize才会有效。核心规则：只要用
resize（非none），就必须确保overflow不是visible！2.限制最小/最大尺寸：
建议通过
min-height、max-height限制调整范围，避免布局错乱。3.适用元素：
默认情况下，
<textarea>允许调整大小（浏览器默认样式为resize: both）。其他元素（如
<div>）默认不可调整，需显式设置resize。实际应用场景：
文本输入框（
<textarea>）让用户自由调整输入区域高度。可拖拽的侧边栏或面板（如代码编辑器的分割视图）。
为什么 resize 必须配合 overflow（非 visible）才能生效？
这个规则适用于 所有元素（包括
<textarea>和<div>等），但<textarea>是特殊情况（浏览器默认设置了overflow: auto或hidden）。1.
<textarea>的默认行为默认情况下，
<textarea>是可调整大小的（浏览器默认样式为resize: both），且它的overflow默认值不是visible（默认通常是auto或hidden）。
所以即使你不显式设置overflow，<textarea>也能直接使用resize。2. 其他元素（如
<div>）的规则对于
<div>、<p>等普通元素，默认overflow: visible，此时直接设置resize会无效。必须显式将overflow改为非visible的值（如auto、hidden、scroll）。
为什么 overflow 不能是 visible？
overflow: visible表示内容可以溢出元素框，不显示滚动条或裁剪。如果允许
resize和overflow: visible同时生效，用户调整大小时可能导致内容溢出到其他布局区域，破坏页面结构（难以预测最终效果）。因此，规范要求
resize必须与overflow的“可控溢出”状态（如auto、hidden）配合使用，确保调整尺寸时布局可控。
.resizable-textarea-both {
/* textarea元素 默认设置了 overflow: auto 或 hidden 默认可调整宽高大小 */
resize: both; /* textarea元素可同时调整宽度和高度。 */
overflow: auto; /* textarea元素 默认值是 overflow: auto/hidden */
border: 1px solid #ccc;
min-height: 50px;
min-width: 50px;
}
<textarea class="resizable-textarea-both"></textarea>
.resizable-textarea-vertical {
resize: vertical; /* textarea元素 只能调整 高度 */
overflow: auto; /* textarea元素 默认是 overflow: auto/hidden */
border: 1px solid #ccc;
min-height: 50px;
min-width: 50px;
}
<textarea class="resizable-textarea-vertical"></textarea>
.resizable-textarea-none {
resize: none; /* textarea元素 不能调整宽度和高度大小 */
overflow: auto; /* textarea元素 默认是 overflow: auto/hidden */
border: 1px solid #ccc;
min-height: 50px;
min-width: 50px;
}
<textarea class="resizable-textarea-none"></textarea>
.resizable-textarea-horizontal {
resize: horizontal; /* textarea元素 只能调整宽度 */
overflow: auto; /* textarea元素 默认是 overflow: auto/hidden */
border: 1px solid #ccc;
min-height: 50px;
min-width: 50px;
display: block;
}
<textarea class="resizable-textarea-horizontal"></textarea>
什么是表单（Form）
在网页开发中，表单（Form） 是一种用于收集用户输入的 HTML 元素。它允许用户通过浏览器界面输入数据，并将这些数据提交给服务器进行处理。表单广泛应用于各种场景，如用户登录、注册新账户、搜索内容、提交反馈等。
一个基本的 HTML 表单由以下几个关键部分组成：
1.<form>标签： 是整个表单结构的容器。所有的表单控件和按钮都应放在<form>标签内。它定义了表单的行为和属性。 并管理这些控件的数据提交过程。2.表单控件（Input Controls）：这些是用户实际输入数据的地方。常见的表单控件包括：
- 文本框 (
<input type="text">)- 密码框 (
<input type="password">)- 单选按钮 (
<input type="radio">)- 复选框 (
<input type="checkbox">)- 下拉列表 (
<select>)- 文件上传 (
<input type="file">)- 按钮 (
<button>或<input type="submit">)3.
<label>标签：用于为表单控件提供说明文本，提高可访问性和用户体验。通过for属性与特定的表单控件关联。4.提交按钮：通常是
<input type="submit">或<button type="submit">，点击后会触发表单提交动作。
表单的标签
<form> 标签:
<form>标签是用于定义 HTML 表单的标签。form标签是一个容器标签(在最外面)，用来包裹表单中的各种输入元素（如文本框、密码框、按钮等）、标签以及其他交互组件。通过
<form>标签，可以创建一个表单来收集用户输入，并将这些数据提交到服务器进行处理。使用场景
- 用户注册：让用户填写个人信息并提交到服务器创建账户。
- 登录系统：允许用户输入用户名和密码进行身份验证。
- 搜索功能：提供一个输入框供用户输入查询条件，并提交给搜索引擎处理。
- 反馈表单：让用户提交意见或问题报告。
form标签的主要属性:
action属性：
指定当表单提交时，数据应发送到哪个 URL 进行处理。可以是相对路径或绝对路径。
action="/upload"
method属性：
定义提交表单数据时使用的 HTTP 方法，通常为
GET或POST。method="post"
enctype属性：
当
method="post"时，定义表单数据的编码类型。特别是对于文件上传的情况，值为
multipart/form-data。默认情况下，
enctype的值是application/x-www-form-urlencoded。
<form>标签定义了一个表单，设置了action="/submit-form"和method="post"，这意味着当用户点击“登录”按钮时，表单数据将以 POST 方法提交到/submit-form路径。enctype="multipart/form-data"
target属性：
指定在何处显示接收到的响应。例如
_blank可以在一个新标签页中打开结果。
novalidate属性：
布尔属性，如果存在，则禁用对表单的验证。
案例:登录表单
<form>标签定义了一个表单，设置了action="/login"和method="post"，这意味着当用户点击“登录”按钮时，表单数据将以 POST 方法提交到/login路径。- 包含了两个输入字段：一个用于用户名，另一个用于密码。每个输入字段都有一个对应的
<label>标签，提高了可访问性和用户体验。required属性确保用户必须填写这些字段。- 提交按钮会触发表单提交动作。
<form action="/login" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required >
<br>
<label > 密码: <input type="password" id="password" name="password" required> </label>
<br>
<input type="submit" value="登录">
</form>
案例:注册表单
<form action="/register" method="post">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<label for="subscribeNewsletter">订阅新闻?</label>
<input type="checkbox" id="subscribeNewsletter" name="subscribeNewsletter" >
<br>
<input type="submit" value="注册">
</form>
案例:文件上传表单
- 设置了
enctype="multipart/form-data"来正确编码文件上传的数据。 type="file"允许用户从本地选择文件进行上传。
<!-- 文件上传表单 -->
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">选择文件:</label><br>
<input type="file" id="file" name="file" required><br>
<input type="submit" value="上传">
</form>
input标签:
input标签:在网页中显示收集用户信息的表单效果，如：登录页、注册页input标签的type属性:input标签可以通过type属性值的不同，展示不同效果
input标签 属性type="text"
单行文本输入框的表单控件，允许用户输入文本内容
placeholder属性:
占位符。提示用户输入内容的文本。
<p>姓名: <input type="text" placeholder="请输入用户名"></p>
value属性：
value属性：
value属性用于指定<input>元素的初始文本内容值(默认值)，即当页面加载时文本框内显示的内容。如果未设置该value属性，则文本框默认为空。如果用户手动输入了新的文本内容,就会覆盖初始文本内容值(默认值)
提交之后 新的文本内容会发送给后端服务器
- 在表单预填充的情况下非常有用，例如编辑已有记录时，可以将数据库中的值作为文本框的初始值展示给用户。
- 动态设置或获取文本框内的值，通过 JavaScript 操作
value属性来读取用户输入或者设置新的值。
<!-- value="张三" value属性值默认值 -->
<p>姓名: <input type="text" placeholder="请输入用户名" value="张三"></p>
name属性:
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
name属性为<input>元素提供了一个名称，这个名称在提交表单时会被用作键名，name属性与用户输入的数据内容（即value属性值）(name的属性值 = value的属性值)配对发送到服务器端。没有指定name属性的表单元素，在表单提交时其值不会被包含在提交的数据中。
- 表单处理：在服务器端脚本（如 PHP, Node.js 等）接收和处理表单数据时，根据
name属性来识别和处理相应的数据。- 数据组织：有助于清晰地组织来自多个表单控件的数据，确保每个输入项都有明确的意义和位置。
required 属性:
用户必须填写这些字段,否则会有提示,不能提交
案例:
name="username"：当用户提交表单时，此输入框的数据将以键"username"发送到服务器。
value="张三"：页面加载时，该文本框将预填充“张三”作为初始值。如果用户不更改此值并直接提交表单，则发送给服务器的数据将是username=张三
(name的属性值:username= value的属性值:张三)。
<!-- value="张三" value属性值默认值 -->
<p>用户名: <input type="text" placeholder="请输入用户名" value="张三" name="username"></p>
name="email"：当用户填写此输入框并提交表单时，其内容将以键"email"的形式发送到服务器。例如，如果用户输入了740701076@qq.com文本内容(value属性值)，则服务器接收到的数据是email=740701076@qq.com
(name的属性值.com)。
<p>邮箱: <input type="text" placeholder="请输入邮箱" name="email" ></p>
假设用户修改了第一个输入框中的“默认用户名”为“李四”，并在第二个输入框中填入了自己的电子邮件地址“740701076@qq.com”。那么，当他们点击提交按钮后，服务器端将接收到如下形式的数据：
username=张三&email=740701076@qq.com
这展示了 name 属性的重要性，因为它决定了数据被发送到服务器时使用的键名，而 value 则包含了实际的数据内容。通过这种方式，服务器能够识别并处理每个表单字段的数据。
input标签 属性type="password"
密码框 输入密码。在网页中显示输入密码的表单控件
placeholder属性:
占位符。提示用户输入内容的文本(密码)。
value属性：
name属性:
案例:
name="password"：当用户填写此输入框并提交表单时，其内容将以键"password"的形式发送到服务器。注意，虽然value属性可以设置默认值（在这个例子中是“111111），但在实际应用中不应设置密码字段的默认值以确保安全。name属性值:password= value属性值:手动输入的密码123456
<p>密码: <input type="password" placeholder="请输入密码" name="password" value="111111"></p>
假设用户修改了第一个输入框中的“默认用户名”为“张三”，并在第二个输入框中填入了自己的密码“123456”。那么，当他们点击提交按钮后，服务器端将接收到如下形式的数据：
username=张三&password=123456
input标签 type="radio"
单选框 在网页中显示多选一的单选表单控件
value属性:
表示用户选择的数据
name属性:
分组：name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
告诉后台发送过去的数据是什么含义
checked属性:
默认选中
针对于单选框，一组中只能设置一个
案例:
单选按钮组：
- 每个
<input>标签都设置了type="radio"，表示这是一个单选按钮。name="languagePreference"：所有单选按钮共享相同的name属性值。这意味着这些按钮属于同一组，用户只能在这一组中选择一个选项。当表单被提交时，这组单选按钮中的选定值将以键"languagePreference"发送到服务器。alue属性指定了每个单选按钮的值。当某个单选按钮被选中且表单被提交时，这个值就会随同其name一起发送给服务器。例如，如果选择了“Python”，则提交的数据中将包含languagePreference=Python。name属性值:
languagePreference= value属性值:单选Python
- 假设用户选择了“Python”作为他们最喜欢的编程语言并点击了提交按钮，那么服务器端将接收到如下形式的数据：
languagePreference=Python通过正确配置
name和value属性，你可以确保从一组相关的单选按钮中准确地获取用户的选择，并将其发送到服务器进行处理。这种机制非常适合于让用户在一系列互斥选项中做出选择的情况。
<!-- 单选按钮组 -->
<p>编程语言:
<input type="radio" id="javascript" name="languagePreference" value="JavaScript" checked>JavaScript
<input type="radio" id="python" name="languagePreference" value="Python">Python
<input type="radio" id="java" name="languagePreference" value="Java">Java
<input type="radio" id="cpp" name="languagePreference" value="C++">C++
</p>
input标签 type="checkbox"
多选框 用于多选多 在网页中显示多选多的多选表单控件
value属性:
表示用户选择的数据。
name属性:
告诉后台发送过去的数据是什么含义
checked属性:
默认选中
针对于多选框， 可以默认选中多个
案例:
复选框组：
- 每个
<input>标签都设置了type="checkbox"，表示这是一个复选框。name="interests"：所有复选框共享相同的name属性值。这意味着这些复选框属于同一组，用户可以选择一个或多个选项。当表单被提交时，这组复选框中所有被选中的值将以键"interests"发送到服务器。value属性指定了每个复选框的值。当某个复选框被选中且表单被提交时，这个值就会随同其name一起发送给服务器。例如，如果选择了“前端开发”、“后端开发”和“算法开发”，则提交的数据中将包含interests=前端开发interests=后端开发 和interests=算法开发。name属性值:
interests= value属性值:前端开发name属性值:
interests= value属性值:后端开发name属性值:
interests= value属性值:算法开发
checked属性：在第一个复选框中设置了checked属性，这意味着页面加载时该复选框默认为选中状态。其他复选框没有设置此属性，默认为未选中状态。- 假设用户选择了“前端开发”、“后端开发”以及“算法开发”作为他们感兴趣的技术领域，并点击了提交按钮，那么服务器端可能接收到如下形式的数据：
interests=前端开发&interests=后端开发&interests=算法开发这使得通过正确配置
name、value和checked属性，可以有效地收集用户的选择，并将其发送到服务器进行进一步处理。这种机制非常适合于让用户选择一个或多个选项的情况。
<p>请选择您感兴趣的技术领域：
<input type="checkbox" id="frontend" name="interests" value="前端开发" checked>前端开发
<input type="checkbox" id="backend" name="interests" value="后端开发">后端开发
<input type="checkbox" id="devops" name="interests" value="算法开发">算法开发
<input type="checkbox" id="mobile" name="interests" value="移动开发">移动开发
</p>
input标签 type="file"
文件选择。用于之后上传文件。在网页中显示文件选择的表单控件
multiple属性:
多文件选择上传
<!-- 单文件选择上传 -->
<p>单文件选择上传:<input type="file"></p>
<!-- 多文件选择上传 -->
<p>多文件选择上传:<input type="file" multiple></p>
input标签 type="submit"
提交按钮 用于提交 点击之后提交数据给后端服务器
input标签 type="reset"
重置按钮 用于重置 点击之后恢复表单默认值
input标签 type="button"
普通按钮 默认无功能 之后配合js添加功能
如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
<!-- 按钮 -->
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="普通按钮">
button按钮标签 :
在网页中显示用户点击的按钮
button标签 tpye属性="submit"
提交按钮 用于提交 点击之后提交数据给后端服务器
button标签 tpye属性="reset"
重置按钮 用于重置 点击之后恢复表单默认值
button标签 tpye属性="button"
普通按钮 默认无功能 之后配合js添加功能
注意点：
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签，更便于包裹其他内容：文字、图片等
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮, 没有任何功能</button>
select下拉菜单标签
在网页中提供多个选择项的下拉菜单表单控件
select标签：
下拉菜单的整体
option标签：
下拉菜单的每一项
selected属性：
下拉菜单的默认选中
<body>
<p>我所在的城市:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
<option>武汉</option>
</select>
</p>
</body>
textarea文本域标签
用于创建一个多行的文本输入区域，允许用户输入较长的文本内容（如评论、留言、描述等）。基本语法：
<textarea rows="4" cols="50" placeholder="请输入内容..."></textarea>主要属性：
属性 说明 rows 设置文本区域的行数（高度） cols 设置文本区域的列数（宽度，基于字符数） name 提交表单时的字段名称 placeholder 显示提示文本（用户输入时消失） disabled 禁用文本区域 readonly 只读模式（用户不能修改） maxlength 限制最大输入字符数 autofocus 页面加载时自动聚焦 注意点：
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置
textarea文本域标签案例
required属性确保内容非空
maxlength="200"限制最大输入长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板示例</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
/* 0 表示元素的上下外边距（margin-top 和 margin-bottom）为 0，即上下方向没有额外的间距。
auto 对于左右外边距（margin-left 和 margin-right），浏览器会自动计算并分配相等的值，从而使元素在其包含块内水平居中。 */
margin: 0 auto;
padding: 20px;
/* background-color: lightblue; */
}
form{
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
}
label {
display: block; /*label 转为块元素 独占一行 */
margin-bottom: 8px;
font-weight: bold;
}
textarea { /* 行内块元素 */
width: 100%;
padding: 10px;
border: 10px solid #ddd;
border-radius: 4px;
/* 元素指定的宽度和高度包含内容区域（content）、内边距（padding）和边框（border）。
因此，无论你如何调整 padding 和 border 的大小，
盒子的实际宽度和高度都不会改变，只会减少内容区域的大小。 */
box-sizing: border-box;
resize: vertical; /* textarea元素 只能调整 高度 */
overflow: auto; /* textarea元素 默认是 overflow: auto/hidden 不会内容溢出 */
}
button {
background: #5dd65f;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #15791a;
}
</style>
</head>
<body>
<h1>留言板</h1>
<form id="commentForm" action="/submit" method="post">
<label for="comment">留言内容:</label>
<textarea required id="comment" name="comment" cols="30" rows="10" placeholder="请写下您的意见(最多200字)..." maxlength="200">
</textarea>
<div id="charCounter">剩余字数:200</div>
<button type="submit">提交留言</button>
</form>
<script>
// 实时显示剩余字数
const textarea = document.getElementById('comment');
const charCounter = document.getElementById('charCounter');
textarea.addEventListener('input',function(){
const remaining = 200- this.value.length;
charCounter.textContent =`剩余字数：${remaining}`;
});
// 阻止表单提交（仅演示，实际项目需后端处理）
document.getElementById('commentForm').addEventListener('submit',function(e){
e.preventDefault();
alert('留言已提交成功\n内容：' + textarea.value);
textarea.value = ''; // 清空输入
charCounter.textContent = '剩余字数：200';
})
</script>
</body>
</html>
label标签
<label>标签在 HTML 中用于定义表单控件的说明文本。
<label>标签通过将文本内容与一个或多个表单元素（如输入框、复选框、单选按钮等）关联起来，提高了网页的可访问性和用户体验。当用户点击
<label>标签内的文本时，浏览器会自动聚焦或激活相应的表单控件，这不仅方便了用户的操作，也对使用屏幕阅读器等辅助技术的用户特别友好。
<label>标签的好处
- 提高可用性：使用户能够更容易地与表单交互，例如，点击标签文字即可选中对应的单选按钮或复选框。
- 增强可访问性：帮助屏幕阅读器识别表单控件及其描述，使得视力受限的用户也能更好地理解如何与表单互动。
- 美观布局：结合 CSS 可以创建更直观和吸引人的表单设计。
<label> 标签有两种主要方式与表单控件关联：
使用方法1：使用label标签的 for 属性：
①使用label标签把内容（如：文本）包裹起来
②在表单
label标签上添加id属性③在label标签的for属性的值 与 相关联的表单控件(input button等)的
id属性值 相匹配(相等)label:for属性值=表单控件input:
id属性值
案例:
1.当用户点击 “用户名:”文字时 会自动聚焦到对应的输入框(输入框乘高亮状态)
<!-- label:for属性值：username=表单控件input:id 属性值：username -->
<label for="username">用户名:</label>
<input type="text" id="username" name="username" >
2.当用户点击“订阅新闻”文字时 会自动 选中/取消选中 复选框 (这个案例很重要)
<!-- label:for属性值：subscribeNews = 表单控件input:id 属性值：subscribeNews -->
<label for="subscribeNews">订阅新闻</label>
<input type="checkbox" id="subscribeNews" name="subscribeNews">
使用方法2：label标签嵌套表单控件：直接在 <label> 标签内部放置表单控件。
①直接使用label标签把内容（如：文本）和表单标签(input等)一起包裹起来
②需要把label标签的for属性删除即可
案例:
点击“我同意条款和条件”的文字时直接与复选框关联，点击这段文字的效果是切换复选框的状态(选中/取消)。
<!-- label标签把内容（如：文本）:"我同意条款和条件" 和表单标签：input 一起包裹起来 -->
<label>
我同意条款和条件
<input type="checkbox" name="agreeTerms">
</label>
方法1和方法2综合使用案例:
<p>请选择性别:</p>
<label for="man">男</label> <input type="radio" name="sex" id="man">
<label for="woman">女</label><input type="radio" name="sex" id="woman">
<label>中性 <input type="radio" name="sex"></label>
没有语义的布局标签
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：
一行只显示一个（div标签包裹的内容独占一行）
宽度默认是占满一行，高度默认由内容撑开
span标签：
一行中可以显示多个span标签包裹的内容
宽度和高度默认都是由内容撑开
<body>
普通文字
<div>这是div标签1</div>
<div>这是div标签2</div>
<span>这是span标签1</span>
<span>这是span标签2</span>
<span>这是span标签3</span>
</body>
<p></p>标签与<div></div>标签的区别
<p> 标签：(类似一个小控件)
①代表段落（paragraph），具有明确的语义意义。它用于标记文本的一个独立段落。浏览器通常会在段落之间添加一定的间距来区分不同的段落。
②默认情况下，浏览器会给每个 <p> 元素周围添加一些外边距（margin），以创建段落间的视觉间隔。这使得文本看起来更易于阅读，因为每个段落都与前后内容有所区分。
③最适合用于文本内容的组织，特别是当你想要表达一段独立的文字时。它是构建网页内容的基础之一，有助于提高文档的可读性和结构化程度。
<div> 标签：(类似一个大布局容器组件)
①是一个通用容器（division），没有特定的语义含义，主要用于对文档中的块级元素进行分组或应用 CSS 样式。它可以包含任何类型的元素，包括其他 <div>、标题<h1>、段落<p>、列表<ul>等。
②作为一个纯容器，默认没有任何额外的样式，也不会为内容增加额外的空间。它的主要目的是为了布局或者通过 CSS 对其中的内容应用样式。
③更适合用于布局目的，当需要对一组元素进行分组或者应用样式而不考虑其内在含义时使用。例如，你可以用 <div> 来创建一个导航栏、页脚或者是整个页面的布局框架。
<!-- 使用 p 标签 -->
<p>这是一个段落。注意段落之间的自然间距。</p>
<p>这是另一个段落。</p>
<!-- 使用 div 标签 -->
<div style="border: 1px solid black; padding: 10px;">
这是一个 div 容器内的文本。由于我们给 div 添加了边框和内边距，可以看到它如何影响内容的显示。
</div>
有语义的布局标签（了解）
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
常见有语义的布局标签
header：网页头部 标签:
nav：网页导航 标签:
footer：网页底部 标签:
aside：网页侧边栏 标签:
section：网页区块 标签:
article：网页文章标签:
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>
字符实体
字符实体定义:
在 HTML 中，字符实体（Character Entities）用于表示一些特殊的字符或符号，有些字符由于具有特殊的意义而在 HTML 中不能直接使用。例如，小于号
<和大于号>通常用来定义 HTML 标签，如果要在页面上显示这些符号本身，则需要使用它们对应的字符实体。
- 字符实体是一个更广泛的概念，指的是所有用于在 HTML 文档中插入特殊字符的方法，包括命名实体和数字实体。
字符实体有2种基本格式:
命名实体：
以
&开头，接着是实体的名字，最后以;结束。“命名实体”实际上是字符实体的一种类型，特指那些使用名称而不是数字编码来表示的字符实体。例如：
&表示 和号&©表示 版权符号© 表示 非断空格<表示 小于号<。
数字实体：
同样以
&开头，后面跟随一个井号#和一个数字（可以是十进制也可以是十六进制），最后以;结束。例如
:<或<也表示小于号<。
常见的字符实体：
小于号 <
- 命名实体：
< - 数字实体：
<或<
大于号 >
- 命名实体：
> - 数字实体：
>或>
<p>为了学习 HTML & CSS，请访问 << www.3cschool.com >> 教程部分。</p>
和号 &
命名实体:&
数字实体:&
<p>为了学习 HTML & CSS，请访问 << www.3cschool.com >> 教程部分。</p>
引号
- 双引号：
"(") - 单引号：
'(') 注意：'不被所有浏览器支持,尤其是旧版的IE不支持。
版权符号 ©
- 命名实体：
© - 数字实体：
©或©
<p>版权信息：© 2025 Your Company Name.</p>
注册商标符号 ®
- 命名实体：
® - 数字实体：
®或®
非断空格 :
其他的细空格 半宽空格 全角空格 不做讲解
- 命名实体：
这是最常见的形式非断空格，用于插入一个不会被浏览器合并且不会换行的非断空格。
<!-- “hello”和“world”之间显示4个连续的空格，并且这些多个空格不会被浏览器合并成一个，也不会在不合适的地方换行。-->
<p>hello world</p>
HTML的合并多个空格现象:
在 HTML 中，当你直接在代码中使用多个空格或制表符时，默认情况下这些额外的多个空白会被浏览器合并为一个单一的空格。这是 HTML 的一种解析行为，被称为“空白符合并”。这意味着无论你在源代码中插入了多少个连续的空白字符（包括空格、制表符、换行符等），浏览器都会将其简化为一个空格显示。
<!-- 尽管你在 hello 和 world 之间插入了大量的空格，但在浏览器中只会显示为一个空格。 -->
<p>hello world</p>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
