HTML基础之段落与文字

沃和莱特

已于 2022-05-21 08:59:31 修改

阅读量2.3k

点赞数 9

分类专栏：前端文章标签： html5 html web

于 2022-04-06 20:29:54 首次发布

本文链接：https://blog.csdn.net/weixin_64122448/article/details/123992662

版权

前端专栏收录该内容

22 篇文章 8 订阅

订阅专栏

一：首先进入HBuilderX，新建一个html项目会发现页面如下

1：标题标签<h>

在html中一共有六个级别的标签：<h1>~<h6>.。其中 h 是英文header的简称，其中，<hi>的重要性最高，<h6>的重要性最低.

2：段落标签<p>

利用段落标签可以来标记一整段文字，段落标签会自动换行，并且段落与段落之间会有一定空隙。

3：换行标签 <br/>

与<p>标签在换行上不同的是，<br>标签会导致两文字段落之间会有一定的空隙，但是换行标签<br/>不会.<br/>标签用来给文字换行，<p>标签用来给文字分段。

4：粗体标签 <strong>

这一标签可以用来对文字的加粗。

5：斜体标签 <em>

用于对文本进行斜体设置。

6：上下标标签 <sup>和<sub>

想要将某个数字或文本变成上（下）标形式的效果，就把这个数字或文本放在上（下）标之间。

7：水平线标签<hr/>,属于自自闭合标签。

8：div标签

div标签可以放入body标签的任何内部标签，包括段落文字、表格、列表、图像等。加入div标签后和没有加的代码在浏览器上显示的是一样的，但是加入div标签可以使代码的逻辑性更强

9：网页的一些特殊符号

可输入的特殊符号
特殊符号	名称	代码
“	双引号	&quot
‘	左单引号	&lsquo
’	右单引号	&rsquo
✖	乘号	&times
➗	除号	&divide
<	小于号	&lt
>	大于号	&gt
&	与符号	&amp
——	长破折号	&mdash
\|	竖线	&#124
	空格	&nbsp
©	版权	&copy
®	注册商标	&reg
™	商标	&trade

10:自闭合标签

1一般标签由于有开始符号和结束符号，可以在标签内部插入其他标签或文字；

2自闭合标签由于没有结束符号，没办法再内部插入其他标签或文字，只能定义自身的一些属性。

常见的自闭合标签有：

<metal/> 定义页面的说明信息，供搜索引擎查看

<base/>定义页面所有链接的基础定位

<br/>用于换行

<hr/>定义一个水平线

<input/>用于定义表单元素

<img/>图像标签

11：块元素和行内元素

html元素根据形式可以分为两类：块元素（block）和行内元素（inline）

块元素再浏览器中默认显示状态下独占整行，排斥其他元素与其位于同一行。块元素一般为矩形，可以容纳行元素和其他的块元素。

常见的块元素
块元素	说明
div	div层
h1~h6	1到6级标题
p	段落，会在其前后创建一些空白
hr	分割线
ol	有序列表
ul	无序列表

块元素拥有一下特点：

1独占整行，排斥其他元素与其位于同一行。

2可以容纳行元素和其他的块元素。

3高度、行高、内外边距和外距均可控制。

4宽度缺省是它的容器的100%，除非设定一些宽度。

行内元素默认显示状态可以与其他行内元素共存一行。

常见的行内元素
行内元素	说明
strong	加粗强调
em	斜体强调
s	删除线
u	下划线
a	超链接
span	常用于行级，可定义文档中的行内元素
img	图片
input	表单

行内元素拥有的特点：

1可以与其他行内元素位于同一行；

2行内内部可以容纳其他行内元素，但不可容纳块元素。

二：总结和归纳

段落与文字标签
标签	语义	说明
<h1>~<h6>	header	标题
<p>	paragraph	段落
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割（块元素）
<span>	span	区域（行内元素）

文本格式化标签
标签	语义	说明
<strong>	strong	加粗
<em>	emphasizd	斜体
<cite>	cite	斜体
<sup>	superscripted	上标
<sub>	subscriped	下标

一般标签和自闭合标签

一般标签有开始符号和结束符号，而自闭合标签只有开始符号没有结束符号。

利用段落与文字的相关标签进行简单网页的制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>各科小常识</h1>
		<hr />
		<div>
			<h3>语文</h3>
			<p>语文是一个多义词，通常作为语言文字、语言文学、语言文化的简称，其本义为“语言文字”。</p>
			<br/>
			<hr/>
			</div>
			<div>
			<h3>数学</h3>
			<p>勾股定理直角三角形，a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
			<br/>
			<hr/>
		</div>
		<div>
		     <h3>化学</h3>
			 <p>H<sub>2</sub>SO<sub>4</sub>是一种重要的<strong>工业原料</strong>,用于制作肥料、洗涤剂等。</p>
			 <br/>
			 <hr/>
		</div>
		<div>
			 <h3>经济</h3>
			 <p>注册商标：&reg</p>
			 <br/>
			 <p>版权符号：&copy<p>
			 <hr/>
		</div>
		<p><span style="color:blue">好好学习</span></p>
		<p><span style="color: red;">天天向上</span></p>
	</body>
</html>

浏览器预览结果

沃和莱特

关注

9
点赞
踩
24

收藏

觉得还不错? 一键收藏
20
评论
HTML基础之段落与文字

初学乍道，还望前辈们指正。1：标题标签<h>在html中一共有六个级别的标签：<h1>~<h6>.。其中 h 是英文header的简称，其中，<hi>的重要性最高，<h6>的重要性最低.2：段落标签<p>利用段落标签可以来标记一整段文字，段落标签会自动换行，并且段落与段落之间会有一定空隙。3：换行标签 <br/>与<p>标签在换行上不同的是，<
复制链接

扫一扫