HTML常用标签及属性速查：从分类、表单到CSS选择器的完整指南-北京尧图网络

简介《HTML常用标签及属性》是一份面向Web前端初学者和需要快速回顾HTML知识的开发者的整理型Word文档。文档从HTML基础结构入手系统分类讲解页面结构、文本格式化、列表、表格、表单及框架等常用标签并重点对比了GET与POST两种提交方式的区别涵盖URL可见性、安全性、效率与数据大小限制等要点。表单部分覆盖input、select、textarea等表单域以及提交、复位按钮的用法同时整理了readonly、value、maxlength等属性。常用属性部分整理了width、border、bgcolor、position、float、list-style、text-align等属性的含义与取值表格相关还涉及colspan、rowspan、cellpadding等并以表格形式呈现方便速查。包体为1个docx文件约21KB内容紧凑。已有536人学习下载。文档还补充了块级标签与行内标签的区分、CSS选择器类型和超链接伪类适合实战编码或面试前作为速查手册使用。1. 一份 HTML 常用标签及属性表先读分类再谈用法做前端的人手边几乎都有一份「HTML常用标签及属性」速查表但里面藏着的分类逻辑、表单提交差异和 CSS 选择器写法才是拉开新手和熟手差距的地方。这份 docx 把标签分类、空标签、块标签、常用属性、超链接伪类收在同一套表格体系里正好覆盖初学阶段最容易漏的三个点display 默认值决定标签是块还是行内表单用 GET 还是 POST 不只是填个 method表格跨行跨列必须靠属性而不是样式硬凑。适合正在学 HTML 基础的初学者、准备面试的毕业生以及给学生整理讲义的前端讲师。下文按标签分类 → 表单 → 属性与选择器 → 避坑的顺序拆这份资源给出能直接抄的写法、参数和排查方向。2. 标签分类的底层逻辑display 默认值决定块级还是行内这份资源第一部分是「标签分类」但它没有停留在贴标签名而是把每个标签的归属、空标签与否、常用属性列在同一张表里。新手最容易犯的错是用视觉去猜归属——看到是段落就觉得它该占整行看到会换行就觉得它是块级两种直觉都有例外。这一章先把分类标准立住再逐个过标签的实际用法。2.1 空标签与块标签先分清「没有内容」和「占不占整行」这份表把标签分成三类空标签、块标签、行内标签。空标签指没有内容、不需要闭合标签的元素表里明确列出的有、、、、。它们的共性是本身不承载文字内容浏览器靠 src、type 这类属性来渲染。写代码时最常见的错是给补、给加闭合部分浏览器能容忍但放到严格校验或自动化工具里就会报错初学者最好从第一天就养成「空标签不闭合」的习惯。块标签和行内标签怎么分很多人靠死记其实底层就一个判断标准元素默认的 display 值是 block 还是 inline。表里列的块标签有、~、、、、、、、、、、、、、、、label、span。注意 img 和 input 虽然是行内元素但能设宽高和纯文本型的 span、a 不一样属于「行内但可替换」的特例别用同一套标准衡量它们。/p precode classlanguage-html!-- p 是块级默认占满整行 -- p stylebackground:#eee;我是块级整行都占/p !-- span 是行内只占内容宽度 -- span stylebackground:#ffd;我是行内只占内容宽度/span !-- 通过 display:block 把行内元素临时改成块级 -- a href# styledisplay:block;background:#dfd;行内改块级/a /code/pre p 的背景色铺满整行span 的背景只包住文字a 用 display:block 强转后占位方式立刻变了——这就是表里 display 属性「行变块、块变行」的直观演示。display 的三个取值里none 最容易被误解它不是隐藏并保留位置而是把这个元素彻底从布局里摘掉不占一点空间。这和 visibility:hidden隐藏但占位完全是两种行为做「展开收起」功能时选错会导致布局跳动。 blockquote p注意判断标签是块还是行内别背列表去看默认 display。碰到不确定的标签浏览器开发者工具的 Computed 面板里一查就有。/p /blockquote h32.2 内容与格式化标签哪些该用、哪些只是历史遗留/h3 h1~h6 六层标题是页面结构的主干数字越小级别越高。一个页面建议只保留一个 h1用来承载页面主标题搜索引擎的权重分配也偏向这种结构面试被问「页面里能放几个 h1」时要能答出这个点。表里把它们归为块标签意味着标题和段落之间自带上下间距不需要额外 br 去硬撑。 p格式化标签要分清语义和视觉效果。b 和 strong 显示上都是加粗但 strong 带「强调」语义屏幕阅读器处理方式不同i 是斜体外观em 是着重语义。sub 下标和 sup 上标在化学式、脚注里还有实用价值big、u 以及 font 基本被 CSS 取代写新代码时我用 font-size 和 text-decoration 代替。font 是这份表里「认识但别用」的典型它的 color、size、face 三个属性 CSS 一行就能覆盖保留它主要是给读旧项目的人做对照。/p p框架类标签也一并说清。frameset 和 frame 是早期多窗口布局方案frame 是空标签现在整个方案已经废弃iframe 内嵌框架至今仍常用做第三方页面嵌套、广告位、嵌入式地图都靠它。我在读老代码时看到 frameset 会直接建议改造但教程里认识它们有助于理解 iframe 为什么存活下来——它只做「嵌套」不做「分栏」。/p pmarquee 值得单独点名。表里给了两个专属属性 scrolldelay滚动延时和 direction滚动方向这个标签的跑马灯效果在早期网页很流行后来被标准废弃。教学可以提、面试可以答但生产环境别用滚动速度和方向控制都比较粗糙移动端表现不稳定想要公告跑马灯优先考虑 CSS animation 或 JS 定时器实现至少行为是可控的。/p h32.3 列表与容器ul、ol、dl、div、span 的配合方式/h3 p列表分三族ul 无序列表、ol 有序列表、dl 定义列表。ul 的子项 li 前面默认是实心圆点ol 的子项前面是数字dl 的结构是 dt 定义标题配 dd 定义描述适合做术语表、商品参数这类「名词解释」的排版。表里的 type 属性给了列表标记的全部取值disc 实心圆、circle 空心圆、square 实心方块有序列表用 1、A、a、I、i 分别对应数字、大写字母、小写字母、大写罗马、小写罗马。写 ol 时想换编号风格type 直接解决不用动 CSS。/p plist-style 是列表样式复合属性表里拆成了 list-style-type 和 list-style-image。image 可以把列表项标记换成图片但有个坑图片尺寸不会自适应文字大小图标过大就会把行高撑乱。我一般先设 list-style:none再用 background 画小图标或加伪元素可控性好兼容性也稳。/p p容器标签的分工一句话能说清div 是块级容器划分页面大区span 是行内容器包住一段文字中的局部做样式。经典场景是「一句话里某个词要变红」——外层的排版不能断行就必须用 span用 div 会把句子拦腰截断。/p precode classlanguage-htmldiv classnav span classhighlight首页/span span分类/span span关于/span /div /code/pre div 撑起导航区三个 span 排在同一行如果这里误用三个 div导航项会竖着堆叠成三行。这就是块级和行内最直观的差别也是表里「块级标签占据整个宽度」这句话的实际含义。 h23. 表单与表格传数据与跨行列的四个实操细节/h2 p表单是 HTML 里少数「功能大于展示」的部分也是这份资源里信息密度最高的一节。它把 form、input 的 type 枚举、GET/POST 对比、表格跨行列属性全部放进了表格里对照着学比零散看教程要清晰得多。这一章按骨架 → 表单域 → 提交方式 → 表格合并四步展开。/p h33.1 form 的完整骨架action、method、name 三个属性缺一不可/h3 form 是表单的父标签关键属性有两个action 指定数据提交的地址method 指定提交方式默认是 GET。另有一个 name 属性给整个表单命名一个页面存在多个表单时用来区分。三者里最容易漏的是表单域的 name——提交给服务器的数据本质是「namevalue」键值对name 缺失值就无法发送。 precode classlanguage-htmlform actionlogin.php methodpost nameloginForm !-- 每个表单域都必须写 name否则数据不会随请求发出 -- input typetext nameusername input typepassword namepassword !-- button 不写 type 时默认就是 submit -- button typesubmit登录/button /form /code/pre paction 写接收地址本地调试可以先写空 action 看请求是否发出method 写 post 表示数据放请求体name 是给表单服务的 JS 或后端做标识。按钮那块有个经典坑button 标签不写 type 时默认行为等价于 submit很多人写 button确认/button 结果一点击页面就提交了。想用纯按钮做 JS 逻辑必须显式写 typebutton。/p h33.2 input 表单域十三种 type 的分类与适用场景/h3 pinput 是空标签靠 type 属性决定形态。表里列的 type 有 text、checkbox、radio、password、file、submit、reset、button、image、hidden 十种。我习惯分成三组记。/p p采集组text 普通单行文本password 输入被打码显示但传输时是否加密取决于是否用了 HTTPS代码本身不做加密checkbox 复选框可多选radio 单选按钮同名的一组只能选一个file 文件上传控件hidden 隐藏域不显示在页面上但会随表单提交常用来携带用户 ID、令牌这类不想让用户改的数据。radio 有一个容易忽略的规则同一组单选按钮必须共享同一个 name 值才能互斥name 一改就会被当成多组独立选项选完 A 再选 B 两个都能勾上。/p p按钮组submit 触发提交reset 把表单恢复成初始值button 是空白按钮需要绑 JSimage 用图片当提交按钮点击行为等价于 submit。这组里 reset 现在已经很少用交互上也容易误触新项目里我一般不推荐。/p pInput 之外还有两个常被归进表单域的标签textarea 多行文本域select 下拉框。textarea 的内容写在开始和结束标签之间不是 value 属性rows 和 cols 控制行数和列数select 用 option 定义选项如下/p precode classlanguage-htmltextarea nameintro rows4 cols30默认内容/textarea select namecity !-- selected 标注默认选中项不写则默认选第一项 -- option valueoption1选项一/option option valueoption2 selected选项二/option /select /code/pre poption 的 value 是真正提交的值标签中间的文本只是显示文案。表里三个表单专用属性必须分清readonly 让输入框只读但值照常参与提交value 是输入框的初始值maxlength 限制输入最大长度。readonly 和 disabled 的区别也是面试常客disabled 的值不会提交readonly 会。/p h33.3 GET 与 POST 的区别地址栏、安全性、效率、大小限制/h3 pGET 和 POST 的对比被这份资源当成面试题单独拎出来正好是四条GET 请求地址栏会携带页面中的所有信息POST 不会GET 安全性低POST 相对高GET 效率高POST 相对低GET 对数据大小有限制POST 没有限制。为什么地址栏会带数据因为 GET 把表单字段拼到 URL 查询字符串里用户名、密码直接肉眼可见POST 把数据放在请求体里URL 保持干净。/p p理论归理论开发里的选型规则更直白涉及密码、个人资料、订单、支付这类数据一律 POST搜索、筛选、翻页这类希望链接能分享复现的操作用 GET。GET 的可分享性是它唯一的优点也是它继续存在的理由POST 则是敏感数据的默认选项。从写第一行 form 开始养成这个习惯后面不用踩「密码出现在地址栏」这种大坑。/p h33.4 表格合并与间距colspan、rowspan、cellpadding、cellspacing/h3 p表格部分表里给了三组核心内容结构标签、跨行列属性、间距属性。结构上 table 包 tr 行行里放 td 单元格th 是表头单元格默认加粗居中caption 是表格标题显示在表格上方。内容较多的表格建议用 thead 包表头行、tbody 包数据行、tfoot 包底部行浏览器可以分块渲染结构也更清晰。/p pcolspan 合并列rowspan 合并行取值是跨过的格子数量。合并逻辑必须按「原始网格」计算一旦算错后面内容全体错位。看下面这个例子/p precode classlanguage-htmltable border1 cellpadding6 cellspacing0 tr th姓名/th th colspan2联系方式/th /tr tr td某用户/td td邮箱/td td手机/td /tr /table /code/pre p第一行的 colspan2 表示这个表头横跨两列第一行实际占用 3 列所以第二行也必须保持 3 个单元格总数才匹配。rowspan 同理纵向合并后后续行要同步少写对应的单元格。cellpadding 是单元格内边距撑开文字和边框的距离cellspacing 是单元格之间的间距写成 0 再配合边框属性就是常见的细线表格效果。/p h24. 属性与 CSS 选择器从标签到样式的桥梁/h2 p标签负责结构属性和 CSS 负责长相。这份资源的第三部分把常用属性和六种选择器、四类伪类放在一起实际上是在回答同一个问题写出来的标签怎么被样式准确命中。这一章先过高频属性再讲选择器优先级最后单独处理超链接伪类这个顺序敏感区。/p h34.1 高频通用属性分组src、href、width、height、border、bgcolor/h3 p表里的常用属性数量不少但高频的就几组。src 是资源位置出现在 img、script、iframe 上语义是「引入资源」href 是跳转或关联位置属于 a 和 link语义是「跳转」alt 是图片加载失败或不显示时的替代文案涉及可访问性建议每个 img 都写。target 控制打开位置_blank 新窗口、_self 自身窗口、_parent 父窗口、_top 整个浏览器窗口外链跳转常用 _blank但记得配合 rel 属性做安全处理。/p pwidth 和 height 取值是数字像素可只写一个另一个按比例自适应写两个容易把图片拉变形。border 是边框像素值bgcolor 是背景颜色background 是背景图片。bgcolor 和 background 都属于历史遗留新代码应该用 CSS 的 background-color 和 background-image。读旧项目时遇到我会顺手改造但初学阶段认识它们很有必要——很多老资料和面试题还停留在这套写法上。/p h34.2 文本布局属性text-align、line-height、letter-spacing、display/h3 ptext-align 控制水平对齐left、right、center。表里另外给的 top、middle、bottom 属于另一条线处理的是文字与图片的垂直对齐比如图片旁边一行文字想垂直居中配合 vertical-align 使用。letter-spacing 调字符间距单位像素标题想拉开字距很好用正文别乱加会明显影响阅读速度。/p pline-height 行高是布局里最值得背的属性之一。经典单行文字垂直居中技巧就是让行高等于容器高度多行文本则按 1.5~1.7 的行高系数设置阅读更舒服。text-decoration 控制文本修饰underline 加下划线none 去掉下划线——超链接去下划线是它最高频的用法但去掉后要记得用颜色区分可点击元素否则用户分不清哪里能点。/p pmargin 和 padding 是盒模型的核心。表里把它们按方向拆开margin-top/right/bottom/left 外边距padding-top/right/bottom/left 内边距。一句话区分padding 是元素边框内侧的空间会被背景色覆盖margin 是元素与外部元素的距离背景色和边框都覆盖不到。页面元素莫名对不齐时先看是不是 margin 在「顶」相邻元素。/p pdisplay 前面讲过三种取值position 定位有四种static 默认静态relative 相对自己原位置偏移原位置依然占位absolute 脱离文档流相对最近的已定位祖先定位fixed 相对浏览器视口固定页面滚动也不动。做悬浮按钮、弹窗、吸顶导航基本套路就是父容器 relative 子元素 absolute。/p pfloat 有 none、left、right 三个值clear 清除浮动有 left、right、both、none。float 最早用于图文混排后来被用来做多列布局现在新布局用 flex 和 grid 更省心但 float 仍是面试高频点塌陷问题的排查在第 5 章。/p h34.3 六种选择器的写法与记忆顺序/h3 p表里给了六种选择器写法按结构分层记最快。标签选择器直接写标签名命中所有同类元素类选择器 .类名命中所有带该 class 的元素ID 选择器 #ID名同一页面只能命中一个交集选择器 p.red 要求同时满足「是 p 且带 red 类」第一个必须是标签选择器第二个必须是类或 ID 选择器并集选择器用逗号分隔P,.red,#header 把这三种规则合并后代选择器用空格分隔#header ul li a 表示 header 内所有 ul 里的 li 里的 a。/p precode classlanguage-cssp { color: #333; } /* 标签选择器 */ .red { color: #f60; } /* 类选择器 */ #header { margin: 0; } /* ID 选择器 */ p.red { font-weight: bold; } /* 交集选择器 */ P,.red,#header { color: #666; } /* 并集选择器 */ #header ul li a { text-decoration: none; } /* 后代选择器 */ /code/pre p优先级从低到高大约是标签选择器类选择器 ID 选择器交集和并集不改变优先级只改变命中范围。CSS 被莫名覆盖时先看对方是不是 ID 选择器再看嵌套层级谁更深两招能解决九成优先级问题。/p h34.4 超链接伪类书写顺序就是血泪教训/h3 p超链接伪类有四个a:link 未访问状态、a:visited 访问后、a:hover 鼠标悬浮、a:active 鼠标按下未释放。表里备注写得很实在link 是超链接主样式hover 实现动态效果最常用visited 用来区分是否访问过active 用得少通常与 link 保持一致。/p precode classlanguage-cssa:link { color: #999; } /* 未访问 */ a:visited { color: #333; } /* 访问后 */ a:hover { color: #f60; } /* 悬浮 */ a:active { color: #999; } /* 按下未释放 */ /code/pre p顺序必须固定为 link → visited → hover → active经典记忆法就是 LOVE HATE 的首字母。把 hover 写在 visited 前面访问过的链接悬浮时就看不到变色效果而且这种 bug 不报错、不提示只能靠样式逻辑推——CSS 里典型的「黑匣子」问题排错顺序先看书写顺序再看选择器优先级。/p h25. 避坑手册标签与样式最常见的五个翻车现场/h2 p避坑部分不是理论是真实项目里反复踩过的雷区。以下五类问题我在代码评审和带新人时都见过不止一次每条按现象 → 原因 → 解决三段给出可以直接对照排查。/p h35.1 现象表格跨行跨列后内容错位/h3 p合并单元格之后同一行的剩余格子数量没跟着增减渲染出来行数比预期多内容串位整张表看起来像被撕开过。/p p原因表格按原始网格计算行列。合并只是让某个格子跨越多条网格线网格总数不会变该删的单元格没删多余格子就被推到了下一行。/p p解决写表格前在纸上画网格草图标出每个格子的行列跨度合并后逐行数 td/th 的数量确保等于未合并时的列数。跨两列就删一个 td跨两行就在后续行少写一个 td。这个习惯能帮你省掉大多数表格返工。/p h35.2 现象表单点击提交按钮没有反应/h3 p点击后页面没有任何跳转或跳转了但服务器收不到数据。本地直接双击 HTML 文件调试时这类问题出现率极高。/p p原因三个方向——form 没写 action浏览器没有提交目标表单域缺 name数据没组装成键值对或者用的 button 没写 type 且没有绑定任何行为。另外用 file:// 方式打开纯静态页面提交行为本身就受限很多本地 demo 的提交问题根源在这。/p p解决form 补全 action 和 method逐个检查 input、select、textarea 的 name需要 JS 处理就声明 typebutton 再绑监听。验证时打开开发者工具的 Network 面板看请求是否发出、参数格式对不对再决定是不是后端问题。/p h35.3 现象float 之后父容器高度塌陷/h3 p子元素设了 float:left父容器高度突然变成 0背景色和边框压成一条线后面的内容顶上来盖住。/p p原因浮动元素脱离文档流父容器的高度只能由未浮动的子元素撑起子元素全浮动了父容器就没有高度来源。/p p解决三种常见做法——父容器末尾加一个空元素并 clear:both父容器设 overflow:hidden 或 overflow:auto 触发 BFC父容器用伪元素清理浮动如下。新布局建议直接用 flexfloat 只留给图文混排从源头避开塌陷。/p precode classlanguage-css.clearfix::after { content: ; display: block; clear: both; } /code/pre blockquote p提示排查塌陷最快的办法是先给父容器写个固定高度如果高度能撑住问题基本锁定在浮动脱离文档流。/p /blockquote h35.4 现象hover 样式不生效或访问后样式消失/h3 p鼠标放上去链接颜色不变或者点击访问后悬浮效果从此消失。/p p原因优先级问题第一书写顺序问题第二。顺序上 hover 写在 visited 之前会被覆盖优先级上任何更具体的选择器命中同一个链接都会把 hover 规则压住。/p p解决固定按 link、visited、hover、active 顺序写。排查时打开开发者工具 Computed 面板看最终颜色来自哪条规则哪条覆盖了 hover再调选择器权重。不要一上来就加 !important那只会掩盖结构问题。/p h35.5 现象图片显示不出来只剩 alt 文案/h3 pimg 区域裂开alt 文字直接显示在页面里其他样式正常。/p p原因第一位是 src 路径问题——相对路径层级不对、文件名大小写不一致、资源被移动或删除第二位是图片格式不被浏览器支持第三位是资源加载权限受限。/p p解决先把图片挪到 HTML 同目录用最简单的 img srcxxx.jpg 验证能否显示排除路径层级问题再看 Network 面板请求状态码404 是路径问题403 是权限问题。alt 文案养成必填习惯图片挂了页面也不至于留一个空白区域。/p h26. 把这张表变成自己的速查手册三个落地用法/h2 p资源是死的表格用起来才是你的。拿到这份「HTML常用标签及属性」之后我做的第一件事是把所有表格重排成三列标签、属性、适用场景然后按自己的记忆短板标红。容易混的 src 和 href、cellpadding 和 cellspacing 放到同一行对照GET 和 POST 的四个区别缩成一句口诀「地址、安全、效率、大小」贴在编辑器旁边复习时遮住右列只看标签名默写它的分类和关键属性20 分钟能过完整张表。这个过程不是为了背而是把别人整理好的知识重新编码成自己的记忆钩子。/p p第二件事是拿它做面试自测清单。照着表格按四个方向自查空标签有哪些、块级和行内标签怎么判断、交集选择器有什么限制、伪类书写顺序是什么。答不上来的就是盲区回到对应章节重新看一遍再自测一次。表格本身就是按高频知识点组织的覆盖范围就是考点范围比漫无目的地刷题高效得多。/p p第三件事是固定一个表单习惯凡是采集密码、手机号、证件号这类敏感字段的 formmethod 永远写 post凡是搜索、筛选、翻页这类想让链接可分享的操作method 写 get并控制参数数量。这两条规则不依赖浏览器行为差异纯粹是安全意识但能挡掉绝大多数低级事故。/p p从那以后我每次接到新页面需求都强制先列一张结构表标签、属性、场景三列填完再动手写代码标签选错导致的返工基本绝迹。这份资源的正确打开方式不是收藏而是下载后拆开、重排、标注坑最后变成你自己的一套速查逻辑。希望帮到你。/p p a hrefhttps://download.csdn.net/download/weixin_41644449/12278305 stylecolor:#ec7500;font-size:14px; 本文还有配套的精品资源点击获取 /a img altmenu-r.4af5f7ec.gif srchttps://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif stylewidth:16px;margin-left:4px;vertical-align:text-bottom;cursor:text; /p、行内标签有

HTML常用标签及属性速查：从分类、表单到CSS选择器的完整指南

相关推荐

基于Spring Boot的茶叶销售管理系统设计与实现

SpringBoot+Vue+MySQL动物领养平台全栈开发实践

综合能源系统全流程拆解：建模、仿真、优化与控制一次走通

更多资讯

湖仓一体深度拆解：从技术原理到落地避坑指南

七轴机械臂之字形走线实战（二）：从仿真到真机，第一次全程走线

新文档进来只能全量重建？把索引更新的账算清

429 一来就狂重试：退避时间预算怎么算

两万星标AI编程教程：项目驱动与实战踩坑经验分享

JSP房产中介管理系统部署实战：从环境搭建到二次开发全流程解析

今日更新

小波包能量谱原理与MATLAB实现：从频带分解到故障特征提取

基于LSTM的网易云音乐评论情感分析：数据清洗与模型调优实战

Alpha-Beta剪枝与极大极小值算法：博弈树搜索原理与实战优化

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？