HTML中的内容
1.HTML样图
<!DOCTYPE html> 声明解析内容（以什么方式解析标签）告诉浏览器用标准版解析，避免兼容问题（标准h5规范解析）
<html lang="en">
根标签（树形结构）head 和 body 字标签
只要不是在网页中显示的内容都要放到head中取（标题，解释器）
<head> head 告诉浏览器 解释性内容
<meta charset="UTF-8"> 用的编码格式解析
<title>Title</title> 网站标题内容
css代码
js代码
jq代码
</head>
<body>
标签存放位置
body 网站内呈现的内容放到body里面
</body>
</html>
2.格式分类
功能：
1.块级标签：独占一行
2.内联标签：可以和其他标签共享一行
3.标签格式
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
标签内有不同的属性，不同的属性和不同的属性值，页面呈现效果不同
4.标签的嵌套
标签嵌套的格式
1.<a><b>123<b><a> 可以
2.<a><b>123<a><b> 不行
HTML标签-基础标签
1.标题标签
主要是做为网页标题使用
一共分为6个级别从大到小
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
2.段落标签
用于文章段落作用，可以起到间隔作用（中间会有一些空隙）
<p>这是段落1</p>
<p>这是段落2</p>
3.换行标签
用于将一行的内容进行换行（用的很少）
这是换行<br>
这是换行<br>
4.字体加粗标签
使用后可以使字体变粗
<b>这是字体加粗</b>
<strong> 内容 </strong>
5.字体倾斜标签
使字体倾斜
<i>这是字体倾斜</i>
<em>字体会变为斜体</em>
6.删除标签
在页面中呈现内容中间被一条横线贯穿的效果
<del> 内容 </del>
7.特殊符号（空格）
网址：http://www.fhdq.net/ts/177.html
# 相当于一个空格呈现
© # ©
8.水平分割线
作用：水平分割线
<hr>
内容1
--------------
内容2
HTML标签-高级标签
1.div和span标签
<div> 书写内容 </div> 块级标签 没有样式 主要定义文档中的分区
<span> 书写内容 </span> 内联标签 没有样式 定义组合文档中的行内元素
处了这两个标签没有样式，其他的别签都带有样式。
2.超链接标签 a标签
内联标签，主要负责网页内部跳转作用
格式：
<a href="网络地址">内容</a>
属性：
1.href="网络地址" 必须存在
2.target = "_self" 默认在跳转网页时，覆盖原来的网页 target ="_blank" 保留原网页
3.title属性：主要作用：提示用户，当鼠标悬浮在标签上时，会出现提示内容：title="提示内容"
3.img图标标签
书写方式：
<img src="图片地址" title="当将鼠标放到图片上时提示内容" alt="当图片加载不出来时提示的内容">
height="" 设置显示的高
width="" 设置显示宽
用于显示图片使用，图片的大小主要还是，设置块级是应占的大小
4.列表标签
1.有序列表标签
<ol>
<li> 内容</li>
<li> 内容</li>
<li> 内容</li>
</ol>
存在默认样式 1.2.3的形式（存在排序的）
2.无序列表标签（使用较多）
<ul>
<li> 内容</li>
<li> 内容</li>
<li> 内容</li>
</ul>
存在默认样式 一个实心圆为样式（不存在排序）
3.自定义
作用： 定义列表，列表显示
<dl>
<dt>帮助中心</dt> 定义的title dt
<dd>账户管理</dd> 定义的描述 dd
<dd>购物管理</dd> 定义的描述 dd
<dd>联系帮助</dd> 定义的描述标签 dd
</dl>
默认显示效果：
帮助中心
账户管理
购物管理
联系帮助
5.表格标签
在页面中以表格形式呈现
作用：在网页中显示表格 订单操作
由表头和表内容组成
tr ： 行的意思
th ： 表头
td ： 表头下面对应的每一个内容
caption ： 是表格的标题，会在表格正上方进行居中显示
border : 中文边界 给table 表格设置边框线 (表格带有间隙)
cellspacing ： 设置单元格的表格间隙
<table border='1' cellspacing="0">
<caption>商品清单</caption>
<tr>
<th>名称</th>
<th>品牌</th>
<th>数量</th>
<th>入库时间</th>
</tr>
<tr>
<td>电视</td>
<td>ll</td>
<td>160</td>
<td>2022/10/10</td>
</tr>
</table>
****** table 表格的横向合并和纵向合并 ****
<th colspan="2">数量/入库时间</th> 跨横向列进行合并(合并的列)
<td rowspan="2">160</td> 跨纵向合并(合并单元格)
属性：border="1"，表格的外部框架的粗细
6.网页小标题标签
<link rel="icon" href="图标的地址">
也是一个外部链接标签，链接其他的内容
href 参数：规定被链接文档的位置
HTML标签-表单标签
HTML 表单用于搜集不同类型的用户输入
格式：
<form action="提交地址" method="提交方式">
.
form elements
<input type="text" placeholder="提示信息用户名">
<input type="password" placeholder="提示信息密码">
<input type="submit" value="立即提交">
</form>
form代表一个表单域（内部都是表单标签）
action: 提交数据的目标地址
method: 设置请求参数格式 get post
get 是将用户的数据放到url的路径后面，不安全
post 将数用户据放到了请求体 后面，非常安全
enctype: 决定服务端用什么方法去解开 默认为 urlencoded格式
content-type：multipart/form-data 用于文件上传（文件数据使用）
自闭合，内联标签标签
自带参数 type="text"
<input type="text"> 当参数是text是，可以显示输入的文本
<input type="password"> 当参数是password ，输入的文本是不显示的
<input type="submit"> 当参数时submit，就会显示一个提交按钮，当点击后触发事件，将参数的以有效键值对形式传入服务器
例如：
<p>姓名：<input type="text" name="user"></p>
<p>密码：<input type="password" name="pwd"></p>
将用户输入的内容，和name的值进行打包传入服务器
当input标签内的type属性的值设置：type="checkbox"
格式：
<input type="checkbox" name="" value="">
必须要设置name和value，当勾中后提交，会将name和value打包发给服务器
checked = "checked" 当添加后，就会默认勾选
例如：
<p>爱好
篮球<input checked = "checked" type="checkbox" name="hobby" value="basketball">
足球<input type="checkbox" name="hobby" value="football">
双色球<input type="checkbox" name="hobby" value="shuangseqiu">
</p>
当input标签内的type属性的值设置：type="radio"
单选框，只能选中一个值。
<input type="radio" name="" value="">
必须要设置name和value，当勾中后提交，会将name和value打包发给服务器
无论多少个选项，name值必须是同一个，要不然就不属于单选框了
例如：
<p>性别：
男<input type="radio" name="gender" value="1">
女<input type="radio" name="gender" value="2">
其他<input type="radio" name="gender" value="3">
</p>
当input标签内的type属性的值设置：type="date"
<input type="date" name="">
name属性必须存在
当选好日期后，提交，name的值和选好的日期打包给服务器
例如：
<p>日期
<input type="date" name="birth">
</p>
5.select下拉菜单
书写格式：
<select>
<option value ="">内容</option>
<option value ="">内容</option>
<option value="">内容</option>
<option value="">内容</option>
</select>
属性：
multiple="multiple" 可以选着多个值提交
size="设置显示数量"
当选择完毕后，会将value的内容 返回
6.textarea多行文本框
格式：
<textarea name="键值对的键" cols="宽值" rows="长值" placeholder="设置在文本框内让用户看到的内容"></textarea>
rows ：代表的是行数
cols ：代表的是列数
用来控制文本域的大小
主要用与写大型的文章使用
7.按钮标签
1.没有带标签事件，0事件标签 value是为了展示和提示大致功能
<input type="button" value="文本">
2.重置用户选中全部内容，用户重置标签 带事件
<input type="reset">
3.拥有事件，与submit效果相同，只不过要在form表单内容才有效果，只会上传表单内部的内容给服务器
<button>本文</button>
4.提交数据标签，将用户输入的内容提交给服务端上
<input type="submit">
8.label标签
提升用户的体验效果
当用户点击文本部分是，自动将光标跳到内容框内等待用户输入
格式：
<label for="坐标值">文本</label>
<input type="text" name="user" id="坐标">
label需要配合其他的标签使用
需要设置坐标，input，id坐标 == label ，for坐标
HTML标签-表格标签
<table> # 设置一个表格
<thead> # 定义的表头
<tr> # 表格行
<th>1行1列内容</th> # 表头(1个或者多个)
<th>1行2列内容</th> # 表头(1个或者多个)
<th>1行3列内容</th> # 表头(1个或者多个)
</tr>
</thead>
<tbody> # 定义的表中的内容
<tr> # 表格行
<td>2行2列内容</td> # 表内容行
<td>2行3列内容</td>
<td>2行3列内容</td>
</tr>
</tbody>
</table>
