ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML结构及文本标签

2022-01-25 20:58:05  阅读:106  来源: 互联网

标签:网页 标签 标题 HTML 文本 分割线 结构


HTML文本标签

一、HTML固定结构

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
		<body>
			网页内容
		</body>
</html>

HTML决定网页的结构,所有HTML文件都是基于此结构完成的。此外还可以观察到,HTML是一种标签语言,其对网页结构的设置是通过标签实现的。

二、HTML基础标签

1.添加内容

网页的内容就像一个人的身体,故应在“body”标签内填写内容。标签语言的一大特点是应用起来比较灵活,即在body中可以直接打字输入要添加的内容。在HTML基本结构的基础上,为网页添加内容:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			这里是我们要为网页添加的内容!
		</body>
</html>

用浏览器打开这个html文件后,我们可以在网页中观察到这样一个页面

这里是我们要为网页添加的内容

2.标题

HTML中用“h”标签来表示标题,具体用法为:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>一级标题</h1>
			<h2>二级标题</h2>
			<h3>三级标题</h3>
			<h4>四级标题</h4>
			<h5>五级标题</h5>
			<h6>六级标题</h6>
		</body>
</html>

那么用浏览器打开这个html文件,则会观察到这样一个页面:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

3.段落

符号:p
特点:双标签,使用后自动换行
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<p>这是第一段内容</p>
			<p>这是第二段内容</p>
			<p>这是第三段内容</p>
		</body>
</html>

效果:

这是第一段内容

这是第二段内容

这是第三段内容

3.换行

符号:br
特点:单标签
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<p>为使页面中的文字结构更加美观,<br>我们合理使用换行符对文字的结构进行调整</p>
		</body>
</html>

效果:

为使页面中的文字结构更加美观,
我们合理使用换行符对文字的结构进行调整

4.加粗

符号:strong
特点:双标签
说明:可替换成b,多数使用还是strong
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
		<p>为使页面中的文字结构更加美观,<br>我们合理使用<strong>换行符</strong>对文字的结构进行调整</p>
		</body>
</html>

效果:

为使页面中的文字结构更加美观,
我们合理使用换行符对文字的结构进行调整

5.水平分割线

符号:hr
特点:单标签
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>标题一</h1>
			<hr>
			<p>用<strong>水平分割线</strong>将标题一与正文分开</p>
		</body>
</html>

效果:

标题一


水平分割线将标题一与正文分开

6.下划线

符号:ins
特点:双标签
说明:也用符号u,多数使用ins
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>标题一</h1>
			<hr>
			<p>用<strong>水平分割线</strong>将标题一与正文分开</p>
			<p>重点部分用<ins>下划线</ins>标出</p>
		</body>
</html>

效果:

标题一


水平分割线将标题一与正文分开

重点部分用下划线标出

7.倾斜

符号:em
特点:双标签
说明:也用符号i,多数用em
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>倾斜</h1>
			<hr>
			<p>倾斜部分需<em>重点标出</em>!!!</p>
		</body>
</html>

效果:

倾斜


倾斜部分需重点标出!!!

8.删除线

符号:del
特点:双标签
说明:也用s,多数用del
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>大减价</h1>
			<hr>
			<p>价格优惠,史上最低!!</p>
			<p>只需:<del>1314</del> 520元!</p>
		</body>
</html>

效果:

大减价


价格优惠,史上最低!!

只需:1314 520元!

标签:网页,标签,标题,HTML,文本,分割线,结构
来源: https://blog.csdn.net/Harrysau/article/details/122691120

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有