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

最新推荐文章于 2023-09-05 15:04:41 发布

'"<>{{7*7}}

最新推荐文章于 2023-09-05 15:04:41 发布

阅读量498

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43415644/article/details/87898970

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

0x00重量级元素之表单：

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

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

0x03inline/inline-block/block

0x00重量级元素之表单：

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

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

表单由两大部分组成：

1.用户输入：

文本：普通文本，密码文本
单选框
多选框
下拉框

2.提交：提交按钮。

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

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

请求方式：GET,POST等

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>注册页面</title>
    </head>

<body>
<!--注册页面-->
<form action="">
   用户名 <input type="text" name="usr"><br> //如果没有写name属性为递交数据命名的话，url栏中就不会有传参的显示
   密码：<input type="password" name="pas"><br>
   <input type="submit">
</form>
</body>

</html>

截图对比：

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

写了name属性，提交数据后

丰富后的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>注册页面</title>
    </head>

<body>
<!--注册页面-->
<!--action属性定义 你提交给服务器究竟是哪一个网页，如果不填，默认为当前网址-->
<!--如果你填了其他网址，那么点提交后页面就会跳转，并把跳转后的网页提交给服务器-->
<form action="" method="POST">
    <!--method属性限制提交方式，如不填默认为GET方式-->
   用户名 <input type="text" name="usr"><br> 
   密码：<input type="password" name="pas"><br>
   性别：<br>
   <!--单选框-->
   <input type="radio" name="sex" value="male"> 小哥哥
         <input type="radio" name="sex" value="female"> 小姐姐
         <input type="radio"  name="sex" value="renyao"> 小人妖<br> <!--单选框名字相同者为一组,一组只能选一个-->
         <input type="radio" name="sex1" value="niangpao">有点娘
         <input type="radio" name="sex1" value="gangtie">有点man<br>
         <!--多选框-->
     兴趣：<input type="checkbox" name="checkbox" value="kanshu" >看书书
          <input type="checkbox" name="checkbox" value="chifan"> 吃饭饭
          <input type="checkbox" name="checkbox" value="dapao">打炮炮
<!--下拉框--><br>
          城市：<select name="city" >
<option value="shanghai">帝都</option>
<option value="xian">古城</option>
<option value="peking">北京</option>

</select>   
          <input type="submit">
</form>
</body>

</html>

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

没有设置value值，提交前

没有设置value值，提交后

设置value值，提交后

当行输入标签
<input type="text">      文本框
<input type="password">  密码框
<input type="checkbox">  多选框
<input type="radio">     单选框
<input type="submit">   提交按钮
<input type="reset">   重置按钮
<input type="hidden">  隐藏文本框
选择框标签
<select>                选择框
<option>苹果</option>    选项
</select>
文本域标签
<textarea></textarea>  类似于留言框

<form action="localhost"> action属性表示该表单将会提交到什么地方
  <input type="text">
</form>

作业：

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

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

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

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

1.块级元素：

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

常见的块级元素有:<div>/<h1><h6>/<p>/<ol><ul>/<table>等（注意这里只是常见）

2.行内元素

总和相邻的行内元素在同一行上
设置宽高无效，水平方向的padding和margin属性可以设置。但是垂直方向上的无效
默认宽度是他自身内容的宽度
行内元素只能容纳其他行内元素或者文本

常见的行内元素有：

<span>/<a>/<img>/<br>/<input>/<textarea>/<select>/<strong>/<em>等

3.行内块级元素

在行内元素中就有几个特殊的标签，比如<img>/<input>/<td>，可以给他们设置宽高、对齐属性

行内块级元素综合了块元素和行内元素的不同特点

和相邻行内元素在同一行，但是之间会有空白缝隙
默认宽度是他本身内容的宽度
宽度、高度、行高、外边距和内边距都可以手动设置

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>我是块级元素，我很霸道，不和别人同一行</div>
	<p>我是块级元素</p>
	<h1>我也是块级元素</h1>
	<a href="">我是行内元素，我很好客</a>
	<span>我也是行内元素，我喜欢和别人一起玩</span>
	<input type="text" name="" value="大家一起抱团">

</body>
</html>

0x03inline/inline-block/block

display:block; 转化为块状元素；一个块状元素独占一行；可设宽、高、行高、顶和底边距离；宽默认为父元素的100%；

display:inline;转化为行内元素；和其他元素共处一行；不可设宽、高、行高、顶和底边距离；宽即所包含的文字图片之宽；

display:inline-block:可用{display:inline-block;}转化为内联块状元素；和其他元素共处一行；可设宽、高、行高、顶和底边距离；

二.布局：

先将网页按照功能分成小块，然后将小块排列好，最后把具体的内容写入到小块中。

布局方式：

div:是一个容器，用来装东西的玩意
table
iframe：在你原有的页面中嵌套页面
frameset:用于管理后台页面

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<!--
<body>
    <div style="background:red;width: 100px">
        div装的就是我div装的就是我div装的就是我div装的就是我div装的就是我div装的就是我div装的就是我
    </div>
    <div style="background: yellow;height:100px">导航</div>
    <div style="background: green;width:20% ;float: left;height: 300px">菜单</div>
    <div style="background: blue;width:80%;float:left;height:300px">具体内容</div>
     百度搜索：
     <iframe src="http://www.baidu.com" frameborder="0" width="100%"></iframe>
     <iframe src="http://www.qq.com" frameborder="0" width="100%"></iframe>

</body>



-->

<frameset rows="15%,85%">
    <frame src="frame1.html">
        <frameset cols="20%,80%">
                <frame src="frame2.html">
              <frame src="farme3.html" name="showframe">
        </frameset>
</frameset>
</html>

<!--frame2.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
</head>
<body>
    <a href="frame3.html" target="showframe">frame3.html</a>//target表示点击后，在frame3的窗口中打开
    <a href="frame4.html" target="showframe">frame4.html</a>//target表示点击后，在frame3的窗口中打开
</body>
</html>

嵌套规则：

块元素：独立成一行，可以设置宽高，默认宽高100%
1. 文字类块元素： p h1~h6
2. 容器类块元素：div table tr td th form tr td th from ul li ol dl dt dd
行元素：不独立成一行，不可以设置宽高，宽高由内容决定
1. 包括 a img input strong em del span
特殊文字：文字，br，&nbsp空格；
嵌套规则：

块元素可以嵌套行元素
```
<div>这是div <a href=""></a></div>
```
行元素可以嵌套行元素

<a href="">这是个<strong>加粗字体<strong></a>

行元素不可以嵌套块元素
文字类块元素不可以嵌套块元素

<p>这是一个文字类<div>不能这样嵌套<div>块元素<p>

容器类块元素可以嵌套块元素

作业：资料MDN W3C手册忘记了标签或者生僻的标签直接查手册

'"<>{{7*7}}

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block

目录0x00重量级元素之表单：0x01 给标签元素一个命名，让程序容易找到0x02 行内元素，块级元素和行内块级元素的区别（重点，面试笔试必问）0x03inline/inline-block/block0x00重量级元素之表单：收集用户输入，发送或者提交给服务器。一般情况下只有表单才有向服务器提交内容的功能。使用方式如下例子：<form method='传送方式'...
复制链接

扫一扫

专栏目录