文本修饰

<abbr> 定义缩写。 4 5
表示一个缩写形 在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。
<b> 定义粗体文本。 4 5
<b> 标签定义粗体的文本。<b> 标签用于强调某些文本。
<code> 定义计算机代码文本。 4 5
定义计算机代码文本。
<em> 定义强调文本。 4 5
呈现为被强调的文本。
<strong> 定义强调文本。 4 5
定义重要的文本。
<dfn> 定义定义项目。 4 5
定义一个定义项目。
<samp> 定义样本计算机代码。 4 5
定义样本文本。
<kbd> 定义键盘文本。 4 5
定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。 4 5
定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite> 定义引用。 4 5
定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。
<sub> 定义下标文本。 4 5
<sup> 定义上标文本。 4 5
<del> 定义删除文本。 4 5
<del> 标签定义文档中已删除的文本。
与 <ins> 一起使用,描述文档中的更新和修正。
属性 值 描述
cite URL 定义指向另一文档的 URL,该文档解释了文本被删除的原因。
datetime YYYY-MM-DDThh:mm:ssTZD 定义文本被删除的日期和时间。
<small> 定义小号文本。 4 5
<small> 标签将旁注 (side comments) 呈现为小型文本。
免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。
<i> 定义斜体文本。 4 5
呈现斜体的文本。
<ins> 定义插入文本。 4 5
<ins> 标签定义文档的其余部分之外的插入文本。
属性 值 描述
cite URL 指向另一个文档的 URL,该文档解释文本插入的原因。 4 5
datetime YYYYMMDD 定义文本插入的日期和时间。 4 5
<hr> 定义水平线。 4 5
水平线,它应该定义内容中的主题变化。
<address> 定义地址元素。 4 5
<address> 标签定义文档作者或拥有者的联系信息。
如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者或拥有者的联系信息。
通常的做法是将 address 元素添加到网页的头部或底部
<bdo> 定义文本显示的方向。 4 5
<bdo> 标签覆盖默认的文本方向。
属性 值 描述
dir ltr 左到右 必需。定义文本方向
rtl 右到左
<pre> 定义预格式化文本。 4 5
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<br> 插入换行符。 4 5
<br /> 标签插入简单的换行符。
<br /> 标签是一个空标签,意味着它没有结束标签。所以这样是错误的:<br></br>
<h1> to <h6> 定义标题 1 到标题 6。 4 5
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
<blockquote> 定义长的引用。 4 5
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
<q> 定义短的引用。 4 5
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
CSS 提供了多种属性来对文本进行修饰,以下为一些常见的使用方法和相关属性: ### 文本修饰线 使用 `text-decoration` 属性设置文本修饰线,可设置为 `none`(无修饰线)、`underline`(下划线)、`line-through`(删除线)、`overline`(上划线)。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本修饰线</title> <style> a { /* 无,去掉修饰线 */ text-decoration: none; } div { /* 下划线 */ text-decoration: underline; } p { text-decoration: line-through; } span { text-decoration: overline; } </style> </head> <body> <a href="#">a标签,去掉下划线</a> <div>div标签,添加下划线</div> <p>p标签,添加删除线</p> <span>span标签,添加顶划线</span> </body> </html> ``` 需要注意,并非所有字体都支持所有的装饰线样式,具体效果取决于所使用的字体和操作系统。还可通过组合使用 `text-decoration` 和其他 CSS 属性来实现更精确的文本装饰效果,如改变线条颜色、样式等 [^2][^4]。 ### 英文单词大小写 使用 `text-transform` 属性设置英文单词的大小写,可设置为 `capitalize`(首字母大写)、`uppercase`(所有字母大写)、`lowercase`(所有字母小写)。 ```html <style> #font3 { text-transform: lowercase; } </style> <body> <p class="font" id="font3">i like eat apple</p> </body> ``` 上述代码将文本中的所有字母转换为小写 [^3]。 ### 文本缩进 使用 `text-indent` 属性设置文本的缩进。 ```html <style> #font3 { text-indent: 50px; } </style> <body> <p class="font" id="font3">i like eat apple</p> </body> ``` 上述代码使文本缩进 50 像素 [^3]。 ### 行间距 使用 `line-height` 属性设置多行文本的间距,属性值可以用数字(表示当前 `font-size` 的属性值倍数),也可加上单位 `px`(像素点距离),还可以用关键字。 ```html <html> <head> <title>网页标题</title> <style> .line-height { line-height: normal; } </style> </head> <body> <p class="line-height">生活中那一缕缕阳光作文600字 ……</p> </body> </html> ``` 上述代码将段落的行间距设置为正常 [^5]。 ### 水平对齐方式 使用 `text-align` 属性设置文本相对于元素容器的水平对齐方式,可设置为 `left`(左对齐)、`right`(右对齐)、`center`(居中对齐)、`justify`(两端对齐)。 ```html <style> #font3 { text-align: right; } </style> <body> <p class="font" id="font3">i like eat apple</p> </body> ``` 上述代码使文本右对齐 [^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值