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

冰的第三次元
1 阅读6分钟

一、基础认知

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

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

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

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

image.png

  • <!DOCTYPE html> 是 HTML5 独有的极简声明，老式 HTML 的声明长达 3 行，已经完全淘汰

  • lang="zh-CN" 不要写成 lang="zh"，前者更标准

  • meta charset 必须写在 head 的最前面，否则可能出现乱码

  • viewport 标签是移动端适配的基础，没有它手机上页面会缩小

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

  1. 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>

image.png

  • target="_blank"：在新标签页打开

  • rel="noopener noreferrer"：安全属性，防止新页面获取原页面信息，必须加

  • href="#"：空链接，点击会跳转到页面顶部

  • href="javascript:;"：空链接，点击无反应

5. 图片 <img>

image.png

  • alt 属性：图片加载失败时显示的文字，SEO 和无障碍必备

  • 不要用 width 和 height 属性设置图片大小，应该用 CSS

  • 图片是行内块元素，默认底部会有 3px 的空白间隙

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

1. 表单基础结构

image.png

  • 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. 多媒体标签

image.png

  • controls：显示播放控件

  • poster：视频封面图

  • 标签中间的文字是浏览器不支持时的备用内容

  1. Canvas 画布

image.png

  • Canvas 是用 JS 绘图的画布，适合画复杂图形、动画、游戏

  • getContext("2d") 是固定写法，开启 2D 绘图模式

  • 3D 绘图用 getContext("webgl")

  1. SVG 矢量图

image.png

  • 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"

avatar
文章
阅读
粉丝