第02章 HTML基本标签_插入的描述性文本-CSDN博客

本文链接：https://blog.csdn.net/m0_72647241/article/details/127910602

                              HTML基本标签

目录标题

2.1HTML文档头部<head>
2.2网页标题<title>
2.3元信息<meta>
2.4HTML注释 !-- --
2.5HTML标题 h1~h6
2.6HTML段落 p
2.7换行 br
2.8水平线 hr
2.9文本格式化
2.10HTML字符实体
- 2.10.1不间断的空格
- 2.10.2插入特殊符号
2.11练习题

2.1HTML文档头部

head标签：用于定义文档的头部，它是所有头部标签的容器。可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等。
文档的头部：描述了文档的各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系等。

2.2网页标题

title标签:用于显示文档的名字，通常出现在浏览器窗口的标题栏或状态栏中。title标签是head标签中唯一要求包含的东西。

例子1

<!DOCTYPE html>
<html>
  <head>
       <meta charset="UTF-8">
       <title>诗词网站</title>
  </head>
  <body>

  </body>
<html>

2.3元信息

meta标签:提供的信息不显示在网页中，一般用来定义网页信息的说明，关键字，刷新频率等。在HTML中，meta标签不需要设置结束标签，在一个尖括号内就是一个meta内容。在一个HTML网页中可以有多个meta标签。

属性	值	描述
content	some_text	定义与http-equiv或name属性相关的元信息
charset	character_set	HTML5新属性：定义文档的字符编码
http-equiv	content-type expires refresh set-cookie	把content属性关联到HTTP头部
name	author description keywords generator revised others	把content属性关联到一个名称
scheme	some_text	（HTML5不支持）定义用于翻译content属性值的格式

2.3.1设置网页关键字

  在搜索引擎中，检索信息都是通过**输入关键字**来实现的。**设置关键字**是最基本也是最重要的一步，是进行网页优化的**基础**。关键字在浏览时是看不到的，它是针对搜索引擎的信息。当用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。

（1）语法：meta name=“keywords” content=“输入具体的关键字” 前后有<>.
（2）说明：在该语法中，name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义具体的关键字。
当网站的网页关键字为"诗词"时，代码如下：
meta name=“keyword” content=“诗词”,前后有<>。

选择关键字的技巧与原则
（1）要选择与网站或网页主题相关的文字作为关键字。
（2）选择具体的词语，避免使用过于行业或笼统的词语。
（3）揣摩用户会用什么作为搜索词，把这些词放在网页上或直接作为关键字。
（4）关键字可以不止一个，最好根据不同的网页，设置不同的关键字组合，这样网页被搜索到的概率将大大增大。

2.3.2设置网页说明

设置网页说明也是为了便于搜索引擎的查找，它用来详细说明网页的内容，网页说明不在网页中显示出来。

（1）语法：
meta name=“description” content=“设置网页说明”，前后有<>.
（2）说明：
在该语法中，name为属性名称，这里设置为description,也就是将元信息属性设置为网页说明，在content中定义具体的描述语言。
当网站的网页说明为"这是一个内容为诗词的网页"时，代码如下:
meta name=“description” content=“这是一个内容为诗词的网页”,前后有<>.

2.3.3添加作者信息

在meta中还可以添加网页制作者的姓名。

（1）语法 ：
meta name=“author” content=“作者的姓名”,前后有<>.
（2）说明：在该语法中，name为属性名称，这里设置为author，也就是设置作者信息，在content中定义具体的信息.
当网站的作者是李白时，代码如下:
meta name=“author” content=“李白”,前后有<>.

2.3.4规定字符编码

charset属性规定HTML文档的字符编码，它是HTML5中的新属性，且替换了meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”,前后有<>.

（1）语法：
meta charset=“HTML文档的字符编码”，前后有<>.
（2）说明：
从理论上讲，可以使用任何字符编码，但并不是所有的浏览器都能理解它们。使用的字符编码越广泛，浏览器理解它的可能性就越大。当网站的编码方式为"UTF-8"时，其可以支持多种语言，代码如下：
meta charset=“UTF-8”,前后有<>.

2.3.5设置网页的定时跳转

（1）使用meta标签可以使网页在经过一定时间后自动刷新，这可以通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。
（2）在浏览网页时经常会看到一些欢迎信息的页面，在经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。

