CSS 元素分类（块级元素、行内元素）
display:block、inline、inline-block 块级包含块级和行内；行内只能包含文本和行内 块级占据一整行空间；行内占据自身宽度空间， 宽高设置、内外边距的差异
块级元素
div h1-h6 p hr（线）
form table pre ul li dl ol
dd dt tr td th
行内元素（内联）
em strong span a img br
button input label select textarea
code script
如图
表单元素
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="login">
<input type="text" name="sex">
<form action="/a123" method="get">
<div class="username">
<label for="username">姓名</label>
<input type="text" id="username" name="username1" placeholder="用户名">
</div>
<div class="password">
<label for="password">密码</label>
<input type="password" id="password" name="password1">
</div>
<div class="sex">
<label for="sex">性别</label>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</div>
<div class="sexchoose">
<label for="sexchoose">取向</label>
<input type="radio" name="sex2" value="男">男
<input type="radio" name="sex2" value="女">女
</div>
<div class="hobby">
<label for="aihao">爱好</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travl">旅游
<input type="checkbox" name="hobby" value="pet">宠物
</div>
<div class="textarea">
<label for="textarea">评论</label>
<textarea name="article">
123
</textarea>
<input type="hidden" name="abcd" value="12345">
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
<div class="choose">
<label for="pet">我的宠物</label>
<select name="city">
<option value="cat">猫</option>
<option value="dog" selected>狗</option>
<option value="fish">鱼</option>
</select>
<button>提交</button>
</form>
</div>
</body>
</html>
效果图
具体标签
1、form
代码结构如：
<form action="/a123" method="get">
form标签是表单的外壳，有4个主要属性：
（1）action：表单提交的地址
（2）method：提交表单的方法
（3）target：在何处打开action
（4）enctype：
application／x-www-form-urlencoded：在发送前编码所有字符（默认）
text／plain：空格转换为“+”加号，但不对特殊字符编码
multipart／form-data：使用包含文件上传控件的表单是，必须使用该值
2、type
代码结构如：
<input type="text" name="sex">
（1）type="text" 普通的文本输入框，单行输入（不行回车换行）。可输入文字展示
（2）type="password" 输入密码是以圆点展示，不被人知道
（3）type="checkbox" 呈现带有阴影的勾选方框
注意两点：
A. 如果是分组，name写成不同，表示多选，如针对hobby这个关键字的搜索，value值需要设置，否则后台提交的用户信息将显示为on（无信息展示）。
B. value的作用：让后台来识别该字段的信息
（4）type="radio" 呈现带有阴影的点选圆框
注意：radio 如何分组？举例说明，只需要在<input type="radio" name="sex" value="男">中的name值设置另一个意义值，就可以分组显示
如第1组：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
第2组：
<input type="radio" name="sex1" value="男">男
<input type="radio" name="sex1" value="女">女
5）type="file" 用于文件上传，呈现“选择文件”按钮，点击即可上传文件
注意：accept该参数使用，即用于接收所限制的文件格式
*（6）type="hidden"
暂存信息。如在type="hidden"埋下一个值，后台定位获取相应的值，可安全存值，用户什么都看不见，只能在后台看到；
保障安全。当打开一个页面，实际上该页面是后端写的模板并在里面填充数据，填充好数据后，安全策略时使用type="hidden"，即：
<input type="hidden" name="abc" value="123456">
当用户提交用户信息至后台，同时该安全点type="hidden"的值也会提交后台，后台进行校验——确认过安全，相当于埋在后台与用户信息相匹配的一个安全校验值，即该用户为一个合法用户。
（7）type="button"，不能点击提交 type="submit"，可以点击提交
（8）type="reset"，用于清空所有用户信息
注意：以下input有何作用？
<input type="submit" value="提交" name="提交按钮">
A、type="submit" ，提示input作用为“提交”按钮
B、value="提交"，显示提交作用，意义在于“点击提交”的交互作用
C、input里name 作用？即用于传递数据给后台都形成有意义的识别值，如用value和name赋值，如果不写的话，该输入标签将不会有任何意义，就等于无实际操作表单的意义。
3、type=hidden隐藏域作用
type=hidden隐藏域，作为校验该用户信息的一个隐藏值（判断标准）。当用户打开页面后是看不见type=hidden相应的值。填写用户信息后点击提交时，用户信息的数据（包括type=hidden值）随即提交后台，打开后台则会展示代码type=hidden所写的相应元素属性值。后台校验type=hidden相应值如果是正确，即用户提交为安全。
可以用来埋点（保护的参数）——浏览器提交后台有该参数作为校验标准参考——若显示错值或无值，服务器将不承认所提交的数据；若为正确值，则说明该用户获取权限，即为合法用户，可防止CSRF攻击
4、label 输入框前的文字标注
注：for，用于点击文字或输入框时，是文字显示一种focus状态，可直接输入对应信息
5、select 下拉菜单。option中，设置默认选择的初始值，即<option value="cat" selcted>猫</option>
6、textarea 实现多行文本，展示较大的输入框。即常见的评论框。
若在<textarea>。。。</textarea>中输入任意值，即相当于value赋值的意义，也就是说在<textarea>。。。</textarea>输入的值都能显示其输出的意义。
7、placeholder 用于输入什么用户信息的提示
表单提交原理（涉及post和get）
一、HTML表单
1、什么是表单
能够去输入用户信息的一个单子。和我们平时填写的纸质表单一样，在HTML页面上，也有表单是用于搜集不同类型的用户信息输入
2、作用
用于将收集的信息，提交你网站的后台（或者服务器）。
HTML表单是一个包含表单元素的区域，表单元素是允许用户在表单中（表单元素包含如：文本域、下拉列表、单选框、复选框等）输入信息的元素
二、写表单
1、表单提交原理
一般表单有登录名、密码，<form></form>、<input>，表单所有信息用<form></form>包裹。用<form>包裹所有<input>输入框，当点击提交后，将会把<form>所包裹得所有<input>输入框的信息提交给后台的一个地址上。
2、写表单
（1）表单内的主要标签属性：
A、
<form></form>
B、
<formaction="/a123"method="get">
action 把数据提交到后台的地址，如action="/a123"，提交到当前域名下的/a123
method 提交数据的方式
（2）demo：
（3）html文件用浏览器打开页面
写出登录名、密码、提交代码后，以get形式点击提交，页面url显示input输入的相应的内容：
注：点击提交代表向服务器发送一个请求，这个文件是通过get方式进行表单收集
3、终端上操作
即本地终端开启服务器，以服务端的方式打开页面
（1）命令行开启静态服务器，并打开页面：
因为之前我已经安装nodejs，用npm安装了http-server这个服务器，所以可以执行以下代码直接打开这个静态服务器：
http-server
代码执行之后，输入相应的url出现的页面，两步骤之后的示意图：
（2）输入相应信息之后，出现：
（3）页面右键——检查，重新输入表单信息，点击提交
请求地址：Request URL: http://192.168.18.82:8080/a123?sex1=123&username1=1234&password1=12345
请求类型：Request Method: GET
请求参数：username1:1234 password1:12345
A、get请求
即当form.html中method="get"时，页面上点击“提交”时，就会将form.html展现的信息进行组装，以view的形式去组合成这个url地址：http://192.168.18.82:8080/a123?sex1=123&username1=1234&password1=12345，向这个地址发送请求。
get请求，本质上就是url的拼接，把你的参数拼接在一起组成一个新的url
注：username所得的参数是属于input标签中的name属性
B、post请求
关于post类型发送请求：由于我的服务器http-server，是个静态文件服务器，不支持post请求。
post的请求类型得到的url地址更干净，更安全。
三、post和get的区别
1、method提供两种提交方式：
get、post方式向后台发送请求，提交数据
2、区别
（1）安全，二者表象不同，get把提交的数据url可以看到，会展现在浏览器历史记录中，安全性不好；但是post看不到，安全性好。
（2）提交数据量，get最多提交1k数据，浏览器上的url地址框有字符长度限制，通常是1024字符；post理论上无限制，受服务器限制。
（3）原理，get 是拼接 url， post 是放入http 请求体中。
3、应用场景（怎么合理两种方式传递数据？）
注：在实际应用上，get 重在 "得到", post 重在"传递"
即假如向后台查询一篇论文，请求数据，请求为“得到”，用get方式请求数据；向后台“传递”数据，写了文章之后传递至后台，通常是“传递完成”的状态进行提示，用post方式请求数据。
网友评论