电脑网站怎么做,中国旅游网官网,免费收录链接网,做海岛旅游类网站的背景及意义1、标签 创建1.html文件#xff0c;浏览器输入E:/frontheima/1.html#xff0c;可以访问页面 页面展示 在VSCODE安装IDEA的快捷键#xff0c;比如ctld复制一行、ctrlx剪切
p idp1 title标题1Hello,world!/p
p idp2浏览器输入E:/frontheima/1.html可以访问页面 页面展示 在VSCODE安装IDEA的快捷键比如ctld复制一行、ctrlx剪切
p idp1 title标题1Hello,world!/p
p idp2Hello,world!/p
pHello,world!/p标签可以设置属性id、标题title
phtml是一个的b强大/b语言/p元素之间可以嵌套其中b标签是加粗
p idp1 title标题1Hello,world!/p
p idp2Hello,world!/p
pHello,world!/p
phtml是一个的b强大/b语言/p
img srcspring.png空元素是没有内容的标签比如img标签 img标签是展示图片 输入!可以输出html模板将lang改成zh
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp idp1Hello,world!/pimg srcspring.png width100px
/body
/html在body标签中设置p标签和img标签 浏览器输入E:/frontheima/2.html可以显示
2、超链接a标签
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya href2.html本地网页/ahra hrefhttp://www.baidu.com互联网网页/ahra href#p1页面内锚点/ahrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrhrp idp1段落p1 a href#回到页面的顶部/a/p/body
/htmlhr标签是分割线a标签是超链接可以访问本地网页、互联网网页、页面内锚点其中页面内锚点可以实现页面内跳转
img srcdata:image/png;base64,二进制数据src填写data后面是图片的二进制数据并且用base64编码
3、表单form
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actionhttp://localhost:8080/test/f1input typetext nameusernameinput typesubmit value提交/form
/body
/html表单提交数据用form标签action是提交表单数据的服务器地址input标签是输入框typetext表示输入文本必须要有name属性才能提交到表单typesubmit表示提交表单数据value是提交
RestController
RequestMapping(/test)
Log4j2
public class TestController {GetMapping(/f1)public String f1(RequestParam(username) String username) {log.info(username {}, username);return 收到表单提交的数据;}
}创建SpringBoot工程并设置f1方法用来接收表单提交的数据 表单提交username张三点击提交按钮会提交表单数据到服务器 服务器收到表单提交的数据username张三
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actionhttp://localhost:8080/test/f2男input typeradio namesex value男 checked女input typeradio namesex value女brbr唱歌input typecheckbox namehobby value唱歌跳舞input typecheckbox namehobby value跳舞逛街input typecheckbox namehobby value逛街input typesubmit value提交/form
/body
/htmlinput标签表示输入框typeradio表示单选框checked表示默认选中的单选框typecheckbox表示多选框多个相同单选框的name必须相同多个相同多选框的name必须相同
GetMapping(/f2)public String f2(RequestParam(sex) String sex, RequestParam(hobby) ListString hobbies) {log.info(sex {}, sex);log.info(hobbies {}, hobbies);return 收到表单提交的数据;}多选框用List集合接收 选择女、唱歌和逛街 服务器输出单选框和多选框提交表单的数据
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actionhttp://localhost:8080/test/f3 methodpost enctypemultipart/form-datainput typefile namemyFilebrbrinput typesubmit value提交/form
/body
/html表单提交数据发送post请求上传文件是typefileenctypemultipart/form-data表示上传文件或者二进制数据默认是application/x-www-form-urlencoded表示传递简单数据是按照键值对传递的用分割键值对
PostMapping(/f3)public String f3(RequestPart(myFile) MultipartFile file) {log.info(file size {}, file.getSize());log.info(file name {}, file.getOriginalFilename());return 收到表单提交的文件数据;}服务器用MultipartFile表示文件数据用RequestPart指定文件名字即name属性RequestPart的作用是将文件数据转换为MultipartFile对象或直接转换为字节数组 前端上传文件 服务器接收到上传的文件数据大小size和文件名字filename JS函数length计算字符串的长度 JS函数计算汉字的URL编码因为请求参数不能有汉字必须是汉字的URL编码 URI中参数的汉字必须编码才能放到请求体进行传递json数据中存在汉字也可以传递
请求有请求行、请求头、请求体请求行包括请求方式GET还是POST、URI、HTTP协议是1.0还是1.1还是2.0请求头是键值对有HOST表示主机地址、Content-Type默认是application/x-www-form-urlencoded、Content-Length表示请求体的字节长度请求体可选
Content-Type默认是application/x-www-form-urlencoded表示传递键值对它是url编码
Content-Typeapplication/json表示请求体是json格式的数据服务器用RequestBody注解标注对象这个注解的作用是将json数据转成java对象json数据中存在汉字也可以传递它是utf-8编码
Content-Typemultipart/form-data表示上传文件资源或者二进制数据 表单支持两种编码方式Content-Typeapplication/x-www-form-urlencoded或者Content-Typemultipart/form-data
文件上传支持的编码方式Content-Typemultipart/form-data
