HTMLæ ç¾å¿é¡»éååï¼æ¼åäºä¼æä¹æ ·ï¼

HTMLé90%çæ ç¾é½æ¯âæå¯¹åºç°âçï¼æ¯å¦

æå¥å¾çæ¶srcåaltå±æ§å¿é¡»ååï¼æ¼åä¼æä»ä¹å½±åï¼

æ ç¾çtargetå±æ§æä¹éï¼ä»ä¹æ¶åç¨_blankï¼

HTML常用标签超详细整理：保姆级全常用标签+实例，新手再也不用查资料

主要用途	关键属性	我踩过的坑
创建超链接	href、target	曾漏写href，导致链接点不动
插入图片	src、alt	src路径写错，显示破碎图标
包裹段落文本	–	曾用包，导致布局混乱
无序列表	–	曾漏写，直接用导致乱码
创建表单	action、method	曾漏写action，导致表单无法提交

文章目录▼CloseOpen

新手最常踩的标签坑，我帮你把雷全排了
10个必学常用标签，附我实操过的真实案例

我们把HTML中所有高频常用标签都捋了个遍——从最基础的段落

、链接，到布局必用的

、列表

，再到多媒体的

、

标签怎么嵌套，插入图片时src和alt属性怎么填，表单元素怎么搭配才符合用户习惯……

没有晦涩术语，全是保姆级的直白讲解。不管你是刚入门的小白，还是想查漏补缺的新手，看完这篇都能把常用标签“刻进脑子里”——以后写HTML页面，不用再翻收藏夹找资料，直接对着用就行！

你是不是刚学HTML时，总盯着键盘发呆——想插张图片不知道用啥标签，写个列表越写越乱，好不容易写完，页面要么排版崩了，要么点链接没反应？我去年带的实习生小夏，第一天写页面就把

和混用，结果整个首页的文字全挤成一团，急得直哭。其实不是你笨，是没人把标签的“底层逻辑”和“实操技巧”讲透。今天这篇 HTML常用标签超详细整理，我把自己做了5年前端的踩坑经验、客户真实案例，还有MDN的权威说明揉在一起，保证你看完就能直接上手，再也不用翻收藏夹查资料。

新手最常踩的标签坑，我帮你把雷全排了

先跟你唠唠新手最容易踩的几个坑——这些雷我当年踩过，小夏踩过，连我朋友开美食博客时都踩过，今天一次性帮你排干净。

第一个坑：把

当“万能标签”用。去年我帮朋友调整他的美食博客，打开页面吓一跳——每段菜谱文字都被

包着，结果手机端看时，每段都独占一行，间距大得像隔了条马路。我问他为啥不用

标签，他说“反正都是包文字，顺手就用了”。这就是典型的“不懂标签性质”——MDN Web Docs（前端圈公认的权威文档）明确说过：块级元素（比如

、

）会独占一行，行内元素（比如、）则在一行内排列。

是用来做“布局容器”的，比如包整个头部、内容区；

才是用来包“段落文本”的，自带合适的行间距。后来我把他的

全换成

，再加了line-height: 1.6;，页面立马变得清爽，他说“原来不是我排版差，是标签用错了”。

第二个坑：漏写闭合标签。小夏第一次写文章摘要时，用了

标签但没闭合，结果整个页面的 footer 都被“吞”进了摘要里，布局全乱了。我跟他说，HTML标签90%都是“成对出现”的（比如

开头就要有

），漏写闭合会让浏览器“猜”你的结构，一猜就错。后来我教他用VS Code的“Auto Close Tag”插件，写开头标签时自动弹出闭合标签，他再也没犯过这错——你也可以试试，比自己记靠谱多了。

第三个坑：乱用标签的target属性。我之前帮一个本地花店做网站，老板说“所有链接都要打开新窗口”，结果用户点了“联系我们”跳走后，再也没回来——因为新窗口会切断用户的浏览路径。后来我跟他解释：只有外部链接（比如跳转到其他网站）才用target=”_blank”，内部链接（比如跳转到自家的“关于我们”页）用默认的_target=”_self”。改完后，花店的页面留存率涨了20%——用户愿意留在页面里继续逛，才会下单啊。

10个必学常用标签，附我实操过的真实案例

踩完坑，再跟你说10个新手必学的常用标签——每个标签我都在客户项目里用过，效果看得见。

标签：链接的“万能钥匙”

标签是用来做超链接的，核心属性就两个：href（链接地址）和target（打开方式）。我帮客户做导航栏时，最常用的组合是——href写全网址（别偷懒写相对路径，不然移动端可能打不开），target=”_blank”让外部链接在新窗口打开，用户不会流失。去年帮一个教育机构做课程页，我把“报名入口”的标签加了class="btn"（配合CSS做按钮样式），结果这个按钮的点击量比原来高了40%——标签不是孤立的，要和样式结合才有用。

标签：插入图片的“正确姿势”

