首页 > 其他分享 >HTML文本处理

HTML文本处理

时间:2024-11-07 18:16:45浏览次数:3  
标签:标题 元素 列表 文本处理 HTML 文本 我们

在HTML中,文本是HTML中最基本的内容之一,为此HTML提供了诸多元素让本文更加清晰有条理,并且拥有更多的功能。

1.HTML文档的头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    
</body>
</html>

在上一篇文章提到过,我们的一个HTML标准文档如上。

在HTML文档的头部(<head>元素)中,除了一些基本的元素外,还有更多为文本添加功能的元素。

比如,上述中的<title>元素,用于定义当前文档的标题,告诉用户你的这个页面的主要标题以及作用,这个元素内的文本通常会显示在浏览器窗口的标题栏或者标签页上面。

现在如果你在<title>元素中输出“Hello !”,像这样:

<title>Hello!</title>

当你回到浏览器,进行刷新时,你会发现你这个页面的标签处就变成了“Hello !”

2.HTML的文本排版

我们写的每一个页面,就像一张张报纸一样,分为了不同的区块,有者各自的标题、内容、图片等等,但如果我们再写页面的时候只是将大段的文字插入进去,整个页面会看上去非常糟糕!


这只是一小段文字,当更多的文字被输入进去,我们就没有去阅读这个页面的欲望,所以为了让这些文本变得更加清晰易读,我们会列举几个简单的元素

(1)<p>:p元素可以插入一些文本段落,可以用于文章的主要内容。

(2)<h1>-<h6>:这些标签可以用于给文本添加标题而<h1>就是一级标题,也就是做高级别的主标题,<h2>则是二级标题,剩下的以此类推即可。

 <h1>
        我是一级标题
        <h2>
            我是二级标题
            <h3>
                我是三级标题
            </h3>
        </h2>
    </h1>

这样我们就能得到下面的效果:

标题元素虽然一直到六级,但是一个页面的标题在2~3级即可,过多会使得文本让人看得眼花缭乱。

(3)<span>:这个标签虽然没有特殊的语义,但是他可以通过CSS对内部的内容进行样式化。

我们可以通过CSS调整内部的文本字体大小,颜色的变化,也可以起到标题的效果。

<span style="
            font-size: 50px;
            color: aqua;
   ">
    我是一句话。
   </span>
   <!-- 对比一下普通的span元素 -->
    <span>
        我是一句话。
    </span>

我们在浏览器的页面上很容易就可以看到更改后的<span>元素的变化

(4)列表:列表又分为有序列表和无序列表,在这里我们会介绍三种元素

①<li>:这是列表中的一个子元素,有序和无序列表中均可使用

②<ol>:有序列表

③<ul>:无序列表

一个列表的创建只需要将<li>元素嵌套在②或③之间下面我们通过举例来看看这两种列表有什么区别。

我们先创建一个有序列表的:

 <ol>
        <li>小猫</li>
        <li>小狗</li>
        <li>小猴</li>
        <li>小鱼</li>
   </ol>

这样我们就能在浏览器上看到:

下面我们在写一个无序列表的:

<ul>
        <li>小猫</li>
        <li>小狗</li>
        <li>小猴</li>
        <li>小鱼</li>
   </ul>

这样我们会发现前面的数字变成了一个个点:

这就是有序列表和无序列表的区别,非常容易理解对吧(得意龙图.jpg)

当然!很多人对于无序列表的小黑点很不满意,他们更希望把这个黑点去掉,那么该怎么做呢?

<ul>
        <li style="list-style-type: none;">小猫</li>
        <li>小狗</li>
        <li>小猴</li>
        <li>小鱼</li>
   </ul> 

我们只要给其中一个<li>元素添加上面的一段代码即可,这样我们会发现“小猫”那一行的黑点消失了:

当然如果你想一下子把所有的黑点全部消去的话我们还有很多种方法:

<ul style="list-style-type: none;">
        <li >小猫</li>
        <li>小狗</li>
        <li>小猴</li>
        <li>小鱼</li>
   </ul> 

把刚刚那行代码嵌入到<ul>这个大的元素内,则整个列表的<li>元素的黑点都会全部消失。

(5)<br>:用于文本的换行,这个元素不是一个闭合的元素,当你想要在文本之中换行时,我们只需要添加这个标签即可。

这时可能有人会有疑问,我们为什么不能在文本直接回车换行?就像这样子:

<p>
      从前有座山
      山里有座庙
      庙里有个人正在打开CSDN
   </p>

但是当我们打开浏览器的时候,会发现文本的布局并非是我们想象的那样:

这是因为在HTML中,无论我们输入多少个空格,编辑器都会把他识别成一个空格~

所以此时此刻我们就需要用到<br>元素

我们试着在每一行后面加一个元素:

 <p>
      从前有座山<br>
      山里有座庙<br>
      庙里有个人正在打开CSDN<br>
   </p>

这次再打开显示器我们就能得到我们想要的画面:

(6)<hr>:这个元素的目的是添加一条横线,可以用来给一段文本进行简单的分区。

3.强调文本

