Web前端技术开发学习笔记(HTML标记语言篇)——第4章文字与段落标记

本文链接：https://blog.csdn.net/chanciecarney/article/details/115375074

第4章文字与段落标记

第4章文字与段落标记

第4章文字与段落标记

4.1文字标记

文字标记主要用于设置网页中的所有有关文字方面的内容，具体包括普通文字、特殊文字、标题字、字体及文字格式等方面的标记。常用的文字标记如下表：

标记	描述
文字内容	包括普通文字、空格及特殊符号等
标题字标记	以某几种固定的字号显示的文字，共分为6个级别（H1～H6），对应着6种字号
文字的修饰标记	通过这些修饰标记，可以设定文字的不同格式，如粗体、斜体等
字体标记	设定文字的字体、字号、颜色等

4.1.1 文字内容的输入

根据文字输入方式的不同及是否显示在页面中，我们将网页文字分成以下几类：普通文字、空格、特殊文字和注释语句。

1.普通文字的输入

普通文字包括英文、汉字等字符，这些字符可以直接通过键盘输入或从其他地方拷贝过来放在< body>< /body>标记对之间的指定位置。这一点从前面几次笔记之中的例子中也可以看出来。

2.空格的输入

通常情况下，在我们制作网页时，通过空格键输入的多个空格，在浏览器浏览时将只保留一个空格，其余的空格都被自动省去截掉。为了在网页中增加空格，可以在网页源代码中使用空格对应的一个字符代码。
基本语法

&nbsp;

语法说明
一个& nbsp;表示一个半角空格，需要多个空格时需要连续输入多个“& nbsp;”。在“& nbsp;”中，nbsp表示空格对应的实体名称，而“&”和“;”则是用于表示引用字符实体的前缀和后缀符号。

3.特殊文字的输入

有些字符在HTML里有特殊的含义，比如小于号<就表示HTML标记的开始；另外还有一些字符无法通过键盘输入。这些字符对于网页来说都属于特殊字符。要在网页中显示这些特殊字符，可以使用与输入空格同样的形式，即使用它们对应的字符实体。
基本语法

&实体名称;

语法说明
使用时用特殊字符对应的实体名称。
常用的特殊字符与对应的字符实体名称如下表：

特殊符号	字符实体
“	& quit;
&	& amp;
<	& lt;
>	& gt;
·	& middot;
×	& times;
§	& sec;
¢	& cent;
¥	& yen;
£	& pound;
©	& copy;
®	& reg;
™	& trade;

4.注释语句

为了提高代码的维护性和可读性，常常在源代码中添加注释语句，用于对代码进行说明。浏览器解析页面时会忽略注释，因而注释语句不会显示在浏览器中，但查看源代码时可以看到。
基本语法

<!—-    注释内容     —->

语法说明
注释内容可以是多条语句。

eg.

<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>文字内容标记示例</title>
    </head>
    
    <body>
        <!--普通文字直接在光标处输入即可-->
        对于页面中的普通文字直接在主体标记对之间输入即可。
        <!--使用一个&nbsp;输入一个半角空格 -->
        <p>&nbsp;&nbsp;&nbsp;&nbsp;这一行句首缩进了4个空格。</p>
        <!--特殊字符使用对应的字符实体输入。 -->
        <p>这是一本有关于&quot;HTML&quot;标记的书籍，其中介绍了&lt;body&gt;,&lt;form&gt;等标记.     &reg;</p>
    </body>
</html>

运行结果如下图：
在这里插入图片描述

4.1.2 对文字字体的设置

默认情况下，中文网页中的文字是以黑色、宋体、3号字的效果来显示的，如果希望获得文字的其他表现效果，则可以使用字体标记及其相应属性来达到。

基本语法

<font face=“字体名称” size=“字号” color=“颜色值”>文字内容</font>

语法说明
标记的各个属性描述如下表：

属性	描述
face	设置字体，中文文字的默认字体为宋体
size	设置字号，取值范围为从1到7，或者从+1到+7、从-1到-7（正负取值相对于页面默认字号），超出取值范围的，与取值范围最近的值效果相同。默认字号为3号字
color	设置文字颜色，默认颜色为黑色

face属性可同时设置多个字体（字体族），不同字体之间用逗号分开，如face=“宋体，隶书，黑体”。使用字体族时，浏览器解析页面时会首先使用第一个字体去显示文字，如果计算机中没有第一个字体，则使用第二个字体显示，依次类推，如果所有字体都不存在，则显示为默认的字体。颜色值可以使用十六进制RGB形式或颜色的英文名。

