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

文章目录▼CloseOpen

• 新手最常踩的标签坑，我帮你把雷全排了
• 10个必学常用标签，附我实操过的真实案例
  • 写段落文字用还是？总搞混怎么办？核心是搞懂标签的“性质”——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%——用户愿意留在页面里继续逛，才会下单啊。写列表用换行还是/？哪种更规范？肯定用/啊！只是单纯的换行，没有“列表”的语义，用了之后页面排版会乱，尤其是手机端——文字会挤成一团，没有层次。而是无序列表（比如“产品优势”），是有序列表（比如“使用步骤”），它们自带列表的语义，浏览器会自动加缩进和符号（比如的圆点、的数字），排版更清晰。我帮美妆品牌做“使用步骤”时，一开始他们用换行，用户反馈“看不清楚步骤顺序”，改成标签后，每步用包起来，页面立马变得条理分明，用户说“终于能跟着步骤一步步做了”。
  • HTML标签必须闭合吗？漏写了会怎么样？
  • 插入图片时src和alt属性必须写吗？漏写会有什么影响？
  • 标签的target属性怎么选？什么时候用_blank？
  • 写列表用换行还是/？哪种更规范？

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

、链接，到布局必用的

、列表
/
，再到多媒体的、