【随手记】HTML知识点整理

一、HTML 基础

1. 常用标签

1.1 排版标签

在网页排版时，标题和段落标签是必不可少的。HTML 提供了从 h1 到 h6 的六个级别的标题标签，数字越大字体越小。使用 p 标签可以自动在段落之间添加间距，保持内容的清晰和有序。

如果需要简单换行，可以使用 br 标签；添加分隔线则推荐使用 hr 标签。

开发经验：在实际项目中，合理使用语义化标签不仅有助于SEO优化，还能提升代码的可维护性。

1.2 文本格式化

调整文本样式时，建议使用语义化更强的标签：

  • 加粗：使用 strong 而非 b
  • 下划线：使用 u 或 ins
  • 斜体：使用 em 替代 i
  • 删除线：使用 del 表示内容的移除
html
1
2
3
4
<!-- 语义化的文本格式化 -->
<p>这是一段包含 <strong>加粗</strong> 和 <em>斜体</em> 的文本。</p>
<ins>这段文字被下划线标记。</ins>
<del>这段文字已被删除。</del>

1.3 媒体标签

现代网页中，多媒体内容不可或缺。HTML5 提供了强大的媒体标签支持：

html
1
<img src="图片地址" alt="替换文本" title="悬停提示" width="宽度" height="高度" loading="lazy">
html
1
2
3
4
5
<!-- 音频播放示例 -->
<audio src="音频文件" controls autoplay loop></audio>

<!-- 视频播放示例 -->
<video src="视频文件" controls autoplay loop muted></video>

开发经验：

  1. 为图片添加 alt 属性，不仅有助于SEO，还提升了网页的可访问性。
  2. 使用 loading="lazy" 可以延迟加载图片，加快页面初次加载速度。
  3. 在Chrome中，视频自动播放必须结合 muted 属性使用。

2. 列表标签

HTML 提供了三种列表类型，适用于不同的展示需求：

无序列表 (ul)

适合展示无顺序关系的项，例如导航菜单：

html
1
2
3
4
5
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表 (ol)

用于展示有序的内容，如步骤说明：

html
1
2
3
4
5
<ol>
    <li>准备材料</li>
    <li>按步骤操作</li>
    <li>完成制作</li>
</ol>

定义列表 (dl)

适用于术语解释或键值对的展示：

html
1
2
3
4
5
6
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

开发经验：在构建复杂的表单或信息展示时，合理选择列表类型可以提升用户体验和内容的可读性。

二、CSS 基础

1. 选择器

掌握CSS选择器能够让样式代码更加简洁高效：

css
1
2
3
4
5
6
7
8
9
10
11
12
/* 基本选择器 */
.container { }
#header { }
.nav-item { }

/* 组合选择器 */
.header .nav > li { }
.btn:hover { }

/* 属性选择器 */
a[href^="https"] { }
[class*="icon-"] { }

开发经验：

  1. 尽量使用类选择器，避免过度依赖ID选择器，以提高样式的复用性。
  2. 使用属性选择器可以减少类名的数量，使HTML结构更清晰。

2. 常用样式

样式是网页视觉呈现的核心，以下是常用的样式属性：

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 文本样式 */
p {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

/* 盒模型 */
.box {
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* 背景与颜色 */
.header {
    background-color: #f8f9fa;
    background-image: url('背景图.jpg');
    opacity: 0.9;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
}

开发经验：合理使用 box-sizing: border-box 可以更容易地控制元素的总宽度，避免布局混乱。

3. 布局

布局是CSS的核心能力，现代Web开发常用的布局方案有Flexbox和Grid：

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Flexbox布局 */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-item {
    flex: 1 1 300px;
}

/* Grid网格布局 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

开发经验：

  1. Flexbox适用于一维布局，简化了常见的对齐和分布任务。
  2. Grid适用于复杂的二维布局，能够轻松创建响应式网格系统。

注意事项

在使用HTML和CSS时，需要注意以下几点：

  1. 浏览器兼容性

    • 使用 Can I Use 检查特性支持情况。
    • 提供降级方案，确保在不支持新特性的浏览器中也能良好显示。
    • 利用 Autoprefixer 自动添加必要的浏览器前缀。

  2. 性能优化

    • 采用语义化标签提升SEO效果。
    • 优化图片格式和大小，减少加载时间。
    • 选择高效的CSS选择器，避免性能瓶颈。

  3. 代码规范

    • 采用统一的命名规范，如BEM方法论，提高代码可维护性。
    • 按类型分组和排序CSS属性，增强代码可读性。
    • 添加必要的注释，帮助团队协作和代码理解。

参考资源

想要深入学习 HTML 和 CSS,推荐以下资源:

  • MDN Web Docs - Mozilla 的开发者文档,内容全面且权威
  • W3Schools - 适合初学者的在线学习平台