HTML
开发者技术
HTML
HTML (HyperText Markup language, 超文本标记语言) 是一种用于创建网页结构和内容的标记语言，而不是编程语言
- 标记语言： 通过一套"标签"(Tag) 来标注文本的不同部分，告诉浏览器该如何显示内容
- 不是编程语言： 没有变量、函数、循环等逻辑控制语言
组成部分
| 组成部分 | 作用 |
|---|---|
<!DOCTYPE html> | 文档类型声明，告诉浏览器使用标准模式渲染 |
<html> | 根元素，包裹整个页面 |
<head> | 元数据容器（标题、编码、样式、脚本、SEO标签） |
<body> | 页面可见内容（用户看到的部分） |
title | 浏览器标签页标题 + 搜索引擎结果标题 |
语义化标签
使用具有明确含义的HTML标签来描述内容，而非全部使用<div>/<span>加class，让标签"自解释" ———— 不看CSS/JS，仅看HTML就能理解页面结构
核心价值
| 价值 | 说明 |
|---|---|
| SEO | 搜索引擎爬虫识别标签权重，<h1> > <h2> , <article> 标识主体内容 |
| 可访问性(ally) | 屏幕阅读器（如 NVDA，VoiceOver）根据语义标签播报结构和快捷键 |
| 代码可维护性 | 开发者阅读代码时一眼看懂结构，降低协作成本 |
| 跨平台兼容 | 不同设备/浏览器能正确理解内容层次，降级时仍保持结构清晰 |
语义化标签全景图(按功能分组)
- 页面结构标签
| 标签 | 语义含义 | 典型使用场景 | 隐式ARIA角色 |
|---|---|---|---|
<header> | 页眉/区块头部 | 网站logo、导航栏、搜索框、作者信息 | role="banner" |
<nav> | 导航区域 | 主导航菜单、面包屑导航、分页导航 | role="navigation" |
<main> | 页面主体内容 | 页面核心内容，一个页面只能用一次 | role="main" |
<article> | 独立内容单元 | 博客文章、新闻详情、评论、论坛帖子 | role=article |
<section> | 通用内容区块 | 章节、选项卡面板、轮播图区域 | role="region" |
<aside> | 侧边栏/附属信息 | 广告侧边栏、相关阅读、引用区块 | role="complementary" |
<footer> | 页脚/区块尾部 | 版权信息、备案号、联系方式、友情链接 | role="contentinfo" |
- 文本语义标签
| 标签 | 语义含义 | 视觉效果 | 非语义替代（错误做法） |
|---|---|---|---|
<h1>~<h6> | 标题层级 | 加粗 + 字号递减 | <div class="title"> |
<p> | 段落 | 上下外边距 | <div> + 手动换行 |
<strong> | 强重要性(紧急/严重) | 加粗 | <b> |
<em> | 语气强调(重音/加重语气) | 斜体 | <i> |
<mark> | 高亮标记(与上下文相关) | 黄色背景 | <span style="background: yellow"> |
<ins> | 插入的文本 | 下划线 | <u> |
<del> | 删除的文本 | 删除线 | <s> |
<small> | 小号文本(免责/细则) | 字号变小 | <span style="font-size: smaller"> |
<abbr> | 缩写/首字母缩略词 | 虚线下划线 + title属性 | 普通文字 |
<time> | 日期/时间 | 无默认样式 | <span> |
<address> | 联系信息 | 斜体 | <div> |
<code> | 代码片段 | 等宽字体 | <span> |
- 列表语义标签
| 标签 | 语义含义 | 适用场景 |
|---|---|---|
ul + li | 无序列表 | 菜单导航、新闻列表、商品清单 |
ol + li | 有序列表 | 操作步骤、排行榜、目录 |
dl + dt + dd | 描述列表(键值对) | 产品参数、术语解释、问答 |
- 表格语义标签
| 标签 | 语义含义 |
|---|---|
thead | 表头 |
tbody | 表体 |
tfoot | 表底 |
th | 表头单元格 |
tr | 表行 |
td | 表体单元格 |
caption | 表格标题 |
scope="col"/"row" | 定义 th 是列头还是行头 |
- 表单语义标签
| 标签/属性 | 语义含义 |
|---|---|
<label> | 显式关联表单控件，扩大点击区域 |
<fieldset> | 将相关表单控件分组 |
legend | 为fieldset提供分组标题 |
<input type="email"> | 语义化输入类型(验证 + 移动端键盘) |
<input type="tel"> | 数字键盘 |
<button type="submit"> | 确认按钮 |
- 媒体语义标签
| 标签 | 语义含义 |
|---|---|
<figure> | 独立的引用单位(图片、图表、代码块) |
<figcaption> | 为 figure 提供标题/说明 |
picture | 响应式图片容器(艺术方向) |
video / <audio> | 视频/音频 |
<figure> <img src="dome.png" alt="图片描述"> <figcaption>图1: 描述</figcaption></figure><picture> <!-- 场景1：宽度 ≤ 600px 时，加载裁剪后的正方形图 --> <source media="(max-width: 600px)" srcset="small-square.jpg"> <!-- 场景2：宽度 ≤ 1200px 时，加载中等宽图 --> <source media="(max-width: 1200px)" srcset="medium.jpg"> <!-- 场景3：支持 WebP 格式的浏览器，加载 WebP（高画质小体积） --> <source type="image/webp" srcset="large.webp"> <!-- 默认降级：老浏览器或都不匹配时 --> <img src="large.jpg" alt="风景描述"></picture>