当我们去看很长一段话时,我们难以在短时间内找到重点信息,这时我们便可以用一些有强调效果的元素。

(1)<strong>:在上一篇文章中我们见到,这个标签可以让字体加粗,起到强调效果。

 <p>乐高集团是一家总部位于<strong>丹麦</strong>的国际玩具制造商</p>

我们可以看到,被<strong>元素裹起来的文本字体变粗了,和周围的文字比起来有强调效果。

(2)<em>:使文本变成斜体

<p>乐高集团是一家总部位于<em>丹麦</em>的国际玩具制造商</p>

(3)使用CSS对文字进行样式化:CSS(层叠样式表),后面会详细讲到,我们可以通过CSS对字体进行颜色,大小的改变,同样可以起到强调的效果。

4.特殊元素

在HTML中,我们有时候会遇到一些特殊的符号,下面有一个表格可供参考:

特殊字符对应元素
上角标<sup>
下角标<sub>

以上就是文本的处理的相关内容:)

标签:标题,元素,列表,文本处理,HTML,文本,我们
From: https://blog.csdn.net/2401_84944910/article/details/143449719

相关文章

  • HTML弹性盒子模型
    目录1.Flex基本属性(1)display(2)flex-direction(3)flex-wrap(4)justify-content(5)align-items2.自己制作一个简单的个人页面之前我们提到过,当我们创建一个元素时,相当于在HTML中创造了一个盒子,并且可以用适当的方法改变他的位置和其他属性,今天我们将会介绍一种更为便捷,有效的......
  • HTML静态页面进阶版
    目录1.文档的嵌入2.嵌入矢量图形上篇提到了制作一个静态网页基本的一些元素,而本文则会介绍更多的元素来完善你的页面!1.文档的嵌入在上篇文章中提到了如何用某些标签来进行图片、音频、视频的嵌入,但如果我们想在我们的页面中显示别人的页面或者自己的一个文档呢?这时候就......
  • HTML基础
    HTML(超文本标记语言),可用来构建网页,告诉浏览器如何组织页面的标记语言。一个HTML由众多不同的元素组成,每一种元素都可以根据自己的特点对元素内部的内容进行编辑。如果我们想在页面上显示“HelloWorld!”,我们可以用一个<p>标签来实现<p>HelloWorld!</p>在上面这个例子中,......
  • 11.7 html
    html一、基本介绍1、定义:html是一种超文本标记语言,也是一种标识性语言(不是编程语言)标记:记号(绰号)超文本:就是页面内容可以包含图片、链接,音乐,视频等素材。2、为什么学习html?(1)测试页面元素,了解页面页面元素(页面是html语言编写的)(2)进行ui自动化需用到元素定位3、html有哪些特点......
  • _html
    html一、基本介绍1、定义:html是一种超文本标记语言,也是一种标识性语言(不是编程语言)标记:记号(绰号)超文本:就是页面内容可以包含图片、链接,音乐,视频等素材。2、为什么学习html?(1)测试页面元素,了解页面页面元素(页面是html语言编写的)(2)进行ui自动化需用到元素定位3、html有哪些特点......
  • HTML格式
    html有哪些特点?(1)简易性(2)可拓展性(3)平台无关性(4)通用性html快捷键:(1)ctrl+n+w创建项目(2)ctrl+n+h创建html文件(3)ctrl+s保存)(未保存显示*号)(4)ctrl+r运行(5)ctrl+z撤回(6)!+tab键联想基本格式(7)ctrl+/注释和取消注释(8)ctrl+鼠标滚轮,字体方大和缩小表格:table(1)认识......
  • HTML 转 Word API 接口
    HTML转WordAPI接口支持网页转Word,高效转换为Word,提供永久链接。1.产品功能超高性能转换效率;支持将传递的HTML转换为Word,支持HTML中的CSS格式在Word文档中的呈现;支持传递网站的URL,直接转换成对应的Word格式返回;转换后的Word提供永久存储文件地址;已完......
  • HTML 转 PDF API 接口
    HTML转PDFAPI接口网络工具/文件处理支持网页转PDF高效生成PDF/提供永久链接。1.产品功能超高性能转换效率;支持将传递的HTML转换为PDF,支持转换HTML中的CSS格式;支持传递网站URL,直接转换页面成对应的PDF文件;转换后的PDF提供永久存储文件地址;全接口......
  • 快看!HTML&CSS:你没见过的卡通表情
    它包含了HTML结构、CSS样式和一些内嵌的CSS动画。这个网页设计了一个有趣的动画效果,看起来像是一个卡通风格的“便便”表情,周围还有一些彩色的气泡(可能是代表气体的视觉效果O(∩_∩)O哈哈~)HTML<divclass='toots'><divclass='toot'></div><divclass='toot'><......
  • 摸鱼!HTML&CSS:画个心跳玩玩~
    效果演示这段代码是一个HTML和CSS的组合,它包含了一个SVG图形,该图形被设计成一个心形,并使用了CSS动画来创建一个“心跳”的效果HTML<svgclass="heart"viewBox="-5-527856"version="1.1"id="svg5"xmlns="http://www.w3.org/2000/svg"><filter>......