HTML基础教程-优快云博客

什么是HTML

HTML（Hyper Text Markup Language）称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等

HTML基本结构

<!DOCTYPE html><!--告诉浏览器使用什么规范-->
<html>
	<!--网页头部-->
	<head>
		<!--网页字符编码-->
		<meta charset="utf-8">
		<!-- title标签 -->
		<title>第一个网页</title>
	</head>
	<!-- 主体部分 -->
	<body>
		use hbuilder do first html
	</body>
</html>

补充：< meta />标签

<!DOCTYPE html><!--告诉浏览器使用什么规范-->
<html>
	<!--网页头部-->
	<head>
		<!--网页字符编码-->
		<meta charset="utf-8">
		<!-- meta标签 name属性搜索关键字 内容描述 -->
		<meta name="keywords" content="南京南站" />
		<meta name="description" content="南京南站是亚洲第一大火车站和亚洲第一大高铁站" />
		<!-- title标签 -->
		<title>第一个网页</title>
	</head>
	<!-- 主体部分 -->
	<body>
		use hbuilder do first html<h1>标题1</h1><p>段落1</p>
	</body>
</html>

网页基本标签

标题标签< h1> ~ < h6>

展示大小和粗细不同的字体，html中，只有六级标题，其它标题不能解析执行，h1最大，h6最小，每个标题标签都自带样式，独占一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</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>

不同等级标签对比
在这里插入图片描述

段落标签< p>< /p>

一段文字形成一个段落，独占一行

<html>
	<head>
		<meta charset="utf-8">
		<title>p标签</title>
	</head>
	<body>
		在标签内：
		<p>的的解放军地对地导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦
		</p>
		没在标签内：
		地对地导弹地对地导弹地对地导弹淡淡的淡淡的地对地导弹淡淡的点点滴滴导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦
	</body>
</html>

段落标签展示
在这里插入图片描述

换行标签< br/>

段内换行，标签后部会到下一行，html页面中，手动敲回车，页面内容会换行，但是浏览器解析不会换行

<html>
	<head>
		<meta charset="utf-8">
		<title>p标签</title>
	</head>
	<body>
		在标签内：
		<p>的的解放军地对地导弹反反复复淡淡的<br/>吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦
		</p>
		没在标签内：
		地对地导弹地对地导弹地对地导弹淡淡的淡淡的地对地导弹<br/>淡淡的点点滴滴导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦导弹反反复复淡淡的吞吞吐吐淡淡的地对地导弹低调啦啦啦啦啦过几天哦哦哦哦哦哦哦哦哦
	</body>
</html>

换行标签展示：
在这里插入图片描述

水平线标签< hr/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>北京欢迎你</title>
	</head>
	<body>
		<h1>北京欢迎你</h1>
		<hr />
		<p>
			北京欢迎你，为你开天辟地<br />
			流动中的魅力充满着朝气<br />
			北京欢迎你，在太阳下分享呼吸<br />
			在黄土地刷新成绩
		</p>
	</body>
</html>

水平线标签展示：
在这里插入图片描述

提问

主体部分内容写在一行，为什么展示时会分行显示？

<!DOCTYPE html><!--告诉浏览器使用什么规范-->
<html>
	<!--网页头部-->
	<head>
		<!--网页字符编码-->
		<meta charset="utf-8">
		<!-- title标签 -->
		<title>第一个网页</title>
	</head>
	<!-- 主体部分 -->
	<body>
		use hbuilder do first html<h1>标题1</h1><p>段落1</p>
	</body>
</html>