<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>字体标记示例</title>
    </head>
    <body>
        <h2>
        <font face="隶书，宋体，黑体" color="#ffcc00">
        使用字体族设置文字，并将文字颜色设置成#ffcc00
        </font>
        </h2>
        <font size="1">今天</font>
        <font size="2">十分</font>
        <font size="3">开心</font>
        <font size="4">！</font>
        <font size="5">明天</font>
        <font size="6">也要</font>
        <font size="7">保持</font>
        <font size="+1">！</font>
        <font size="-1">小陈</font>
        <font size="8">加油！</font>
    </body>
</html>

运行结果如图所示：
因为是拿平板写的代码，然后环境里没有隶书的字体，所以应该是都默认黑体了
在这里插入图片描述

4.1.3 使用文字的修饰标记设置文字格式

使用修饰标记，可设置文字的格式，例如粗体、斜体、下划线等等。文字不同的格式需要用不同的修饰标记。
常用的修饰标记如下表：

标记	描述
< b>…< /b>、< strong>…< /strong>	设置粗体格式
< i>…< /i >、< cite>…< /cite>、< em>…< /em>、< var>…< /var>	设置斜体格式
< sup>…< /sup>	设置上标
< sub>…< /sub>	设置下标
< big>…< /big>	设置为大号字体
< small>…< /small>	设置为小号字体
< u>…< /u>	设置下划线
< s>…< /s>、< strike>…< /strike>	设置删除线

语法：直接将需要设置格式的文字内容放在修饰标记之间即可。

