CSS03

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

如图

表单元素

代码

 

       

   

   

    姓名

    密码

           

            性别

            男

            女

           

             

            取向

            男

            女

           

   

爱好

dota

旅游

宠物

   

   

评论

</p> <p> 123</p> <p>

   

   

   

   

我的宠物

   

     

猫

     

狗

     

鱼

   

提交

 

效果图

具体标签

1、form

代码结构如：

form标签是表单的外壳，有4个主要属性：

（1）action：表单提交的地址

（2）method：提交表单的方法

（3）target：在何处打开action

（4）enctype：

application／x-www-form-urlencoded：在发送前编码所有字符（默认）

text／plain：空格转换为“+”加号，但不对特殊字符编码

multipart／form-data：使用包含文件上传控件的表单是，必须使用该值

2、type

代码结构如：

（1）type="text" 普通的文本输入框，单行输入（不行回车换行）。可输入文字展示

（2）type="password" 输入密码是以圆点展示，不被人知道

（3）type="checkbox" 呈现带有阴影的勾选方框

注意两点：

A. 如果是分组，name写成不同，表示多选，如针对hobby这个关键字的搜索，value值需要设置，否则后台提交的用户信息将显示为on（无信息展示）。

B. value的作用：让后台来识别该字段的信息

（4）type="radio" 呈现带有阴影的点选圆框

注意：radio 如何分组？举例说明，只需要在中的name值设置另一个意义值，就可以分组显示

如第1组：

男

女

第2组：

男

女

5）type="file" 用于文件上传，呈现“选择文件”按钮，点击即可上传文件

注意：accept该参数使用，即用于接收所限制的文件格式

*（6）type="hidden"

暂存信息。如在type="hidden"埋下一个值，后台定位获取相应的值，可安全存值，用户什么都看不见，只能在后台看到；

保障安全。当打开一个页面，实际上该页面是后端写的模板并在里面填充数据，填充好数据后，安全策略时使用type="hidden"，即：

当用户提交用户信息至后台，同时该安全点type="hidden"的值也会提交后台，后台进行校验——确认过安全，相当于埋在后台与用户信息相匹配的一个安全校验值，即该用户为一个合法用户。

（7）type="button"，不能点击提交 type="submit"，可以点击提交

（8）type="reset"，用于清空所有用户信息

注意：以下input有何作用？

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中，设置默认选择的初始值，即猫

6、textarea 实现多行文本，展示较大的输入框。即常见的评论框。

若在。。。中输入任意值，即相当于value赋值的意义，也就是说在。。。输入的值都能显示其输出的意义。

7、placeholder 用于输入什么用户信息的提示

表单提交原理（涉及post和get）

一、HTML表单

1、什么是表单

能够去输入用户信息的一个单子。和我们平时填写的纸质表单一样，在HTML页面上，也有表单是用于搜集不同类型的用户信息输入

2、作用

用于将收集的信息，提交你网站的后台（或者服务器）。

HTML表单是一个包含表单元素的区域，表单元素是允许用户在表单中（表单元素包含如：文本域、下拉列表、单选框、复选框等）输入信息的元素

二、写表单

1、表单提交原理

一般表单有登录名、密码，

、，表单所有信息用

包裹。用

包裹所有输入框，当点击提交后，将会把所包裹得所有输入框的信息提交给后台的一个地址上。

2、写表单

（1）表单内的主要标签属性：

A、

B、

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方式请求数据。