注：vscode之中输入英文感叹号可以直接生成网站骨架
!DOCTYPE
:文档类型申明标签，用于使浏览器明白所使用的的HTML版本（此代码必须位于页面的第一行）
这个代码不属于HTML标签，它是文档类型的申明标签
（只有处于之间的标签才是HTLM标签）
lang 语言种类
en：定义网页语言为英语
zh-CN：定义网页语言为中文
fr：法文
（定义为英文也可以写英文，定义为中文也可以写英文，但是最好匹配来写）
字符集
字符集：存储各种各样的文字
还有GBK、BIG5、UTF-8（最常用，被称为万国码）
这一段代码必须要写否则会引起乱码的情况
以上的三个都必须要写（但一般会自动生成）
第一节 HTML常用的标签
一、语义标签
根据标签的语义可以在合适的地方添加上合适的标签
1、标题标签
<h1>我是一级标题标签</h1>
<h2>我是二级标签</h2>可以由1到6产生6级标签
可以使得内容变大变粗（由一级到六级一次减弱）
且文字都显示在一行
2、段落标签和换行标签
<p>我是段落标签</p>不加段落标签会无视文字之间的空格和回车
文本之中的文字会根据浏览器的宽度改变而改变
在HTML之中文本只有显示到了边界之后才会进行换行，如果需要强制换行则需要使用下面的换行标签（break的缩写）
<br />注意：这是一个少见的单标签
注意：换行标签进行换行之后文字之间间隔较小，段落标签两行之间间隔较大
3、文本格式化标签
为文字设置粗体、斜体、删除线、下划线等效果
（1）加粗
<strong>我是加粗的文字</strong>
<b>我也是加粗的标签</b>（2）斜体
<em>我是倾斜的效果</em>
<i>我也是斜体</i>（em是emphasize v.强调着重的简写）
（3）删除线
<del>我是删除线</del>
<s>我也是删除线</s>（4）下划线
<ins>我是下划线</ins>
<u>我也是下划线</u>（ins是insert v.插入的缩写）
4、div和span标签
div和span标签是没有语义的，他们就是一个盒子（网站上的一个一个块），是用来装内容的
<div>这是头部</div>
<span>今日价格</span>（div是division的缩写表示分割、分区
span意为跨度、跨距）区别：
div标签一个独占一整行（大盒子）
span标签一行可以放多个（小盒子）
二、图像标签和路径（重点）
（1）图像标签（单标签）
<img src="图像URL"/>image标签的属性:
1、src
src是图像标签的必须属性，指定图像的路径和名称（注意看绝对路径和相对路径）
（source资源、源头的缩写）
2、alt
当图片无法正常显示时，显示这个文本
<img src="图像URL" alt="替换文本"/>（alter v.改变，改建，阉割的缩写）
3、title
提示文本：当鼠标放到图片上提示的文字
<img src="图像URL" title="文本"/>4、width
设定图像的宽度
<img src="图像URL" width="像素"/>5、height
设定图像高度
<img src="图像URL" height="像素"/>注意：当只设置高度或者宽度的时候图片在网页上的显示是等比例缩放的
6、border
设定图像边框的宽度
<img src="图像URL" border="像素"/>边框的颜色默认为黑色
注意：<1>图像标签可以有多个属性，必须写在标签名的后面
<2>属性之间不分先后顺序，标签名与属性，属性与属性之间用空格隔开
<3>属性采取键值对的格式，即key="value"的格式，即属性=“属性值”
（2）路径
1、目录文件夹和根目录
目录文件夹：实际工作中我们需要新建一个目录文件夹以此来存放我们的建站所需的图片与HTML文件
根目录：打开目录文件的第一层
2、在vscode之中可以直接打开目录文件夹（文件—>打开文件夹，或者直接拖拽文件夹到软件界面）
3、相对路径
已引用文件所在位置为参考基础而建立出来的目录路径（即图片相对于HTML页面的位置）
<1>同一级路径：图片与HTML文件处于同一文件夹之下：
<img src="图像名.jpg" /><2>下一级路径：图片在HTML文件所处文件夹内的一个文件夹内：
<img src="下一级文件夹名/图像名.jpg" /><3>上一级路径：图片与HTML文件所处的文件夹处于同一层
<img src="../图像名.jpg"/>注意：这里的<2>、<3>是可以递推使用的：
如上上级路径：
<img src="../../图像名.jpg"/>4、绝对路径（使用较少）
指目录下的绝对位置（从盘符开始）
注意：绝对路径和相对路径的斜杠是相反的
（也有网页上的绝对路径可以使用：找到图片的网址，直接复制）
<img src="https://iknow-pic.cdn.bcebos.com/6c224f4a20a44623d14ac1f08a22720e0df3d7a4?x-bce-process=image/quality,q_80"/>三、超链接标签（重点）
在HTML中超链接标签a用于跳转（从一个页面链接到另一个页面）
1、超链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>（anchor 锚）
2、链接的属性
(1)href
用于指定链接目标的URL地址（是超链接标签的必须属性）
（Hypertext Reference的简写：超文本引用 ）(2)target
指定链接页面的我的打开方式，其中_self为默认值（在当前页面直接打开），
_blank为在新窗口之中打开
3、链接的分类
（1）外部链接
连接到网站外部
<a href="http://外部地址" >文本或图像</a>注意：必须以http://开头
（2）内部链接
连接到网站内部的链接，目录HTML文件之间的跳转
<a href="使用相对路径即可" >文本或图像</a>（3）空连接
<a href="#" >文本或图像</a>有些地址还没写好可以使用空连接暂时代替
（4）下载链接
当href指向一个文件或者压缩包（.exe或者.zip）会直接下载下来一个压缩包
<a href="使用相对路径即可" >下载这个文件</a>（5）网页元素的链接
图片，块，音频，等很多网页元素都可以添加超链接
（6）锚点链接
类似目录，当点击时可以跳转至当前页面的指定位置
使用方法
<1>给目录设置上超链接
<a href="#随便起的名字" >文字或者图片</a>注意：不要漏了#号
<2>找到目标的位置标签，里面添加一个id属性=“刚才的名字”
<h3 id="随便起的名字"></h3>注意：虽然说起名是随便的但是最好符合一些命名规则
四、注释标签和特殊字符
1、注释标签
<!-- 我是注释-->快捷键：选中之后Ctrl+/可以添加或者取消注释
注释：解释代码的意义以及提醒，不会被执行或者显示
2、特殊字符
空格———— ；（注意一个每一个空格都要加上一个；）
小于号< ————<
大于号> ————>
。。。。。。
用到再查
五、表格标签
1、表格的主要作用
表格主要是用来显示展示数据的，使得数据的展示非常整齐清爽
2、表格的基本语法
<table>
<tr><td>单元格内的文字</td></tr>
<tr><td>可以直接堆叠生成第二行</td></tr>
</table>table是用于定义表格的语义标签
tr是用于定义表格之中的行，必须嵌套于table之中使用
（row——行，data——数据）
3、表头单元格标签
th标签
<table>
<tr><th>表头单元格</th></tr>
<tr><td>单元格内的文字</td></tr>
</table>单元格之中的文字会居中加粗显示
4、表格的属性
表格的大小和边框等属性一般通过之后的CSS来设置
但是这里先行介绍
这些属性都要写到表格之中
（1）align
属性值：left、right、center
把表格的位置左对齐、右对齐、居中
（align——v.排列、校准、排整齐）（2）border
属性值：1或者“”
规定表格是否有边框默认为“”，表示没有边框
（3）cellpadding
属性值：像素值
规定单元格边沿与其内容之间的空白，默认值为1像素
（4）cellspacing
属性值：像素值
规定单元格之间的距离默认值为2
（5）width与hight
属性值：像素
设置表格的宽度与高度
5、表格结构标签
实际情况之中表格可能很长，为了更好地表现表格的语义，可以将表格分割成表格头部和表格主体两大部分
thead标签用于定义表格的头部区域,tbody为表格的主体部分，用于存放数据本体
注意区分th与thead：th是一个单元格而thead是一整行
<table>
<thead>
<tr><td>单元格内的文字</td></tr>
</thead>
<tbody>
<tr>
<td>可以直接堆叠生成第二行</td> </tr>
</tbody>
</table>thead内部必须拥有标签
以上的两个表标签必须包含在
之中
6、合并单元格
（1）合并单元的方法
<1>跨行合并：rowspan=“合并单元格的数量"（合并的单元格位于不同行）
<2>跨列合并：colspan=“合并单元格数量”（合并的单元格位于不同列）
span v.跨度，范围
目标单元格：把合并代码写到要合并的几个单元格之中的某一个单元格身上，这个单元格被称为目标单元格
规则：跨行时最上侧单元格为目标单元格
跨列时最左侧单元格为目标单元格
合并单元格三部曲：
<1>先确定是跨行还是跨列
<2>找到目标单元格，写上合并代码
<3>删除多余单元格（注意：如果原来写了三个要将其中靠右两个合并为一个则要删掉原来位于第三的因为这里的效果与其说是合并了单元格不如说是把目标单元格扩大为原来的n倍）
六、列表标签
列表标签：用于布局页面
1、无序列表（重要）
几个并列的项目时使用
无序列表使用
- 定义 unordered lists
列表项使用
- 定义
- 无序列表的语法规范：
<ul>
<li>这几个列表项</li>
<li>没有先后顺序</li>
<li>是并列的</li>
<li>谁前谁后都一样</li>
</ul>注意：
- 之中只可以放
- 不可以出现其他的标签
- 之中才可以放其他的标签，
- 标签就相当于一个容器
2、有序列表（使用较少）
使用定义 ordered lists
<ol>
<li>会给</li>
<li>其中的</li>
<li>元素</li>
<li>加上1、2、3</li>
</ol>其要求、注意事项与无序列表一样
3、自定义列表
对于术语进行解释和分类，即一个标题带几个小标题的时候使用
使用
- 进行定义 definition lists
其中包含
- 相当于一个标题 definition term
其中还包含
- 是对标题的解释 definition description
语法：
<dl>
<dt>主题</dt>
<dd>对主题的解释</dd>
<dd>对主题的解释</dd>
</dl>dl之中也只能有dt、dd不能出现其他标签
dt与dd是并列的关系：兄弟关系
一个dl之中可以含有多个dt与dd
七、表单标签
收集一系列的信息时使用
1、表单的组成
<1>表单域：表单存在的区域
<2>表单控件（表单元素）：输入信息、进行选择的按钮等都是表单元素
<3>提示信息：表单中的提示应该填写的信息的文字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lNir7XKu-1647258446500)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220227164925010.png)]
2、表单域
使用进行定义，会把范围内的表单信息提交给服务器
<form action="url地址" method="提交方式" name="表单的名字"></form>3、表单元素
（1）input输入表单元素（单标签）
<input type="属性值" /><1>type
text：一个文本框，用户可以输入内容
<form >
用户名：<input type="text">
</form>password：密码输入框（用户看不见输入的密码）
<form >
密码：<input type="password">
</form>radio：单选按钮可以实现多选一**（只有一个单选框时，选中了之后就无法取消）**
<form >
性别：男<input type="radio"> 女<input type="radio">
</form>checkbox：多选框
<form >
爱好：爱好1<input type="chekbox">
爱好2<input type="chekbox">
</form>button:定义可点击按钮（一般用于启动JS脚本，并不会提交数据）
<form >
<input type="button" value="">
</form>按钮内没有默认的字，需要使用value定义
file：上传按钮
<form >
<input type="file" value="">
</form>点击按钮可以选择一个本地文件上传
submit：定义提交按钮，按钮会把表单信息提交发送到服务器
<form >
<input type="subumit" value="">
</form>注：默认按钮内的文字是“提交”，但是可以通过修改value的值来改变按钮内的字
reset：定义重置按钮，重置表单之中的所有数据，还原为表单的初始状态
<form >
<input type="reset" value="">
</form>注：默认的按钮内文字是“重置”，但是可以通过修改value的值来改变按钮内的字
<2>name
name是表单元素的名字，所设定的单选框必须拥有相同的name属性才可以实现单选，否则做出来的单选框可以复选
<form >
性别：男<input type="radio" name="相同的名字"> 女<input type="radio" name="相同的名字">
</form>对于复选框来说也要取相同的名字，使得系统知道这几个选项是一组的
<3>value
作用：给后台传送对应的值
注：将value后的值作为默认值写在文本框（text）内，其他形式的表单元素在外在没有效果
<form >
用户名：<input type="text" value="请输入用户名">
</form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-39vRqXRO-1647258446506)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220307203223418.png)]
<4>checked
页面打开时就默认选中这个按钮，主要用于单选框和复选框
<form >
性别：男<input type="radio"checked="checked"> 女<input type="radio">
</form><5>maxlength
规定输入的字段的最大字符长度
<form > 用户名：<input type="text" maxlength="10"></form>（2）label标签
绑定一个表单元素，当点击标签内的文本时，浏览器自动将焦点（光标）转到，或者选择到对应的表单元素上（提高用户体验）
<from>
<label for="相同名字">文字</label>
<input id="相同名字" type="text">
</from>注：label的for数属性值必须与所想要链接的表单元素的id相同
（3）select下拉表单分类
用于有多个选项，需要展开选择
<from>
选择：
<select>
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option>
</select>
</from>注：<1>一般一个select最少包含两个option
<2>可以个一个option添加属性selected使得这个选项变为默认选项
（4）textarea文本域元素
大量的书写文字时使用，可以换行，一般用于留言，反馈
<form>
今日反馈：
<textarea cols="每行出现的字符" rows="默认情况下的行数">
在这里直接输可以出现默认文本
</textarea>
</form>注：rows只是一开始加载页面时会出现的行数，输入时使用回车，可以创造出更多的行数（实际开发之中很少使用）
八、查阅文档（重要）
1、直接百度
2、w3c网站：https://www.w3school.com.cn/
3、MDN: https://developer.mozilla.org/zh-CN/
，浏览器自动将焦点（光标）转到，或者选择到对应的表单元素上（提高用户体验）
<from>
<label for="相同名字">文字</label>
<input id="相同名字" type="text">
</from>注：label的for数属性值必须与所想要链接的表单元素的id相同
（3）select下拉表单分类
用于有多个选项，需要展开选择
<from>
选择：
<select>
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option>
</select>
</from>注：<1>一般一个select最少包含两个option
<2>可以个一个option添加属性selected使得这个选项变为默认选项
（4）textarea文本域元素
大量的书写文字时使用，可以换行，一般用于留言，反馈
<form>
今日反馈：
<textarea cols="每行出现的字符" rows="默认情况下的行数">
在这里直接输可以出现默认文本
</textarea>
</form>注：rows只是一开始加载页面时会出现的行数，输入时使用回车，可以创造出更多的行数（实际开发之中很少使用）