（3）语法：
meta http-equiv=“refresh” content=“跳转的时间；ur1=跳转到的地址”，前后有<>.
（4）说明：
在该语法中，refresh表示网页的刷新，在content中设置刷新的时间和刷新后的链接地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间以秒（s）为单位。

例子2-1
在进入网页后显示欢迎页面，5s后自动跳转到网页的内容区

<!DOCTYPE html>
<html>
  <head>
       <meta charset="UTF-8">
       <meta http-equiv="refresh" content="5;ur1=target/index.html">
       <title>网页的定时跳转</title>
    </head>
    <body>
    <h1>欢迎来到这个页面，5s后将自动跳转到其他页面</h1>
  </body>
</html>

2.4HTML注释 !-- –

（1）HTML注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。HTML注释只出现在代码中，在浏览器的页面中并不显示。
（2）语法：!–注释的内容–

例子2-2
在页面中插入注释，注释内容并不显示在网页上

<!DOCTYPE>
<html>
    <head>
      <!--在meta标签中设置网页的自动跳转-->
      <meta http-equiv="refresh" content="10;ur1=page1.html1">
      <title>网页的定时跳跃</title>
      </head>
      <body>
        <h1>欢迎来到这个页面，10s后将自动跳转到其他页面</h1>
    </body>
</html>

2.5HTML标题 h1~h6

（1）HTML文档中包含有各种级别的标题，由h1~h6标签来定义。h1-h6标签中的字母h是headline的简称。作为标题，它们的重要性是有区别的，其中h1标题的重要性最高，h6的最低。
（2）语法：h1 1级标题 /h1
h2 2级标题 /h2
h3 3级标题 /h3
h4 4级标题 /h4
h5 5级标题 /h5
h6 6级标题 /h6
（3）说明：
在该语法中，有6个级别的标题，h1是一级标题，使用最大的字号表示，h6是6级标题，使用最小的字号表示。

例子2-3
在网页中依次使用h1~h6标题标签，在浏览器中显示出来。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>标题</title>
  </head>
  <body>
      <h1>1级标题</h1>
      <h2>2级标题</h2>
      <h3>3级标题</h3>
      <h4>4级标题</h4>
      <h5>5级标题</h5>
      <h6>6级标题</h6>
  </body>
</html>

2.6HTML段落 p

（1）在网页中如果要把文字有条理地显示出来，离不开段落标签的使用。在HTML中可以通过标签实现段落的效果。p是HTML文档中最常见的标签，用来标记一个段落的开始。
（2）语法：
p 段落标签 /p
（3）说明：
p标签显示在浏览器中时，会自动在生成的元素前后创建一些空白，浏览器会自动添加这些空白。

例子2-4
在网页中创建一个段落，在浏览器中显示出来。

<!DOCTYPE html>
<html lang="zh">
   <head>
       <meta charset="UTF-8">
       <title>标签</title>
   </head>
   <body>
          <p>建筑艺术是一种立体艺术形式，是通过建筑群体组织，建筑物的形体，平面布置，立面形式，内外空间组织，结构造型（即建筑的构图，比例，尺度，色彩，质感和空间感）以及建筑的装饰，绘画，雕刻，花纹，庭园，家具陈设等多方面的考虑和处理所形成的一种综合性艺术。</p>
          <p>建筑是技术和艺术相结合的产物。意大利现代著名建筑师奈维认为，建筑是一个技术与艺术的综合体。美国现代著名建筑师赖特认为，建筑是用结构来表达思想的科学性的艺术。优秀的建筑不仅要建筑师去设计，还要由能工巧匠将它建筑出来。</p>
          </body>
</html>

2.7换行 br

（1）换行标签 br的作用是在不另起一段的情况下将当前文本强制换行。
（2）语法：
br
（3）说明：
一个br标签代表一个换行，连续的多个标签可以实现多次换行。

例子2-5
在标签的内部使用换行符实现换行效果

<!DOCTYPE html>
<html lang="zh">
      <head>
           <meta charset="UTF-8">
           <title>静夜思</title>
      </head>
      <body>
          <h2>静夜思</h2>
          <p>李白</p>
          <p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p>
      </body>
</html>

2.8水平线 hr

