Html5之基础-4 HTML文本

╰+攻爆jí腚メ 2022-10-02 13:51 142阅读 0赞

一、HTML 文本标记概述

文本标记的作用

（1）文本是网页上的重要组成部分

（2）直接书写的文本会用浏览器默认的样式显示

（3）包含在标记中的文本则会被显示为标记所拥有的样式

\- 特殊字符

\- 注释

\- 标题元素

\- 段落元素

\- 换行元素

\- 分区元素

\- ...

文本与特殊字符

（1）空格折叠

\- 多个空格或制表符压缩成单个空格，即只显示一个空格

（2）特殊字符（如空格），需要进行转义（使用字符实体）

<!DOCTYPE html>
    <body>
        The <p> element.    © 2016 by Jason.
    </body>
    </html>

显示结果:

[![wKioL1bpHyLiaFCoAAATCEifwqs813.png][]][wKioL1bpHyLiaFCoAAATCEifwqs813.png]

二、使用文本标记

文本样式

（1）文本样式的作用是对文本进行修饰，如加粗、倾斜等

\- <b>...</b>:加粗

\- <b>...</b>:倾斜

\- <b>...</b>:下划线

\- <b>...</b>:删除线

\- <b>...</b>:上标

\- <b>...</b>:下标

[![wKioL1bpH9yiCQ4RAADznAmLL18459.png][]][wKioL1bpH9yiCQ4RAADznAmLL18459.png]

标题元素<hn>

（1）标题元素让文字以醒目的方式显示，往往用于文章的标题

（2）基本语法:<h\#>...</h\#>

\- \# = 1,2,3,4,5,6

\- 从 <h1> 到 <h6>,即 标题1-标题6

[![wKioL1bpIHjQV2hVAAESrsLc5Bs169.png][]][wKioL1bpIHjQV2hVAAESrsLc5Bs169.png]

段落元素<p>

（1）<p> 元素提供了结构化文本的一种方式

（2）<p> 元素中的文本会用单独的段落显示

\- 与前后的文本都换行分开

\- 添加一段额外的垂直空白距离，作为段落间距

\- 常用属性：align

[![wKiom1bpIMiC8jxKAAEFci\_U85o981.png][wKiom1bpIMiC8jxKAAEFci_U85o981.png]][wKiom1bpIMiC8jxKAAEFci_U85o981.png]

换行元素<br>

（1）使用<br>元素在任何地方创建收手工换行

\- 空标记

[![wKiom1bpIQfjiZ2GAAEniouLjjA441.png][]][wKiom1bpIQfjiZ2GAAEniouLjjA441.png]

分区元素<span>和<div>

（1）分区元素用于为元素分组，常用于页面布局

（2）块分区元素:<div></div>

（3）行内分区元素:<span></span>

\- 设置同一行文字内的不同格式

[![wKiom1bpIaGDOsXsAAFOpRfrqio513.png][]][wKiom1bpIaGDOsXsAAFOpRfrqio513.png]

行内元素与块级元素

（1）块级元素

\- 默认情况下，块级元素会独占一行，即元素前后都会自动换行

\- 如: <p>、<div>、<hn>

（2）行内元素

\- 不会换行，可以和其他行内元素位于同一行

\- 如: <span>、<b>、<i>、<u>

分割线元素<hr>

（1）<hr> 元素用于在页面上创建一条水平线

\- 空标记

\- 常用于将页面的不同部分隔开

\- <hr>后面的文本将出现在新段落中

（2）常用属性

\- size、width、align、color

[![wKioL1bpIzbzmG1XAADaexxILU8310.png][]][wKioL1bpIzbzmG1XAADaexxILU8310.png]

预格式化<pre>

（1）保留源文档中的格式，即保留原来的换行和文本中的空白

[![wKiom1bpIv2S1uFwAAEJEp0hXus848.png][]][wKiom1bpIv2S1uFwAAEJEp0hXus848.png]

总结：本章内容主要介绍了HTML文本标记。

转载于:https://blog.51cto.com/jasonteach/1751811

[wKioL1bpHyLiaFCoAAATCEifwqs813.png]: /images/20220112/fdf4791bcb8a4671854a276475feba9a.png
[wKioL1bpH9yiCQ4RAADznAmLL18459.png]: https://s1.51cto.com/wyfs02/M00/7D/77/wKioL1bpH9yiCQ4RAADznAmLL18459.png
[wKioL1bpIHjQV2hVAAESrsLc5Bs169.png]: https://s1.51cto.com/wyfs02/M02/7D/78/wKioL1bpIHjQV2hVAAESrsLc5Bs169.png
[wKiom1bpIMiC8jxKAAEFci_U85o981.png]: /images/20220112/b101f7159d8b4569a529b7573d6cf349.png
[wKiom1bpIQfjiZ2GAAEniouLjjA441.png]: https://s1.51cto.com/wyfs02/M00/7D/7A/wKiom1bpIQfjiZ2GAAEniouLjjA441.png
[wKiom1bpIaGDOsXsAAFOpRfrqio513.png]: /images/20220112/26577d1e1c10477fb15a792f5279779c.png
[wKioL1bpIzbzmG1XAADaexxILU8310.png]: /images/20220112/55b0633fca0b4f80bd8fb24690a4c709.png
[wKiom1bpIv2S1uFwAAEJEp0hXus848.png]: /images/20220112/bdffeaf4b9784bcba0f1922253b19adf.png