超文本标记语言｜从基础、标签、属性、语义化到站内SEO全面讲解
HTML(Hyper‑Text Markup Language)：超文本标记语言，不是编程语言，是标记语言。
.html / .htm，浏览器直接解析渲染。<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<meta name="viewport" content="width=device‑width, initial‑scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面所有可见内容写在这里 -->
<h1>一级标题</h1>
<p>段落文本</p>
</body>
</html><!DOCTYPE html>：文档声明，告诉浏览器这是HTML5文档，必须写在最顶部；<html>：根标签，整个网页的根容器；lang指定页面语言；<head>：头部，存放元数据，内容不会显示在页面；
meta charset：设置字符编码，统一使用 UTF‑8，防止中文乱码；meta viewport：移动端适配关键，控制视口；title：浏览器标签页标题；<body>：页面可视区域，所有展示给用户的内容全部放在body内部；<!-- 注释 -->：HTML注释，浏览器不会渲染。有开始标签+结束标签，中间包裹内容。例：<p>内容</p>、<div></div>
无结束标签，本身完成功能。例：<img>、<br>、<hr>、<meta>
写在开始标签内部，格式：属性名="属性值"，用来给标签附加额外信息。
<a href="https://www.baidu.com" target="_blank">跳转链接</a>
<img src="demo.jpg" alt="图片描述" width="400">id：唯一标识，同一个页面id不能重复；用于JS、锚点；class：类名，多个空格隔开，用于CSS选择器；可以重复；style：行内CSS样式；title：鼠标悬浮显示提示文字；data‑*：自定义数据属性，存储自定义数据供JS读取；""，不要省略引号，保持规范。 语义标签：标签名字就代表内容含义，利于搜索引擎SEO、无障碍读屏，替代大量无意义div。
| 标签 | 用途说明 |
|---|---|
| <header> | 页面/模块头部：导航、标题区 |
| <nav> | 导航菜单区域 |
| <main> | 页面主体内容，一个页面只能出现一次main |
| <section> | 内容区块，主题性分组 |
| <article> | 独立完整内容：文章、帖子 |
| <aside> | 侧边栏、附属信息 |
| <footer> | 页脚：版权、联系方式 |
| <figure>/<figcaption> | 图片+图注说明 |
<header>网站头部</header>
<nav>导航菜单</nav>
<main>
<section>内容区块</section>
<article>文章内容</article>
</main>
<aside>侧边栏</aside>
<footer>页脚版权</footer>h1‑h6：标题，h1最重要，一页尽量只用1个h1；p：段落；br换行；hr分割线；strong强调重要文本；em斜体强调；span行内通用容器；<a href="地址" target="_blank">超链接；target="_blank"新标签页打开；<img src="图片地址" alt="替代文本">图片；alt图片加载失败显示文字，SEO必备；<video>视频；<audio>音频；ul + li无序列表；ol + li有序编号列表；dl dt dd描述列表；<table>
<thead><tr><th>表头</th></tr></thead>
<tbody><tr><td>单元格</td></tr></tbody>
</table><form action="/submit" method="post">
<input type="text" name="username">
<select><option>选项</option></select>
<textarea></textarea>
<button type="submit">提交</button>
</form>div：通用块容器，无语义，用来布局分组；span：行内容器，包裹局部文字。<div><p></div></p><!DOCTYPE html>，设置meta charset="UTF‑8"；DOM：Document Object Model，文档对象模型。浏览器把HTML文档解析成树形对象结构。
// JS简单示例：获取id为box的元素
const box = document.getElementById('box');
box.innerText = "修改文本内容";页面需要输出 < > & 等特殊符号，必须使用转义，否则浏览器会当成标签解析。
| 显示字符 | 转义代码 |
|---|---|
| < | < |
| > | > |
| & | & |
| " | " |
| 空格 | |
站内SEO：通过HTML标签、元信息、页面结构，帮助搜索引擎爬虫理解页面主题，提升收录与排名。
<!-- 页面标题，SEO权重最高，30‑60字符，包含核心关键词 -->
<title>核心关键词 - 网站品牌名称</title>
<!-- 页面描述，搜索结果摘要，70‑160字符，提升点击率 -->
<meta name="description" content="页面简短描述，包含业务关键词，吸引用户点击">
<!-- 关键词meta，现代搜索引擎权重降低，可写可不写 -->
<meta name="keywords" content="关键词1,关键词2,长尾词">
<!-- 爬虫指令：all允许抓取；noindex禁止收录；nofollow不跟踪链接 -->
<meta name="robots" content="index,follow">
<!-- 规范URL，解决重复页面，指定规范页面地址 -->
<link rel="canonical" href="https://www.example.com/page.html">
<!-- 多语言站点hreflang，外贸网站使用 -->
<link rel="alternate" hreflang="zh‑CN" href="https://example.com/cn/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<!-- 移动端适配，必须配置，移动SEO基础 -->
<meta name="viewport" content="width=device‑width, initial‑scale=1.0"><h1>页面主标题（核心关键词）</h1>
<h2>板块一标题</h2>
<p>板块一正文内容...</p>
<h3>板块一子项标题</h3>alt：图片替代文本，描述图片内容，关键词适度融入；图片无法加载时展示；图片搜索收录依赖alt；loading="lazy" 懒加载。<img src="office‑chair.jpg" alt="办公人体工学椅" width="800" height="600" loading="lazy">rel="nofollow"：对外广告、第三方外链添加，不传递权重；target="_blank"新开窗口，建议搭配 rel="noopener noreferrer"安全加固；<!-- 内部链接 -->
<a href="/product/list.html">查看全部产品列表</a>
<!-- 外部外链 -->
<a href="https://outer‑site.com" target="_blank" rel="nofollow noopener noreferrer">第三方站点</a><main>：标记页面主体内容，爬虫识别正文区域；一个页面只出现一次；<nav>：导航区域；<article>文章主体；<section>内容分块；<footer>页脚；JSON‑LD嵌入head，告诉搜索引擎页面类型（商品、文章、企业），获取搜索结果富卡片展示。
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Article",
"headline":"文章标题",
"description":"文章简述",
"author":{"@type":"Person","name":"作者名"}
}
</script>robots.txt：放在网站根目录，规定哪些目录允许/禁止爬虫抓取；sitemap.xml：网站地图，列出全部页面URL，提交给搜索引擎，加快收录。<div><p></div></p> 非法；页面按 F12 打开开发者工具，Elements面板可以查看、修改实时HTML结构，调试布局错误。