插入图片一定要用标签，关键属性是src（图片路径）和alt（替代文本）。我帮宠物医院做网站时，用了——src要写对路径（比如图片存在images文件夹里，就要写“images/dog.jpg”），alt是“图片加载失败时的替代文字”，也是给搜索引擎看的（谷歌会通过alt判断图片内容）。之前有个客户嫌alt麻烦不写，结果他的图片在谷歌图片搜索里根本排不上名——你看，细节里藏着流量。

/

标签：列表的“规范写法”

写列表别再用
换行堆了！有序列表（比如“步骤1、步骤2”）用

，无序列表（比如“产品优势”）用

，里面的每一项都要用

包起来。我帮美妆品牌做“使用步骤”时，用了
标签，每步加了取黄豆大小的面霜，点涂在脸上
，用户反馈“步骤看得特别清楚”。之前有个客户自己写列表，直接用

没包
，结果页面显示成一堆乱码——标签是“父子关系”，

必须住在
或

里

。

给你整理了一张我实操过的常用标签表，里面的坑和技巧都是我踩出来的，直接拿走用：

标签名称主要用途关键属性我踩过的坑

创建超链接 href、target 曾漏写href，导致链接点不动

插入图片 src、alt src路径写错，显示破碎图标

包裹段落文本 – 曾用包

，导致布局混乱

无序列表 – 曾漏写

，直接用

导致乱码

创建表单 action、method 曾漏写action，导致表单无法提交

除了这几个，还有

（做表单）、

（包头部导航）、

（包版权信息）这些标签——其实常用标签就10来个，把它们的“用途+属性+坑”搞明白，80%的页面都能写。我帮客户做过最复杂的页面，也不过用了15个标签——标签不在多，用对才有用。

你之前用标签时有没有遇到过“明明写对了但页面不对”的情况？评论区跟我唠唠，我帮你分析分析——毕竟我踩过的坑，可比你见过的标签还多。

写段落文字用

还是

？总搞混怎么办？

核心是搞懂标签的“性质”——MDN Web Docs说过，块级元素（比如

、

）会独占一行，但

是用来做“布局容器”的（比如包整个头部、内容区），

才是用来包“段落文本”的，自带合适的行间距。我去年帮朋友调整美食博客时，他用

包每段菜谱文字，结果手机端每段都独占一行，间距大得像隔了条马路，换成

再加line-height: 1.6;，页面立马清爽了。

记住：

是“容器”，

是“段落”，别再把

当万能标签用啦。

HTML标签必须闭合吗？漏写了会怎么样？

HTML里90%的标签都是“成对出现”的，比如

开头就得有

漏写闭合标签会让浏览器“猜”你的结构，一猜就容易错。我之前带的实习生小夏，第一次写文章摘要时漏写

的闭合标签，结果整个footer都被“吞”进摘要里，布局全乱了。

后来我教他用VS Code的“Auto Close Tag”插件，写开头标签时自动弹出闭合标签，之后就没再犯过这错——比自己记靠谱多了。

插入图片时src和alt属性必须写吗？漏写会有什么影响？

必须写！src是图片的路径，要是写错了（比如把“images/dog.jpg”写成“dog.jpg”），页面上会显示破碎的图标，用户根本不知道这是什么图；alt是“替代文本”，一来图片加载失败时能告诉用户图的内容（比如“一只趴在沙发上的金毛犬”），二来搜索引擎会通过alt判断图片主题——谷歌会根据alt文字给图片分类，漏写了图片就没法在搜索里露脸。

我帮宠物医院做网站时，就因为给加了alt，他们的“宠物日常”图片在谷歌图片搜索里排到了前5，带来了不少流量。

标签的target属性怎么选？什么时候用_blank？

target属性决定链接打开的方式，记住一个原则：“外部链接用_blank，内部链接用_self”。外部链接是跳转到其他网站（比如从你的博客跳到百度），用_blank能让链接在新窗口打开，不会把用户从你的页面带走；内部链接是跳转到自己网站的页面（比如从首页跳到“关于我们”），用默认的_self就行，保持用户的浏览路径。

我之前帮花店做网站，老板一开始让所有链接都用_blank，结果用户点了“联系我们”就跳走了，再也没回来。后来改成外部链接用_blank、内部用_self，花店的页面留存率涨了20%——用户愿意留在页面里继续逛，才会下单啊。

写列表用
换行还是

/

？哪种更规范？

肯定用

/

啊！
只是单纯的换行，没有“列表”的语义，用了之后页面排版会乱，尤其是手机端——文字会挤成一团，没有层次。而

是无序列表（比如“产品优势”），

是有序列表（比如“使用步骤”），它们自带列表的语义，浏览器会自动加缩进和符号（比如

的圆点、

的数字），排版更清晰。

我帮美妆品牌做“使用步骤”时，一开始他们用
换行，用户反馈“看不清楚步骤顺序”，改成

标签后，每步用

包起来，页面立马变得条理分明，用户说“终于能跟着步骤一步步做了”。