html初学第一课标题、段落、换行、分割线

最新推荐文章于 2024-04-16 19:19:57 发布

珹先生

最新推荐文章于 2024-04-16 19:19:57 发布

阅读量747

点赞数

分类专栏：初学文章标签： html

本文链接：https://blog.csdn.net/giantleech/article/details/111477481

版权

初学专栏收录该内容

136 篇文章 4 订阅

订阅专栏

HTML初学第一课

HTML是什么
HTML基本结构
常用标签

HTML是什么

Hype TextMa’rkup Language(超文本编辑语言)
超文本包含了：文字、图片、音频、视频、动画等

HTML基本结构

<!DOCTYPE html>                          表示以下使用html语言进行编写
<html>                                   表示html语言的开始
	<head>                               表示标题
		<meta charset="utf-8">           表示使用“utf-8”编码
		<title></title>                  表示页面的标题名称
	</head>                              表示标题结束
	<body>                               表示正文内容的开始
	</body>                              表示正文内容的结束
</html>                                  表示html语言的结束

常用标签

一、标题标签h

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>各种标题</title>
	</head>
	<body>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		无标题
		<h7>标题7</h7>    <!--不符合标准，所以不起作用，相当于没有标签/>
		无标题
	</body>
</html>

运行结果如下所示：

各种标题

标题1

标题2

标题3

标题4

标题5

标题6

无标题标题7

二、段落标签p

在代码中间加入换行标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>p标签表示段落</title>
	</head>
	<body>
		在p标签内：<p>我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵但是我来到这里，就是为了钱，真不是为了你的美貌和綵话我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵话</p>
		没在P标签内：我很帅，我也很温柔真不是为了你的美貌和綵话我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵话我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵话我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵话
	</body>
</html>

运行后的结果如下：

p标签表示段落在p标签内：

我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵但是我来到这里，就是为了钱，真不是为了你的美貌和綵话我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵话

没在P标签内：我很帅，我也很温柔真不是为了你的美貌和綵话我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵话我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵话我很帅，我也很温柔，但是我来到这里，就是为了钱，真不是为了你的美貌和綵话

三、换行标签br

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行标题</title>
	</head>
	<body>
		没有换行标题：书山有路勤为径，学海无涯苦作舟。
		<br/>有换行标题：书山有路勤为径，<br/>学海无涯苦作舟。
	</body>
</html>

运行结果如下所示：

换行标题没有换行标题：书山有路勤为径，学海无涯苦作舟。
有换行标题：书山有路勤为径，
学海无涯苦作舟。

四、分割线hr

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>北京欢迎你</title>
	</head>
	<body>
		<h3>北京欢迎你</h3>
		<hr/>
		<p>
			迎接另一个晨曦，带全新空气，气息改变情味不变，茶香飘满情谊。<br/>
			
			我家大门常打开，开放怀抱等你，拥抱过就有了默契，你会爱上这里。<br/>
			
			不管远近都是客人请不用客气，相约好了在一起，我们欢迎你。<br/>
			
			我家种着万年青，开放每段传奇，为传统的土壤播种，为你留下回忆。<br/>
			
			陌生熟悉都是客人请不用拘礼，第几次zhi没关系，有太多话题。<br/>
			
			北京欢迎你，为你开天辟地，流动中的魅力充满着朝气。<br/>
			
			北京欢迎你，在太阳下分享呼吸，在黄土地刷新成绩。<br/>
		</p>
	</body>
</html>

运行结果如下所示：

北京欢迎你

迎接另一个晨曦，带全新空气，气息改变情味不变，茶香飘满情谊。
我家大门常打开，开放怀抱等你，拥抱过就有了默契，你会爱上这里。
不管远近都是客人请不用客气，相约好了在一起，我们欢迎你。
我家种着万年青，开放每段传奇，为传统的土壤播种，为你留下回忆。
陌生熟悉都是客人请不用拘礼，第几次zhi没关系，有太多话题。
北京欢迎你，为你开天辟地，流动中的魅力充满着朝气。
北京欢迎你，在太阳下分享呼吸，在黄土地刷新成绩。

以上内容为HTML第一课的内容，谢谢。