HTML-CSS-补充学习

HTML-CSS-补充学习

一. HTML 语义化标签

标签语义/用途示例适用场景
页面结构
<header>定义页面或区域的头部（如网站标题、导航栏）<header><h1>网站标题</h1><nav>...</nav></header>页面顶部、文章/章节标题区域
<nav>定义导航链接区域<nav><ul><li><a href="#">首页</a></li></ul></nav>网站主导航、侧边栏导航
<main>定义页面主要内容（一个页面只能有一个）<main><article>...</article></main>页面核心内容区域
<article>定义独立的内容块（如博客文章、新闻）<article><h2>文章标题</h2><p>内容...</p></article>博客文章、论坛帖子、新闻报道
<section>定义文档中的逻辑分区（如章节、功能模块）<section><h2>产品介绍</h2><p>描述...</p></section>页面内容分组（需配合标题使用）
<aside>定义侧边栏或附加内容（如广告、相关链接）<aside><h3>相关链接</h3><ul>...</ul></aside>侧边栏、页脚广告、推荐内容
<footer>定义页面或区域的底部（如版权信息、联系方式）<footer><p>© 2025 公司</p></footer>页面底部、文章页脚
文本语义
<h1>-<h6>定义标题层级（<h1> 最高，<h6> 最低）<h1>主标题</h1><h2>副标题</h2>文章/页面标题层级
<p>定义段落<p>这是一段文字。</p>段落文本
<em>强调文本（默认斜体）<p>这是<em>重要</em>内容。</p>需要强调的词语
<strong>强烈强调文本（默认粗体）<p>请<strong>务必</strong>注意！</p>警告、重要提示
<mark>高亮标记文本（黄色背景）<p>请记住<mark>截止日期</mark>。</p>突出显示关键词
<small>定义小号文本（如版权信息）<p>版权所有<small>© 2025</small></p>版权声明、免责声明
<del>定义删除线文本<p>原价：<del>100元</del></p>价格修改、已删除内容
<ins>定义下划线文本（新增内容）<p>新功能：<ins>夜间模式</ins></p>新增内容提示
多媒体与嵌入
<figure>定义自包含的媒体内容（如图表、图片）<figure><img src="image.jpg" alt=""><figcaption>描述</figcaption></figure>图片、图表、代码块
<figcaption>定义<figure>的标题见上图片说明、图表标题
其他语义化标签
<time>定义日期/时间<time datetime="2025-01-01">2025年1月1日</time>文章发布时间、事件日期
<address>定义联系信息<address>邮箱：<a href="mailto:xxx@example.com">xxx@example.com</a></address>作者联系方式、公司地址
<details>定义可折叠的内容区域<details><summary>点击查看详情</summary>内容...</details>帮助文档、常见问题解答
<summary>定义<details>的摘要见上折叠内容的标题
<dialog>定义对话框（需配合 JavaScript 使用）<dialog open><p>对话框内容</p></dialog>弹窗、模态框
<figure> + <figcaption>组合使用定义媒体与标题见<figure>示例

为什么要使用语义化标签:

  1. 提升 SEO 效果
    搜索引擎爬虫通过语义化标签更精准地理解页面内容结构，例如
    表示独立文章，
  2. 增强可访问性
    屏幕阅读器等辅助设备依赖语义化标签解析内容。例如，
    和
    能帮助视障用户快速定位页面区块。
  3. 提高代码可维护性
    语义化标签使代码逻辑清晰，例如
    表示章节，
  4. 适应未来技术发展
    语义化标签是响应式设计和跨设备兼容的基础，确保内容在不同设备上呈现一致。

二.盒模型

1 . 盒模型的基本结构

每个 HTML 元素都可以看作是一个矩形盒子，由四个部分组成：

1
2
3
4
5
6
7
8
9
10
11
12
+---------------------+
|       Margin        |  外边距
| +-----------------+ |
| |     Border      | |  边框
| | +-------------+ | |
| | |    Padding  | | |  内边距
| | | +---------+ | | |
| | | | Content | | | |  内容区域
| | | +---------+ | | |
| | +-------------+ | |
| +-----------------+ |
+---------------------+

2. 盒模型的组成部分

组件说明默认值单位
Content元素的实际内容由内容决定-
Padding内边距，内容与边框之间的空间0px/em/%等
Border边框，围绕内容和内边距无px/em/%等
Margin外边距，元素与其他元素之间的空间0px/em/%等

3. 盒模型的两种类型

标准盒模型（content-box）

1
box-sizing: content-box; /* 默认值 */
  • 宽度计算：width仅指内容区域的宽度
  • 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

怪异盒模型（border-box）

1
box-sizing: border-box;
  • 宽度计算：width包含内容、内边距和边框
  • 总宽度 = width + margin-left + margin-right

三.浮动

浮动是 CSS 布局中的一个重要概念，它允许元素脱离正常的文档流并向左或向右移动，直到碰到包含框或另一个浮动元素为止。浮动最初是为实现文字环绕图片效果而设计的，但现在广泛用于各种布局场景。

1.浮动的定义

当一个元素设置了float属性后，它会：

  • 脱离正常文档流（但不会完全脱离，仍会影响后续元素的布局）
  • 向左或向右移动，直到碰到父容器边缘或另一个浮动元素
  • 其他非浮动元素会围绕浮动元素排列（文字环绕效果）
1
2
3
4
float: left; /* 向左浮动 */
float: right; /* 向右浮动 */
float: none; /* 默认值，不浮动 */
float: inherit; /* 继承父元素的浮动属性 */

2.浮动的特点

脱离文档流

  • 浮动元素会脱离正常文档流，但不会脱离文本流
  • 浮动元素会从常规文档流中”浮”起来，但仍会影响文本和其他行内元素的布局

高度塌陷问题

当父元素仅包含浮动子元素时，父元素的高度会塌陷为 0，因为浮动元素已经脱离了文档流。

包裹性

浮动元素会尽可能地向左或向右移动，但不会超出其父容器的边界。

3.如何清除浮动

当需要阻止元素围绕浮动元素排列时，可以使用clear属性：

1
2
3
4
5
.clear {
  clear: both; /* 清除左右两侧的浮动 */
  clear: left; /* 只清除左侧浮动 */
  clear: right; /* 只清除右侧浮动 */
}

方法一:(额外标签法:空 div)

在浮动元素下面添加一个块级元素,样式设置为 style=”clear: both;”

1
2
<div style="float: left;">浮动元素</div>
<div style="clear: both;"></div>

方法二:(overflow 方法)

父级元素设置overflow:hidden;

1
2
3
.container {
  overflow: hidden; /* 或 auto */
}

方法三:(伪元素法) 还有双伪元素法

1
2
3
4
5
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

双伪元素法（更全面）：

4. 浮动的优缺点

优点

  • 实现简单，兼容性好
  • 适合创建多栏布局
  • 文字环绕效果自然

缺点

  • 高度塌陷问题需要额外处理
  • 清除浮动增加代码复杂度
  • 不是真正的布局方案（Flexbox/Grid 更现代）

5. 浮动与定位的区别

特性浮动(float)定位(position)
脱离文档流部分脱离完全脱离（absolute/fixed）
影响布局影响周围元素不影响周围元素
定位方式向左/右浮动绝对/相对/固定定位
典型用途文字环绕、多栏布局精确定位元素

四.样式优先级