MENU

HTML基础-文本

2022 年 05 月 12 日 • 阅读: 123 • HTML,前端之旅

页面组成元素

大多数静态页面都是由以下4种元素组成
文字、图片、超链接、音频和视频

标题标签

在HTML中,共有6个级别的标题标签:h1、h2、h3、h4、h5、h6。其中h是header的缩写,6个标题标签在页面中的重要性是有区别的,其中h1级别的重要性最高,h6标签的重要性最低。
一个页面只能有一个h1标签,而h2到h6标签可以是多个,h1表示这个页面的大标题,例如:一篇作文只能有一个大标题,但可以有多个小标题。
举例:

<!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>

段落标签

语法:<p></p>

举例:

<!DOCTYPE html>
<html>
<body>
  <h3>隔壁小胡的博客</h3>
  <p>记录生活,分享技术。</p>
  <p>hq233.cn</p>
</body>
</html>

换行标签

  如果只使用p标签会导致段落与段落之间有一定间隙,而使用br标签则不会。br标签是给文字换行的,而p标签是用来给文字分段的,如果内容是两段文字,则不需要使用br标签,直接使用p标签即可。
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>换行标签</title>
</head>
<body>
  <h3>隔壁小胡的博客</h3>
  <p>记录生活,分享技术。</br>hq233.cn</p>
</body>
</html>

文本标签

strong/bi/em/citesupsubsubigsmall
粗体标签斜体标签上标标签下标标签中划线标签下划线标签大字号标签小字号标签

粗体标签
  虽然strong标签b标签的加粗效果是一样的。但是在实际开发中,需要实现文本加粗效果,尽量使用strong标签 因为strong标签更具有语义性
对文本进行加粗,可以使用strong b标签
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>粗体标签</title>
</head>
<body>
  <p>这是普通标签</p>
  <strong>这是粗体文本</strong>
  <b>这也是粗体文本</b>
</body>
</html>

斜体标签
在HTML中,实现文本的斜体效果可以使用i标签em标签cite标签
在实际开发中,实现文本斜体效果,要使用em标签 因为em标签比其他两个标签语义性更好。
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>斜体标签</title>
</head>
<body>
  <i>斜体文本</i>
  <em>斜体文本2</em>
  <cite>斜体文本3</cite>
</body>
</html>

上标标签
在HTML中,实现文本的上标效果可以使用sup标签 sup是superscripted的缩写。
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>上标标签</title>
</head>
<body>
  <p><a+b><sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>

下标标签
在HTML中,实现文本的下标效果可以使用sub标签 sub是subscripted的缩写
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>下标标签</title>
</head>
<body>
  <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
</body>
</html>

中划线标签
在HTML中,实现文本的中划线效果可以使用s标签
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>中划线标签</title>
</head>
<body>
  <p>新鲜的隔壁小胡限量售卖</p>
  <p><s>原价:¥666/kg</s></p>
  <p><strong>现在仅售:¥5.20/kg</strong></p>
</body>
</html>

下划线标签
在HTML中,实现文本的下划线效果可以使用u标签
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>下划线标签</title>
</head>
<body>
  <p><u>隔壁小胡hq233.cn</u>记录生活,分享技术</p>
</body>
</html>

大字号标签和小字号标签
在HTML中,实现字体的变大效果可以使用big标签 实现字体的变小效果可以使用small标签
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>big标签和small标签</title>
</head>
<body>
  <p>普通文本</p>
  <big>大字号文本</big>
  <small>小字号文本</small>
</body>
</html>

水平线标签

在HTML中,实现一条水平线的效果可以使用hr标签 hr是horizon的缩写
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>水平线标签</title>
</head>
<body>
  <h3>隔壁小胡的博客</3>
  <p>记录生活,分享技术</p>
  <hr/>
  <h3>隔壁小胡的博客</3>
  <p>记录生活,分享技术</p>
</body>
</html>

div标签

