05【HTML的元素类型】(1)

最新推荐文章于 2024-07-19 15:20:42 发布

2401_84253380

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量239

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_84253380/article/details/139814567

版权

+ [5.3 行内块元素](#53__26)

五、HTML的元素类型

在HTML中元素分为三类：块级元素、行内元素、行内块元素

5.1 块级元素

块级元素特点：
- 1）独占一行，自上而下排列
- 2）默认不设置宽度时，继承父元素的宽度（默认为父级宽度的100%）
- 3）可以定义自己的宽度和高度，以及盒模型中的任意属性（margin，padding，border）
- 4）块级元素可以作为一个容器容纳其他的任何元素

常见块元素有：p、ul、ol、li、dl、dt、dd、table、tr、td、form、h1、h2、h3、h4、h5、h6

5.2 行内元素

行内元素的特点：
- 1）不会独占一行，从左到右排列
- 2）里面的内容会把行内元素撑大，宽高由内容来决定
- 3）不能定义自己的宽度和高度，可以设置左右盒模型属性（margin、padding），不可以设置上下盒模型属性（margin、padding、line-height等）
- 4）行内元素只能嵌套行内元素，不能嵌套块元素

常见的行内元素有：a、span、strong、b、em、i、label

5.3 行内块元素

行内块元素的特点（vertical-align属性只针对这类型元素设置有效）：
- 1）即具有行内元素特点：不会独占一行，从左到右排列
- 2）又具有块元素的特点：可以定义宽高以及盒模型中的任意属性

常见的行内块元素有：img、input、textarea、select
【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--css宽度写法,等到后面在学-->
<div style="width: 100px">你好</div>
<div style="width: 100px">我好</div>

<hr>
<!--行内元素没有宽高-->
<span style="width: 100px">aa</span>
<span style="width: 100px">bb</span>
<a href="https://www.jd.com" style="width: 100px">cc</a>

<hr>
<img src="img/1.png" alt="" style="width: 100px">


### 一、网安学习成长路线图


网安所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/aa7be04dc8684d7ea43acc0151aebbf1.png)


### 二、网安视频合集


观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f0aeee2eec7a48f4ad7d083932cb095d.png)


### 三、精品网安学习书籍


当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/078ea1d4cda342f496f9276a4cda5fcf.png)


### 四、网络安全源码合集+工具包


光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e54c0bac8f3049928b488dc1e5080fc5.png)


### 五、网络安全面试题


最后就是大家最关心的网络安全面试题板块  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/15c1192cad414044b4dd41f3df44433d.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/b07abbfab1fd4edc800d7db3eabb956e.png)

2401_84253380

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
05【HTML的元素类型】(1)

【代码示例】
复制链接

扫一扫