一、入门知识
二、HTML（超文本标记语言）知识
1.书写规范
▲ html标签分为双标签和单标签
双标签书写方法：<标签名> 内容主体 </ 标签名>
开始标签 结束标签
单标签书写方法：<标签名> 自成一体无法包裹内容
▲ 标签的属性
属性写在开始标签和单标签的标签名后面，属性是一个键值对 X="Y" ，一个标签可以有多个 属 性，标签名 属性 和属性之间用空格隔开。
▲ 注释写法
手动注释：<!-- 需要注释的内容 -->
vs code中的注释快捷键：ctrl + /
2.HTML标签
<!DOCTYPE html>
<!-- 文档声明标签，告诉浏览器当前为文档的版本，此种写法是H5的声明写法 -->
<html lang="en">
<!-- 网页的语言标签，说明该网站是英文网站，还是中文网站 lang="en" 或者lang="zh"
作用：搜索引擎归类+浏览器翻译 -->
<html>
<head>
<!-- head标签中的内容不在网页内显示，里面的内容是给浏览器和搜索引擎看的 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- meta标签主要用于设置网页中的一些元数据，元数据不是给用户看的
meta的属性： 1. charset 指定网页的字符集
2. name 指定数据的名称
3.content 指定数据的内容
4.http-equiv
5.url
1.charset的属性值：字符集的名称。
补充内容：进制： 十进制：满十进一
计数：0 1 2 3 4 5 6 7 8 9 10
单位数字：10个（0~9）
二进制：满二进一
计数：0 1 10 11 100 101 110 111
单位数字：2个 （0 1）
八进制：满8进1
十六进制：满16进1
计数：0 1 ...9 a b c d e f g
单位数字：16个
内存：可以把内存想象成一个有很多个小格子的容器，每一个小格子里面只能放一个0或者1，
这样的小格子的内存称为1bit。
字符编码：所有数据在计算机中存储时都是已二进制形式存储的，文字也不例外。
数据在存储到内存中时转换为二进制的过程叫做编码。
当用户读取数据时，计算机又会把二进制转换成字符，这个过程叫做解码。
字符集：解码和编码需要参考一定的准测，就像电报读取信息时要遵照电报符文一样。
这个准则就叫做字符集。
常见的字符集：ASCII 英国美国用的
ISO88591 欧洲用的
GB2312 中国痛的
GBK 中国用 GB2312的升级版
UTF-8 万国码
2.name和content的属性值：
name=“keywords” content="网站的关键字，可以同时有多个，关键字之间用，隔开即可"
显示位置：不在搜索结果中显示，只是未搜索引擎体提供关键字
name=“descroption” content="针对网站的描述内容"
显示位置：显示在搜索引擎的搜索结果中
4.http-equiv -->
<link rel="shortcut icon" href="ico图标文件路径" type="image/x-icon" >
<!--用来设置ICOn图标 title旁边的小图标 上边是完整写法 简便写法是rel=“icon" herf="文件的路径"
-->
<title>Document</title>
<!-- 网页的标题，title里面的内容会作为搜索结果上的超链接的文字显示 -->
<!-- 补充：seo：搜索引擎优化，让网站在搜索结果中排名靠前
方法：竞价排名
将网页制作成.html后缀
标签语义化（在合适的地方使用合适的标签）-->
</head>
<body>
<!--
1.块元素——标题标签: h1 ~h6一共六级标签，从1-6重要性依次递减，独占一行。H1在网页中的重要性仅次于title标签，搜索引擎搜索完
title中的关键字后还会搜索h1中的。
开发中常用h1-h3！
-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--
2.标题组标签：当有两个有关联的标题写在一起时，可以用hgroup将两个标题包裹起来，丰富语义
-->
<hgroup>
<h3></h3>
<h4></h4>
</hgroup>
<!--
3.块元素-段落标签
-->
<p>neirong</p>
<!--
4.块元素-换行标签 让文字强制换行 是一个单标签
-->
<br>
<!--
5.块元素-水平线标签 一条水平线的效果
-->
<hr>
<!--
6.文本加粗标签：表示强调，重要内容
-->
<strong>wenben</strong>
<!--
7.倾斜标签：表示语音语调的加重
-->
<em>倾斜</em>
<!--
8.下划线标签:给文字下面加一条线
-->
<ins>下划线标签</ins>
<!--
9.删除线标签：给文字中间加上一条线，表示删除
-->
<del>删除线标签</del>
<!--
10.长引用标签：引用的内容比较长
-->
<BLOCkquote>长引用</BLOCkquote>
<!--
11.短引用：引用的内容比较短。
-->
<q> 短引用</q>
12.图片标签：向当前页面中引入一个外部图片，是一个自结束标签，也就是单标签。
是一个行内块元素，一行中可以有多个，可以设置宽高。
代码：<Img src="图片的路径"
alt="图片的描述，默认情况下不会显示，只有图片加载不出来时会显示。 搜索引擎会根据图片的描述来识别图片，如果不写就不会被搜索识别"
width="图片的宽度，单位是像素，一般不用这个属性来设置宽度，宽度和高度属于样式，用CSS设置"
height="图片的高度，高度与宽度若只设置一个，另一个会等比例缩放"
title="鼠标悬停时显示的文字"
>
<!--注意：一般情况下，PC端不建议修改图片大小，需要多大就裁多大
但是在移动端，经常需要对图片进行缩放
图片的格式：
jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示图片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具有其他图片格式的所有优点，而且文件还特别小
- 最大的缺点：兼容性不好
选用原则：效果一样，选小的
效果不一样，选效果好且小的
-->
13.音频标签： 用来向页面内引入一个外部的音频文件
音频和视频引入时，默认情况下不允许用户自己控制播放和停止
所以如果不设置controls属性，就没办法播放视频和音频。
代码：<audio src="音频的路径"
controls(播放的控件，如果不设置该属性，则看不见音频播放的窗口)
autoplay（音频文件是否自动播放，大部分浏览器不支持）
loop（设置是否循环播放） >
</audio>
<!--
补充：目前文件仅支持三种格式，MP3/WAV/OGG，不同浏览器支持的文件类型不同
解决方法：用source来指定文件路径
代码： <audio controls>
对不起，您的浏览器不支持播放音频，请升级浏览器！
<source src="audio.mp3">
<source src="audio.ogg">
<source src="audio.wav">
<embed src="audio.mp3" type="audio/mp3" width...>
</audio>
第一个格式不支持，就会读取第二个格式，第二个格式不支持就会读取第三个支持，
IE8中所有的都不支持，所以就会读取第4个，第四个可以播放，解决了ie浏览器的兼容问题。
都显示不出来时，会显示文字~
-->
14.视频标签：用来向页面引入一个外部视频
代码：<video src="" controls autoplay loop>
</video>
<!--
补充：1.谷歌中可以在autoplay后面 增加 muted属性 实现谷歌网页的自动静音播放
2.不写controls不可以播放视频 但是能看到视频的组件
3.对于视频格式问题与音频格式问题解决方法一致
-->
15.链接标签：可以让我们从一个页面跳转到另一个页面或者页面中的其他位置
超链接是一个行内元素，A标签里面可可以嵌套除自身之外的任何标签
双标签
代码：<a href="超链接的路径" target="设置是在自身上跳转，还是生成新页面。取值：_self(默认值) _blank">
</a>
<!--
补充：超链接不仅能跳转到指定网址，也可以在当前页面随意跳转。
方法：
- href="#" 跳转到页面顶部
- href="#目标元素的id值" 就可以跳转到指定的元素上
-->
16.列表标签：分为有序列表，无序列表，自定义列表。列表之间可以互相嵌套
- 有序列表：列表中的每一项有顺序之分，默认样式在每一项的前面有序号，一般自带的样式直接设置没，再用CSS统一设置样式。
清除样式后的有序列表和无序列表没有区别。
代码：<ol>
<li></li>
<li></li>
</ol>
<!-- ol表示整体，li表示每一项
ol只能包裹li li能包裹任何内容 表格嵌套也是嵌套在li里面 -->
- 无序列表：列表中的每一项没有顺序之分，默认样式是每一项前面有小原点。
代码： <ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul表示整体，li表示每一项
ul只能包裹li li能包裹任何内容 表格嵌套也是嵌套在li里面-->
- 自定义列表：DT表示被定义的主题，dd表示定义内容
代码：<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
<!-- dl表示整体，dt表示定义的主题，dd表示定义的内容
dl只能包裹dd dd能包裹任何内容 表格嵌套也是嵌套在dd里面-->
17.表格标签：table表示整体 tr表示每一行 td表示每一个单元格
代码：
- 基本写法：
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- 进阶写法：<table>
<thead>
<caption></caption>
</thead>
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<!-- 补充：
1.给表格整体设置属性时，属性值在table的开始标签中书写。
2.thead、tbody、tfoot是表格的结构标签，作用是突出表格的结构，使语义更加清晰。（可以省略）
3.caption是表格标题标签，作用是把文字在表格上面居中显示，无加粗效果。
4.th是表头单元格标签，与td的书写位置一致，显示效果为加粗。
5.合并单元格：
- 步骤：明确合并哪几个单元格
通过左上原则，确定保留哪个单元格，删除哪个单元格
给保留的单元格td设置属性： rowspan="合并单元格的数量" 跨行合并=合并在不同一行内的单元格
colspan="合并单元格的数量" 跨列合并=合并在同一行的单元格
如果写了表格的结构标签，那么只能在统一结构内合并单元格，如果没写则不受影响。
-->
18.表单标签：
input系列标签: 单标签
<form action="">
- 单行文本框 <input type="text" placeholder="占位符，提示用户作用，例如：请输入信息">
- 密码框 <input type="password" placeholder="占位数，提示用户请输入密码"> 密码框内输入的内容会用小圆点显示
- 单选框 <input type="radio" name="性别" check>
<input type="radio" name="性别" >
<!--用name属性来为单选框分组。同一个组的只能选中一个
想要哪个选项是默认选中的，就给哪个选项设置check属性即可 ，复选框也相同 -->
- 复选框 <input type="checkbox" check >
- 日期框 <input type="date">
-文件选择按钮 <input type="file" multiple>
<!--multiple属性设置后可以选择多个文件上传，不设置就默认选择一个 -->
- 按钮标签 <input type="submit"> 提交按钮，提交信息给后端
<input type="reset"> 重置按钮
<input type="button" value="给按钮设置名字"> 普通按钮
<!-- 想要这些提交，重置按钮起作用，需要用form标签把所有表单标签包起来才可以 -->
</form>
button按钮标签
- <button type="按钮类型">按钮名字</button>
<!-- 按钮的类型与input按钮系列一致，button不同的地方是：双标签，可以直接设置按钮中的内容
想要按钮起作用，同样需要用form把所有 表单标签包起来 -->
select下拉菜单标签
- <select >
<option selected >上海</option>
<option >北京</option>
<option >杭州</option>
</select>
<!-- select是整体 option是每一项 selected是默认选中属性 -->
文本框标签
- <textarea name="" id="" cols="30" rows="10"></textarea> 可以用右下角拖动大小
label标签（把按钮放大，点文字也能选中标签）
<!-- - 方法一：在给表单标签设置id值，label的for属性=表单标签的id值即可 -->
<input type="radio" id="a"> <label for="1">敲代码</label>
<!-- 方法二：用label标签把表单和文本都包裹住 ，再把for属性删掉-->
<label >
<input type="radio">敲代码
</label>
<!--
补充：
1.布局标签：
- 有语义的布局标签
<header></header> 网页头部
<nav></nav> 网页导航
<main></main> 网页主体，一个网页只能有一个主体
<footer></footer> 网页底部
<aside></aside> 网页侧边栏
<section></section> 网页区块
<article></article> 网页文章
特点：独占一行
因为是新出的，很多浏览器还不兼容，所以用的少。
- 没有语义的布局标签
<div></div> 独占一行
<span></span> 行内块元素，一行中可以存在多个
2.字符实体：由于浏览器的空格合并现象
结构：&英文;
空格
<； 小于
©
....
3.表单中的name和value属性
name="value属性值"
用户填写的是value
为了方便后端识别
我们需要在name中设置，value中内容的意思
用户名="小花猫"
-->
</html>