在HTML中,可以使用div标签来划分HTML结构,从而配合css来整体控制某一块样式。
div全称division分区,用来划分一个区域,常见的“div+css”中的“div”指的是此处介绍的div标签,其中,div标签内部可以放入绝大多数其他的标签,如p标签,strong标签和hr标签等。
虽然显示的效果和上面一样,但使用div标签来划分区域,使得代码更具有逻辑性,最重要的是div标签用途是划分区域。
举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>div标签</title>
</head>
<body>
 <div>
  <h3>隔壁小胡的博客</3>
  <p>记录生活,分享技术</p>
 </div>
  <hr/>
 <div>
  <h3>隔壁小胡的博客</3>
  <p>记录生活,分享技术</p>
 </div>
</body>
</html>

自闭合标签

之前学习的标签都是一对出现的,即一个开始符号,一个结束符号,不过有些标签是没有结束符号的,如
<hr/>
上面代码中可以看出,div标签的开始符合和结束符号之间是可以插入其他标签或文字,但是meta标签和hr标签中不能插入其他标签和文字。
一般标签和自闭合标签区别:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>自闭和标签</title>
</head>
<body>
 <div>
  <h3>隔壁小胡的博客</3>
  <hr/>
  <p>记录生活,分享技术</p>
 </div>
</body>
</html>

常见的自闭合标签

<meta/><link/><br/><hr/><input/>
定义网页的信息(供搜索引擎查看)引入“外部css文件”换行标签水平线标签图片标签表单标签

块元素和行内元素

在HTML中,根据元素的表现形式,一般可以分为两类
块元素
行内元素

块元素
在HTML中,块元素在浏览器显示状态下将占据整一行,并且排斥其他元素与其位于同一行,一般情况下,块元素内部可以容纳其他块元素和行内元素,HTML中常见的块元素如下:

h1-h6pdivhrolul
标题元素段落元素div元素水平线有序列表无序列表

举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>块元素和行内元素</title>
</head>
<body>
 <div>
  <h3>隔壁小胡的博客</3>
  <strong>隔壁小胡的博客</strong>
  <em>记录生活,分享技术</em>
 </div>
</body>
</html>

<h3>-块元素、<p>-块元素、<strong>-行内元素、<em>-行内元素
h3p是块元素,它们的显示效果都是独占一行的,并且排斥任何元素与它们位于同一行;strongem是行内元素,即使代码不位于同一行,它们的显示效果也是位于同一行的,显示效果与代码是否位于同一行没有关系。
h3pstrongem元素都是在div元素内部的,也就是说,块元素内部可以容纳其他块元素和行内元素。
由此可以总结出块元素具有两个特点。
块元素独占一行,排斥其他元素,包括块元素和行内元素,与其位于同一行
块元素内部可以容纳其他块元素和行内元素。


行内元素
在HTML中,行内元素与块元素恰恰相反,行内元素是可以与其他行内元素位于同一行的,行内元素内部(标签内部)只可以容纳其他行内元素,不可以容纳块元素。
HTML中常见的行内元素如下:

strongemaspan
粗体元素斜体元素超链接常见行内元素,结合css定义样式

特殊符号

网页中的空格
在网页排版中,让每一个段落的首行缩进两个字的空格,如果使用space键来实现空格,是无效的,空格也需要使用代码来实现,空格代码为&nbsp
一个汉字约等于3个&nbsp

网页中的特殊符号
容易通过输入法输入的不必使用代码实现,难以通过输入法输入的需要使用代码实现。

©®¥
版权符注册商标商标欧元英镑日元
&copy;&reg;&trade;&euro;&pound;&yen;&deg;
本文到此结束
  • 文章标题:HTML基础-文本
  • 文章链接:https://hq233.cn/archives/483.html
  • 作品采用:CC BY-NC-SA 4.0 许可协议授权
  • 版权所有:本文版权归 隔壁小胡的博客所有
    转载请先获得本人同意!
    (如有侵权,请 点此联系我删除 )
  • 最后编辑于: 2022 年 05 月 17 日
    返回文章列表 文章二维码
    本页链接的二维码
    打赏二维码
    添加新评论

    已有 2 条评论
    1. 在学前端吗

      1. @小赵同学是的,基础知识不太扎实,从头学起