HTML5教程（二）- HTML语法及基本结构

1. 介绍

HTML
- 超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容（用来描述网页的语言）。
- HTML 不是一种编程语言，而是一种标记语言（是一套 标记标签 ）
超文本
- 超越文本的限制：可以加入图片、声音、动画、多媒体等内容
- 超级链接文本：可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接
- 前端人员开发代码 ----> 浏览器显示代码（解析、渲染） -----> 生成最后的 Web 页面
作用
- 读取 HTML 文档，并以网页的形式显示出它们。
- 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

2. 标签

概念
- 标签也称为标记或元素，用于在网页中标记内容
语法
- 标签使用< >为标志，在< >内部写标签名和标签属性
  html 复制代码
```

```
说明
- 标签名不区分大小写，推荐小写表示。
分类
- 双标签：成对出现，包含开始标签和结束标签。
  html 复制代码
```
<html>
	
</html>
```
- 单标签：只有开始标签，没有结束标签，可以手动添加"/"表示闭合。
  html 复制代码
```
<br>
<br/>
```
标签属性
- 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。
  html 复制代码
```
<meta charset="utf-8">
```
- 同一个标签中可以添加若干组标签属性，使用空格间隔。
  html 复制代码
```
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
```

3. 使用

创建网页文件，使用.html或.htm作为文件后缀
添加网页的基本结构
html 复制代码
```
<!doctype html>
<html>
	<head>
		<title>网页标题</title>
		<meta charset="utf-8">
	</head>
	<body>
         	网页主体内容
	</body>
</html>
```
- 专业的开发工具支持HTML代码补全功能，如VSCode中，创建好HTML文件后可以输入英文感叹号(!) 或 html:5，按tab键 补全页面基本结构(不同的开发工具补全的基本结构有细微的差别，可以忽略)。
标签嵌套
- 在双标签中书写其他标签，称为标签嵌套

嵌套结构中，外层元素称为父元素，内层元素称为子元素；
- 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
- 平级结构互为兄弟元素

4. 注释

介绍
- 用于对代码的描述与说明，便于阅读与理解
特点
- 只在编辑文档时可见，在浏览器展示页面时并不会显示
语法
html 复制代码
```

```

5. 基本结构解析

html 复制代码

<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html> 

<!-- HTML文档开始的标志 -->
<html> 
   
  <!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
  <head>
      
      <!-- 设置网页标题，显示在浏览器选项卡上方 -->
      <title>网页标题</title>
      
      <!-- 设置网页字符编码（默认） -->
      <meta charset="utf-8"> 
      
      <!-- 设置文档与外部资源的链接 -->
      <link rel="stylesheet" href="#">
      
      <!-- 设置标签的样式 --> 
      <style></style>
  </head>
   
  <!-- 网页主体部分，显示网页主要内容 -->
  <body> 
      网页主体内容
  </body>
   
<!-- 文档结束-->
</html>

说明
- <!DOCTYPE html> 声明浏览器使用哪种HTML版本（HTML5）来显示网页。
- <head lang="en"> en 就是英文网页, 定义为 zh-CN 就是中文网页（定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文）
- <meta charset="utf-8"> 便计算机能够识别和存储各种文字，常用：GB2312、GBK等