看了 winter 老师的关于html 语义标签的讲解,觉得很受启发,在最近的开发过程中确实觉得div和span不是很够用。
在进入前端的一年多时间里,我属于四个标签走天下的人,平时就 div,span,p,ul...是在不够用的时候就拉出来个 i 标签,不过还要去斜体,很是麻烦。
今天看了这篇文章,才发现原来还有这么多语义标签能用,但是如果都用了又觉得麻烦,所以将我喜欢由实用的几个摘抄下来做个笔记。
- ruby 展示东亚文字注音或字符注释,如:
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
- rp 用于为那些不能使用 元素展示 ruby 注解的浏览器,提供随后的圆括号。
- rt 包含字符的发音,字符在 ruby 注解中出现,它用于描述东亚字符的发音。这个元素始终在 元素中使用。
- strong 加粗
- section 表示一个包含在HTML文档中的独立部分
- article 独立的自包含内容
- header
- footer
- nav
- aside 表现为侧边栏或者标注框(call-out boxes),和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
- i 表示带有不同语义的文本
- em 表示强调或重读。
- strong 表示重要性。
- mark 表示相关性。
- cite 标记著作名,如一本书、剧本或是一首歌。
- dfn 标记术语的定义实例
- iframe 将另一个HTML页面嵌入到当前页面中,如:
<iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src="https://juejin.im/timeline">
</iframe>
参考链接:
HTML语义- winter
MDN - HTML