HTML 由一系列元素 elements 组成，例如
<p>Hello, world!</p>
-
整体称之为元素
-
<p>和</p>分别称为起始和结束标签 -
标签包围起来的 Hello, world 称之为内容
-
p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落
元素还可以有属性，如
<p id="p1">Hello, world!</p>
-
属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识
元素之间可以嵌套，如
<p>HTML 是一门非常<b>强大</b>的语言</p>
错误嵌套写法：
<p>HTML 是一门非常<b>强大的语言</p></b>
不包含内容的元素称之为空元素，如
<img src="1.png"> <img src="1.png"/>
-
img 作用是用来展示图片
-
src 属性用来指明图片路径
2. HTML 页面
前面介绍的只是单独的 HTML 元素，它们可以充当一份完整的 HTML 页面的组成部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试页面</title> </head> <body> <p id="p1">Hello, world!</p> <img src="1.png"> </body> </html>
-
html元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素 -
head元素包含的是那些不用于展现内容的元素，如title，link，meta等 -
body元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素
3. 常见元素
1) 文本
Heading
<h1>1号标题</h1> <h2>2号标题</h2> <h3>3号标题</h3> <h4>4号标题</h4> <h5>5号标题</h5> <h6>6号标题</h6>
Paragraph
<p>段落</p>
List
无序列表 unordered list
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
有序列表
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
多级列表
<ul> <li> 北京市 <ul> <li>海淀区</li> <li>朝阳区</li> <li>昌平区</li> </ul> </li> <li> 河北省 <ul> <li>石家庄</li> <li>保定</li> </ul> </li> </ul>
Anchor
锚，超链接
<a href="网页地址">超链接文本</a>
2) 多媒体
Image
<img src="文件路径">
src 格式有 3 种
-
文件地址
-
data URL，格式如下
data:媒体类型;base64,数据
-
object URL，需要配合 javascript 使用
Video
<video src="文件路径"></video>
Audio
<audio src="文件路径"></audio>
3) 表单
作用与语法
表单的作用：收集用户填入的数据，并将这些数据提交给服务器
表单的语法
<form action="服务器地址" method="请求方式" enctype="数据格式"> <!-- 表单项 --> <input type="submit" value="提交按钮"> </form>
-
method 请求方式有
-
get （默认）提交时，数据跟在 URL 地址之后
-
post 提交时，数据在请求体内
-
-
enctype 在 post 请求时，指定请求体的数据格式
-
application/x-www-form-urlencoded（默认）
-
multipart/form-data
-
-
其中表单项提供多种收集数据的方式
-
有 name 属性的表单项数据，才会被发送给服务器
-
常见的表单项
文本框
<input type="text" name="uesrname">
密码框
<input type="password" name="password">
隐藏框
<input type="hidden" name="id">
日期框
<input type="date" name="birthday">
单选
<input type="radio" name="sex" value="男" checked> <input type="radio" name="sex" value="女">
多选
<input type="checkbox" name="fav" value="唱歌"> <input type="checkbox" name="fav" value="逛街"> <input type="checkbox" name="fav" value="游戏">
文件上传
<input type="file" name="avatar">
4. HTTP 请求
1) 请求组成
请求由三部分组成
-
请求行
-
请求头
-
请求体
可以用 telnet 程序测试
2) 请求方式与数据格式
get 请求示例
GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1 Host: localhost
-
%E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求示例
POST /test2 HTTP/1.1 Host: localhost Content-Type: application/x-www-form-urlencoded Content-Length: 21 name=%E5%BC%A0&age=18
application/x-www-form-urlencoed 格式细节：
-
参数分成名字和值，中间用 = 分隔
-
多个参数使用 & 进行分隔
-
【张】等特殊字符需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送
json 请求示例
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25
{"name":"zhang","age":18}
json 对象格式
查找字符个数的时候可以用‘ ’
{"属性名":属性值}
测试长度'{"属性名":属性值}'.length
其中属性值可以是
-
字符串 ""
-
数字
-
true, false
-
null
-
对象
-
数组
json 数组格式
[元素1, 元素2, ...]
multipart 请求示例
与url的区别是url编码不能上传文件
POST /test2 HTTP/1.1 Host: localhost Content-Type: multipart/form-data; boundary=123 Content-Length: 125 --123 Content-Disposition: form-data; name="name" lisi --123 Content-Disposition: form-data; name="age" 30 --123-- 测试长度用``反引号 `--123 Content-Disposition: form-data; name="name" lisi --123 Content-Disposition: form-data; name="age" 30 --123--`.length 116还需要加上一共有多少行 116+9=125
-
boundary=123 用来定义分隔符
-
起始分隔符是
--分隔符 -
结束分隔符是
--分隔符--
数据格式小结
客户端发送
-
编码
-
application/x-www-form-urlencoded ：url 编码
-
application/json：utf-8 编码
-
multipart/form-data：每部分编码可以不同
-
-
表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
-
文件上传需要用 multipart/form-data 格式
-
js 代码可以支持任意格式发送数据
服务端接收
-
对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可
-
对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
