HTML系列教程：24_HTML 速查列表（新手完整版）

本篇把前面所有教程的核心标签、属性、语法整理成速查表方便写代码的时候快速翻看。 分为文档结构标签、元数据 head、块级标签、行内文本标签、链接图像、表格、列表、表单基础、脚本、字符实体、颜色、URL 路径。 每一项附带简短说明 极简示例新手可以复制直接使用。一、HTML 文档基础结构每一个 html 页面必备骨架!DOCTYPE html html langzh‑CN head meta charsetUTF‑8 title页面标题/title /head body !-- 所有页面可见内容全部写在body里面 -- /body /html标签作用说明!DOCTYPE html文档声明告诉浏览器这是 HTML5 文档写在最第一行不是 html 标签html根标签整个网页的根所有内容包在里面head头部存放页面配置里面内容不会显示在网页上meta charsetUTF‑8字符编码设置中文不乱码必须写title页面标题浏览器标签上面显示的文字body主体网页所有看得见的内容文字、图片、按钮全部放这里示例最简完整页面!DOCTYPE html html langzh‑CN head meta charsetUTF‑8 title我的第一个网页/title /head body pHello HTML/p /body /html二、head头部常用标签配置页面不显示标签作用简单示例meta charsetUTF‑8设置编码防止中文乱码meta charsetUTF‑8title浏览器标签标题title首页/titlemeta namedescription content描述文字网页简介给搜索引擎看meta namedescription content这是一个测试页面link relstylesheet hrefstyle.css引入外部 CSS 样式文件link relstylesheet hrefstyle.cssstyle内部 CSS写在 head 中stylep{color:red;}/style注意style写 CSSscript写 JSscript 可以放 head 或者 body 末尾。三、标题与段落文本基础标签含义示例h1 ~ h6一级到六级标题h1 最大h6 最小h1大标题/h1p段落标签段落之间自动有空距p这是一个段落/pbr换行单标签强制换行p第一行br第二行/phr水平分割线单标签hr示例h1一级标题/h1 p第一段文字。br这里换行。/p hr h2二级标题/h2 p第二个段落/p四、文本格式化标签修改文字样式语义标签标签效果示例b文字加粗只有视觉效果b加粗文字/bstrong语义加粗代表重要内容推荐strong重要提示/strongi斜体视觉效果i斜体/iem语义斜体表示强调推荐em需要强调/emsmall小号文字small版权小字/smallmark高亮标记黄色底色mark高亮文字/markdel删除线del已删除文字/delins下划线ins新增文字/inssub下标Hsub2/subOsup上标2sup3/sup示例pstrong警告/strongmark不要随意修改代码/mark/p p水的分子式 Hsub2/subO/p p2的3次方2sup3/sup/p五、超链接表格属性作用href地址跳转目标 URL必填target_blank新窗口打开页面示例!-- 外部网站绝对URL -- a hrefhttps://www.baidu.com target_blank百度新窗口打开/a !-- 本地相对路径打开同文件夹页面 -- a hrefabout.html关于我们/a !-- 锚点本页内部跳转 -- a href#part跳转到part位置/a h3 idpart目标位置/h3⚠外部网址必须写完整https://否则识别成本地文件。六、图像 img 单标签属性作用src图片地址图片 URL 路径必填alt描述文字图片加载失败时显示文字提高无障碍访问建议必写width200宽度height 高度写数字不需要 px示例img srcimages/cat.jpg alt猫咪图片 width300七、列表标签无序列表圆点ulliul li苹果/li li香蕉/li li橙子/li /ul有序列表数字序号olliol li第一步/li li第二步/li /ol自定义列表dl dt dddl dtHTML/dt dd超文本标记语言/dd dtCSS/dt dd层叠样式表/dd /dl规则ul、ol 里面只能放 li 标签li 里面可以写其他内容。八、表格标签标签说明table表格外层容器tr表格的一行 table‑rowtd单元格普通格子th表头单元格文字默认加粗居中colspan2单元格跨 2 列rowspan2单元格跨 2 行示例简单表格table border1 tr th姓名/th th年龄/th /tr tr td小明/td td18/td /tr /table九、容器标签布局盒子标签作用div块级盒子大容器用来布局独占一行span行内容器用来包裹一小段文字不换行示例div这是div盒子独占一整行 spanspan行内元素不会换行/span /divdiv块级span行内。十、脚本标签 JavaScript标签作用scriptJS 脚本写交互逻辑script srctest.js/script引入外部 js 文件noscript浏览器关闭 JS 时显示提示文字示例内部脚本script alert(页面弹出提示); /script新手建议把 script 写在/body前面避免找不到页面元素报错。十一、字符实体特殊符号实体输出符号说明nbsp;不换行空格lt;小于号左尖括号gt;大于号右尖括号amp;和符号quot;双引号copy;©版权符号yen;¥人民币符号示例p显示标签lt;pgt;段落lt;/pgt;/p p版权 copy; 2026/p记住结尾分号;不能丢。十二、颜色四种写法用于 CSS color /background‑color命名颜色red、orange、skybluecolor: red;十六进制项目最常用#RRGGBB简写#RGBcolor:#ff0000; color:#f00;rgb()rgb(红,绿,蓝)取值 0‑255color:rgb(255,0,0);rgba () 带透明度最后一位 0‑1background‑color:rgba(255,0,0,0.5);十三、URL 路径速查绝对路径、相对路径绝对 URL完整网址https://www.xxx.com/a.jpg用于外部网站a hrefhttps://www.baidu.com百度/a相对路径本地项目同级文件logo.jpg进入子文件夹images/logo.jpg返回上一级文件夹../logo.jpg示例目录演示myweb ├ index.html ├ logo.png └ images └ dog.jpgindex.html 中写img srclogo.png img srcimages/dog.jpg十四、全局通用属性几乎所有标签都可以写属性作用示例idxxx元素唯一标识页面不能重复用于锚点、JS 获取元素div idbox1/divclassxxx类名给 CSS 选择器使用可以多个元素共用p classtext red/pstylecss样式行内样式直接写 cssp stylecolor:blue;蓝色文字/ptitle提示文字鼠标悬浮上去显示提示p title鼠标放上来文字/p示例p idp1 classbig‑text title悬浮提示 stylefont‑size:20px;测试文字/pid 唯一class 可以重复style 写行内 CSS。十五、新手高频易错速记清单标签区分单标签和双标签双标签有开始和闭合p/p div/div a/a单标签不用闭合br hr img路径写错图片 404 不显示../代表上一级文件夹本地开发尽量不要用/根路径。外部链接必须带https://a hrefwww.baidu.com错误。script 标签如果设置 src标签中间写的代码不会执行。字符实体结尾分号不能丢lt;正确lt错误。rgba 透明度取值 0‑1不要写 255。锚点跳转#xxx对应标签的id不是 class。多个空格直接敲空格 HTML 会合并要用nbsp;。完整综合小示例复制直接运行!DOCTYPE html html langzh‑CN head meta charsetUTF‑8 titleHTML速查演示/title style .red{ color:#f33; } /style /head body h1HTML速查表演示/h1 p classredstrong重要段落/strong/p hr h2列表演示/h2 ul liHTML/li liCSS/li /ul h2链接/h2 a href#bottom跳到底部/a h2特殊字符/h2 p标签示例 lt;divgt;盒子lt;/divgt;/p div idbottom页面底部/div script // JS脚本 /script /body /html