二、文本

1、页面组成元素

1.在HTML中，我们主要学习怎么制作一个静态网页，大多数静态网页都是由以下四种元素组成的

  • 文字
  • 照片
  • 超链接
  • 音频
  • 视频

2.静态网页&动态网页的区别在于网页是否与服务器/数据库有交互，有下列元素都不一定是动态页面

  • 带有音频和视频的
  • 带有flash动画的
  • 带有CSS的
  • 带有JavaScript的

特别提醒一下，即便你的网页中使用到了JavaScript，也不是动态页面，除非你用到了后端技术，别出去耍猴子说自己学会了JS就会做动态页面了，其实静态页面和动态页面是什么都还没搞清楚。

2、标题标签

标题标签有：h1~~h6,依次变小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题标签</title>
    </head>
    <body>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
    </body>
</html>

3、段落标签

段落标签为：p

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>段落标签</title>
    </head>
    <body>
        <h1>Linux是什么</h1>
        <p>Linux，全称GNU/Linux，是一种免费使用和自由传播的类UNIX操作系统，其内核由林纳斯·本纳第克特·托瓦兹于1991年10月5日首次发布，它主要受到Minix和Unix思想的启发，是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。Linux有上百种不同的发行版，如基于社区开发的debian、archlinux，和基于商业开发的Red Hat Enterprise Linux、SUSE、Oracle Linux等。
        </p>
    </body>
</html>

4、文本标签

4.0、换行标签

那么我们在html直接换行在浏览器中是无法实现换行的，如果要在html中实线换行这个操作则需要用到 br 这个换行标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- 直接换行 -->
        <h3>静夜思</h3>
        床前明月光，疑是地上霜。
        举头望明月，低头思故乡。

        <!-- 方法一 直接使用两个p标签 -->
        <h3>静夜思</h3>
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>

        <!-- 方法二 使用 br 换行标签 -->
        <h3>静夜思</h3>
        <p>
            床前明月光，疑是地上霜。<br>
            举头望明月，低头思故乡。
        </p>
    </body>
</html>

4.1、加粗标签

加粗标签有：strong、b

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        我是<b>加粗</b>文本
        我是<strong>加粗</strong>文本
    </body>
</html>

4.2、斜体标签

倾斜标签有：i、em、cite

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        我是<i>倾斜</i>文本
        
        <!-- 我们说过html 换行了 但浏览器还是认为你是在一行上面的 -->
        我是 
        <i>倾斜</i> 
        文本
    </body>
</html>

4.3、上标标签

上标标签有：sup

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
      （a+b）<sup>2</sup> = 10 <sup>2</sup>
    </body>
</html>

4.4、下标标签

下标标签有：sub

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      BaSO<sub>4</sub>
    </body>
</html>

4.5、删除线标签

删除线标签有：s

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <h3>活动促销</h3>
      <p><s>特价：99¥</s></p>
    </body>
</html>

4.6、下划线标签

下划线标签有：u

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <h3>通知：</h3>
      <p>
        关于国庆放假通知，时间 <u>10月1日到10月7日</u> 为放假时间。
      </p>
    </body>
</html>

4.7、大字号标签&小字号标签

大字号标签有：big

小字号标签有：small

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <h3>通知：</h3>
      <p>
        关于宿舍消毒清洁通知，麻烦同学们这周把宿舍中 
        <big>大大</big> <small>小小</small> 的物品带回家
      </p>
    </body>
</html>

5、水平线标签（分割线）

水平分割线是：hr

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <h3>通知：</h3>
      <hr>
      <p>
        这周我们社团开展三下乡活动，请同学们踊跃报名。
      </p>
      <hr>
      <p>学生会</p>
      <hr>
    </body>
</html>

6、div 标签

在HTML中，我们可以使用“div”标签来划分HTML的结构，从而配合CSS来控制样式，怎么控制这里先别着急，学到后面会有。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 方法一 直接使用两个p标签 -->
    <div>
        <h3>静夜思</h3>
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>
    </div>

    <!-- 方法二 使用 br 换行标签 -->
    <div>
        <h3>静夜思</h3>
        <p>
            床前明月光，疑是地上霜。<br>
            举头望明月，低头思故乡。
        </p>
    </div>
