html 笔记
文章目录
- 1元素/标签：
- 2 乱码原因（浏览器的可视区域）
- 3 属性：
- 4 超链接
- 5 锚点 跳转到本页面的指定地方
- 6 图片具有超链接效果：
- 7 发邮件：
- 8 字符实体
- 来自 html day01 5-html 源代码 系统结构图.png
- 9 HTTP：应用层的协议
- 10 ul
- 11 ol
- 12 行合并 列合并
- 13 表格例子
- 14 表单
- 15 性别单选
- 16 足球篮球乒乓球多选
- 17 select
- 18 textarea（双标签） 文本框
- 19 默认提示内容
- 21 html5表单
- 22 meter
- 23 地址
- 24 type
- 25 高级控件：
- 26 表单多地址的提交
1元素/标签：
标签名称：不区分大小写
成对出现的：开始标签 内容 结束标签
单标签：空元素
![]()
属性：开始标签，由属性名称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 href="">文字a> 点击会刷新
<a href="./1-hello.html">1-hello.htmla>
<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 发邮件：
给张三写一封信
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">1td> 文字靠右 横向合并三格
<td rowspan="2">1td> 纵向合并三格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">1td>
tr>
<tr>
<td rowspan="2">1td>
<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>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">10output> //右边有数字变换
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:
time:
date:
email:
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">