1.HTML是什么？
HTML是用来描述网页的一种语言
- HTML指的是超文本标记语言
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
- HTML使用标签来描述网页
2.HTML基本语法与关系
基本语法：
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <html>和</html>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 有些特殊的标签必须是单个标签，例如<br/>,<hr/>，我们称为单标签。
标签关系:
可以分为两种：包含关系与并列关系
包含关系：
//包含关系又称父子关系
<html>
<haed><head>
</html>
并列关系：
<html>
//并列关系又称兄弟关系
<head></head>
<body></body>
</html>
3.HTML初始结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
结构解析：
<!DOCTYPE>声明必需是在HTML文档的第一行，位于<html>标签之前
<!DOCTYPE>声明不是HTML的标签，它是告诉浏览器要按照哪一种HTML标准来进行编写页面
<!DOCTYPE html>告诉浏览器按照最新的HTML5的标准进行解析页面
常用的DOCTYPE声明：
| HTML5 | XHTML 1.1 |
| <HTML 4.01 Strict> | <XHTML 1.0 Strict> |
| <HTML 4.01 Transitional> | <XHTML 1.0 Transitional> |
| <HTML 4.01 Frameset> | <XHTML 1.0 Frameset> |
<html lang="en">lang="en"意思是告诉浏览器我们这短HTML代码里面包含的语言是英文的
| "en" | 英文 |
| "zh-CN" | 中文 |
| "ja-jp" | 日文 |
| ...... | |
<head>部分：
<head>是所有头部标签的容器，以下标签都可以添加到 head 部分:
<title><base><link><meta><script>以及<style>
title：
网页的标题
<title>我的第一个网页</title>
title实例：
meat：
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务
编码的设置
<meta charset="UTF-8">
IE的设置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
显示的设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
便于搜索引擎优化的
<meta name="title" content="HTML,CSS,Javascript">
页面的描述 便于搜索引擎优化的
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
关键字的指定便于搜索引擎优化的
<meta name="keywords" content="HTML, CSS, XML" />
页面作者
<meta name="author" content="相遇是春风十里">
页面缓存的设置
<meta http-equiv="Cache-Control" content="max-age=10080">
<title><base><link><script><style>
样式文件
<style></style>
脚本文件
<script></script>
引入外部的样式文件
<link rel="stylesheet" href="">
网页标题图标
<link rel="icon" href="favicon.ico" type="image/x-icon">
<body>部分：
<body>
定义了 HTML 文档的主体。
</body>
4.HTML常用标签
标题
HTML提供了6个等级的标题，<h1> — <h6>
注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认的间距
段落<P>标签
<body>
<P>我是一个段落<p>
<P>我是一个段落<p>
<P>我是一个段落<p>
<body>
P标签网页效果：
注：段落与段落之间有距离的存在
换行<br/>标签
没有内容的 HTML 元素被称为空元素。
<br/>就是没有关闭标签的空元素（<br/>标签定义换行）。
对需要换行的文本进行强制换行
<body>
我是一个换行点<br/>我是换行
<body>
br标签网页效果：
水平线<hr/>标签
<hr/>标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
提示：使用水平线 (<hr/>标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
文本格式化标签
示例:当对一篇文章进行加粗，倾斜，删除，下划线，上标注标注和下标注标注的时候，进行文本格式化。
| 描述 | 标签 | 备注 |
| 加粗 | <b></b>或<strong></strong> | 推荐使用strong加重加粗定义 |
| 倾斜 | <i></i>或<em></em> | 推荐使用em加重倾斜定义 |
| 删除 | <s></s>或<del></del> | 推荐使用<del>，不赞成使用<s> |
| 下划线 | <u></u> | 推荐使用样式（style）代替。 |
| 下标 | <sub></sub> | 标注解释 |
| 上标 | <sup></sup> | 标注解释 |
特殊字符
一些HTML页面中有一些特殊的符号显示不出来就需要用到我们的特殊字符来进行转义，让它显示在我们的页面中。
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格（受字体影响） | | |
| 空格（基本不受字体影响，一个中文宽度） |   | |
| < | 小于号 | ⁢ |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | ®商标 | ® |
| ™ | ™商标 | ™ |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2 | ² |
| ³ | 平方3 | ³ |
注：一般空格，大于号，小于号，和号用的多需要背下
5.div和span标签
div
div标签，没有具体的含义，就是一个盒子用来划分页面的区域，独占一行。
span
span标签，与div一样没有实际意义，主要应用在对文本独立修饰的时候，内容有多宽就占用多宽的空间距离。
与div标签的区别是：一行可以并存多个span标签，不会破坏文本结构。div相当于是一个大盒子，span相当于是小盒子。
6.图片标签的路径
img标签
<img>是一个单标签,用来加载路径上的图片到页面上。
src是img标签的一个属性，url则是图片所在位置的路径
<img src="url">
图片标签属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必需 |
| title | 文本提示 | 鼠标悬停在图片上显示的提示信息 |
| alt | 文本提示 | 图片不显示或加载失败的提示信息 |
| width | 宽度 | 设置图片宽度 |
| height | 高度 | 设置图片高度 |
| border | 边框 | 设置图片边框粗细 |
路径分为相对路径和绝对路径
相对路径
-
图片文件相当于HTML文件在同一文件夹下，直接书写目标文件名+扩展名
<img src=“图片的名称.gif”>
<img src="./图片的名称.gif" （./表示当前路径下的图片）> -
图片文件的父文件夹相当于HTML文件在同一文件夹中,带上父文件夹名称+目标文件名+扩展名
<img src=“web/code.png”>
<img src="./web/code.png"> -
图片文件和HTML文件不在相同父文件夹之中，需要先用…/返回上一级目录在带上图片父文件夹名称+目标文件名+扩展名
<img src="…/web/code.png">
绝对路径
是指文件在硬盘上真正存在的路径，在目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如："C:\csdn\html\img\code.gif"或图片完整的网络地址
注意：绝对路径在开发中很少去使用，在自己的计算机上浏览可能会一切正常，但上传到web服务器就有可能导致图片无法正常显示。绝对路径不区别斜杠的方向
7.超链接标签
实现不同页面的跳转。
<a hrel="路径" title="鼠标悬停之后提示的信息" target="规定在何处打开文档">内容</a>
外部链接
例子：
<a href="https://www.csdn.net/">CSDN</a>
当点击该链接返回后，因为已经跳转过该链接，就从蓝色改成了紫色
在点击超链接跳转时，会发现是在当前页面跳转，我的一个网站直接跳到了CSDN的官网
当不想在当前页跳转时，使target属性
<a href="https://www.csdn.net/" target="blank">CSDN</a>
点击跳转时，会重新打开一个窗口，而不是在当前页面跳转
target属性：
| 属性 | 属性值 |
|---|---|
| self | 默认值 |
| blank | 新窗口打开 |
内部链接
当两个文件在同一个目录下
与图片路径的规范是相同的
<a href="web.html"><a/>
图片链接
<a href="https://www.csdn.net/">
<img src="./csdn.png">
<a/>
使用超链接包在图片的外面，就可以使图片也有了跳转的能力。
书签链接（锚链接