（1）在网页中常常看到一些水平线将段落与段落之间隔开，这些水平线可以通过插入图像实现，也可以更简单地通过标签来完成。
（2）hr标签可以在HTML页面中创建一条水平线，在视角上将文档分隔成各个部分。
（3）语法：
hr

例子2-6
在古诗的题目下方通过hr标签插入一条水平线，使题目和内容区分开来，在浏览器中显示。

<!DOCTYPE html>
<html lang="zh">
      <head>
          <meta charset="UTF-8">
          <title>静夜思</title>
      </head>
      <body>
           <h2>静夜思</h2>
           <hr>
           <p>李白</p>
           <p>窗前明月光，<br>疑是地上霜。<br>举头望明月，</br>低头思故乡。</p>
     </body>
</html>

2.9文本格式化

（1）HTML中包含许多定义文本格式的标签，比如粗体和斜体字。格式化文本的效果现在已经被CSS样式所取代，只要简单了解即可。

标签	描述
b	定义粗体文本
big	定义大号字
em	定义着重文字
i	定义斜体字
small	定义小号字
strong	定义加重语气
sub	定义下标字
sup	定义上标字
ins	定义插入字
del	定义删除字

说明：
部分标签已经被淘汰了，不赞成使用。

例子2-7
文本格式化标签在浏览器中的显示效果。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
    </head>
    <body>
         <b>This text is bold</b>
         <br>
         <strong>This text is strong</strong>
         <br>
         <big>This text is big</big>
         <br>
         <em>This text is emphasized</em>
         <br>
         <i>This text is italic</i>
         <br>
         <small>This text is small</small>
         <br>
         文本
         <sub>下标</sub>
         <br>
         文本
         <sup>上标</sup>
     </body>
</html>

2.10HTML字符实体

在HTML中，一些字符是预留的，比如说小于号“<”和大于号“>”在网页中被识别为HTML标签。想要正确地显示预留字符，就需要使用该字符对应的字符实体。

2.10.1不间断的空格

不管在HTML文档中输入多少空格，浏览器只会显示一个空格。当网页需要连续空格的时候，需要在文档中连续地插入空格对应的字符实体。
语法：
&nbsp
说明：
在网页中可以有多个空格，&nbsp 代表一个半角空格，多个空格则可以多次使用这一符号。

例子2-8
在《静夜思》的最后一句前面插入4个&nbsp，在浏览器中显示。

<!DOCTYPE html>
<html lang="zh">
      <head>
          <meta charset="UTF-8">
          <title>静夜思</title>
      </head>
      <body>
          <h2>静夜思</h2>
          <p>窗前明月光，疑是地上霜。</p>
          <p>举头望明月，&nbsp;&nbsp;&nbsp;&nbsp;低头思故乡。</p>
      </body>
   </html>

2.10.2插入特殊符号

常见字符实体

显示结果	描述	实体名称
	空格	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
“	引号	&quot
‘	单引号	&apos
*	乘号	&times
/	除号	&divide

2.11练习题

1.填空题

（1）一个完整的HTML文档必须包含3个部分：第一部分是由**!DOCTYPE html标签定义的文档版本信息**，第二部分是由head标签定义的各项声明的文档头部，第三部分是由body标签定义的文档主体部分。
（2）使用meta标签可以使网页在经过一定时间后自动刷新。自动刷新可以通过将http-equiv属性值设置为refresh来实现。
（3）br标签在HTML中的含义是换行，HTML文档中用来插入水平线的标签是hr。
（4）当网页需要连续空格的时候，需要在文档中连续地插入空格对应的字符实体**&nbsp**。

2.简答题

请写出HTML文档的基本结构。

<!DOCTYPE html>
<html>
   <head>
    <meta charset="UTF-8">
    <title></title>
   </head>
   <body>
   </body>
</html>

3.编程题
请完成如图所示的网页。

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>静夜思</title>
    </head>
    <body>
    <h2>孟浩然</h2>
    <p>孟浩然（689-740年），字浩然，号孟山人，襄州襄阳（今湖北襄阳）人，唐代著名的山水田园派诗人，世称"孟襄阳"。因他未曾入仕，又称为"孟山人"。</p>
    <hr>
    <p>春晓</p>
    <p>春眠不觉晓，</p>
    <p>处处闻啼鸟。</p>
    <p>夜来风雨声，</p>
    <p>花落知多少。</p>
    </body>
</html>