HTML总结
超文本：文字，图片，音乐，视频，程序，链接.... 一张网页上面放的就是超文本。
标签：也叫标记，html是由一堆标签组成。标签分为单标签和双标签。
单标签：只有开始标签，没有结束标签。如：
<meta>
<img>
<input>等
双标签：有开始标签，也有结束标签。如：
<p></p>
<html></html>
<head></head>
<title></title>等
一、web前端开发环境
- 编辑器：VsCode、webstrom,hbuilder
- 浏览器：谷歌浏览器
二、HTML的基本骨架
<!--这是文档声明-->
<!DOCTYPE html>
<!--这是文档的根标签-->
<html>
<!--这是网站的头部-->
<head>
<!--meta是元信息，charset叫属性名，UTF—8是属性值。-->
<meta charset="UTF-8">
<!--这是网站的标题-->
<title></title>
</head>
<!--这是主体内容-->
<body>
</body>
</html>
三、标签、属性和元素的关系
<h1 id="box">hello world!</h1>
以上代码中，
标签：<h1></h1>
开始标签：<h1>
结束标签：</h1>
属性：id="box"是属性，id是属性名，box是属性值。属性=属性名+属性值。
元素（element）：开始标签+属性+开始标签与结束标签里的内容+结束标签（即以上整行代码）
四、HTML的基本语法
HTML语法比较灵活。
- 不区分大小写
- 对于单标签，最后的/可以加，也可以不加。
- 属性值可以加引号，也可以不加引号。
需要养成的好习惯：
- 必须要有文档说明。
- 标签用小写。
- 给属性值加上引号。
- 标签要正确关闭。
- 标签可以嵌套，但不能交叉。
五、web的三层结构
- 结构层（内容层）：由HTML提供，给网页提供内容。
- 修饰层（样式层）：由CSS提供，给网页提供样式，美化网页。
- 行为层：由JavaScript提供，给网页提供行为。
六、标签语义化
不同的标签代表不同的内容。根据不同的语义使用不同的标签。也就是什么样的标签做什么样的事。标签语义化有利于SEO。
七、标签分类
（1）列表标签
- 有序列表
列表中的项目有特别的先后顺序。ol是orderlist的缩写，li是list的缩写。有序列表用的比较少。
<ol>
<li>HTML</li>
<li>CSS</li>
<ol>
ol里面的type属性。
| type属性 | 列表项目前显示效果 |
|---|---|
| type="1" | 1.2.3. |
| type="A" | A.B.C. |
| type="a" | a.b.c. |
| type="Ⅰ" | Ⅰ.Ⅱ.Ⅲ. |
| type="ⅰ" | ⅰ.ⅱ.ⅲ. |
- 无序列表
列表项与列表项之间没有一个先后顺序。默认情况下，列表项前有小圆点，这个小圆点可以用CSS去掉。ul是underlist的缩写，li是list的缩写。无序列表用的比较多。
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
- 自定义列表 对一个术语、事件、时间等的解释。
<dl>
<dt></dt>
<dd></dd>
</dl>
(2)表格标签
用于带有表格的网站或后台管理系统。
table：表格。
thead:表头（表格最顶部的一行），往往只有一个。
tr:行。
th:单元格，列，通常用于第一行。
tbody:表体，往往只有一个。
td:单元格，列，表体中每个单元格。
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
与表格标签相关的属性
| 属性 | 说明 |
|---|---|
| width | 宽度，给table加表示整体表格的宽度，默认单位px。 |
| height | 高度，给table加表示整体表格的宽度，默认单位px。 |
| align | 对齐方式，默认left,给table加表示整个表格的对齐方式。对齐方式有left，center，right。 |
| bgcolor | 背景颜色 |
| border | 边框，这个边框是table最外侧的边框，不是单元格边框。 |
| cellspacing | 单元格之间的距离。 |
| cellpadding | 单元格的内容与单元格边框的距离。 |
table可加的属性：border；width；height；align；cellspacing；cellpadding。
tr可加的属性：height（表示每行的高度）；bgcolor（表示每行的背景颜色）；align（表示每一行内容的水平对齐方式）；valign(每一行内容的垂直对齐方式。
td和tr的相关属性：
rowspan：行合并，同一列中的多行进行跨度。
colspan:列合并，同一行中多列进行跨度。
（3）表单标签
表单：主要用于收集用户输入的内容。
- form标签：就是表单的意思，作用就是用来创建一个表单。默认创建出来的form宽度是父元素的100%，高度是0。可以通过表单元素把表单的高度撑起来。
<!--form表示表单，action后引号里写的表示数据要提交的地方。-->
<form action="">
用户名:<input type="text">
</form>
- input属性：
可以根据type属性来确定显示哪一种输入框。
| 属性 | 说明 |
|---|---|
| type="text" | 单行文本输入框。 |
| type="password" | 密码输入框。 |
| type="radio" | 单选框，若想二选一需指定name是相同值。 |
| type="checkbox" | 复选框。 |
| type="file" | 文件域，文件上传。 |
| type="submit" | 将表单里的信息提交给表单属性action所指向的文件。 |
| type="image" | 图片提交按钮。 |
| type="button" | 普通按钮，没有提交功能。 |
| type="reset" | 将表单里的信息清空，重新填写。 |
| type="hidden" | 隐藏域。 |
HTML5版本中常见的type: 因兼容性问题，在不同的浏览器下，长得不一样。
| 属性 | 说明 |
|---|---|
| type="email" | 表示写的数据，需要符合邮箱的格式。 |
| type="url" | 表示写的数据，需要符合网站的格式。 |
| type="number" | 表示写的数据，必须是数字。 |
| type="range" | 不是一个输入框，是范围的选择器 |
| type="search" | 输入框后面多一个小叉（x)。 |
| type="color" | 不是一个输入框，是一个颜色的选择器。 |
- select和option
用来实现下拉列表。
<form>
<select>
<!--value表示给后端提供的数据，一般是数字或英文。-->
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">JS</option>
</select>
</form>
可以用selected属性让某个选项成为默认选中状态。例：
<form>
<select>
<option value="" selected>HTML</option>
<option value="">CSS</option>
<option value="">JS</option>
</select>
</form>
即默认选中HTML。
- textarea 文本域：可以输入多行数据。默认情况下，可以调整textarea的大小。可通过style="resize:none"设置成不可调。
<form>
<textarea rows="10" cols="50"></textarea>
</form>
（4）其他标签
- 标题标签:用来定义标题。
标题有两个标签：
<!--网站的标题-->
<title></title>
<!--内容标题-->
<hn></hn>
h1定义最大标题。h是headline的缩写。基本上任何一个网站都有，标题标签是有利于SEO。
场景：新闻，博客，文章的标题 ，网站的logo 。
- 段落标签
p标签，p是paragraph的缩写。
场景：表示一段话；分割一段内容。
- 超链接标签
分为站内链接，站外链接和锚点链接。
超链接标签常见的属性：
| 属性 | 说明 |
|---|---|
| href | 用于链接到某个资源。 |
| target="_blank" | 表示我们在打开一个页面时，在新窗口中打开。 |
| target="_self" | 表示我们在打开一个页面时，在当前窗口中打开。 |
| title | 当鼠标放到链接上时，显示出title对应的属性值。 |
| name | 用于设置锚点。 |
<!--站外链接-->
<a href="http://www.baidu.com">百度一下</a>
<!--站内链接。./表示当前目录下，../表示上一级目录。-->
<a href="./about.html">关于我们</a>
<!--锚点连接：先打锚点，然后连接到锚点-->
<!--打锚点-->
<a name="xxx"></a>
<!--连接锚点-->
<a href="#xxx">连接到某个锚点</a>
<!--特殊的锚点：top,不用设置锚点，可直接连接。-->
<a href="#top">返回顶部</a>
<!--top也可以省略不写 -->
<a href="#">返回顶部</a>
- 图像标签
用来在浏览器上显示一张图片。
<!--src表示图片路径。alt表示当图片出问题时，显示alt里面的内容，有利于SEO。-->
<img src="" alt="">
- div和span
用来组织划分结构，没有任何语义。主要是配合CSS完成布局。div是核心，很重要。
- iframe标签
浮动框架，内嵌框架。
<iframe id="fancybox-frame" name="fancybox-frame1581561898648" frameborder="0" scrolling="no" hspace="0" src="http://i.tianqi.com/index.php?c=code&a=getcode&id=38&h=60&w=610"></iframe>
这是一个嵌入天气预报的代码。
scrolling="yes"可以滚动。scrolling="no"不可以滚动。
八、块级标签与行内标签
块级标签（男标签）：独占一行。例:hn,p,div,form等。
行内标签（女标签）：并排显示。例：input，a,img,span等。img和input是特殊的行内标签，叫行内块。
九、一些快捷键
CTRL+B：折叠或展开项目目录视图。
CTRL+/：注释。
shift+alt+向下的箭头：复制上一行。
shift+alt+F:格式化代码。
按住鼠标中键下拉：选中多行。
CTRL+鼠标中键滚动：放大或缩小。
