一天通关HTML80%核心细节（新手友好版）

一、基础认知

1.HTML 是超文本标记语言（HyperText Markup Language） ，只有标签，没有逻辑、变量、循环，本质是给浏览器看的 "说明书"，告诉浏览器页面结构是什么样的。

2.HTML5 不是新语言，HTML5 是 HTML 的第 5 个大版本，我们现在写的所有 HTML 代码，本质都是 HTML5。

3.即使你写错标签、少写闭合、语法错误，浏览器也会尽量渲染页面，不会直接报错。这是 HTML 最友好也最坑人的地方 ------ 代码错了但看起来正常，留下隐形 bug。

二、文档结构：新手都会忽略的细节

<!DOCTYPE html> 是 HTML5 独有的极简声明，老式 HTML 的声明长达 3 行，已经完全淘汰
lang="zh-CN" 不要写成 lang="zh"，前者更标准
meta charset 必须写在 head 的最前面，否则可能出现乱码
viewport 标签是移动端适配的基础，没有它手机上页面会缩小

三、最容易踩坑的基础属性

id vs name：90% 新手分不清

属性	作用
id	唯一标识标签

作用	给谁用
前端（label 绑定、JS 查找、CSS 选择器）	全局唯一，一个页面只能有一个相同 id


name	表单提交传数据


后端服务器	可以重复（比如单选框、复选框）

超级大坑：

表单提交时，只有带 name 属性的元素才会被发送到后端
id 不会被提交到后端，和后端完全无关
写成一样只是为了好记，不是必须一样

2. class vs id

id：唯一标识，一个标签只能有一个 id，一个页面只能有一个相同 id
class：通用类名，一个标签可以有多个 class，一个页面可以有多个相同 class
优先级：id > class > 标签选择器

3. 路径问题

绝对路径：https://xxx.com/image.jpg
相对路径：./image.jpg（当前目录）、../image.jpg（上级目录）
根路径：/image.jpg（网站根目录）

坑点：本地打开 HTML 文件时，根路径会指向电脑磁盘根目录，而不是项目文件夹，导致资源加载失败。

四、核心标签深度细节

<h1> 一个页面只能有一个，SEO 权重最高
<p> 段落标签，会自动在上下添加边距
<br> 强制换行，单标签，不要写成 </br>
<hr> 水平线，单标签
<strong> 语义化加粗，表示重要内容；<b> 只是视觉加粗，无语义
<em> 语义化斜体，表示强调内容；<i> 只是视觉斜体，无语义

标签	作用	替代的旧写法
`<header>`	网页头部、板块头部	`<div class="header">`
`<nav>`	导航栏	`<div class="nav">`
`<section>`	独立内容板块	`<div class="section">`
`<article>`	独立文章、帖子、评论	`<div class="article">`
`<aside>`	侧边栏	`<div class="aside">`
`<footer>`	网页底部、板块底部	`<div class="footer">`

✅ 最佳实践：

大块独立内容用 section，纯布局用 div
article 是特殊的 section，代表可以独立存在的内容
不要滥用语义化标签，纯排版用 div 就好

3. 列表标签

无序列表 <ul>：只能包含 <li> 子元素
有序列表 <ol>：只能包含 <li> 子元素
自定义列表 <dl>：包含 <dt>（标题）和 <dd>（描述）

4. 超链接 `<a>`

target="_blank"：在新标签页打开
rel="noopener noreferrer"：安全属性，防止新页面获取原页面信息，必须加
href="#"：空链接，点击会跳转到页面顶部
href="javascript:;"：空链接，点击无反应

5. 图片 `<img>`

alt 属性：图片加载失败时显示的文字，SEO 和无障碍必备
不要用 width 和 height 属性设置图片大小，应该用 CSS
图片是行内块元素，默认底部会有 3px 的空白间隙

五、表单全解：HTML 最核心的交互部分

1. 表单基础结构

action：表单提交的后端 API 地址
method：提交方式，常用 GET 和 POST
- GET：数据拼在 URL 后面，长度有限，不安全
- POST：数据放在请求体中，长度无限制，安全
required：HTML5 自带验证，必填项

2. 常用 input 类型

type 值	作用	HTML5 专属
`text`	单行文本输入框	❌
`password`	密码框，输入内容掩码	❌
`radio`	单选框，相同 name 为一组	❌
`checkbox`	复选框，相同 name 为一组	❌
`submit`	提交按钮，点击自动提交表单	❌
`button`	普通按钮，无默认行为	❌
`email`	邮箱输入框，自带格式验证	✅
`number`	数字输入框	✅
`date`	日期选择器	✅
`time`	时间选择器	✅
`tel`	电话号码输入框	✅
`search`	搜索框	✅

超级重要：

单选框必须设置相同的 name 才能实现单选效果
复选框的 name 应该写成数组形式：name="hobby[]"，后端才能接收多个值
<input type="submit"> 自带提交功能，不需要写任何 JS

3. 其他表单元素

<select>：下拉选择框，包含 <option> 子元素
<textarea>：多行文本域，不能用 value 属性设置默认值，默认值写在标签中间
<button>：按钮标签，比 input 按钮更灵活，可以包含图片、文字等内容

六、HTML5 专属核心特性

1. 多媒体标签

controls：显示播放控件
poster：视频封面图
标签中间的文字是浏览器不支持时的备用内容

Canvas 画布

Canvas 是用 JS 绘图的画布，适合画复杂图形、动画、游戏
getContext("2d") 是固定写法，开启 2D 绘图模式
3D 绘图用 getContext("webgl")

SVG 矢量图

SVG 是用标签画的矢量图，放大不会失真
适合画图标、简单图形
可以直接嵌入 HTML，也可以作为外部文件引入

4. 本地存储

localStorage：永久存储，关闭浏览器不会消失
sessionStorage：会话存储，关闭浏览器就消失

七、容易混淆的标签对比

标签 A	标签 B	核心区别
`<div>`	`<section>`	div 纯布局，section 代表独立内容板块
`<section>`	`<article>`	article 是特殊的 section，代表可以独立存在的内容
`<b>`	`<strong>`	b 只是视觉加粗，strong 语义化加粗，表示重要
`<i>`	`<em>`	i 只是视觉斜体，em 语义化斜体，表示强调
`<input type="button">`	`<button>`	input 按钮只能显示文字，button 按钮可以包含任意内容
`<img>`	`<canvas>`	img 显示图片，canvas 用 JS 绘图
`<canvas>`	`<svg>`	canvas 是位图，放大失真；svg 是矢量图，放大不失真

八、冷门但实用的小标签

<details> 和 <summary>：折叠面板
<mark>：高亮文字
<sup> 和 <sub>：上标和下标
<blockquote>：长引用
<code>：行内代码
<pre>：预格式化文本，保留空格和换行

九、企业级最佳实践

语义化优先：能用语义化标签就不用 div，提升 SEO 和无障碍
结构和样式分离：不要用行内样式，所有样式都写在 CSS 文件中
标签闭合：所有标签都要正确闭合，单标签不要写闭合标签
属性小写：所有标签和属性都用小写字母
alt 属性必写：所有图片都要加 alt 属性
label 必绑 input：所有输入框都要有对应的 label 标签
不要用废弃标签 ：<font>、<center>、<strike>等已经被 HTML5 淘汰，全部用 CSS 代替
移动端适配：必须加 viewport 标签
安全：外链加 rel="noopener noreferrer"