无在无不在
无在无不在

HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block

目录

0x00重量级元素之表单：

0x01 给标签元素一个命名，让程序容易找到

0x02 行内元素，块级元素和行内块级元素的区别（重点，面试笔试必问）

0x03inline/inline-block/block

0x00重量级元素之表单：

收集用户输入，发送或者提交给服务器。一般情况下只有表单才有向服务器提交内容的功能。使用方式如下例子：

  • form标签是成对出现的双闭合标签
  • action里面传入浏览者输入的数据被传送到的地方。可以是json文件，php文件等
  • method里面传入的是数据传送的方式(get/post)

表单由两大部分组成：

1.用户输入：

  1. 文本：普通文本，密码文本
  2. 单选框
  3. 多选框
  4. 下拉框

2.提交： 提交按钮。

http协议：超文本传输协议，保证浏览器和服务器的通讯。

http协议中标准的模式是：请求-应答模式 即 浏览器需要主动地发起请求>>服务器接受请求>>自身做处理把结果返回给浏览器>>浏览器根据结果展示出来。

请求方式：GET,POST等

GET方式，点击提交后，url栏中可以看到传参内容

POST方式，点击提交后，url栏中看不到传参内容，点击F12，查看NETWORK，会发现多了一次请求，在HEADS中查看传参内容



    
        
        注册页面
    




   用户名 
 //如果没有写name属性为递交数据命名的话，url栏中就不会有传参的显示
   密码：

截图对比：

没有写name属性，提交数据后

HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block_第1张图片

写了name属性，提交数据后

HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block_第2张图片

丰富后的代码：



    
        
        注册页面
    







    
   用户名 
 
   密码：

   性别：

   
    小哥哥
          小姐姐
          小人妖
 
         有点娘
         有点man

         
     兴趣：看书书
           吃饭饭
          打炮炮


          城市：

 

value属性是给服务器用来区分各个选择项的

没有设置value值，提交前HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block_第3张图片

没有设置value值，提交后

HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block_第4张图片

设置value值，提交后

HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block_第5张图片

 

 

当行输入标签
      文本框
  密码框
  多选框
     单选框
   提交按钮
   重置按钮
  隐藏文本框
选择框标签

文本域标签
  类似于留言框


 action属性表示该表单将会提交到什么地方

作业：

HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block_第6张图片HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block_第7张图片

 

0x01 给标签元素一个命名，让程序容易找到

给标签元素一个id命名，id是全局唯一的。

给标签元素一个class命名,class是可以多个标签元素共用；

0x02 行内元素，块级元素和行内块级元素的区别（重点，面试笔试必问）

1.块级元素：

  • 很霸道，总是另起一行
  • 可以设置其宽度、高度、内外边距
  • 在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
  • 可以容纳行内元素和其他块元素

常见的块级元素有:

/

/

/