HTML_002
/* 时间：2021/11/25 功能：HTML 目录: 一: 模板注释 二: 常用标签 三: 列表 四: 表格 五: 表单 六: 提交表单 七: 查看提交表单: 前后端 八: 问题 1 后端解析数据 */
一: 模板注释
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
hi
body>
html>
二: 常用标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<h1> h1标题 h1>
<h3> h3标题 h3>
<h6> h6标题 h6>
<div> div标签: 容器标签; 可以包含其他标签 div>
<p> p 段落标签 p>
<p> p 段落标签 p>
<br>
<img src = "imgs/001.PNG" alt="">
<hr>
<img src = "imgs/002.PNG" alt="图片加载失败会显示">
<a href="http://www.baidu.com">百度a>
<div>
<p> 段落标签 p>
div>
body>
html>
三: 列表
<ul> <li>苹果li> <li>香蕉li> ul> <ol> <li>大米li> <li>红薯li> ol>
四: 表格
<table style="border: 1px solid black; border-collapse:collapse;"> <tr> <th style="border: 1px solid black;">姓名th> <th style="border: 1px solid black;">年龄th> tr> <tr> <td style="border: 1px solid black;">张三td> <td style="border: 1px solid black;">18td> tr> table>
五: 表单
<form> <p> <label for="name"> 用户名: label> <input type="text" id="name"> p> <p> <label for="pass">密码:label> <input type="password" id="pass"> p> <p> <label>性别:label> <input type="radio"> 男 <input type="radio"> 女 p> <p> <label>爱好label> <input type="checkbox">学习 <input type="checkbox"> 小说 <input type="checkbox"> 打游戏 p> <p> <label>照片label> <input type="file"> p> <p> <label>个人描述label> <textarea>textarea> p> <p> <label>籍贯:label> <select> <option>北京option> <option>上海option> <option>广州option> select> p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="按钮"> p> form>
六: 提交表单
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<form action="http://www.baidu.com" method="post">
<p>
<label for="name"> 用户名: label>
<input type="text" id="name" name="username">
p>
<p>
<label for="pass">密码:label>
<input type="password" id="pass" name="password">
p>
<p>
<label>性别:label>
<input type="radio" name="sex" value="0"> 男
<input type="radio" name="sex" value="1"> 女
p>
<p>
<label>爱好label>
<input type="checkbox" name="love" value="学习">学习
<input type="checkbox" name="love" value="睡觉"> 小说
<input type="checkbox" name="love" value="打游戏"> 打游戏
p>
<p>
<label>照片label>
<input type="file" name="pic">
p>
<p>
<label>个人描述label>
<textarea name="desc">textarea>
p>
<p>
<label>籍贯:label>
<select name="position">
<option>北京option>
<option>上海option>
<option>广州option>
select>
p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
p>
form>
body>
html>
七: 查看提交表单: 前后端
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<form action="http://127.0.0.1:6006" method="post">
<p>
<label for="name"> 用户名: label>
<input type="text" id="name" name="username">
p>
<p>
<label for="pass">密码:label>
<input type="password" id="pass" name="password">
p>
<p>
<label>性别:label>
<input type="radio" name="sex" value="0"> 男
<input type="radio" name="sex" value="1"> 女
p>
<p>
<label>爱好label>
<input type="checkbox" name="love" value="学习">学习
<input type="checkbox" name="love" value="睡觉"> 小说
<input type="checkbox" name="love" value="打游戏"> 打游戏
p>
<p>
<label>照片label>
<input type="file" name="pic">
p>
<p>
<label>个人描述label>
<textarea name="desc">textarea>
p>
<p>
<label>籍贯:label>
<select name="position">
<option>北京option>
<option>上海option>
<option>广州option>
select>
p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
p>
form>
body>
html>
1 : 说明 HTML源代码，文件名为"index6006.html"。
1 : 填写页面信息，点击"提交"。
1 : 查看Form Data。
1 : 查看服务端获取数据。
八: 问题
1 后端解析数据
/* 提交数据中文无法显示 */