《网页前端开发之HTML5》 -02自结束标签和注释、标签的属性、进制及字符编码、网页基本结构

原创已于 2022-08-27 19:07:54 修改 · 595 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5

于 2022-08-27 18:57:25 首次发布

《网页前端开发之HTML5》专栏收录该内容

5 篇文章

订阅专栏

本文为前端基础教程的精华总结，涵盖HTML基本语法、标签使用、网页结构搭建等内容，并介绍了不同进制与字符编码的基础知识。

本文为b站视频《尚硅谷前端基础教程（含css3+html5）》课堂笔记整理，笔记以代码形式呈现，包含网页渲染后截图并整理成文字版本便于观看。

一、小王做的第一个简陋的网页

网页源代码：

<html>
	<head>
		<title>小王做的第一个简陋的网页</title>
	</head>

	<body>
		<h1>我是一级标题</h1>
		<h2>我是二级标题</h2>
		<h3>我是三级标题</h3>
		<h4>我是四级标题</h4>
		<h5>我是五级标题</h5>
		<h6>我是六级标题</h6>

		<p1>我是第一段正文，第一段正文，第一段正文，第一段正文，第一段正文，第一段正文，第一段正文，第一段正文，第一段正文，第一段正文，第一段正文，第一段正文，第一段正文。</p1>
		<P2>我是第二段正文，第二段正文，第二段正文，第二段正文，第二段正文，第二段正文，第二段正文，第二段正文，第二段正文，第二段正文，第二段正文，第二段正文，第二段正文。</p2>
	</body>
</html>

浏览器渲染后：

二、自结束标签和注释

网页源代码：

<html>
    <head>
        <title>自结束标签和注释</title>
    </head>
    <body>
        <h1>这是我的第二个网页</h1>
        <!--
        HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，
            但是可以在源码中查看注释，注释用来对代码进行解释说明的
            开发中一定要养成良好的编写注释的习惯，注释要求简单明了

        注释还可以将一些不希望显示的内容隐藏

        注释不能嵌套

        标签一般成对出现，但是也存在一些自结束标签 
        -->
        <img>
        <img/>
        <input>
        <input/>

    </body>
</html>

浏览器渲染后：

内容概要：

1. 注释

（1）格式：

（2）快捷键：Ctrl + /

（3）用途：

HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的。

开发中一定要养成良好的编写注释的习惯，注释要求简单明了

注释还可以将一些不希望显示的内容隐藏

注释不能嵌套

2. 自结束标签

标签一般成对出现，但是也存在一些自结束标签（也可以写结束标签），例如：

<img>

<img/>

<input>

三、标签的属性

网页源代码：

<html>
	<head>
		<title>标签的属性</title>
	</head>
	<body>
		<!-- 
			属性,在标签中（开始标签或自结束标签）还可以设置属性，结束标签不可设置
				属性是一个名值对（X=Y）
				属性用来设置标签中的内容如何显示
			
				属性和标签名或其他属性应该使用空格隔开
			
				属性不能瞎写，应该根据文档中的规定来填写，
				有些属性有属性值，有些没有，如果有属性值，应当用引号引起来（单双均可，择其一）
			
			
		-->
		<h1>这是我的<font color="red" size="50">第三个</font>网页</h1>
	</body>
</html>

浏览器渲染后：

内容概要：

1. 属性

（1）含义及格式

在标签中（开始标签或自结束标签）还可以设置属性，结束标签不可设置

属性是一个名值对（X=Y）

属性用来设置标签中的内容如何显示

属性和标签名或其他属性应该使用空格隔开

（2）注意：

属性不能瞎写，应该根据文档中的规定来填写，

有些属性有属性值，有些没有，如果有属性值，应当用引号引起来（单双均可，择其一）

四、进制及字符编码

网页源代码：

