HTML文档的基本格式/标签/学习笔记

noahsark747

已于 2022-01-21 23:43:04 修改

阅读量1.2w

点赞数 9

文章标签： html css 前端

于 2022-01-20 22:29:16 首次发布

本文链接：https://blog.csdn.net/No1banana/article/details/122611391

版权

一、HTML文档的基本格式

< ！doctype >声明html文档的类型，位于文档的最开头，向浏览器说明文档的规范
< body >主体标签，用于定义网页的主要显示的内容，文本图片音频视频等。
< html >根标签。用于告知浏览器自身是一个html的文档
< head >头部标签。用于定义HTML文档的头部信息，head标签中可以嵌套</meta>

注意：一个HTML文档当中只能有一对head标签、一对body标签、一对html标签。其中body和head需要包含在html标签之中

二、标签的分类

带有“<>”符号的。

1.单标签：

也称为空标签，是一个标签符号即可描述完整的功能的标签“<标签名/>”
<这是一个单标签/>

2.双标签

也称体标签，由开始和结束两个标签符组成 <标签名>内容</标签名>
<双标签>内容<双标签>

3.注释标签

注释标签也属于一种特殊的单标签<!--注释语句-- >

三、标签的关系

1.嵌套关系：一个双标签内包含了其它标签，嵌套标签规则：位置需要一一对应，由内向外，且单标签无嵌套

2. 并列关系

四、页面格式化标签

1、标题标签

HTML提供了h1到h6六个重要性的标签，和markdown的#到######类似

<h1 align="right">
  一级标题
  <h1>
  <h2 align="center">
    二级标题
  </h2>
<!--如此可以设置标题的对其方式不过一般应当使用CSS来进行设置-->

一级标题

二级标题

注意：一个网页通常只能有一个h1标签，通常使用在网页的logo部分等。且标签只能用于定义标题

五、段落标签

HTML文档中最常见的标签便是段落标签。默认情况下段落标签会自动适应浏览窗口尺寸。

段落标签也是一个双标签

这是一个段落标签的结构

效果示例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>段落文本</title>
</head>

<body>
	<h2 align="center">这是一个h2标签层级的居中标题</h2>
	<p align="left">这是一个使用了P段落标签的文章的开头</p>
	<p align="center"> 类型：实例</p>
	<p>这是文章的正文，通过使用两个段落标签p可以实现两个
		段落文本的分层</p>
</body>
</html>

网页显示效果
在这里插入图片描述

段落标签同样可以指定对其方式：
left左对齐（默认）
center居中
right右对齐

六、水平线标签

水平线标签可以使文登的段落与段落之间隔开

< hr 属性 = "属性值">

常见的属性与含义：

属性名：align：设置水平线的堆砌方式，默认为center

属性名：size：设置水平线的粗细，默认为2像素

属性名：color：设置水平线的颜色，可用英文名与十六进制

属性名：wigth：设置水平线的宽度

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>水平线标签的实例</title>
</head>

<body>
	<h2> 标题：这是一个标题</h2>
	<hr />
	<hr color="red" size="8"/>
	<hr align="left" width="100"/>
	<hr align="ight" width="100"/>
	<p>文章的内容</p>
</body>
</html>

浏览器显示效果如下

在这里插入图片描述

七、换行标签

可以使用换行标签对文字段落进行换行的拆分

换行标签为 

这是一段示例文字，这段文字中将使用换行标签来实现 换行效果

这是一段市场文字，这段文字中将使用换行标签来实现
换行效果

###欢迎加入QQ群一同交流学习937864538