前端基础-01HTML基础
01 前端介绍
web应用程序
浏览器向应用程序发起网络请求,基于http协议,
应用程序基于http协议响应一个字符串,
那么这样的应用程序就是web应用程序
web请求:客户端发请求,让浏览器渲染成好看的页面(排版、布局)
前端三剑客
HTML 构成页面元素
CSS 元素渲染和布局 渲染:让HTML好看,做修饰 布局:放在什么位置
JS 构成动态事件 相当于皮影戏的操手
轮播图:隔几秒切换。通过JS代码实现
悬浮事件
点击事件
VUE
输入框示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> </body> </html>
页面布局
第一行head
跳转超链接标签
分块布局
02 http协议特点
概述
没有逻辑,所见即所得
HTML超文本标记语言
HTML 不是一种编程语言,没有逻辑:循环 判断...
HTML文件是由浏览器解释运行的,浏览器充当的就是一个解释器
浏览器:基于域名,组装符合http协议的字符串
服务器:解析参数,返回给客户端浏览器 文本
浏览器:把拿到的文件解释渲染
都是由浏览器运行出显示效果
HTML,即超文本标记语言(HyperText Markup Language ]),由SGML (标准通用标记语言) 发展而来,也叫web页面。扩展名是 .html 或是 .htm 。
HTML,是一种用来制作网页的标准标记语言。超文本,指的就是超出普通文本范畴的文档,可以包含文本、图片、视频、音频、链接等元素。
HTML 不是一种编程语言,而是一种写给网页浏览器、具有描述性的标记语言。 |
http协议
两端:浏览器和服务器
http协议特点: 1 基于TCP协议 对应用层数据格式做限定 2基于请求响应,先有请求再有响应 3 短连接 断网仍然可以看到。本质是把字符串接到本地
问题1 客户端没发请求能否收到数据?
数据发生更新,必须再发请求,再次接收才能更新 服务端永远不能推送给客户端数据。 与Web.socket区分
问题2 刷新页面是否有变化?
页面发生变化了 刷新再次发送请求 响应。
问题3 为甚么要短连接?
conn 一直存在,需要维持连接状态,占用服务器资源。
无连接
新版本中改进用短连接,因为,断开需要再三次连接(三次握手也占用资源)
http是前端和后端的桥梁
03 http请求协议格式
http协议格式
遵循http协议请求格式 浏览器 ---------------请求-----------------> 应用程序(server) <--------------响应------------------ 遵循http协议响应格式
基于socket
请求和响应的字符串,内容较多
http协议请求格式:三部分
请求方式 请求路径和参数 协议 # 请求首行
"""
get /s?wd=yuan HTTP/1.1
key1:value1 # 请求头 浏览器跟服务器说的小秘密
key2:value2
key3:value3
\r\n\r\n
请求体(POST数据)
"""
请求头
Accept: 当前浏览器能接受什么协议
Accept-Encoding:当前浏览器能支持的压缩方式。如果要用压缩,用gzip
User-Agent:浏览器告诉服务器一些基本信息用
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 Accept-Encoding: gzip, deflate, br User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36
请求方式:get post
携带数据区别 根据不同的请求方式,放在不同的位置 get:请求数据放在请求路径后面,以?作为分割 post:请求数据放在请求体中
URL: IP:端口/路径?参数
根据路径信息,决定返回的信息
https://www.baidu.com/s?wd=zhutao2014
浏览器控制台
network 记录网络请求日志 最上边的路径 request 请求 response 响应
扩展知识
爬虫:无论是浏览器发送还是程序发送请求,都基于http协议
正常浏览器发送有user-agent,程序发送请求没有user-agent
反爬,第一步 请求头是否携带user-agent
get和post请求本质区别
post请求:登录一般用POST
get请求:请求信息就挂在路径上了。暴露信息
get把数据放在path路径,post更安全 get请求,地址栏有上限 get请求,没有请求体
POST请求
https://www.baidu.com/s?wd=zhutao2014
""" post /s HTTP/1.1 #请求首行 key1:value1 #请求头 key1:value1 #请求头 key1:value1 #请求头 user=zhutao2014&pawd=123 (请求体 post请求数据) user=zhutao2014&pawd=123 """
点击按钮发生了什么?
点击按钮?是post还是get 由标签特性决定的 取决于服务器端开发人员决定
浏览器 1用户通过浏览器发送 2浏览器根据用户的请求组装字符串, 3由标签决定post和get(点击按钮,post或get请求的页面已经加载到浏览器) 4 发送给服务端 服务器: 1 拿到数据,拆分
请求首行 get请求由标签决定 路径名:/s 协议 HTTP/1.1 请求头 k1/v1,k2/v2 ...
浏览器组装数据 服务器:拆开 拆分分别取出路径和参数 通过参数,查数据库 拼装成响应格式
04 http响应协议格式
服务器给浏览器发送
http响应格式
响应协议 状态吗 解释文 """ HTTP/1.1 200 ok # 响应首行 key1:value1 # 响应头 key2:value2 key3:value3 响应体 """
响应状态码
2开头 正常 3开头 重定向 4开头 客户端请求问题 5开头 服务端问题
响应体
Response Headers HTTP/1.1 200 OK Connection: keep-alive Content-Encoding: gzip Content-Type: text/html;charset=utf-8 Server: BWS/1.1
请求报文构成
响应报文构成
示例
package main import ( "fmt" "net" ) func main() { listen, err := net.Listen("tcp", "127.0.0.1:8888") if err != nil { fmt.Println("listen err:", err) return } for true { conn, _ := listen.Accept() data := make([]byte, 1024) n, _ := conn.Read(data) if n == 0 { break } fmt.Println("---", string(data[:n])) res := "HTTP/1.1 200 OK\r\n\r\nhello" n2, _ := conn.Write([]byte(res)) fmt.Printf("---res:%v n2:%v\n", res, n2) err := conn.Close() if err != nil { return } } }
conn 客户端的套接字对象
执行到conn已经完成三次握手
服务端:1接收请求数据
2接收后打印
对接收的data做拆分,逻辑处理等操作
测试1不符合http规范
将res返回数据,设置为不符合http协议规范
fmt.Println("---", string(data[:n])) res := "hello" conn.Write([]byte(res)) conn.Close() } }
浏览器不能解析响应的报文,报响应无效
打印的请求信息
--- GET / HTTP/1.1 Host: 127.0.0.1:8888 Connection: keep-alive Cache-Control: max-age=0 sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97" sec-ch-ua-mobile: ?0 sec-ch-ua-platform: "Windows" Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 Sec-Fetch-Site: none Sec-Fetch-Mode: navigate Sec-Fetch-User: ?1 Sec-Fetch-Dest: document Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9
测试2 符合http规范
修改添加响应头,响应体,符合浏览器可解析的响应格式
res := "HTTP/1.1 200 OK\r\n\r\nhello" conn.Write([]byte(res)) //n2, _ := conn.Write([]byte(res)) //fmt.Printf("---res:%v n2:%v\n", res, n2) conn.Close() } }
显示结果
web框架的好处
web框架,在原有的基础上,用别人写好的接口 不用写底层的socket实现
服务器如何知道请求数据里的格式?
通过请求头content-type:json
content-type: text/html; charset=utf-8
ajax请求 期待内容由ajax决定的。
请求头
拿到请求体中的键值 用户名 密码等
""" post /s HTTP/1.1 #请求首行 key1:value1 #请求头 key2:value2 #请求头 key3:value3 #请求头 content-type:json {"user":"yuan","pwd":123} #user=yuan&pwd=123 """
urlencoded格式
x-www-form-urlencoded 格式 user=yuan&pwd=123 json格式,响应体也可以其他格式 {"user":"yuan","pwd":123}
05 web开发流程
标题标签<h1>
增加<h1></h1>标签
fmt.Println("---", string(data[:n])) res := "HTTP/1.1 200 OK\r\n\r\n<h1>hello</h1>" conn.Write([]byte(res)) //n2, _ := conn.Write([]byte(res)) //fmt.Printf("---res:%v n2:%v\n", res, n2) conn.Close() } }
浏览器认识<h1> 一级标题 标签
图片标签<img src=’’>
res := "HTTP/1.1 200 OK\r\n\r\n<h1>hello</h1><img src='https://www.baidu.com/img/flexible/logo/pc/result.png'>" conn.Write([]byte(res)) //n2, _ := conn.Write([]byte(res)) //fmt.Printf("---res:%v n2:%v\n", res, n2) conn.Close() } }
从文件读取
新增ndex.html
index.html内存放标签格式的文本
D:\GoWork\src\gitee.com\zhutao2014\s9练习\day09\demo\server\index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <h1>hello</h1> <img src='https://www.baidu.com/img/flexible/logo/pc/result.png'> </body> </html>
注意修改working directory
修改main.go
D:\GoWork\src\gitee.com\zhutao2014\s9练习\day09\demo\server\main.go
package main import ( "fmt" "io/ioutil" "net" ) func main() { listen, err := net.Listen("tcp", "127.0.0.1:8888") if err != nil { fmt.Println("listen err:", err) return } for true { conn, _ := listen.Accept() data := make([]byte, 1024) n, _ := conn.Read(data) if n == 0 { break } fmt.Println("---", string(data[:n])) file,_:=ioutil.ReadFile("index.html") res := "HTTP/1.1 200 OK\r\n\r\n"+string(file) conn.Write([]byte(res)) //n2, _ := conn.Write([]byte(res)) //fmt.Printf("---res:%v n2:%v\n", res, n2) conn.Close() } }
效果展示
修改html内容
访问有1个还是3个welcome?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <h1>hello</h1> <h1>hello</h1> <img src='https://www.baidu.com/img/flexible/logo/pc/result.png'> </body> </html>
不重启,直接再发起请求
执行流程:每次都会重新读取 html文件内容
可通过ide自带的插件,直接打开
下午06 html的标准结构和语法
浏览器是个解释器
按照默认的结构
F12 开发者模式
network网络请求日志 Response 响应体内容 elements 响应体的详细内容
<!DOCTYPE html>
声明当前浏览器用什么模式渲染元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <h1>hello</h1> <h1>hello</h1> </body> </html>
<html> 根标签
<head> 功能标签
<body> 页面展示的内容
窗口的内容
head
meta
<meta charset="UTF-8">
title
<title>ZHUTAO2014</title>
link标签 导入文件
<head> <meta charset="UTF-8"> <title>ZHUTAO2014</title> <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon"/> </head>
标签:
由尖括号包裹的特定关键字
闭合标签
有开头有结尾
<h1>一级标题</h1>
自闭和标签
<meta charset="UTF-8"> <img src='https://www.baidu.com/img/flexible/logo/pc/result.png'>
标签可以加属性
属性不一定必须有,src 属性
标签 <标签名 属性="属性值1" 属性2="属性值2">文本</标签名> 闭合标签 <h1>一级标题</h1> 自闭合标签 <img src="">
标签可以嵌套
<h1><p>aaa</p></h1>
不能交叉嵌套
<h1><p>aaa</h1></p>
html不区分大小写
<标签名 属性="属性值1" 属性2="属性值2">内容部分</标签名> <标签名 属性="属性值1" 属性2="属性值2".../>
总结
1、HTML标签是由尖括号包围的特定关键词 2、标签分为闭合和自闭合两种标签 3、HTML不区分大小写 4、标签可以有若干个属性,也可以不带属性,比如就不带任何属性 5、标签可以嵌套,但是不可以交叉嵌套
下午07 基本标签
标题标签<h1>
<h1>一级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6>
注释 Ctrl+/
文本默认处理机制
浏览器渲染时,无论遇到多少个空格和换行符都会处理成一个空格
<body> hello user1 hello user2 hello user3 </body>
换行标签<br>
<body> 自嘲诗<br> 本身后山人<br> 偶做前堂客<br> 醉舞经阁半卷书<br> 坐井说天阔<br> </body>
段落标签<p>
行间有间隔
<body> 自嘲诗<br> 本身后山人<br> 偶做前堂客<br> 醉舞经阁半卷书<br> 坐井说天阔<br> <p>自嘲诗</p> <p>本身后山人</p> <p>偶做前堂客</p> <p>醉舞经阁半卷书</p> <p>坐井说天阔</p> </body>
块级标签:
1独占1行 2可设置长宽 h1-h6标签 br标签 p标签
rain <p>rain</p> 看到什么效果? |
内联标签
1 按内容占宽 2 不可以设置长宽
标签<b> </strong> 内联标签
变斜<em> <i>
user <b>user1</b> <strong>user1</strong> <em>user2</em> <i>user2</i>
基本嵌套规则:
块级标签可以嵌套块级和内联标签
内联标签只能嵌套内联标签
user <b>user1</b> <strong>user1</strong> <em>user2</em> <i>user2</i> <b><i>user3</i></b>
html特殊符号
https://tool.chinaz.com/Tools/htmlchar.aspx
空格
5个空格
user <b>user1</b> <strong>user1</strong> <em>user2</em> <i>user2</i> α <b><i>user3</i></b>
课间练习
块级标签
<h1></h1>
<br>
<p> </p>
<body> <h1>一级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> 自嘲诗<br> 本是后山人<br> 偶作前堂客<br> 醉舞经阁半卷书<br> 坐井说天阔<br> <p>自嘲诗</p> <p>本是后山人</p> 偶<p>作前堂客</p> </body>
打印结果
内联标签
<b> </b>
<strong> </strong>
<em> </em>
<i> </i>
yuan yuan <b>yuan</b> <strong>yuan</strong> <em>yuan</em> <i>yuam</i>
下午08 div和span标签
<div> <span> <hr>
标签<div>块级标签
1 没有样式(配合css做布局使用的)
先有html,涉及到复杂样式用css
会在原有基础上,再做样式
用p标签 还有默认间隙需处理
标签<span> 内联标签
什么样式都没有
div整行都显示背景
span 只有文字背景
<head> <meta charset="UTF-8"> <title>ZHUTAO2014</title> <style> #i1{ font-size: 32px; font-weight: 900; font-style: italic; color: red; } #i2{ background-color: red; } </style> </head> <body> <div id="i1">div</div> <span id="i2">span</span> </body>
为什么用div多于span
div是块级的,可以嵌套块级的 span内联的只能嵌套内联的 所以用的相对少
下午09 超链接标签
超链接标签
自带点击事件,会让浏览器向href对应的路径发送一个请求信息
<a href=""></a> <a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com" title="baidu">百度</a>
直接通过域名可以访问,记不住
点击搜索超链接,向服务器发起一个请求
<a target="_blank" class="cate_menu_lk" href="//shouji.jd.com/">手机</a>
<a>标签
默认发送http get请求
preview预览
title 悬浮属性
<a href="http://www.baidu.com" title="baidu">百度</a>
鼠标悬浮上去,可以看到baidu
target 覆盖或弹窗属性
_self 拿回的请求结果,覆盖掉当前标签
<a href="http://www.baidu.com" title="baidu" target="_self">百度</a>
_blank 弹出新窗口
<a href="http://www.baidu.com" title="baidu" target="_blank">百度</a>
放入图片
<a href="http://www.baidu.com" title="baidu" target="_blank">百度</a> <a href="https://www.jd.com"><img src="https://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png">京东</a>
<a href=""><img src="" alt="加载失败时展示"></a>
为什么在一行?
1 img标签 内联标签 2 a标签 内联标签
本地跳转
<body> <a href="index002.html">index002</a> <a href="index003.html">index003</a> </body>
默认点击覆盖
<a href="index002.html" target="_self">index002</a>
下午10 image标签
自闭合标签
src
alt 加载失败时展示
title
<img src="http://www.baidu.com/test.png" alt="加载失败" title="图片">
宽度和高度
(很少用,一般用css的)
<img width="100" height="35" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="加载失败" title="图片">
点击图片跳转可以配合a标签使用
<a><img src="" alt="加载失败"></a>
<a href="http://www.baidu.com"><img width="100" height="35" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="加载失败" title="百度1下">百度一下</a>
css 1找标签 2做渲染
id标签选择器
通过嵌套span标签,
text-decoration: none; 去掉下划线
<style> a { text-decoration: none; } #i1 span { color: gray; } </style>
<a id="i1" href="http://www.baidu.com"><img width="100" height="35" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="加载失败" title="百度1下"><span>百度一下</span></a> <a id="i2" href="http://www.baidu.com"><img width="100" height="35" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="加载失败" title="百度1下"><span>百度一下</span></a>
练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a { text-decoration: none; } #i1 span{ color:gray; } </style> </head> <body> <a id="i1" href="http://www.jd.com"><img width="200" height="80" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> <span>百度</span> </a> <a href="http://www.jd.com"><img width="200" height="100" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"><span>百度</span></a> </body> </html>
下午11 列表标签-块级标签
ul 无序列表
type属性
<ul> 无序列表
<li></li> 块级标签使用
<ul type="square"> <li>西游记</li> <li>三国演义</li> <li>水浒传</li> <li>红楼梦</li> </ul>
panding内间距
<ol> 有序列表
<ol> <li>西游记</li> <li>三国演义</li> <li>水浒传</li> <li>红楼梦</li> </ol>
下午12 table表格标签
示例1
tr table row 行
td 单元格
<table> <tr> <td>姓名</td> <td>年龄</td> <td>部门</td> </tr> </table>
示例2
<table border="1"> <tr> <td>姓名</td> <td>年龄</td> <td>部门</td> </tr> </table>
tr 块级标签
<table border="1"> <tr> <td>姓名</td> <td>年龄</td> <td>部门</td> </tr> <tr> <td>姓名</td> <td>年龄</td> <td>部门</td> </tr> <tr> <td>姓名</td> <td>年龄</td> <td>部门</td> </tr> </table>
表格
<table border="1"> <tr> <td>姓名</td> <td>年龄</td> <td>部门</td> </tr> <tr> <td>User01</td> <td>18</td> <td>开发</td> </tr> <tr> <td>User02</td> <td>20</td> <td>测试</td> </tr> </table>
th 第一行标题
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>部门</th> </tr> <tr> <td>User01</td> <td>18</td> <td>开发</td> </tr> <tr> <td>User02</td> <td>20</td> <td>测试</td> </tr> </table>
合并单元格 rowspan
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>部门</th> </tr> <tr> <td>User01</td> <td>18</td> <td rowspan="2">开发部</td> </tr> <tr> <td>User02</td> <td>20</td> </tr> </table>
合并行 colspan
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>部门</th> </tr> <tr> <td>User01</td> <td>18</td> <td rowspan="2">开发部</td> </tr> <tr> <td colspan="2">User02</td> </tr> </table>
可省略<thead>
可省略<tbody>
<table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>部门</th> </tr> </thead> <tbody> <tr> <td>User01</td> <td>18</td> <td rowspan="2">开发部</td> </tr> <tr> <td colspan="2">User02</td> </tr> </tbody> </table>
下午 13 表单标签
最重要 最难理解
类似于a标签,向服务器发请求了
请求方式 get post 向服务器发送请求形式 1 地址栏:输入url, get请求 2 超链接a标签 打包请求发送 get请求 3 form表单 可以是get或post 登录、注册 4 ajax
form表单是一个整体标签
两大标签
input 输入框 内联标签
text类型
password类型
<body> <h3>注册页面</h3> <form action=""> <p>姓名 <input type="text"></p> <p>密码 <input type="password"></p> </form> </body>
input中重要的两个属性
submit类型
具有默认事件,会把输入的内容给服务器发送过去
<body> <h3>注册页面</h3> <form action=""> <p>姓名 <input type="text"></p> <p>密码 <input type="password"></p> <p><input type="submit"></p> </form> </body>
怎么发的?发到哪儿了?
点击按钮,浏览器发起http请求
基于点击行为,组合符合http格式的请求
请求方式,
action 请求地址
method 请求方式,默认get
<body> <h3>注册页面</h3> <form action="http://127.0.0.1:8888" method="post"> <p>姓名 <input type="text"></p> <p>密码 <input type="password"></p> <p><input type="submit"></p> </form> </body>
默认url-encoded格式,没有键?
点击会覆盖 POST / HTTP/1.1 Host: 127.0.0.1:8888 Connection: keep-alive Content-Length: 0
构建数据时,没有name属性
添加name属性
修改默认值
<body> <h3>注册页面</h3> <form action="http://127.0.0.1:8888" method="post"> <p>姓名 <input type="text" name="user" value="root"></p> <p>密码 <input type="password" name="pwd"></p> <p><input type="submit"></p> </form> </body>
核心点没有name属性,组不成键值对
下午14
input 日期型data
格式:月份和日期01和02的0不能省
<body> <h3>注册页面</h3> <form action="http://127.0.0.1:8888" method="post"> <p>姓名 <input type="text" name="user" value="root"></p> <p>密码 <input type="password" name="pwd"></p> <p>生日 <input type="date" name="brith" value="2006-01-02"></p> <p><input type="submit"></p> </form> </body>
复选框
<p>爱好: 蓝球<input type="checkbox"> 足球<input type="checkbox"> 双色球<input type="checkbox"> </p> <p><input type="submit"></p> </form>
浏览器:勾选 是发送;不勾选 不发送
<body> <h3>注册页面</h3> <form action="http://127.0.0.1:8888" method="post"> <p>姓名 <input type="text" name="user" value="root"></p> <p>密码 <input type="password" name="pwd"></p> <p>生日 <input type="date" name="brith" value="2006-01-02"></p> <p>爱好: 蓝球<input type="checkbox" name="hobby" value="lanqiu"> 足球<input type="checkbox" name="hobby" value="zuqiu"> 双色球<input type="checkbox" name="hobby" value="shuangseqiu"> </p> <p><input type="submit"></p> </form> </body>
user=user&pwd=123&brith=2006-01-02&hobby=lanqiu&hobby=shuangseqiu
问题??
使用一样的键,说明有联系,不是必须使用一样的键。
hobby1=lanqiu&hobby3=shuangseqiu
单选框
添加关联,键一样
<p>性别 男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" value="female"> 其他<input type="radio" name="gender" value="qita"> </p>
user=root&pwd=&brith=2006-01-02&gender=male
file 键值对
form表单不支持放json
文件格式改为multipart/form-data
urlencoded
浏览器打包格式默认urlencoded
select标签
<p>籍贯 <select> <option value="">山东</option> <option value="">山西</option> <option value="">北京</option> </select> </p>
name放在select的地方
option选项
<p>籍贯 <select name="province"> <option value="shandong">山东</option> <option value="shanxi">山西</option> <option value="beijing">北京</option> </select> </p>
user=root&pwd=&brith=2006-01-02&province=shanxi
默认是山西设置
<p>籍贯 <select name="province"> <option value="shandong">山东</option> <option value="shanxi" selected>山西</option> <option value="beijing">北京</option> </select> </p>
默认值
蓝球<input type="checkbox" name="hobby" value="lanqiu" checked="checked">
属性名和属性值是一样的,可以简写
蓝球<input type="checkbox" name="hobby" value="lanqiu" checked>
单选框默认值
男<input type="radio" name="gender" value="male" checked="checked">
多行文本框
<p> <textarea name="jianjie" id="" cols="50" rows="8"></textarea> </p>
提交后,服务器显示内容
user=root&pwd=&brith=2006-01-02&hobby=lanqiu&gender=male&province=shanxi&jianjie=%E7%AE%80%E4%BB%8B
placeholder
提醒显示,不是值本身
<p> <textarea placeholder="个人简介" name="jianjie" id="" cols="50" rows="8"></textarea> </p>
回顾
form <input type=”text” name=”user”> <input type=”password” name=”user”> date name brith checkbox redio submit select 下拉标签 textarea
拥有事件的标签
<p><input type="submit"></p>
label标签
注意for=”user”中user对应的是id中的id=”user”
<p><label for="user">姓名</label> <input id="user" type="text" name="user"></p> <p>密码 <input type="password" name="pwd"></p> <p>生日 <input type="date" name="brith" value="2006-01-02"></p>
点击姓名,直接就选中input框
作业,练习页面复盘
css初试
<style> [type="text"]{ width:200px; height: 30px; } </style>
css初试2
<style> [type="text"]{ width:200px; height: 30px; } [type="checkbox"],[type="redio"]{ width: 40px; height: 40px; } </style>