<!doctype html>
<html>
	<head>
	<!-- 可以通过meta标签来设置网页的字符集，避免乱码问题 -->
		<meta charset = 'utf-8'>
		<title>网页的基本结构</title>
	</head>
	<body>
		<!--
		迭代
			网页的版本
				HTML4
				XHTML2.0
				HTML5
				...
				
			文档声明（doctype）
				- 文档声明用来告诉浏览器当前网页的版本
				- html5的文档声明（极其简单），写在源代码最最上面
				<!doctype html>
				<!Doctype Html>
				
		进制：
			十进制（日常使用）
				- 特点：满10进1
				- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20
				- 单位数字：10个（0~9）
				
			二进制（计算机底层的进制）
				- 特点：满2进1
				- 计数：0 1 10 11 100 101 110 111
				- 单位数字：2个（0、1）
				- 扩展：
					- 所有数据在计算机底层都会以二进制的形式保存
					- 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0
					  这一个小格子在内存中称为1位（bit）
					  
					  8bit = 1byte（字节）
						  没有办法直接操作1bit，最小操作1byte
					  1024byte = 1kb（千字节）
					  1024kb = 1mb（兆字节）
					  1024mb = 1gb（吉字节）
					  1024gb = 1tb（特字节）
					  1024tb = 1pb
					  
			八进制（很少用）
				- 特点：满8进1
				- 计数：0 1 2 3 4 5 6 7 10 11 12 13 14 ... 17 20
				- 单位数字：8个（0~7）
				
			十六进制（一般显示一个二进制数字时，都会转换为十六进制）
				- 特点：满16进1
				- 计数：0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 ... 19 1A 1B ...
				- 单位数字：16个（0~F）
				
		字符编码
			王知之 -> 10001001111101001010001011010（编码）
			10001001111101001010001011010 -> 王知之（解码）
			
			- 所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外，
				所以一段文字在存储到内存中时，都需要转换为二进制编码
				当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读
				
			- 编码
				将字符转换为二进制码的过程称为编码
			- 解码
				将二进制码转换为字符的过程称为解码
			- 字符集（charset）
				编码和解码所采用的规则称为字符集
			- 乱码问题
				如果编码和解码所采用的字符集不同就会出现乱码问题
			- 常见的字符集：
				ASCII 美国人~128个
				ISO88591 欧洲~256个
				GB2312 （国标）中国
				GBK （国标扩）中国
				*UTF-8 万国码 包含了世界上所有国家的符号，在开发时均使用UTF-8
		-->
	</body>
</html>

浏览器渲染后：

内容概要：

1. 迭代

（1）网页的版本

HTML4

XHTML2.0

HTML5

...

2. 文档声明（doctype）

（1）用途：文档声明用来告诉浏览器当前网页的版本

（2）格式：html5的文档声明（极其简单），写在源代码最最上面

<!doctype html>

<!Doctype Html>

3. 进制：

（1）十进制（日常使用）

- 特点：满10进1

- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20

- 单位数字：10个（0~9）

（2）二进制（计算机底层的进制）

- 特点：满2进1

- 计数：0 1 10 11 100 101 110 111

- 单位数字：2个（0、1）

- 扩展：

- 所有数据在计算机底层都会以二进制的形式保存

- 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0

这一个小格子在内存中称为1位（bit）

8bit = 1byte（字节）—— 没有办法直接操作1bit，最小操作1byte

1024byte = 1kb（千字节）

1024kb = 1mb（兆字节）

1024mb = 1gb（吉字节）

1024gb = 1tb（特字节）

1024tb = 1pb

（3）八进制（很少用）

- 特点：满8进1

- 计数：0 1 2 3 4 5 6 7 10 11 12 13 14 ... 17 20

- 单位数字：8个（0~7）

（4）十六进制（一般显示一个二进制数字时，都会转换为十六进制）

- 特点：满16进1

- 计数：0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 ... 19 1A 1B ...

- 单位数字：16个（0~F）

4. 字符编码

（1）举例

王知之 -> 10001001111101001010001011010（编码）

10001001111101001010001011010 -> 王知之（解码）

（2）解释

- 所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外，

所以一段文字在存储到内存中时，都需要转换为二进制编码

当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

（3）编码

将字符转换为二进制码的过程称为编码

（4）解码

将二进制码转换为字符的过程称为解码

（5）字符集（charset）

编码和解码所采用的规则称为字符集

（6）乱码问题

如果编码和解码所采用的字符集不同就会出现乱码问题

（7）常见的字符集：

ASCII 美国人~128个

ISO88591 欧洲~256个

GB2312 （国标）中国

GBK （国标扩）中国

*UTF-8 万国码包含了世界上所有国家的符号，在开发时均使用UTF-8

五、网页基本结构

网页源代码：

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写根元素的里面 -->
<html>

		<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
		<head>
		
			<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符串，避免乱码问题 -->
			<meta charset = 'utf-8'>
			
			<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
			<title> 网页的标题</title>
		
		</head>
		
		<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
		<body>
			
			<!-- h1是网页的一级标题 -->
			<h1> 网页的大标题 </h1>
		
		</body>
		
</html>

浏览器渲染后：