前端开发学习笔记–HTML 文本元素

发布于 2018-03-27  297 次阅读


常用文本元素:

元素名称 说明
a 生成超链接
strong 表示重要,加粗字体
br 强制换行
wbr 表示安全换行
abbr 表示缩写
del 表示被删除的文字
sub 表示下标字体
sup 表示上标字体
span 通用元素,没有任何语义。一般配合 CSS 修饰
ruby 表示位于表意文字上方或右方的注音符号
rt 与 ruby 元素结合使用,标记括号
rp 与 ruby 元素结合使用,标记括号
bdo 控制文字的方向

解析:

1:<a>元素生成超链接,需使用 href 属性

例:

<a href="https://www.itwordsweb.com/">小白鼠</a>

2:<strong>表示重要的文字,实际作用和<b>一样,都是加粗,强调一段重要文本

例:

<table>
        <tr>
            <td><strong>元素名称</strong></td>
            <td><strong>说明</strong></td>
        </tr>
</table>

3:<br>强制换行,在任意文本位置使用<br>元素都会被换行,如遇英语单词等则使用<wbr>元素,根据浏览器的宽度适当的换行。

例:

hello!<br>
this<wbr>asdfghkkdfhsjfgt<wbr> is my classmate.

4:<abbr>元素表示缩写,没有实际作用;从语义上看,是一段文本的缩写

例:

<abbr>HTML</abbr>

5:<del>元素表示删除文字,实际作用和<s>一样,就是删除线,表示删除相关文字

例:

<del>HTML</del>

6:<sub>和<sup>元素表示添加上标和下标,实际作用就是数学的上标和下标,eg"5²",5 的上标 2

例:

5<sub>2</sub>

5<sup>2</sup>

7:<span>元素表示一般性文本,没有实际作用;语义上就是表示一段文本,一样辅助 css 做设置等

例:

<span>HTML</span>

8:<ruby>,<rp>,<rt>为语言元素,<ruby>用来为非西方语言提供支持。<rp>和<rt>帮助读者掌握语言文字正确发音

例:

<ruby>
饕<rp>(</rp><rt>tāo</rt><rp>)</rp>
餮<rp>(</rp><rt>tiè</rt><rp>)</rp>
</ruby>

9:<bdo>元素设置文字方向,须使用属性 dir 才可以设置,dir 有两个值:rtl(从右到左)和 ltr(从左到右,默认)

例:

<bdo dir="rtl">HTML</bdo>