@TOC
第一章 HTML概述
1.1、什么是HTML
HTML（超文本标记语言）是用来描述网页的一种标记语言，不同于使用脚本来执行函数的脚本或编程语言，标记语言使用标记来标识内容。
1.2、HTML文件
HTML文件是文本文件，所以你可以使用任何文本编辑器来创建你的第一个网页，有一些非常好的HTML编辑器可用，你可以选择适合你的HTML编辑器,如vscode，webstorm等
附vscode插件推荐：
第二章 HTML语法
2.1、基本结构
| 标签名 | 定义 | 说明 |
|---|---|---|
| < html>< /html> | HTML标签 | 页面中的最大的标签，我们称为根标签 |
| < head>< head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| < title>< /title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| < body>< /body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
<!--文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页-->
<!DOCTYPE html>
<!--lang:语言种类,用来定义当前文档显示的语言。
1.en定义语言为英语 2.zh-CN定义语言为中文
简单来说，定义en就是英文网页，定义为zh-CN就是中文网页
-->
<html lang="en">
<head>
<!--
1、字符集（Character set)是多个字符的集合，以便计算机能够识别和存储各种文字。
2、在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。3、charset常有的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：下面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8",不要写成"utf8"或"UTF8"。 -->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
2.2、语法规范
- HTML中不区分大小写，但是我们一般都使用小写
- HTML中的注释不能嵌套
- HTML标签必须结构完整，要么成对出现，要么自结束标签
- HTML标签可以嵌套，但是不能交叉嵌套
- HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
第三章 HTML标签
3.1、标题标签
HTML包括六个级别的标题，它们根据重要性排序:<h1><h2><h3><h4><h5><h6>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
3.2、段落标签
p标签用于定义段落，它可以将整个网页分为若干个段落 。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
<p>这是一个段落</p>
3.3、换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文本强制换行显示，就需要使用换行标签< br/>。
特点：
- < br/>是个单标签。
- < br/>标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
<br/>
3.4、格式化文本
在网页中，有时需要为文字设置粗体、斜体、下划线、删除线等效果，这时就需要用到HTML中文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
<p>这是<strong>加粗</strong>文本</p>
<p>这也是<b>加粗</b>文本</p>
<p>这是<em>倾斜</em>文本</p>
<p>这也是<i>倾斜</i>文本</p>
<p>这是<del>删除线</del>文本</p>
<p>这也是<s>删除线</s>文本</p>
<p>这是<ins>下划线</ins>文本</p>
<p>这也是<u>下划线</u>文本</p>
3.5、div和span标签
div和span标签是没有语义的，它们就是一个盒子，用来装内容的。（div是division的缩写，表示分割、分区；span意为跨度、跨距）
<!--div标签用来布局，但是现在一行只能放一个div。大盒子-->
<div>这是头部</div>
<!--span标签用来布局，一行上可以多个span。小盒子-->
<span>今日价格</span>
3.6、图像标签
在HTML标签中，img标签用于定义HTML页面中的图像,它只包含属性，并且没有结束标记。 可以使用src属性定义图像的URL（地址）。
图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式，即key="value"的格式，属性=“属性值”。
<!--src是img标签的必须属性，它用于指定图像文件的路径和文件名。
alt是替换文本，图像不能显示时的文字
title是提示文本，鼠标放在图像上，显示的文字-->
<img src="图像URL" alt="一张图片" />
1.相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，简单来说，图片相对于HTML页面的位置
2.绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
3.7 链接标签
1. 链接的语法格式
在HTML标签中，< a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
超链接的语法格式如下：
<!--
href 用于指定链接的url地址，（必须属性）当标签应用href属性时，他就具有了超链接的功能
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式
-->
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
2. 链接分类
（1）外部链接：例如：
<a href="http://www.baidu.com">百度</a>
（2）内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。例如：
<a href="index.html">首页</a>
（3）空链接：没有确定链接目标。例如：
<a href = "#"> 首页 </a>
（4）下载链接：如果href里面地址链接的是 文件 .exe 或 zip 等压缩包的形式，会下载这个文件。
<a href=
最低0.47元/天 解锁文章
1731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