</body>

</html>


这里比如我要给方法一整体文字颜色变为粉色，方法二背景颜色变成橙色，div的作用就发挥出来了。这里噢，我们现在先不用去考虑style、class 这些写法，现在主要要考虑的是 div如何管理 划分 我们的代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .box1 {
            color: pink;
        }
        .box2 {
            background-color: orange;
        }
    </style>

</head>
<body>
    <!-- 方法一 直接使用两个p标签 -->
    <div class="box1">
        <h3>静夜思</h3>
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>
    </div>

    <!-- 方法二 使用 br 换行标签 -->
    <div class="box2">
        <h3>静夜思</h3>
        <p>
            床前明月光，疑是地上霜。<br>
            举头望明月，低头思故乡。
        </p>
    </div>
</body>

</html>

7、自闭合标签(单标签&双标签)

在前面的学习过程中，你会发现我们的代码都是一对一对的出现的，但也有自己一个标签的。例如：代码中

举几个例子 像 html、 head、div 这种一对一对的为双标签

像hr、br这种只有自己一个的这类叫作单标签

<!DOCTYPE html>
<html>
  <!-- 
    可以看到我们的代码中
    双标签里面是可以插入别打元素的
    而单标签 例如：meta、hr 里面是不能插入其他元素 
    这就是单标签和双标签的区别
 -->
<head>
    <meta charset="UTF-8">
    <title> 单标签&双标签 </title>
</head>

<body>
    <div>
        <h3>今天吃什么</h3>
        <hr>
        <p>罗非鱼，罗非鱼，罗非鱼，罗非鱼</p>
    </div>
</body>
</html>

8、块元素&行内元素

在之前的学习过程中，有些元素在浏览器效果里是“独占一行”的（其他元素不能和该元素在同一行）例如：p、div、hr等

  • 元素和标签其实就是同一个东西，叫法不同，意思相同。
  • 块元素（block）
  • 行内元素（inline）
块元素解释
h1~h6标题元素
p段落元素
divdiv元素
hr分割线
ol有序列表
ul无序列表
行内元素解释
strong、b粗体元素
em、i斜体元素
a超链接
span常用行内元素，结合定义CSS样式

通过以下代码可以知道 ：

  • 块元素可以容纳其它块元素与行内元素
  • 行内元素可以容纳其它行内元素，不可容纳其它块元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <div>
            <h3>我是三级标题</h3>
            <strong>我是加粗 行内元素</strong> 
              <span>我也是一个行内元素</span>
            <p>我是一个段落</p>
            <hr>
            <h3>我是三级标题</h3>
          <!-- 
                        通过下面代码 可知 因为strong、span都是行内元素
                        p 是块元素，行内元素内不能块元素，所以下面显示的文字给分段了
                    -->
            <strong>我是加粗 行内元素</strong> <p>我是一个段落</p><span>我也是一个行内元素</span>
        </div>
    </body>
</html>

9、特殊符号

  1. 网页中的“空格” 在网页排版中要想美观一点，通常都会添加首行缩进，也就我们说的顶格

    实线这个功能只需要 在段落中 添加  ；就可以了，注意这里说以&开头 以；结尾的

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Web</h3>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 </p>
</body>
</html>

  1. 网页中的特殊符号 易输入

    解释符号代码
    双引号(英文)："quot
    左单引号：‘lsquo
    右单引号：’rsquo
    乘号：×times
    除号：÷divide
    大于号：>gt
    小于号：<lt
    “与”符号：&amp
    长破折号：—mdash
    竖线：\ #124

  1. 网页中的特殊符号 难输入

    解释符号代码
    分节符：§sect
    版权符：©vopy
    注册商标：®reg
    商标：™trade
    欧元：€euro
    英镑：£pound
    人民币：¥yen
    度°deg
最后修改：2024 年 01 月 24 日
© 允许规范转载
咱们谁跟谁，用不着～