写HTML和CSS的常用标签这话题看着基础真要细聊起来够写一整天。我见过不少做了两三年前端的同学平时切图写页面基本靠肌肉记忆但偶尔碰到一个生僻属性或者样式不生效的场景就得翻半天文档最后发现是个已经被废弃的标签或者优先级覆盖的问题。HTML标签不是背出来的是“用”出来的而CSS更是“踩坑踩出来的”。这篇博文就把日常开发里高频出现的标签和属性系统过一遍该讲透的地方讲透该提醒的坑一个不落最后用一个商品详情页的实操案例把知识点串起来争取你读完能直接在自己的项目里用上。这篇文章适合刚入门HTML/CSS的前端新手也适合想查漏补缺的进阶开发者。我会从标签体系的整体设计讲起再拆解高频标签和CSS属性的细节中间穿插一个完整的实操案例最后整理一份常见问题速查表。不堆概念只讲实际用得上的东西。1. 先把标签体系理清楚HTML和CSS到底要学什么1.1 HTML标签的两条主线结构语义与表单交互很多人一上来就抱着标签大全背背了半个月还是乱。我的建议是先建立坐标系。HTML标签其实就两条主线一条负责“页面结构”从html、head、body往下延伸包括header、nav、main、section、article、aside、footer这些语义化标签以及h1~h6、p、ul/ol/li、dl/dt/dd、table这类内容标签另一条负责“用户交互”最典型的就是form里的各种input、button、select、textarea以及a链接、img图片、video、audio这些媒体和跳转标签。这两条线并非完全独立。表单标签承载了用户数据的采集和提交结构标签决定了内容怎么被搜索引擎和屏幕阅读器理解。比如你写一个商品列表用ul包li比用一堆div嵌套更合理因为爬虫能识别列表语义而且屏幕阅读器读起来也友好。同样的例子还有标题层级一个页面只保留一个h1作为核心主题下面用h2、h3分层别东一个h1西一个h1层级混乱不光看着难受对SEO更是实打实的伤害。结构这条线里div和span是最特殊的存在它们是纯粹的容器不带任何语义。流行的说法叫“div一把梭”确实方便但代价是整个页面的可读性极度依赖注释和缩进。反过来也别走极端很多新手看教程说语义化重要就一个列表非要拆成article加section结果嵌套了五六层自己后面改样式的时候都找不到元素。正确的做法是有现成语义标签就用语义标签没有合适的语义标签再用div兜底保持标签语义和内容含义一致就够了。交互这条线里input是绝对的重点。先记住type决定交互形态text、password、email、number、checkbox、radio、file、date、range……每种type对应不同的键盘类型和浏览器校验规则。再配合name作为提交给后端的字段名value作为默认值placeholder作为占位提示required标记必填disabled禁用readonly只读。这几个属性组合起来基本能应对90%的表单场景。很多新手分不清disabled和readonly简单说disabled的元素不会提交给后端而且整个灰掉readonly只是不能编辑值照样会提交。业务里大多数场景要用readonly特别是展示详情又允许复制内容的场景。还有两个容易被人忽略的关键标签label和fieldset。label配合for属性可以关联到input的id点击文字就能聚焦输入框体验提升非常明显而且对屏幕阅读器极其友好。fieldset加legend则能把一组相关控件圈起来比如地址填写区域、支付方式选择区表单信息瞬间清晰。这些小标签没有存在感但用好它们整个表单的可访问性会上一个台阶。1.2 CSS的两条学习路径选择器精度与盒模型直觉CSS的学习路径和HTML不太一样。HTML的难点在于“选什么标签”CSS的难点在于“怎么选中元素”和“盒子到底怎么排”。选择器的精度决定样式能不能精确落到目标元素上盒模型直觉决定你写出来的布局是稳的还是一改就乱。先看选择器。基础的五种必须滚瓜烂熟元素选择器div、类选择器.box、ID选择器#main、属性选择器[typetext]、通配符*。然后是组合用法后代选择器.nav a、子选择器.nav a、相邻兄弟选择器h2 p、通用兄弟选择器h2 ~ p。最后是伪类和伪元素:hover、:focus、:disabled、:first-child、:nth-child(2n)这些处理状态和位置::before、::after用来插入装饰内容。这里单独说一下通配符*因为很多新手喜欢用它做“全局清零”* { margin: 0; padding: 0; }。好处是见效快所有浏览器默认间距一扫而空但代价也明显。*会匹配页面上所有元素性能上要遍历整棵DOM树页面复杂时开销不小而且它会覆盖你后续写的所有样式导致你每个组件都要重新设置一遍内边距代码量反而更大。我自己的习惯是用“白名单式清零”只在真正需要重置的元素上写body, ul, li, p, h1, h2, h3 { margin: 0; padding: 0; }同时配合box-sizing: border-box全局设置大多数场景已经够用。再说盒模型。每个元素都是一个矩形盒子从内到外分别是content、padding、border、margin。布局出问题十有八九是没搞清这四个区域的关系。经典的一个坑是宽度计算默认box-sizing: content-box时你给元素设width: 200px再设padding: 20px、border: 1px实际占用的宽度是242px而不是200px。改成box-sizing: border-box之后width: 200px就是最终渲染宽度padding和border会向内挤压。项目里我一般在全局样式的开头就写死这一条省得每个组件都算一遍。2. 核心细节解析与实操要点2.1 高频HTML标签的细节与坑先看meta标签。很多人写页面只顾着往body里填内容head里就放个title了事结果移动端打开页面缩放乱套、中文显示乱码。meta charsetutf-8是必须的它告诉浏览器当前文档用UTF-8编码解析不然中文大概率变成乱码。另一个被问得最多的是viewportmeta nameviewport contentwidthdevice-width, initial-scale1.0没有这一行手机浏览器会用默认的980px宽度渲染页面然后整体缩小给你看字小得没法看。description和keywords虽然对搜索引擎的权重影响没以前大了但作为页面摘要仍然建议写上至少让搜索结果里那段描述文字是你能控制的。再来看img标签。alt属性是很多人忽略的“坑”它不仅在图片加载失败时显示替代文字更是屏幕阅读器识别图片内容的唯一途径。现在loadinglazy也很常用配合srcset可以做响应式图片img srcsmall.jpg srcsetbig.jpg 1200w, mid.jpg 800w, small.jpg 400w sizes(max-width: 600px) 400px, 100vw alt商品图。这行代码的意思是让浏览器根据当前视口宽度自动选一张最合适的图片不需要你用display:none在那切来切去。还有一个细节写img的时候尽量带上width和height哪怕是通过CSS覆盖也一样。原因很简单浏览器需要预留图片占位避免图片加载完成后页面内容突然往下跳影响阅读体验。pre标签和code标签经常放在一起用。pre的意思是预格式化它保留空格、换行和缩进非常适合展示代码块code则是语义化地表示“这是一段代码”。标准写法是precode.../code/pre。这里有个坑pre里的内容会把源代码里的缩进全部渲染出来如果你在HTML里这样写页面可能会多出大片空白。解决办法是让pre的起始标签紧贴第一行代码或者干脆在CSS里设置white-space: pre-wrap允许换行但这样会丢失部分保留空白的特性。老式的xmp标签虽然也能显示代码但早已被废弃新项目一律不要用。a标签最容易被忽略的是target_blank带来的安全风险。新窗口打开链接时如果不加relnoopener noreferrer新页面可以通过window.opener拿到原页面的window对象存在被钓鱼的风险。所以别只写target_blank要养成习惯加上relnoopener noreferrer。另外a标签的href不仅能填网址还可以写mailto:xxxexample.com触发邮件客户端写#section-id做页内锚点跳转还能写javascript:void(0)占位但能用按钮就不用这种写法容易被人拿去搞XSS。表格标签里有几个高频属性colspan表示单元格向右合并几列rowspan表示向下合并几行。这两个属性是表格布局的命脉特别是处理合并表头、合并首列的时候。注意colspan合并后这一行的单元格总数会减少如果你手动数格子写错了表格会变得七扭八歪。另外font标签已经废弃了想改字体大小、颜色、字体族统统用CSS的font-size、color、font-family来完成。同理center、u、s这些老标签也都用CSS代替居中用text-align或flex下划线用text-decoration删除线用text-decoration: line-through。千万别再把font从老项目里原样复制到新工程里。2.2 CSS高频属性的常见误用CSS里最常出问题的往往是文本和布局相关的属性而不是什么高级动画。先说文本位置调整。水平居中分成两种情况块级元素用margin: 0 auto前提是该元素有确定宽度且不是脱离文档流的行内元素或行内块元素用text-align: center父容器设置后内部的文字、span都会居中。垂直居中就麻烦一些老办法是用line-height等于容器高度但只对单行文本有效多行就露馅。现在推荐的是Flexbox父容器设display: flex; align-items: center; justify-content: center;不管里面是文字、图片还是复杂模块统统居中而且不限制内容长度。字体相关的属性也要注意优先级和继承关系。font-size会继承但line-height有几种写法建议用无单位的数字比如line-height: 1.6这样后面子元素按自身font-size等比例缩放不用担心父级字变大时行高不匹配。font-weight除了常用的bold数字取值100到900要配合字体文件支持才有意义很多系统里的字体只有400和700两个档位你写个500出来效果就是个普通粗细。font-family的写法要带兜底font-family: PingFang SC, Microsoft YaHei, sans-serif;不要让浏览器自己猜。CSS里实现删除线就一句话text-decoration: line-through。但如果你在del标签或者带line-through的元素内部想要修改下划线的颜色或粗细可以拆开写text-decoration-line: line-through; text-decoration-color: red; text-decoration-thickness: 2px;。这几个子属性在需要做“价格划线”的时候特别好用原价显示红色删除线现价加粗突出一眼就能看懂。鼠标移入效果是CSS里最容易提升页面质感的入口。基础版就是:hover配合transition.btn { background: #1890ff; transition: background 0.3s ease; }:hover时改背景色因为有了transition颜色变化是平滑过渡而不是瞬间跳变。进阶一点的还有transform: translateY(-2px)配合box-shadow做悬浮抬升效果按钮的立体感一下就出来了。:hover的坑在于移动端没有“hover”这个概念触摸的时候可能永远不会有这个状态所以不要把关键信息放在:hover里移动端页面要单独处理点击态用:active或者JS绑定更靠谱。再聊聊body居中。很多新手问“怎么让整个页面居中”这个问题要分清楚是“内容宽度固定居中显示”还是“内容不固定整体居中”。最常见的是内容区固定宽度比如width: 1200px; margin: 0 auto;屏幕宽的时候就左右留白居中屏幕窄的时候自动出现水平滚动条。还有一种是希望整个页面容器按百分比填满屏幕并居中内容那就给html, body设置height: 100%body里放一个display: grid; place-items: center;的容器。两种方案没有谁更好取决于你的设计稿和业务场景。字体渐变是视觉效果里被问得特别多的一项。实现思路其实很巧给文字设置透明色再用背景渐变填充文字形状。核心代码是.gradient-text { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; }。这里有一点必须提醒color: transparent之后文字本身的颜色就没了如果浏览器不支持background-clip: text文字会直接变成透明BUG。对此我的做法是先用普通颜色兜底再用supports判断一下支持才应用渐变方案supports (background-clip: text) { ... }。CSS的删除线、渐变、梯形、涟漪这些都是视觉装饰不影响功能按需使用就好。3. 实操过程手写一个商品详情页把常用标签一次用齐3.1 页面需求与标签选型理论讲一堆不如直接写一个页面。我选“商品详情页”来练手因为它覆盖的标签非常全面顶部导航用header加nav商品图片区用figure和img商品信息区用section和p价格用del和strong规格选择用fieldset加input的radio加入购物车按钮用button详情描述区用article加ul/li底部信息用footer。一个页搞下来前面说的标签基本都有机会用到。这个案例的核心需求很简单展示一个商品比如一款机械键盘顶部是导航栏中间左边是商品大图、右边是标题、描述、价格、规格选项和购买按钮下面是一段详情图文列表底部是版权信息。我用纯HTMLCSS实现不引入任何框架方便你直接复制到本地跑起来看效果。3.2 HTML结构编写与注释!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content一款适合程序员的87键机械键盘支持有线无线双模连接 title商品详情 - 87键机械键盘/title link relstylesheet hrefstyle.css /head body header classsite-header nav classnav-bar a href# classlogo极客外设/a ul classnav-links lia href#首页/a/li lia href#键盘/a/li lia href#鼠标/a/li lia href#配件/a/li /ul /nav /header main section classproduct figure classproduct-gallery img srckeyboard.jpg alt87键机械键盘实拍图 width560 height560 loadinglazy figcaption热插拔轴体支持客制化/figcaption /figure div classproduct-info h187键双模机械键盘/h1 p classsubtitle支持蓝牙/2.4G无线连接兼容Windows和macOS/p p classprice del¥599/del strong¥499/strong /p fieldset classspec-group legend选择轴体/legend label input typeradio nameswitch valuered checked 红轴 /label label input typeradio nameswitch valueblue 青轴 /label label input typeradio nameswitch valuebrown 茶轴 /label /fieldset label classquantity-label forquantity数量/label input typenumber idquantity namequantity value1 min1 max99 button typebutton classadd-btn加入购物车/button /div /section section classdescription h2商品详情/h2 article h3RGB背光支持自定义灯效/h3 p键盘内置18种RGB灯效可通过驱动软件自定义灯光颜色与动态模式。/p h3全键无冲适合游戏与办公/h3 p采用全键无冲设计无论是激烈游戏还是快速输入代码都不会丢键。/p /article aside classnotice p注意本产品不支持IPX6防水请避免液体溅入。/p /aside /section /main footer classsite-footer p© 极客外设 出品/p /footer /body /html这段结构里用到的标签都很常规但有三个细节点值得说。第一figure和figcaption搭配使用既表示这是一张独立配图又给图片加了可读的说明文字比裸用div包img规范得多。第二del和strong直接表达“原价”和“现价”的语义爬虫能理解这是价格信息比写span classold-price更符合语义。第三表单控件都配了label点轴体文字就能选中对应的radio体验比只点小圆圈舒服得多。3.3 CSS布局与美化实现/* style.css */ * { box-sizing: border-box; } body { margin: 0; font-family: PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.6; color: #333; background: #f7f8fa; } .site-header { background: #fff; border-bottom: 1px solid #e5e6eb; } .nav-bar { max-width: 1200px; margin: 0 auto; /* 使用flex让logo和菜单左右分布 */ display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; } .nav-links { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; } .nav-links a { text-decoration: none; color: #333; transition: color 0.2s ease; } .nav-links a:hover { color: #ff6b35; } .product { max-width: 1200px; margin: 30px auto; display: flex; gap: 40px; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .product-gallery { flex: 1; margin: 0; } .product-gallery img { width: 100%; height: auto; border-radius: 8px; display: block; } .product-info { flex: 1; } .price del { color: #999; font-size: 16px; margin-right: 12px; text-decoration: line-through; } .price strong { font-size: 30px; color: #ff6b35; } .spec-group { border: 1px solid #e5e6eb; border-radius: 8px; padding: 12px 16px 16px; margin: 20px 0; } .spec-group label { margin-right: 20px; cursor: pointer; } .quantity-label { display: inline-block; margin-bottom: 6px; font-weight: 600; } #quantity { width: 80px; padding: 8px; border: 1px solid #d0d3d9; border-radius: 6px; } .add-btn { display: block; width: 100%; margin-top: 20px; padding: 12px 0; border: none; border-radius: 8px; background: #ff6b35; color: #fff; font-size: 16px; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } .add-btn:hover { background: #e55a2b; transform: translateY(-2px); }这段CSS里可以看到几个前面提到的技巧在实战中的具体应用。导航栏的display: flex; justify-content: space-between让logo和菜单左右分布align-items: center做垂直居中不需要再去算margin。主页面的product容器用display: flex加gap: 40px实现左右两栏布局比传统的float加margin清爽太多。原价用text-decoration: line-through直接划线现价用font-size: 30px放大并标色视觉对比很鲜明。按钮的:hover配合transition做背景色和位移的平滑过渡整个交互手感就出来了这是纯CSS能做到的性价比最高的效果。这里强调一个实战细节我在全局样式里只写了* { box-sizing: border-box; }没有写margin: 0; padding: 0;因为很多默认值其实是有用的比如ul的左边距、h1的上下间距清掉之后每个地方都要重新补很烦躁。我在body上统一设了margin: 0在用到ul的导航里专门清了margin和padding既有全局的干净又不破坏其他元素默认的合理间距。3.4 如何进一步调整容器内文本位置如果你在这个页面上想调整文本位置其实就是在操控几个固定招式来回组合。水平方向块级元素里的文字用text-align块级元素本身居中用margin: 0 autoFlex容器内用justify-content。垂直方向单行文字借助line-height多行或任意元素借助align-items: center还有一种绝对定位配合transform: translate(-50%, -50%)的方法适合做弹窗和浮层居中。我自己的判断口诀是这样的只有一个元素要居中优先Flex元素宽度已知且在普通流里margin: 0 auto最直接搞不定就检查父容器高度是不是塌了绝对定位前确认父级有没有position: relative。以前被这种居中问题折磨过的人应该能立刻get到痛点其实80%的居中需求都是一条display: flex加上两个align属性就解决了。4. 常见问题与排查技巧实录4.1 页面开发Top问题速查表日常开发中很多“诡异”的问题其实来自固定的几个原因。我把最常见的几类整理成了一张速查表排查时对照着看能省不少时间。症状常见原因快速解决思路页面样式完全没生效CSS文件路径错误、浏览器缓存、选择器没匹配到打开开发者工具看Console和Sources确认样式文件加载了没有图片下方有一条空隙img默认是行内元素底部基线对齐留下空隙display: block或vertical-align: middlemargin-top设置了但没效果父容器没有padding或border子元素margin穿透了给父容器加overflow: hidden或padding-top: 1px或改用padding撑开flex左右布局不生效子项总宽度超过容器或父元素没设display: flex检查父元素flex检查子项flex-shrink是否为零点击下单按钮没反应按钮被其他元素遮挡、事件没绑定、type不正确检查z-index和按钮type表单内按钮默认可能是submit会刷新页面中文字体忽大忽小浏览器默认最小字体限制或字体未指定设置-webkit-text-size-adjust: 100%明确指定font-sizeradio无法取消选中radio本身就是不可逆选择的语义需要可取消场景就改用checkbox或用JS维护状态手机端页面字特别小缺少viewport meta标签补上meta nameviewport contentwidthdevice-width, initial-scale1.0这类问题十有八九不是“语法错误”而是对默认行为的理解偏差。比如图片下面的空隙本质是行内元素和文字基线的关系知道原理后一行display: block就能解决不用记什么“魔法CSS”。再比如margin穿透理解margin如何在父子容器间“折叠”后你会主动避免用margin-top来撑开父容器内部的距离改成给父容器设置padding或overflow思路完全不一样。4.2 关于标签和样式的排查思路与工具技巧排查CSS问题我强烈建议把浏览器开发者工具当成第一伙伴。按F12打开后先在Elements面板选中目标元素右侧Styles里能看到所有命中选择器及其优先级来源。一旦发现样式被划掉八成是优先级不够或者被后面样式覆盖。调优先级的时候记住口诀!important 内联样式 ID选择器 类选择器 标签选择器同优先级后写的覆盖先写的。不过!important是核弹除非是组件库的样式死角否则尽量别用后期维护看到一堆!important真的会崩溃。排查布局问题用开发者工具里的“Layout”和“Computed”标签页特别好使。选中一个元素Computed里能看到实际的content、padding、border、margin分别是多少一眼就能看出是不是盒模型的问题。Flex布局排查时还可以点一下父元素浏览器会高亮flex主轴和交叉轴可视化程度很高比对着代码猜效率高多了。再补充几个标签与编辑器协作的小技巧。在IDE里写HTML最怕标签多到找不到闭合位置JetBrains系如IDEA、WebStorm里CtrlShift[和CtrlShift]可以快速跳转到当前标签的开头或结尾CtrlW不断扩大选中范围直到整块标签配合折叠代码功能操作多层嵌套时效率极高。VSCode里则是Alt上/下方向键移动行、AltShift方向键复制行选中内容后输入(或会自动包一层标签的快捷键是CtrlShiftP里搜“wrap with abbreviation”。这些快捷键能极大减少你手工数标签数量的时间。还有一类问题是文件级的。比如“打包多个HTML”构建时可以用Vite或者Webpack的html-webpack-plugin批量生成多页面入口如果是本地想把HTML转成Markdown写文档用pandoc一条命令就能转换pandoc input.html -t markdown -o output.md效果基本能保留标题、链接、图片、代码块这些核心结构。至于“PyQt5显示HTML”桌面端场景常用的有QTextBrowser轻量可显示简单HTML和QWebEngineView完整浏览器内核支持现代CSS3和JS需要复杂交互界面就直接上QWebEngineView但内存占用会明显大取舍看需求。4.3 关于Tabs标签页与组件样式覆盖热搜里还有“tabs标签页”和“vue3修改tabs标签页样式”这里顺便说一下。前端里的“tabs”指的是页面内的选项卡组件不是浏览器标签页。Vue3生态里最常用的是Element Plus的el-tabs默认样式够用但不同项目有不同主题改样式是家常便饭。Element Plus的样式都挂在深层级下直接用普通CSS覆盖很容易因为优先级不够而失效这时候要用:deep()选择器穿透scoped作用域。比如想把激活标签的文字改成品牌色:deep(.el-tabs__item.is-active) { color: #ff6b35; font-weight: 600; }is-active类是Element Plus给激活项添加的状态类:deep()会让这个选择器跳过>