一、 结构骨架
| 标签 | 一句话作用 |
|---|
<!DOCTYPE html> | 声明 HTML5 文档类型 |
<html> | 根元素 |
<head> | 元信息（标题、字符集、SEO、样式/脚本引入） |
<body> | 页面主体内容 |
二、 元数据与资源
| 标签 | 示例 | 作用 |
|---|
<title> | <title>我的站点</title> | 页签标题 |
<meta> | <meta charset="utf-8"> | 字符集、视口、关键词、描述 |
<link> | <link rel="stylesheet" href="main.css"> | 外链 CSS、图标、预加载 |
<style> | <style>h1{color:red}</style> | 内嵌样式 |
<script> | <script src="app.js"></script> | 内嵌或外链 JS |
三、 段落与文本
| 标签 | 语义 | 备注 |
|---|
<h1>-<h6> | 6 级标题 | 一个页面通常只用一个 h1 |
<p> | 段落 | 自动上下 margin |
<br> | 换行 | 空元素 |
<hr> | 主题分隔线 | 兼具语义与样式 |
<span> | 行内容器 | 无语义，纯布局/样式 |
<strong> | 重要（默认加粗） | 语义重于 <b> |
<em> | 强调（默认斜体） | 语义重于 <i> |
<mark> | 高亮标记 | HTML5 |
<time> | 机器可读时间 | <time datetime="2025-06-25">今天</time> |
四、 列表与表格
| 标签 | 说明 |
|---|
<ul> <li> | 无序列表 |
<ol> <li> | 有序列表 |
<dl> <dt> <dd> | 描述列表（键值对） |
<table> <thead> <tbody> <tfoot> <tr> <th> <td> | 完整表格结构 |
五、 表单全家桶
| 标签 | 用途 |
|---|
<form> | 表单容器 |
<input> | 文本、密码、单选、多选、文件、隐藏域等 |
<textarea> | 多行文本 |
<select> <option> <optgroup> | 下拉选择 |
<button> | 按钮（可提交、重置、纯按钮） |
<label> | 关联控件，提升可访问性 |
<fieldset> <legend> | 分组与标题 |
<datalist> | 输入框预定义候选项（HTML5） |
<output> | 计算结果展示（HTML5） |
六、 嵌入与媒体
| 标签 | 场景 |
|---|
<img> | 图片（src, alt, width, height, loading=“lazy”） |
<a> | 超链接 + 锚点 + 下载 |
<iframe> | 内嵌外部页面 |
<video> <source> | 原生视频（MP4/WebM） |
<audio> <source> | 原生音频 |
<canvas> | 2D/3D 绘图、游戏、图表 |
<svg> | 矢量图形 |
七、 语义化布局（HTML5）
| 标签 | 作用 |
|---|
<header> | 页头或区块头部 |
<nav> | 导航链接组 |
<main> | 页面主要内容（唯一） |
<section> | thematic 内容组 |
<article> | 可独立分发的内容（帖子、卡片） |
<aside> | 侧边栏 / 附属信息 |
<footer> | 页脚或区块底部 |
<time> | 机器可读时间（已列） |
<mark> | 高亮（已列） |
八、 脚本与模板
| 标签 | 场景 |
|---|
<script> | 内嵌/外链 JS（已列） |
<noscript> | 脚本被禁用时的回退内容 |
<template> | 不渲染的模板片段（供 JS 克隆使用） |
九、总结
一句话速记
“结构+元数据+文本+列表+表单+媒体+语义化布局”七大类，掌握表格内标签，就能 cover 日常 90% 的 HTML 编写需求。
扫一扫
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
