1元素/标签：
标签名称：不区分大小写
成对出现的：开始标签 内容 结束标签
单标签：空元素 <meta> <br> <br /> <img />
属性：开始标签，由属性名称key、值value
块级元素：
p：段落 margin-top/margin-bottom
div*:宽度100%
h1~h6
list:margin/padding/list-type
table:块级元素
thead/tbody/caption/tr:占据一整行
（td/th:共享一行）
1.注意层级结构
2.数据展示
3.一定不要用于布局结构，推荐使用DIV+CSS
caption 标题
form：（from表单不做任何展示 用于点击确认后和和后台进行交互，form里的数据就是即将提交的数据）
作用：主要用于结构的布局
独立占用一整行，宽度100%，高度由内容决定
行内元素：
span
img
a
td/th:共享一行 （th有加粗效果）
input（单标签）
属性
1.name 不需要携带数据不要起name
2.type
<form action="./jd/index.jsp" method="post" enctype="application/x-www-form-urlencoded">
文本框： <input name="username" type="text" /><br>
密码框： <input name="pwd" type="password" /><br>
提交按钮
普通提交按钮
<input type="submit" value="登录">
重置按钮 <input type="reset" value="清空">
</from>`
3.value 设定初始化，可选
如果是用户填写，不需要写value属性
如果想要有默认值、控件是选择的没有填写的地方，就需要写value属性
4.
.....
input表单组件
checkbox 复选框
radio 单选按钮
file 文件按钮
hidden 隐藏域
image 图像按钮
button 普通按钮
.....
作用：主要用于内容的填充
共享同一行，宽度、高度都是由内容决定
嵌套关系：
块级可以嵌套行内元素
不推荐行内嵌套块级
行内元素可以嵌套行内元素
块级元素视情况嵌套块级元素
2 乱码原因（浏览器的可视区域）
乱码：原因-字符集没有设置或者没有统一
1.编辑软件的字符集设置 vscode-右下角
2.代码进行字符集设置:meta
3.浏览器的字符集设置：菜单栏找文字编码
3 属性：
1.大多数都有
id 唯一标识 id="n1"
class 一类标识
style="CSS语法区分大小写" style="color:red"
title属性：元素的名称 title="段落"
2.自己特有的
img图片元素：src图片的地址、alt文字显示、width、height
a 超链接: href文件的地址、
target： _self当前网页打开
_blank新开一页
_parent父级打开
_top 顶部打开
3.自定义
<li data-name="菜单"></li>
<span data-url="http://www.briup.com"></span>
<p id="p1" class="duan" style="color:red"
title="这是段落"> 很多文字很多文字</p>
4 超链接
没有效果:
<a>文字</a>
有效果：
<a href="">文字</a> 点击会刷新
<a href="./1-hello.html">1-hello.html</a>
<a href="http://www.briup.com" target="_self">杰普官网</a>
<a href="xxx" target="_blank">新开一页</a>
<a href="">点击会刷新</a>
<a href="#">点击只刷新一次</a>
5 锚点 跳转到本页面的指定地方
href="#id"
<div id="head">头部</div>
<div style="height: 1200px;">内容</div>
底部：
<a href="#head">返回顶部</a>
6 图片具有超链接效果：
<a href="#head"><img src="2.jpg" width="40" height="40"></a>
<a href="gooddetal.html"><img src="2.jpg" width="40" height="40"></a>
7 发邮件：
<a href="mailto:2455@qq.com">给张三写一封信</a>
8 字符实体
空格
& &
< > <p>
"" "
'' '
来自 html day01 5-html 源代码 系统结构图.png
9 HTTP：应用层的协议
客户端-》发送请求
服务端-》作出响应
GET:显示的、有大小限制的（小） 浏览器的地址栏、超链接
POST：隐式的、有大小限制的（大） 表单
请求
请求的数据：text/plain x-www-urlencoded multipart
请求报文：
请求行：method url HTTP/1.1\r\n
请求头：报文有关的属性信息\r\n
自定义信息\r\n
\r\n
请求体：9张图片、一个视频...
GET的请求报文：
GET http://www.baidu.com?wd=http&n=zs&p=123 HTTP/1.1\r\n
Host:xxx\r\n
User-agent:safri...\r\n
Connection:keep-alive\r\n
\r\n
Null
POST的请求报文：
POST http://www.baidu.com/jd/index.html HTTP/1.1\r\n
Host:xxx\r\n
User-agent:safri...\r\n
Connection:keep-alive\r\n
\r\n
wd=汉字&n=zs&p=123
wd=\u23ed\u24dc&n=zs&p=123
POST http://www.baidu.com/jd/index.html HTTP/1.1\r\n
Host:xxx\r\n
User-agent:safri...\r\n
Connection:keep-alive\r\n
\r\n
1001101010101010010
响应
响应的报文：
响应行：HTTP/1.1 200 OK\r\n
响应头： Content-Type:text/html\r\n
Content-Length:大小\r\n
\r\n
响应体：.....
高级控件：
l 日期、时间、邮箱、电话、文本框textrea
组件库、第三方库:验证库、Keditor
10 ul
ul无序列表
<ul type="square">
<li type="circle">菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
order list
<br>
11 ol
<ol type="I">
<li type="A">昆山</li>
<li>太原</li>
<li>北京</li>
</ol>
12 行合并 列合并
<td align="right" colspan="3">1</td> 文字靠右 横向合并三格
<td rowspan="2">1</td> 纵向合并三格
13 表格例子
<table border="10" cellspacing="10" cellpadding="10" align="center">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td align="right" colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>张三</td>
<td>昆山</td>
</tr>
</tbody>
<caption>标题</caption>
</table>
14 表单
<form action="/login.do" method="GET" enctype="multipart/form-data">
15 性别单选
<tr>
<td>性别：</td>
<td>
<label>
<input type="radio" name="gender" value="male">男
</label>
<input id="female" type="radio" name="gender" value="female" checked>
<label for="female">女</label>
</td>
</tr>
checked 默认被选中
disabled不可修改
readonly默认可修改
16 足球篮球乒乓球多选
checkbox复选框
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" name="hobbits" value="basketball">篮球
<input type="checkbox" name="hobbits" value="football">足球
<input type="checkbox" name="hobbits" value="pingpang" checked>乒乓球
</td>
</tr>
17 select
select 有value才可以向后传递 后端
默认展示第一条，单选
属性
selected 默认被选中
multiple 可多选
optgroup 分组展示
option
<td>
<select name="address">
<option>江苏省</option>
<option value="sx">陕西省</option>
<option value="shx" selected>山西省</option>
</select>
<select name="city" multiple>
<option>太原市</option>
<option>大同市</option>
<option>长治市</option>
</select>
<select name="ad" multiple>
<optgroup label="山西省">
<option>太原市</option>
<option>太原市</option>
<option>太原市</option>
</optgroup>
<optgroup label="陕西省">
<option>西安市</option>
<option>宝鸡市</option>
<option>西安市</option>
</optgroup>
<optgroup label="陕西省">
<option>西安市</option>
<option>宝鸡市</option>
<option>西安市</option>
</optgroup>
</select>
</td>
18 textarea（双标签） 文本框
<tr>
<td>自我介绍：</td>
<td>
<textarea name="introduce"
rows="5" cols="10" wrap="soft"> //wrap换行 soft没有换行
默认值
</textarea>
</td>
</tr>
19 默认提示内容
<form action="/login.do" method="get" enctype="multipart/form-data">
<tr>
<td>价格：</td>
<td><input type="text"name="price" placeholder="默认提示内容：请填写两位小数的数字"></td>
</tr>
</from>
```
# 20 iframe 添加小插件
```html
<iframe src=""></iframe>
<iframe frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=35&h=55&w=200"></iframe>
是否有边框 滚动条是否显示
21 html5表单
<progress value='0.6' max=1> </progress>60%//60%写外面显示
<form oninput="result.value=score.value"> //里外的值一样
<input type="range" name="score" value="10"> //type=range 有一个游标可左右滑动
默认值10
<output name="result">10</output> //右边有数字变换
</form>
22 meter
<meter min="0" max="1024" low="200" high="999" value="1024"></meter>
希望子200 到999 作为仪表盘
23 地址
标签库 个人技能库
list=id input和datalist会有交互
<input list="dl" type="text" name="address">
<datalist id="dl"> //datalist 默认不显示
<option value="js">江苏省</option>
<option value="sx">山西省</option>
<option value="sx">陕西省</option>
</datalist>
24 type
google浏览器打开
number: <input type="number">
time: <input type="time">
date: <input type="date">
email: <input type="email">
color: <input type="color">
25 高级控件：
日期、时间、邮箱、电话、文本框textrea
组件库、第三方库:验证库、Keditor
26 表单多地址的提交
表单多地址的提交：购物车
表单一：
<form id="f1" action="a1" method="get">
<input type="text" name="n1" value="v1">
<input type="submit">
</form>
表单二：
<form id="f2" action="a2" method="get">
<input type="text" name="n2" value="v2">
<input type="submit" value="编辑">
<input type="submit" value="新增" formaction="a3" formmethod="get">
</form>
<input type="text" name="n3" value="v3" form="f1">
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
