很多刚开始学前端的朋友拿到一份 HTML 标签列表就犯怵标签这么多有的长得还差不多到底哪些是天天要用的哪些只是偶尔碰到这个问题我也经历过。HTML 是网页的骨架CSS 是皮肤两者配合才能做出一个像样的页面。真正工作里高频出现的 HTML 和 CSS 标签并没有想象中那么多把核心的那批弄熟你就能覆盖日常开发八成以上的需求。这篇就是一份我实际开发中反复在用的标签清单和 CSS 常用写法梳理。不追求把所有标签背下来而是按使用频率和实际场景来组织里面有我踩过的坑也有可以直接抄走的写法。1. 先把 HTML 和 CSS 的关系理清楚很多人刚学的时候会把 HTML 和 CSS 混在一起记其实它们的职责非常清晰HTML 负责内容结构这里是一个标题、一段文字、一张图片、一个按钮。CSS 负责视觉表现标题多大、文字什么颜色、图片是在左边还是右边、按钮有没有圆角。一句话总结就是HTML 决定页面上有什么CSS 决定这些东西长什么样。理解了这一点学习路径就顺了先把 HTML 的结构写对再用 CSS 去美化。如果结构本身乱了套CSS 再怎么写都是打补丁改到最后自己都看不懂。动手练习的建议电脑上装一个 VSCode新建.html文件后输入一个英文感叹号再按 Tab 键编辑器会自动生成页面骨架。浏览器按 F12 打开开发者工具随便打开一个网站看 Elements 面板里的 DOM 结构。这是最快的学习方式没有之一。不要死记硬背标签而是问自己这个标签用在这里语义上是否合理屏幕阅读器或者搜索引擎能不能看懂工具层面不需要多花哨VSCode 加浏览器就够了。过早研究自动化构建工具反而容易打击信心先把原生基础打牢。2. HTML 常用标签按使用频率排队2.1 页面骨架每个页面都有的四件套随便新建一个 HTML 文件骨架就是这段代码!DOCTYPE html html langzh-cn head meta charsetutf-8 title页面标题/title /head body !-- 页面内容写在这里 -- /body /html这一段里面已经包含了不少初学容易忽略的细节!DOCTYPE html告诉浏览器这是一个 HTML5 文档。不写它浏览器会进入怪异模式渲染同样的 CSS 在不同浏览器里可能差出好几个像素页面的盒模型甚至都是错的。以前排页面老遇到“为什么我的 margin 和 padding 跟设计稿对不上”一半的问题根源都在这里。html langzh-cn声明页面语言为简体中文。它影响浏览器翻译、朗读辅助工具的发音方式对搜索引擎识别内容语言也有帮助。meta charsetutf-8声明字符编码这句话不写页面里的中文可能直接变成乱码。现在新项目基本都是 UTF-8这个声明属于基础配置。title就是浏览器标签页上显示的那行文字。它同时是搜索引擎判断页面主题的重要依据不要清一色写成“首页”“无标题文档”这种没有信息的标题。head里还可以放meta namedescription、meta namekeywords这类描述信息但对页面显示没有直接影响新手阶段了解即可。2.2 文本标签真实业务里最常用的一组文本是网页内容的主体所以这组标签几乎每个页面都会用到h1一级标题/h1 h2二级标题/h2 p这是一个段落段落之间自动有间距。/p br strong加粗表示重要内容/strong b加粗但只是视觉加粗没有强调含义/b em斜体表示强调/em i斜体通常是图标或术语/i del删除线/del u下划线/u mark高亮标记/mark small小号文字常用于注释、版权信息/small span无语义的行内容器/span其中有两组很多人分不清strong和b视觉上都是加粗但strong带有“重要”的语义屏幕阅读器会特殊处理b纯粹是视觉加粗。写内容时优先用strong。em和i视觉上都是斜体em表示强调i通常用来放图标、术语、外来词。现在很多图标字体的写法就是i classicon/i。段落里天然会有连续的多个空格和换行被压缩成一个空格这是 HTML 的空白折叠机制。想要保留空格和换行就要用到下面这组标签。2.3 代码与预格式化文本pre 和 code 的配合写技术文档、博客、或者要在页面上展示代码片段时这一组特别实用pre code function hello() { console.log(hello world); } /code /preprepreformatted text保留文本里的空格和换行默认用等宽字体显示。里面的内容怎么换行就怎么显示。code表示一段代码单独用的时候通常需要配合 CSS 设置字体和背景。xmp以前也常用来显示原始 HTML但因为安全原因已经被废弃官方不推荐再用。现在要展示代码就用pre包code。我早期写博客踩过一个坑想往页面里贴一段HTML代码结果标签直接被浏览器解析渲染了。后来才搞清楚必须把转义成lt;把转义成gt;浏览器才会把它当作文本展示。2.4 容器与结构标签从 div 到 HTML5 语义化div是最通用的块级容器没有自带样式所以过去页面全部用一个又一个div堆出来。HTML5 带来了语义化结构标签让页面结构一看就懂header页面头部/导航区/header nav导航链接/nav main页面主体内容/main section一个独立的章节/section article一篇独立文章/article aside侧边栏/补充信息/aside footer页脚/footer这些标签的视觉效果跟div完全一样价值在于语义搜索引擎、屏幕阅读器、以及未来的开发者都能更快理解页面结构。比如想跳过导航直接读正文读屏软件可以直接定位到main。有同学搜过“include 标签的用法”这里说明一下HTML 本身没有一个内置的 include 语法。如果你想在多个页面复用同一个导航栏、页脚常见做法有几种用 JavaScript 加载公共片段fetch一个 HTML 片段再插入页面。用服务端模板比如 PHP 的include、JSP 的% include %。用构建工具比如 Webpack、Vite 的组件机制把公共部分抽成组件。纯静态页面里最省事的还是复制粘贴但后期维护确实痛苦。等学到前端工程化之后组件化才是正解。2.5 图片、链接与媒体标签图片标签是高频中的高频img srcimages/poster.jpg alt活动海报 width600 height400 loadinglazysrc图片地址相对路径或绝对 URL。alt图片加载失败或读屏时的替代文字。别小看它把图片的关键信息写清楚对 SEO 和可访问性都很重要。width和height建议写上可以避免图片加载过程中页面布局上下抖动。loadinglazy懒加载图片进入视口附近才请求对长页面性能优化非常有效。img默认是行内元素这个特性会带来一个很经典的问题图片下方有一条莫名其妙的空隙。原因是图片默认按文字基线对齐基线和底线之间留着一段空白。解决办法很简单给 img 加display: block或vertical-align: middle就行。链接标签a也很常用a hrefhttps://example.com target_blank relnoopener新窗口打开/atarget_blank是打开新标签页但要记得补上relnoopener防止新页面通过window.opener反向操控原页面这是安全上的一个小细节。媒体方面还有video和audio基本用法就是指定src和controls属性浏览器会提供原生播放控件video srcmovie.mp4 controls/video audio srcmusic.mp3 controls/audio2.6 表格标签邮件和后台数据里的常客表格的完整结构是这样table thead tr th姓名/th th部门/th /tr /thead tbody tr td张三/td td技术部/td /tr /tbody /tablethead表头行组。tbody主体数据行组。th表头单元格文字默认加粗居中。td普通数据单元格。colspan跨列合并。colspan2表示这个单元格横向占两列。rowspan跨行合并。rowspan2表示纵向占两行。表格曾经被用来做整个页面的布局排版现在不推荐了因为表格的渲染和响应式适配都很笨重。但在两个场景里表格依然是主力后台管理系统的数据展示以及 HTML 邮件。做邮件时基本只能靠表格加内联样式因为大多数邮件客户端对 CSS 的支持非常有限尤其是flex这类现代布局几乎全废。2.7 表单标签交互的核心表单是与用户交互的入口先记住结构form action/submit methodpost label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 input typepassword namepassword placeholder密码 input typeemail nameemail placeholder邮箱 textarea nameintro rows4 cols30/textarea select namecity option valuebeijing北京/option option valueshanghai上海/option /select input typeradio namegender valuemale idmale label formale男/label input typecheckbox namehobby valuecoding idcoding label forcoding编程/label input typefile nameupload button typesubmit提交/button /form这里有几个要点label for...要和input的id对应起来点击文字就能聚焦输入框或选中选项。这既提升体验又扩大了点击区域对移动端尤其重要。input的type很丰富text、password、email、number、radio、checkbox、file、hidden、date、color等等。手机端用typeemail时弹出的键盘会带符号小细节但很贴心。placeholder只是占位提示不是默认值。提交时如果想带默认值要用value。fieldset和legend可以把表单分组并添加说明适合做注册、地址等多区块的表单视觉上自带一个边框。2.8 列表标签不止是加点列表分三类ul li无序列表项/li /ul ol li有序列表项/li /ol dl dt术语名/dt dd术语描述/dd /dl导航菜单、商品参数、排行榜这些场景都会用到列表。设置list-style: none去掉默认圆点或数字后ul和li是搭建导航栏的常见基础结构。dl也常被用来做图文对排版因为dt和dd天然形成一组一组的对仗关系。3. CSS 的定义与引用三种引入方式怎么选CSS 要作用到 HTML 上有三种写法各有适用场景。3.1 外联样式推荐主力link relstylesheet hrefcss/style.css把样式写在独立的.css文件里通过link引入。这是工程项目里的标准做法样式和结构分离浏览器可以缓存 CSS 文件多页面共享一份样式表。3.2 内嵌样式页面级使用style .card { border: 1px solid #eee; } /style把style放在head里。适合单页、临时页面或者做活动落地页这种只此一处的场景。缺点是不能跨页面复用HTML 文件也会越来越臃肿。3.3 行内样式应急才用div stylecolor: red; font-size: 14px;这是一段红色文字/div直接把style属性写在标签上。优先级最高会覆盖同等的类样式和外链样式但不可复用、代码可读性差也难维护。一般只在调试、邮件模板、或者动态拼接样式时用。关于优先级记三句话就够行内样式 style和外部样式表后面定义的会覆盖前面同优先级的。id选择器 class选择器 标签选择器。优先级相同的时候写在后面的胜出。所以“为什么我的样式不生效”时先检查是不是有更高优先级的选择器把规则抢走了再检查写没写错选择器。实在不行就看看是不是少了一个单位或者属性名拼错了这些低级错误我都犯过不止一次。顺带提一句现在比较流行的“原子化 CSS”思路核心就是把常用样式做成一个类一个属性比如.text-red { color: red; }、.mt-4 { margin-top: 16px; }然后在 HTML 里组合这些类。优点是样式复用极高、几乎不用写新 CSS缺点是类名一长串HTML 可读性差。新手阶段建议先掌握常规写法再去了解这类工程化方案。4. CSS 常用选择器与常用属性4.1 选择器从类型到伪类层层递进CSS 要选中页面里的元素靠的就是选择器。最常用的几类/* 标签选择器 */ p { color: #333; } /* 类选择器 */ .card { border-radius: 8px; } /* id 选择器 */ #header { height: 60px; } /* 后代选择器 */ .card .title { font-size: 18px; } /* 子选择器 */ .card .cover { width: 100%; } /* 属性选择器 */ input[typetext] { border: 1px solid #ccc; } /* 伪类状态相关 */ a:hover { color: #e74c3c; } input:focus { outline: 2px solid #007bff; } /* 伪元素页面里不存在的元素 */ .card::before { content: ; display: block; } .card::after { content: ; display: block; }注意区分伪类和伪元素伪类用单个冒号:描述元素的某种状态比如鼠标移入、获得焦点、第一个子元素。伪元素用双冒号::可以理解为往页面里“造”一个元素。最常用的场景是::before和::after搭配content生成装饰性内容比如给标题加个前置短线、给按钮加个小图标。很多同学搜过“CSS 样式表中使用*的优缺点”这说的是通配符选择器* { margin: 0; padding: 0; }优点是重置所有元素的默认边距非常方便几行代码就解决了浏览器默认样式不一致的问题。缺点主要有两个性能开销。*要遍历页面里所有元素在大型页面上会拖慢渲染速度。会把一些不该重置的默认样式也打掉了比如ul的缩进、menu的边距后面还得一个个加回来。我的实际做法是简单项目里用*重置样式图省事大型项目里一般用normalize.css这类更温和的现代化 reset它只抹平浏览器之间的差异不会把有用的默认样式全部清掉。4.2 字体和文本属性改字的人天天在调这些字体这块的属性其实不多但组合起来变化很丰富body { font-family: Helvetica Neue, Arial, PingFang SC, Microsoft YaHei, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: #333; }font-family字体族。前面放优先使用的字体找不到就依次往后备降。中文字体要带上引号多个单词组成的字体名也要引号。font-size字号。网页默认通常是 16px。font-weight字重。normal是 400bold是 700。字体只有两种粗细时写bold就行。line-height行高。推荐写成无单位数值1.6表示是自身字体大小的 1.6 倍这样在响应式布局里表现更稳定。color文字颜色。支持#333、rgb(51, 51, 51)、rgba(0,0,0,.5)等多种写法。文本排版方面还有几个常用属性.text { text-align: center; /* 水平对齐left/center/right/justify */ text-decoration: none; /* 去掉下划线也有 underline / line-through */ letter-spacing: 1px; /* 字间距 */ word-break: break-all; /* 英文长单词换行 */ white-space: nowrap; /* 不换行 */ text-overflow: ellipsis; /* 文本溢出显示省略号需要配合上面两个属性 */ }单行文本超出后显示省略号是一个高频需求三件套一起用.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }很多同学搜“CSS 删除线”删除线对应的属性就是text-decoration: line-through。但需要注意如果是给商品原价划线用text-decoration就够了如果追求删除线颜色和文字颜色不同或者要做到更精细的折线效果就得用::after画一条背景线或者 border。字体渐变是视觉效果里的常见需求用background-clip来做.gradient-text { background: linear-gradient(90deg, #f7971e, #ffd200); -webkit-background-clip: text; background-clip: text; color: transparent; }原理是先给文字区域设置渐变背景然后把背景裁剪到文字轮廓里最后把文字本身设为透明色。注意-webkit-前缀和color: transparent缺一不可少一个效果就出不来。4.3 盒模型与尺寸页面错位的根源之一HTML 里每个元素在浏览器眼中都是一个矩形盒子。盒模型由内到外是内容区、padding内边距、border边框、margin外边距。.box { width: 200px; height: 100px; padding: 20px; border: 1px solid #ddd; margin: 10px; box-sizing: border-box; }box-sizing强烈建议在项目里统一设置* { box-sizing: border-box; }为什么默认的content-box模式下一个宽度 200px 的盒子加上左右各 20px 的 padding 和 1px 的边框实际占据宽度是 200 20×2 1×2 242px。设计稿里算好的 200px 硬生生被“撑爆”了。设成border-box之后宽度 200px 就包含了 padding 和 border怎么加都不会超出预设尺寸。这个属性是我给所有新人第一课就强调的东西。margin除了控制间距还有一个特别常用的作用是水平居中.centered { width: 300px; margin: 0 auto; }但是注意margin: 0 auto只对块级元素有效而且必须设置了width。没有宽度的话块级元素本来就是占满整行的谈不上居中。4.4 布局与定位容器里的文本位置怎么调“怎么调整 CSS 容器里的文本位置”是搜索热词说明大家都被文本定位折腾过。常见的场景可以拆成几类水平方向对齐文本和行内元素如span、a、img用text-align: center。块级元素自身居中用margin: 0 auto。多个块级元素水平分布用flex。垂直方向对齐单行文本垂直居中让line-height等于容器高度比如容器高 40px就设置line-height: 40px。这是最老派但依然好用的方案。多行文本或任意元素垂直水平居中优先用 flex.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }justify-content控制主轴方向上的对齐align-items控制交叉轴上的对齐。只要记住这两个属性和轴的关系几乎能解决所有容器内对齐问题。body 整体居中如果想让整个页面内容居中可以这样body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }min-height: 100vh让 body 至少占满浏览器可视区域的高度配合 flex 就能把子内容整体推到页面中心。这个写法在做登录页、全屏欢迎页的时候非常常用。定位position相对简单但很容易搞混我的记忆方法relative相对自己原来的位置偏移占位还在。absolute相对最近的定位祖先有relative、absolute、fixed的祖先定位会脱离文档流。fixed相对浏览器视口定位常用于固定在顶部的导航和侧边栏。sticky吸顶效果滚动到指定位置后固定是relative和fixed的结合体。.top-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }4.5 常用视觉效果的实现思路鼠标移入事件CSS 里用 hover 伪类“CSS 鼠标移入事件”对应的就是:hover。鼠标移上去变颜色、放大、换图都是它.btn { background: #3498db; transition: transform .2s ease, background .2s ease; } .btn:hover { background: #2980b9; transform: scale(1.05); }注意transition写在原始状态上而不是hover里这样鼠标离开时才会平滑过渡回去。如果写在hover里只有移入时有动画移出时会瞬间跳回原状。banner 背景图页面顶部的 banner 大图核心是让图片自适应容器并居中裁切.banner { width: 100%; height: 400px; background-image: url(banner.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; }cover的含义是让背景图铺满整个容器超出部分裁掉background-position: center让裁切后显示中间部分。这样不管屏幕多宽banner 都能撑满且内容区域基本不变形。梯形变形“CSS 变形梯形”通常用transform来实现。把一个正方形压成梯形的核心是加透视旋转.trapezoid { width: 160px; height: 80px; background: #f39c12; transform: perspective(40px) rotateX(10deg); transform-origin: bottom; }perspective值越小视觉透视越强烈rotateX控制前后倾斜。但要注意transform会改变元素的表现形状不会改变文档流占位需要灵活调整布局时可能要用margin或“挡住下半截”的方式配合。另一种更可控的梯形是用clip-path裁切直接描出梯形的多边形路径但兼容性不如transform方式。涟漪光圈扩散效果“CSS 涟漪光圈扩散”是一个典型的keyframes动画案例.ripple { width: 200px; height: 200px; border-radius: 50%; background: rgba(0, 150, 255, .6); animation: ripple 2s ease-out infinite; } keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(0, 150, 255, .6); } 100% { box-shadow: 0 0 0 40px rgba(0, 150, 255, 0); } }原理是让box-shadow的扩散范围从 0 逐渐变大同时透明度从实变虚看起来就像一圈圈向外扩散的涟漪。把动画时长设为2sinfinite表示无限循环点击反馈、水波纹按钮都常用这种思路。动态相册“CSS 动态相册纯代码”其实是把几个能力组合在一起display: grid排宫格、transition做平滑过渡、:hover触发缩放和亮度变化.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .album img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease, box-shadow .3s ease; } .album img:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }grid-template-columns: repeat(3, 1fr)表示三列等宽布局object-fit: cover让图片不管什么尺寸都被裁成正方形且不变形。这类写法在作品集、商品列表里很实用。5. 实战做一张个人信息卡片前面讲了一堆知识点现在把它们串起来。目标是做一张居中的个人信息卡片包含头像、姓名、简介和一个按钮。HTML 结构!DOCTYPE html html langzh-cn head meta charsetutf-8 title个人名片/title link relstylesheet hrefstyle.css /head body div classcard img srcavatar.jpg alt个人头像 classavatar h1 classname张小野/h1 p classbio前端开发工程师喜欢折腾 CSS 动画和创意交互。/p a href# classbtn联系我/a /div /body /htmlCSS 样式* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #f5f6fa; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .card { width: 360px; padding: 40px 32px; text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .1); transition: transform .3s ease; } .card:hover { transform: translateY(-6px); } .avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #3498db; } .name { margin: 20px 0 8px; font-size: 24px; color: #2c3e50; } .bio { font-size: 14px; line-height: 1.6; color: #7f8c8d; margin-bottom: 24px; } .btn { display: inline-block; padding: 10px 32px; background: #3498db; color: #fff; text-decoration: none; border-radius: 24px; transition: background .2s ease; } .btn:hover { background: #2980b9; }实现的效果页面内容整体居中用的是 body 的 flex 方案。卡片自身有圆角、投影、以及鼠标移入时向上浮动的效果。头像被裁成圆形图片不会变形。按钮带悬停变色反馈。这套结构稍作扩展加上几张图片或几个按钮就能演变成一个商品卡片、文章卡片、团队成员介绍卡片。我把这当作教学里的“最小可复用模板”建议新手亲手敲一遍改成自己喜欢的配色和内容。6. 常见问题与排查经验6.1 踩坑速查表问题现象常见原因解决办法样式写了没生效选择器优先级不够或被后写的样式覆盖检查选择器优先级确认书写顺序必要时用类名提升优先级中文乱码meta charsetutf-8缺失或位置不对在head最前面加上编码声明图片下方有空白img默认按基线对齐加display: block或vertical-align: middle元素宽度超出父容器盒模型是content-boxpadding 把宽度撑大了全局设置box-sizing: border-box鼠标移入效果生硬transition写在:hover里移出时没有过渡把transition写在元素的默认状态上按钮点击没反应button类型是submit在表单里会触发提交明确指定typebutton或typesubmit背景图只有一半没用background-size: cover设置background-size: cover; background-position: center无法居中目标元素是块级元素却用了text-align块级元素居中用margin: 0 auto或 flex表格里每一条都是我实际见过的问题有些甚至是我自己犯过的错。初学者最常见的心态是“代码对着教程抄的为什么就是不一样”这时候别急着怀疑教程先把优先、盒模型、字符编码这老三样检查一遍八成能解决。6.2 学习顺序和自查清单如果想系统练习我建议按这个顺序走一遍先写一个只有文本的页面把标题、段落、加粗、斜体、链接都用上。再给页面加入图片、列表和表格。加一个带登录表单的页面注意label和input的关联。用header、nav、main、footer重构页面布局。给页面写 CSS强制自己只用外链样式。练习把一张图片变成圆形头像把一个容器的内容居中。给自己做一张介绍卡包括头像、姓名、简介和按钮。最后尝试加一个hover动画效果。做完这些你对常用标签的熟悉程度基本就过关了。下一步再深入flex布局、grid布局和响应式设计就有底气多了。这套“常用标签 高频技巧”的思路我用了很久每次带新人也是这么教的。与其背完整份文档不如先把最核心的那批标签练熟在真实页面里反复使用慢慢形成肌肉记忆。踩过的坑越多学到的经验就越扎实。后面遇到不认识的标签打开文档查一下用两次自然就记住了。这也是前端入门阶段最有效率的学习方式。 HTML与CSS高频标签实战清单：从页面骨架到布局样式一次理清
很多刚开始学前端的朋友拿到一份 HTML 标签列表就犯怵标签这么多有的长得还差不多到底哪些是天天要用的哪些只是偶尔碰到这个问题我也经历过。HTML 是网页的骨架CSS 是皮肤两者配合才能做出一个像样的页面。真正工作里高频出现的 HTML 和 CSS 标签并没有想象中那么多把核心的那批弄熟你就能覆盖日常开发八成以上的需求。这篇就是一份我实际开发中反复在用的标签清单和 CSS 常用写法梳理。不追求把所有标签背下来而是按使用频率和实际场景来组织里面有我踩过的坑也有可以直接抄走的写法。1. 先把 HTML 和 CSS 的关系理清楚很多人刚学的时候会把 HTML 和 CSS 混在一起记其实它们的职责非常清晰HTML 负责内容结构这里是一个标题、一段文字、一张图片、一个按钮。CSS 负责视觉表现标题多大、文字什么颜色、图片是在左边还是右边、按钮有没有圆角。一句话总结就是HTML 决定页面上有什么CSS 决定这些东西长什么样。理解了这一点学习路径就顺了先把 HTML 的结构写对再用 CSS 去美化。如果结构本身乱了套CSS 再怎么写都是打补丁改到最后自己都看不懂。动手练习的建议电脑上装一个 VSCode新建.html文件后输入一个英文感叹号再按 Tab 键编辑器会自动生成页面骨架。浏览器按 F12 打开开发者工具随便打开一个网站看 Elements 面板里的 DOM 结构。这是最快的学习方式没有之一。不要死记硬背标签而是问自己这个标签用在这里语义上是否合理屏幕阅读器或者搜索引擎能不能看懂工具层面不需要多花哨VSCode 加浏览器就够了。过早研究自动化构建工具反而容易打击信心先把原生基础打牢。2. HTML 常用标签按使用频率排队2.1 页面骨架每个页面都有的四件套随便新建一个 HTML 文件骨架就是这段代码!DOCTYPE html html langzh-cn head meta charsetutf-8 title页面标题/title /head body !-- 页面内容写在这里 -- /body /html这一段里面已经包含了不少初学容易忽略的细节!DOCTYPE html告诉浏览器这是一个 HTML5 文档。不写它浏览器会进入怪异模式渲染同样的 CSS 在不同浏览器里可能差出好几个像素页面的盒模型甚至都是错的。以前排页面老遇到“为什么我的 margin 和 padding 跟设计稿对不上”一半的问题根源都在这里。html langzh-cn声明页面语言为简体中文。它影响浏览器翻译、朗读辅助工具的发音方式对搜索引擎识别内容语言也有帮助。meta charsetutf-8声明字符编码这句话不写页面里的中文可能直接变成乱码。现在新项目基本都是 UTF-8这个声明属于基础配置。title就是浏览器标签页上显示的那行文字。它同时是搜索引擎判断页面主题的重要依据不要清一色写成“首页”“无标题文档”这种没有信息的标题。head里还可以放meta namedescription、meta namekeywords这类描述信息但对页面显示没有直接影响新手阶段了解即可。2.2 文本标签真实业务里最常用的一组文本是网页内容的主体所以这组标签几乎每个页面都会用到h1一级标题/h1 h2二级标题/h2 p这是一个段落段落之间自动有间距。/p br strong加粗表示重要内容/strong b加粗但只是视觉加粗没有强调含义/b em斜体表示强调/em i斜体通常是图标或术语/i del删除线/del u下划线/u mark高亮标记/mark small小号文字常用于注释、版权信息/small span无语义的行内容器/span其中有两组很多人分不清strong和b视觉上都是加粗但strong带有“重要”的语义屏幕阅读器会特殊处理b纯粹是视觉加粗。写内容时优先用strong。em和i视觉上都是斜体em表示强调i通常用来放图标、术语、外来词。现在很多图标字体的写法就是i classicon/i。段落里天然会有连续的多个空格和换行被压缩成一个空格这是 HTML 的空白折叠机制。想要保留空格和换行就要用到下面这组标签。2.3 代码与预格式化文本pre 和 code 的配合写技术文档、博客、或者要在页面上展示代码片段时这一组特别实用pre code function hello() { console.log(hello world); } /code /preprepreformatted text保留文本里的空格和换行默认用等宽字体显示。里面的内容怎么换行就怎么显示。code表示一段代码单独用的时候通常需要配合 CSS 设置字体和背景。xmp以前也常用来显示原始 HTML但因为安全原因已经被废弃官方不推荐再用。现在要展示代码就用pre包code。我早期写博客踩过一个坑想往页面里贴一段HTML代码结果标签直接被浏览器解析渲染了。后来才搞清楚必须把转义成lt;把转义成gt;浏览器才会把它当作文本展示。2.4 容器与结构标签从 div 到 HTML5 语义化div是最通用的块级容器没有自带样式所以过去页面全部用一个又一个div堆出来。HTML5 带来了语义化结构标签让页面结构一看就懂header页面头部/导航区/header nav导航链接/nav main页面主体内容/main section一个独立的章节/section article一篇独立文章/article aside侧边栏/补充信息/aside footer页脚/footer这些标签的视觉效果跟div完全一样价值在于语义搜索引擎、屏幕阅读器、以及未来的开发者都能更快理解页面结构。比如想跳过导航直接读正文读屏软件可以直接定位到main。有同学搜过“include 标签的用法”这里说明一下HTML 本身没有一个内置的 include 语法。如果你想在多个页面复用同一个导航栏、页脚常见做法有几种用 JavaScript 加载公共片段fetch一个 HTML 片段再插入页面。用服务端模板比如 PHP 的include、JSP 的% include %。用构建工具比如 Webpack、Vite 的组件机制把公共部分抽成组件。纯静态页面里最省事的还是复制粘贴但后期维护确实痛苦。等学到前端工程化之后组件化才是正解。2.5 图片、链接与媒体标签图片标签是高频中的高频img srcimages/poster.jpg alt活动海报 width600 height400 loadinglazysrc图片地址相对路径或绝对 URL。alt图片加载失败或读屏时的替代文字。别小看它把图片的关键信息写清楚对 SEO 和可访问性都很重要。width和height建议写上可以避免图片加载过程中页面布局上下抖动。loadinglazy懒加载图片进入视口附近才请求对长页面性能优化非常有效。img默认是行内元素这个特性会带来一个很经典的问题图片下方有一条莫名其妙的空隙。原因是图片默认按文字基线对齐基线和底线之间留着一段空白。解决办法很简单给 img 加display: block或vertical-align: middle就行。链接标签a也很常用a hrefhttps://example.com target_blank relnoopener新窗口打开/atarget_blank是打开新标签页但要记得补上relnoopener防止新页面通过window.opener反向操控原页面这是安全上的一个小细节。媒体方面还有video和audio基本用法就是指定src和controls属性浏览器会提供原生播放控件video srcmovie.mp4 controls/video audio srcmusic.mp3 controls/audio2.6 表格标签邮件和后台数据里的常客表格的完整结构是这样table thead tr th姓名/th th部门/th /tr /thead tbody tr td张三/td td技术部/td /tr /tbody /tablethead表头行组。tbody主体数据行组。th表头单元格文字默认加粗居中。td普通数据单元格。colspan跨列合并。colspan2表示这个单元格横向占两列。rowspan跨行合并。rowspan2表示纵向占两行。表格曾经被用来做整个页面的布局排版现在不推荐了因为表格的渲染和响应式适配都很笨重。但在两个场景里表格依然是主力后台管理系统的数据展示以及 HTML 邮件。做邮件时基本只能靠表格加内联样式因为大多数邮件客户端对 CSS 的支持非常有限尤其是flex这类现代布局几乎全废。2.7 表单标签交互的核心表单是与用户交互的入口先记住结构form action/submit methodpost label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 input typepassword namepassword placeholder密码 input typeemail nameemail placeholder邮箱 textarea nameintro rows4 cols30/textarea select namecity option valuebeijing北京/option option valueshanghai上海/option /select input typeradio namegender valuemale idmale label formale男/label input typecheckbox namehobby valuecoding idcoding label forcoding编程/label input typefile nameupload button typesubmit提交/button /form这里有几个要点label for...要和input的id对应起来点击文字就能聚焦输入框或选中选项。这既提升体验又扩大了点击区域对移动端尤其重要。input的type很丰富text、password、email、number、radio、checkbox、file、hidden、date、color等等。手机端用typeemail时弹出的键盘会带符号小细节但很贴心。placeholder只是占位提示不是默认值。提交时如果想带默认值要用value。fieldset和legend可以把表单分组并添加说明适合做注册、地址等多区块的表单视觉上自带一个边框。2.8 列表标签不止是加点列表分三类ul li无序列表项/li /ul ol li有序列表项/li /ol dl dt术语名/dt dd术语描述/dd /dl导航菜单、商品参数、排行榜这些场景都会用到列表。设置list-style: none去掉默认圆点或数字后ul和li是搭建导航栏的常见基础结构。dl也常被用来做图文对排版因为dt和dd天然形成一组一组的对仗关系。3. CSS 的定义与引用三种引入方式怎么选CSS 要作用到 HTML 上有三种写法各有适用场景。3.1 外联样式推荐主力link relstylesheet hrefcss/style.css把样式写在独立的.css文件里通过link引入。这是工程项目里的标准做法样式和结构分离浏览器可以缓存 CSS 文件多页面共享一份样式表。3.2 内嵌样式页面级使用style .card { border: 1px solid #eee; } /style把style放在head里。适合单页、临时页面或者做活动落地页这种只此一处的场景。缺点是不能跨页面复用HTML 文件也会越来越臃肿。3.3 行内样式应急才用div stylecolor: red; font-size: 14px;这是一段红色文字/div直接把style属性写在标签上。优先级最高会覆盖同等的类样式和外链样式但不可复用、代码可读性差也难维护。一般只在调试、邮件模板、或者动态拼接样式时用。关于优先级记三句话就够行内样式 style和外部样式表后面定义的会覆盖前面同优先级的。id选择器 class选择器 标签选择器。优先级相同的时候写在后面的胜出。所以“为什么我的样式不生效”时先检查是不是有更高优先级的选择器把规则抢走了再检查写没写错选择器。实在不行就看看是不是少了一个单位或者属性名拼错了这些低级错误我都犯过不止一次。顺带提一句现在比较流行的“原子化 CSS”思路核心就是把常用样式做成一个类一个属性比如.text-red { color: red; }、.mt-4 { margin-top: 16px; }然后在 HTML 里组合这些类。优点是样式复用极高、几乎不用写新 CSS缺点是类名一长串HTML 可读性差。新手阶段建议先掌握常规写法再去了解这类工程化方案。4. CSS 常用选择器与常用属性4.1 选择器从类型到伪类层层递进CSS 要选中页面里的元素靠的就是选择器。最常用的几类/* 标签选择器 */ p { color: #333; } /* 类选择器 */ .card { border-radius: 8px; } /* id 选择器 */ #header { height: 60px; } /* 后代选择器 */ .card .title { font-size: 18px; } /* 子选择器 */ .card .cover { width: 100%; } /* 属性选择器 */ input[typetext] { border: 1px solid #ccc; } /* 伪类状态相关 */ a:hover { color: #e74c3c; } input:focus { outline: 2px solid #007bff; } /* 伪元素页面里不存在的元素 */ .card::before { content: ; display: block; } .card::after { content: ; display: block; }注意区分伪类和伪元素伪类用单个冒号:描述元素的某种状态比如鼠标移入、获得焦点、第一个子元素。伪元素用双冒号::可以理解为往页面里“造”一个元素。最常用的场景是::before和::after搭配content生成装饰性内容比如给标题加个前置短线、给按钮加个小图标。很多同学搜过“CSS 样式表中使用*的优缺点”这说的是通配符选择器* { margin: 0; padding: 0; }优点是重置所有元素的默认边距非常方便几行代码就解决了浏览器默认样式不一致的问题。缺点主要有两个性能开销。*要遍历页面里所有元素在大型页面上会拖慢渲染速度。会把一些不该重置的默认样式也打掉了比如ul的缩进、menu的边距后面还得一个个加回来。我的实际做法是简单项目里用*重置样式图省事大型项目里一般用normalize.css这类更温和的现代化 reset它只抹平浏览器之间的差异不会把有用的默认样式全部清掉。4.2 字体和文本属性改字的人天天在调这些字体这块的属性其实不多但组合起来变化很丰富body { font-family: Helvetica Neue, Arial, PingFang SC, Microsoft YaHei, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: #333; }font-family字体族。前面放优先使用的字体找不到就依次往后备降。中文字体要带上引号多个单词组成的字体名也要引号。font-size字号。网页默认通常是 16px。font-weight字重。normal是 400bold是 700。字体只有两种粗细时写bold就行。line-height行高。推荐写成无单位数值1.6表示是自身字体大小的 1.6 倍这样在响应式布局里表现更稳定。color文字颜色。支持#333、rgb(51, 51, 51)、rgba(0,0,0,.5)等多种写法。文本排版方面还有几个常用属性.text { text-align: center; /* 水平对齐left/center/right/justify */ text-decoration: none; /* 去掉下划线也有 underline / line-through */ letter-spacing: 1px; /* 字间距 */ word-break: break-all; /* 英文长单词换行 */ white-space: nowrap; /* 不换行 */ text-overflow: ellipsis; /* 文本溢出显示省略号需要配合上面两个属性 */ }单行文本超出后显示省略号是一个高频需求三件套一起用.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }很多同学搜“CSS 删除线”删除线对应的属性就是text-decoration: line-through。但需要注意如果是给商品原价划线用text-decoration就够了如果追求删除线颜色和文字颜色不同或者要做到更精细的折线效果就得用::after画一条背景线或者 border。字体渐变是视觉效果里的常见需求用background-clip来做.gradient-text { background: linear-gradient(90deg, #f7971e, #ffd200); -webkit-background-clip: text; background-clip: text; color: transparent; }原理是先给文字区域设置渐变背景然后把背景裁剪到文字轮廓里最后把文字本身设为透明色。注意-webkit-前缀和color: transparent缺一不可少一个效果就出不来。4.3 盒模型与尺寸页面错位的根源之一HTML 里每个元素在浏览器眼中都是一个矩形盒子。盒模型由内到外是内容区、padding内边距、border边框、margin外边距。.box { width: 200px; height: 100px; padding: 20px; border: 1px solid #ddd; margin: 10px; box-sizing: border-box; }box-sizing强烈建议在项目里统一设置* { box-sizing: border-box; }为什么默认的content-box模式下一个宽度 200px 的盒子加上左右各 20px 的 padding 和 1px 的边框实际占据宽度是 200 20×2 1×2 242px。设计稿里算好的 200px 硬生生被“撑爆”了。设成border-box之后宽度 200px 就包含了 padding 和 border怎么加都不会超出预设尺寸。这个属性是我给所有新人第一课就强调的东西。margin除了控制间距还有一个特别常用的作用是水平居中.centered { width: 300px; margin: 0 auto; }但是注意margin: 0 auto只对块级元素有效而且必须设置了width。没有宽度的话块级元素本来就是占满整行的谈不上居中。4.4 布局与定位容器里的文本位置怎么调“怎么调整 CSS 容器里的文本位置”是搜索热词说明大家都被文本定位折腾过。常见的场景可以拆成几类水平方向对齐文本和行内元素如span、a、img用text-align: center。块级元素自身居中用margin: 0 auto。多个块级元素水平分布用flex。垂直方向对齐单行文本垂直居中让line-height等于容器高度比如容器高 40px就设置line-height: 40px。这是最老派但依然好用的方案。多行文本或任意元素垂直水平居中优先用 flex.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }justify-content控制主轴方向上的对齐align-items控制交叉轴上的对齐。只要记住这两个属性和轴的关系几乎能解决所有容器内对齐问题。body 整体居中如果想让整个页面内容居中可以这样body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }min-height: 100vh让 body 至少占满浏览器可视区域的高度配合 flex 就能把子内容整体推到页面中心。这个写法在做登录页、全屏欢迎页的时候非常常用。定位position相对简单但很容易搞混我的记忆方法relative相对自己原来的位置偏移占位还在。absolute相对最近的定位祖先有relative、absolute、fixed的祖先定位会脱离文档流。fixed相对浏览器视口定位常用于固定在顶部的导航和侧边栏。sticky吸顶效果滚动到指定位置后固定是relative和fixed的结合体。.top-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }4.5 常用视觉效果的实现思路鼠标移入事件CSS 里用 hover 伪类“CSS 鼠标移入事件”对应的就是:hover。鼠标移上去变颜色、放大、换图都是它.btn { background: #3498db; transition: transform .2s ease, background .2s ease; } .btn:hover { background: #2980b9; transform: scale(1.05); }注意transition写在原始状态上而不是hover里这样鼠标离开时才会平滑过渡回去。如果写在hover里只有移入时有动画移出时会瞬间跳回原状。banner 背景图页面顶部的 banner 大图核心是让图片自适应容器并居中裁切.banner { width: 100%; height: 400px; background-image: url(banner.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; }cover的含义是让背景图铺满整个容器超出部分裁掉background-position: center让裁切后显示中间部分。这样不管屏幕多宽banner 都能撑满且内容区域基本不变形。梯形变形“CSS 变形梯形”通常用transform来实现。把一个正方形压成梯形的核心是加透视旋转.trapezoid { width: 160px; height: 80px; background: #f39c12; transform: perspective(40px) rotateX(10deg); transform-origin: bottom; }perspective值越小视觉透视越强烈rotateX控制前后倾斜。但要注意transform会改变元素的表现形状不会改变文档流占位需要灵活调整布局时可能要用margin或“挡住下半截”的方式配合。另一种更可控的梯形是用clip-path裁切直接描出梯形的多边形路径但兼容性不如transform方式。涟漪光圈扩散效果“CSS 涟漪光圈扩散”是一个典型的keyframes动画案例.ripple { width: 200px; height: 200px; border-radius: 50%; background: rgba(0, 150, 255, .6); animation: ripple 2s ease-out infinite; } keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(0, 150, 255, .6); } 100% { box-shadow: 0 0 0 40px rgba(0, 150, 255, 0); } }原理是让box-shadow的扩散范围从 0 逐渐变大同时透明度从实变虚看起来就像一圈圈向外扩散的涟漪。把动画时长设为2sinfinite表示无限循环点击反馈、水波纹按钮都常用这种思路。动态相册“CSS 动态相册纯代码”其实是把几个能力组合在一起display: grid排宫格、transition做平滑过渡、:hover触发缩放和亮度变化.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .album img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease, box-shadow .3s ease; } .album img:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }grid-template-columns: repeat(3, 1fr)表示三列等宽布局object-fit: cover让图片不管什么尺寸都被裁成正方形且不变形。这类写法在作品集、商品列表里很实用。5. 实战做一张个人信息卡片前面讲了一堆知识点现在把它们串起来。目标是做一张居中的个人信息卡片包含头像、姓名、简介和一个按钮。HTML 结构!DOCTYPE html html langzh-cn head meta charsetutf-8 title个人名片/title link relstylesheet hrefstyle.css /head body div classcard img srcavatar.jpg alt个人头像 classavatar h1 classname张小野/h1 p classbio前端开发工程师喜欢折腾 CSS 动画和创意交互。/p a href# classbtn联系我/a /div /body /htmlCSS 样式* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #f5f6fa; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .card { width: 360px; padding: 40px 32px; text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .1); transition: transform .3s ease; } .card:hover { transform: translateY(-6px); } .avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #3498db; } .name { margin: 20px 0 8px; font-size: 24px; color: #2c3e50; } .bio { font-size: 14px; line-height: 1.6; color: #7f8c8d; margin-bottom: 24px; } .btn { display: inline-block; padding: 10px 32px; background: #3498db; color: #fff; text-decoration: none; border-radius: 24px; transition: background .2s ease; } .btn:hover { background: #2980b9; }实现的效果页面内容整体居中用的是 body 的 flex 方案。卡片自身有圆角、投影、以及鼠标移入时向上浮动的效果。头像被裁成圆形图片不会变形。按钮带悬停变色反馈。这套结构稍作扩展加上几张图片或几个按钮就能演变成一个商品卡片、文章卡片、团队成员介绍卡片。我把这当作教学里的“最小可复用模板”建议新手亲手敲一遍改成自己喜欢的配色和内容。6. 常见问题与排查经验6.1 踩坑速查表问题现象常见原因解决办法样式写了没生效选择器优先级不够或被后写的样式覆盖检查选择器优先级确认书写顺序必要时用类名提升优先级中文乱码meta charsetutf-8缺失或位置不对在head最前面加上编码声明图片下方有空白img默认按基线对齐加display: block或vertical-align: middle元素宽度超出父容器盒模型是content-boxpadding 把宽度撑大了全局设置box-sizing: border-box鼠标移入效果生硬transition写在:hover里移出时没有过渡把transition写在元素的默认状态上按钮点击没反应button类型是submit在表单里会触发提交明确指定typebutton或typesubmit背景图只有一半没用background-size: cover设置background-size: cover; background-position: center无法居中目标元素是块级元素却用了text-align块级元素居中用margin: 0 auto或 flex表格里每一条都是我实际见过的问题有些甚至是我自己犯过的错。初学者最常见的心态是“代码对着教程抄的为什么就是不一样”这时候别急着怀疑教程先把优先、盒模型、字符编码这老三样检查一遍八成能解决。6.2 学习顺序和自查清单如果想系统练习我建议按这个顺序走一遍先写一个只有文本的页面把标题、段落、加粗、斜体、链接都用上。再给页面加入图片、列表和表格。加一个带登录表单的页面注意label和input的关联。用header、nav、main、footer重构页面布局。给页面写 CSS强制自己只用外链样式。练习把一张图片变成圆形头像把一个容器的内容居中。给自己做一张介绍卡包括头像、姓名、简介和按钮。最后尝试加一个hover动画效果。做完这些你对常用标签的熟悉程度基本就过关了。下一步再深入flex布局、grid布局和响应式设计就有底气多了。这套“常用标签 高频技巧”的思路我用了很久每次带新人也是这么教的。与其背完整份文档不如先把最核心的那批标签练熟在真实页面里反复使用慢慢形成肌肉记忆。踩过的坑越多学到的经验就越扎实。后面遇到不认识的标签打开文档查一下用两次自然就记住了。这也是前端入门阶段最有效率的学习方式。