eg.(放个鸡汤哈哈哈）


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>修饰标记设置文字格式</title>
    </head>
    <body>
        <p>没关系的 大家都会做错选择 会莫名其妙掉眼泪 走在路上会突然崩溃 但这并不影响我们<strong>去看看晚霞</strong> <b>再次爱上这个世界</b></p>
         <p>没关系的 大家都会做错选择 会莫名其妙掉眼泪 走在路上会突然崩溃 但这并不影响我们<i>去看看晚霞</i> <cite><em>再次爱上这个世界</em></cite></p>
          <p>没关系的 大家都会做错选择 会莫名其妙掉眼泪 走在路上会突然崩溃 但这并不影响我们去看看<big>晚霞 </big>再次爱上这个世界</p>
           <p>没关系的 大家都会做错选择 会莫名其妙掉眼泪 走在路上会突然崩溃 <u>但这并不影响我们去看看晚霞 再次爱上这个世界</u></p>
            <p>没关系的 <s>大家都会做错选择</s> <strike>会莫名其妙掉眼泪 走在路上会突然崩溃</strike> 但这并不影响我们去看看晚霞 再次爱上这个世界</p>

    </body>
</html>

在这里插入图片描述

4.1.4 标题字设置

标题字就是以某几种固定的字号去显示文字，一般用于强调段落要表现的内容或作为文章的标题，具有加粗显示并与下文产生一空行的间隔特性。
根据字号的大小分为六级，分别用标记h1～h6表示，字号的大小随数字增大而递减。
基本语法

<hn>标题字< /hn>

语法说明
hn中的n表示标题字级别，取值1～6.

默认情况下，标题字居左对齐，如果要改变标题字的对齐方式，可以使用标题字的属性align进行设置。
基本语法

<hn align=“对齐方式”>标题字</hn>

语法说明
hn中的n表示标题字的级别。对齐方式可分别取left、center、right三种值。

属性值	描述
left	居左对齐
center	居中对齐
right	居右对齐

eg.


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>设置标题字及其对齐方式</title>
    </head>
    
    <body>
       <h1>一级标题</h1>
       <h2>二级标题</h2>
       <h3>三级标题</h3>
       <h4 align="center">四级标题</h4>
       <h5 align="left">五级标题</h5>
       <h6 align="right">六级标题</h6>    
    </body>
</html>

在这里插入图片描述

4.2 段落标记

在HTML中，创建段落的标记是
基本语法

<p >段落内容</p>
<p >段落内容

语法说明
从开始创建一个段落。在HTML中既可以使用单标记，也可以使用双标记，但在XHTML中只能使用双标记。
单标记和双标记的不同点是:单标记创建的段落会跟上文产生一空行的间隔；而双标记创建的段落则与上下文同时有一空行的间隔。

与标题字一样，段落标记也具有对齐属性，可以设置段落相对于浏览器窗口在水平方向上的居左、居中和居右对齐方式。段落的对齐方式设置同样使用属性align进行设置。
基本语法

<p align=“对齐方式”>段落内容</p>
<p align=“对齐方式”>段落内容

语法说明
对齐方式可分别取left、center和right3种值，含义如表4-6所示。默认情况下段落居左对齐，当段落是左对齐时对齐方式可以省略不设置。

eg.创建并设置段落


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>创建并设置段落</title>
    </head>
    
    <body>
        这是第一行文本，没有使用任何标记进行设置
        <p>这是第二行文本，使用了p双标记</p>
        这是第三行文本，没有使用任何标记
        <p align=center>这是第四行文本，使用了p单标记，居中对齐
        <p align=right>这是第五行文本，使用了p单标记，居右对齐
        这是第六行文本，没有使用p标记
    </body>
</html>

在这里插入图片描述

4.2.2 换行标记

段落之间是隔行换行的，文字的行间距比较大，当希望换行后文字比较紧凑显示时，可以使用标记 来实现换行。 是一个单标记，在XHTML中直接在 中加一个反斜线表示结束。
基本语法

<br/>

语法说明
一个换行使用一个 ，多个换行可以连续使用多个 ，连续使用 等效一个单标记。
eg.换行设置


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>换行设置</title>
    </head>
    
    <body>
        一本好书并非一定要帮助你出人头地,</br>
        而是应能教会你了解这个世界及你自己。
        <p>一本好书并非一定要帮你出人头地,</p>而是应能教会你了解这个世界及你自己。
    </body>
</html>

在这里插入图片描述

4.2.3 预格式化标记< pre>

浏览器不能解析源代码中的enter键，对连续使用的空格键也只可以当作是一个半角空格。如果希望保留在源代码中使用enter、空格等键产生的各种格式，可以使用预格式化标记< pre>。
所谓预格式化，指的是某些格式可以在源代码预先设置，这些预先设置好的格式在浏览器解析源代码时被保留下来，即源代码执行后的效果与源代码预先设置的效果几乎完全一致。
基本语法

<pre>...</pre>

语法说明
将需要预先设置格式的文字放在< pre>< /pre>之间即可。

eg.预格式化设置


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>预格式化标记示例</title>
    </head>
    
    <body>
        <pre>
        <h3>               再别康桥</h3>
                轻轻的我走了，
                正如我轻轻地来；
                            ......
        </pre>
    </body>
</html>

从运行结果中可以看出，代码中的回车换行和空格都得到了保留。
在这里插入图片描述

4.2.4 居中标记< center>

对段落的居中对齐设置，除了可以使用属性align之外，也可以使用专门的居中标记< center>< /center>来设置。
< center>标记可以设置对象相对于浏览器窗口在水平方向上的居中对齐。
基本语法

<center>...</center>

语法说明
使< center>< /center>标记对之间的对象在浏览器窗口的水平方向上居中对齐。

eg.使用center标记设置居中


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>居中标记示例</title>
    </head>
    
    <body text="red">
        <center>
        <h1>Nothing to Something</h1>
        </center>
    </body>
</html>

在这里插入图片描述

4.2.5 缩进标记< blockquot>

当希望一段文字在段首产生一定位置的缩进时，可以使用缩进标记< blockquote>。使用多次< blockquote>标记对可以实现多次缩进。
基本语法

<blockquote>...</blockquote>

语法说明
在< blockquote>< /blockquote>标记对之间的段落将产生一次缩进。

eg.设置段落缩进


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>设置段落缩进</title>
    </head>
    
    <body>
        Nothing to Something
        <blockquote>
        Nothing to Something
        </blockquote>
        <blockquote><blockquote>
        Nothing to Some
        </blockquote></blockquote>
    </body>
</html>

在这里插入图片描述

4.3水平线标记< hr>

有时为了使一篇文章的结构更加清晰，在网页制作时，常常使用水平线对段落进行分隔。创建水平线的标记是< hr>.< hr>是单标记，在XHTML中使用反斜线表示标记的结束。
基本语法

<hr />

语法说明
在标记位置插入一条水平线。默认情况下，< hr>标记产生的是一条占满整个窗口的带阴影的空心立体效果的水平线。如果希望改变水平线的表现效果，可以使用它的属性来实现。

属性值	描述
width	设置水平线宽度，单位为像素或浏览器窗口宽度的百分比
size	水平线高度，单位为像素
align	水平线相对于浏览器窗口的水平对齐方式，可取left、center、right3个值，默认居中对齐
noshade	将水平线设置为实心的不带阴影的效果
color	设置水平线颜色，显示颜色时，水平线将显示为实心效果，默认为空心灰色

eg.水平线综合设置


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>水平线综合设置示例</title>
    </head>
    
    <body>
        <h2>个人信息</h2>
        <hr/>
        <p><b>教育经历</b><br />
        2019.9---2023.6. ECUT <br />
        <hr size="6">
        <b>兴趣爱好</b><br/>
        唱歌跳舞<br/>
        看书散步<br/>
        <hr width="80%" size="6" align="right" noshade>
        <b>外语能力：</b><br/>
        英语四级，读写能力较强，能熟练查阅外文资料。
        <hr width="490" size="3" color="red" align="left">
        <b>联系方式：</b><br/>
        TEL:666666
    </body>
</html>