二、HTML的文档结构

最新推荐文章于 2023-06-13 16:42:57 发布

ChengMeng11

最新推荐文章于 2023-06-13 16:42:57 发布

阅读量715

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ChengMeng11/article/details/104638666

版权

二、HTML的文档结构

1、基本结构

1.1简介

html标签是由尖括号的关键词，如<html>,通常标签都是成对出现的，如： <html><html> ;
以<html>为根标签，包含：<head>头部和<body>主体部分；
头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键词等摘要信息摘要信息；
主体部分提供网页要显示的内容，真正显示页面中的；
合理的缩进；
标签名不区分大小写,但一般要用小写。

在这里插入图片描述

1.2开发工具：

记事本（notepad）,sublime,notepad++,Dreamweaver,VScode,webstorm等
sublime的使用：

第一：打开sublime

第二：在里面进行新建文件(ctrl+N)，然后在进行保存(ctrl+S)，保存的时候，记得将扩展名输入上去（扩展名：.html或者.htm 都可以），不然的话，写出的代码，在网页上显示不出来。

在输入根标签或者头部标签等会特别麻烦，那么，可以使用Tab键，来进行快速生成，例如：根标签，输入html然后在按Tab，之后会直接生成<html></html>,只要是标签类型，都可以这样操作。

第三：将代码输入完后，课进行在浏览器中打开,进行验证。

代码：
```
<html>
	<head>
		<title>第一个HTML文件</title>
		<meta charset="utf-8">
	</head>
	<body>
		welcome to html!
	</body>
</html>
```
案例：

在这里插入图片描述

为了方便在sublime里面打开文件或图片等，可以单独建立一个文件夹（project），在这个文件夹中，可以再次创建三个文件夹（code，document，image）这三个，code里面可以放我们编写的代码，image里面可以放入我们需要的图片，可以方便我们打开以及使用。

将创建好的project文件夹直接拖进sublime里面，这样就可以更方便的使用了。

在这里插入图片描述

1.3浏览器

常见的浏览器：IE浏览器微软,chrome谷歌（开发人员常用的浏览器）,firefox火狐,safari苹果；
浏览器的作用:读取html文件,并以网页的形式进行显示；
浏览器不会直接显示html标签,而是使用标签来解释网页的内容。

2标签

2.1标签的组成

一个完整的html标签的组成：

<标签名属性名="属性值">内容</标签名>

属性值要用双撇号括起来，一般用双撇号（双撇号就是英文的双引号）

代码：
```
<html>
	<head>
		<title>标签的组成</title>
		<meta charset="utf-8">
	</head>
	<body bgcolor="yellow" text="red">
		标签的组成
		
	</body>
</html>
```
案例：

在这里插入图片描述

2.2标签的分类

根据标签是否关闭，分为：关闭型和非关闭型

关闭型：有开始标签，有结束标签，即标签成对出现

<html></html>
<head></head>
<title>标题</title>
<body>主体<body>
<h1>一级标题</h1>
<h1>...<h6>

非关闭型：只有开始标签，没有结束标签
```
<meta>
<br>
<hr>
```

根据标签是否独占一行，分为：块级标签和行级标签

块级标签：显示为块状，独占一行

<h1>大家好</h1>
<h1>一级标题<h1>
    ...
<h6>六级标题<h6>
<hr>

行级标签：在行内显示，可以与其他文本内容在同一行显示

<span></span>

代码：

<html>
	<head>
		<title>标签的组成</title>
		<meta charset="utf-8">
	</head>
	<body bgcolor="yellow" text="red">
		标签的组成
		<hr>

		HTML从入门到精通
		<hr>

		<h1>一级标题</h1>
		<hr>

		<h2>二级标题</h2>
		<hr>
		<h5>五级标题</h5>

		咪咪  <br>  佛佛

		<h1>哈哈</h1>呵呵
		<hr>

		<span>嘿嘿</span>吼吼
		
	</body>
</html>

案例：

在这里插入图片描述

2.3注释

注释在浏览器中不会显示，是用来标注解释html语句，但通过查看代码源可以看到的

<!--注释-->    注释的快捷键是：Ctrl+/

如图：

在这里插入图片描述

2.4 实体字符

实体字符也称为特殊字符，用于显示一些特殊符号：如< > & 空格等

语法：

语法格式：& + 实体字符的名称;

常用的实体字符：

&lt;       <    小于号    less   than
&gt;       >    大于号    great  than
    两个小于号和大于号，就构成了书名号
&nbsp;    空格   space  在html中对于连续的空白字符（空格、缩进、换                        行等），在浏览器中显示时，只能显示一个空格。
&amp;      &    与
&quot;     "    英文状态下的双引号    也可以直接打双引号，浏览器中可以显示。
&copy;    版权符号   copyright
&reg;     注册符号   register
&times;   关闭符号

注意：实体字符，是严格区分大小写，即敏感大小写。如果大小写写错的话是没有办法显示的。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 这是我们的第一个html的注释 -->
	html从入门到精通
	<hr>

	图书:&lt;&lt;HTML从入门到精通&gt;&gt;
	<hr>
	北京&nbsp;&nbsp;&nbsp;&nbsp;上海&nbsp;&nbsp;&nbsp;&nbsp;广州
	<hr>
	在html中用&amp;lt;表示<小于号
	<hr>
	"HTML语言" 或者 &quot;HTML语言&quot;
	<hr>
	版权所有 &copy; 2000-2020 高教培训
	<hr>
	&reg;
	<hr>
	&times;关闭符号
	<hr>
	&amp；<br>
	&aMp; 实体字符名称是区分大小写，大小写敏感
</body>
</html>