HTML元素之块元素（壹）

最新推荐文章于 2024-06-06 08:26:43 发布

狸猫&角羊

最新推荐文章于 2024-06-06 08:26:43 发布

阅读量502

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_52486516/article/details/109689634

版权

让我们复习一下块元素的特点：
1.独占一行；

div{
	width:100px;
	height:100px;
	background:blue;
}

<div></div>

在这里插入图片描述

2.设置宽高有效；不设置宽高时，宽度自适应父级宽度，高度由内容撑开；
3.适用所有的css样式；
4.设置margin、padding值有效；
我们在单独了解一下我所学到的块元素：
1.<body> </body>
1>网页的主体内容都写在body里；
2>body默认有8px的margin值（间隙）；
在这里插入图片描述
2.<div>盒子</div>
3<p>段落</p>
1>段落标签默认有上下间隙；设置**margin:0;**可消除；

4.<h1>标题</h1>h1~h6
1>标题元素默认字体加粗，加大，h1、h2、h3、h4、h5、h6字体逐渐减小；
2>同样默认上下有间隙，设置margin:0;取消；
在这里插入图片描述
5.<ul>无序列表</ul>
1>与<li></li>组合使用；
2>同样设置有默认的样式；上下间隙使用margin:0;padding:0;取消；列表特有的样式设置 list-style:none; 取消

<ul type="circle"><!--type="circle"表示空心圆点，square实心小方块，默认实心小圆点-->
	<li>hello</li>
	<li>hi</li>
</ul>

在这里插入图片描述

6.<ol>有序列表</ol>
1>与<li></li>组合使用；
2>同样设置有默认的样式；上下间隙使用margin:0;取消；列表特有的样式设置 list-style:none; 取消；
3>type属性，默认为数字，也可以 type="i"
7.<dl>自定义列表</dl>
1>与<dt></dt> <dd></dd>组合使用；一个列表中dt只能有一个；
2>同样设置有默认的样式；上下间隙使用margin:0;取消；列表特有的样式设置 list-style:none; 取消；

<dl>
	<dt>hello</dt>
	<dd>hi</dd>
	<dd>hi</dd>
</dl>

在这里插入图片描述
8.<table>表格</table>
1>与<tr>行</tr><td>列</td>组合使用；
2>合并行：rowspan合并列：colspan取消单元格间隙：border-spacing/cellspacing 单元格与内容之间的距离：csllpadding
3><thead></thead><tbody></tbody><tfoot></tfoot>代码发生顺序的变化，也不会影响在网页里的显示顺序

<table>
	<caption>表格标题</caption>
	<thead><!--表头-->
		<tr>
			<td></td>
		</tr>
	</thead>
	<tbody><!--表格的中间部分-->
		<tr>
			<td></td>
		</tr>
	</tbody>
	<tfoot><!--底部-->
		<tr>
			<td></td>
		</tr>
	</tfoot>
</table>

9.<form>表单</form>
1>收集用户信息

<form action="url" method="get/post"><!--url上传信息的路径或网址；get/post上传的方式，post比较安全-->
	<input type="" name=""/>
</form>

狸猫&角羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML元素之块元素（壹）

让我们复习一下块元素的特点：1.独占一行；div{ width:100px; height:100px; background:blue;}<div></div>2.设置宽高有效；不设置宽高时，宽度自适应父级宽度，高度由内容撑开；3.适用所有的css样式；4.设置margin、padding值有效；我们在单独了解一下我所学到的块元素：1.<body> </body>1>网页的主体内容都写在body里；2>body默
复制链接

扫一扫