DEV Community
·
让你的HTML脱颖而出：这11个你可能错过的HTML标签
💡
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
HTML是一种重要的标记语言，构建网页的基础。通过使用不同的标签（如abbr、code、kbd等），它定义了内容和结构，提升了网页的可访问性和用户体验。
🎯
关键要点
- HTML是一种重要的标记语言，是构建网页的基础。
- HTML通过不同的标签定义内容和结构，提升网页的可访问性和用户体验。
- HTML可以比作人的骨架，JavaScript是器官，CSS是外观。
- 常用的HTML标签包括H1、H2、p和div等。
- abbr标签用于显示缩写的含义，配合title属性使用。
- code标签用于传输代码块，浏览器会以等宽字体显示。
- kbd标签用于显示键盘按键，浏览器会以等宽字体显示。
- datalist和option标签用于显示推荐或选项菜单。
- dialog标签用于创建弹出窗口或模态框。
- details和summary标签用于创建原生下拉菜单。
- time标签用于包裹时间值，提升SEO效果。
- ruby、rt和rp标签用于显示汉字的注音。
- progress标签创建进度条，meter标签表示量表。
- fieldset和legend标签用于分组对象并创建容器。
❓
延伸问答
HTML中有哪些不常用的标签？
不常用的HTML标签包括abbr、code、kbd、datalist、dialog、details、summary、time、ruby、progress、meter、fieldset和legend等。
abbr标签的作用是什么？
abbr标签用于显示缩写的含义，配合title属性使用时，可以在鼠标悬停时显示完整的含义。
如何使用code标签显示代码块？
使用code标签包裹代码字符串，浏览器会以等宽字体显示该代码块。
dialog标签有什么用？
dialog标签用于创建弹出窗口或模态框，可以通过添加open属性来显示对话框。
如何创建一个下拉菜单？
使用details标签作为容器，summary标签作为可点击标题，内容放在details标签内，点击时可切换可见性。
time标签对SEO有什么影响？
time标签用于包裹时间值，帮助浏览器和搜索引擎更好地读取时间信息，从而提升SEO效果。
➡️
