块

最新推荐文章于 2023-02-02 09:41:03 发布

Frank·Ming

最新推荐文章于 2023-02-02 09:41:03 发布

阅读量479

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u013792921/article/details/44786921

版权

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1.块级元素(block level element)在浏览器中显示时，通常会以新行来开始（和结束）。例如：<h1>(一号粗体标题文字),<p>(新行),<ol>(有序列表),<table>(表格)
2.内联元素(inline element)在浏览器中显示时，通常不会以新行来开始。例如：<b>(粗体),<td>(表单元格内容),<a>(链接),<img/>(图片)
3.大多数HTML元素都被定义为块级元素或内联元素。
4.<div>元素：这是一个块级元素，它是用于组合其他的HTML元素的容器，但是它本身没有特定的含义。
除此之外，由于它本身属于块级元素，因此浏览器会再其前后位置显示折行。
PS：<div>通常和css一同使用，因为在和css一同使用时候可以对大的内容块设置样式属性。
PSS：<div>的另一个常见的用途就是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的正确作用是显示表格化的数据。
5.<span>元素：这是一个内联元素，它可以用作文本的容器。它本身也没有特定的含义。
ps：与css一同使用，<span>元素可用于为部分文本设置样式属性。
6.使用<div>元素布局实例：
<!DOCTYPE>
<html>
<head>
<style type="text/css">
div#container{width:500px;}
div#frontHeader{background-color:#99bbbb;text-align:center;}
div#middleLeft{background-color:#ffff99;text-align:center;height:200px;width:250px;float:left}
div#middleRight{background-color:#EEEEEE;text-align:center;height:200px;width:250px;float:left}
div#belowFooter{background-color:#99bbbb;text-align:center;}
h1{margin-bottom:0;font-size:22px;}
h2{margin-bottom:1;font-size:18px;}
ul{margin:;}
li{list-style:none;}
</style>
</head>

<body>
<div id="container">
<div id="frontHeader"><h1>First SelfMake WebPage</h1></div>
<div id="middleLeft">
<br>
<h2>Sex</h2>
<ul>
<li>male</li>
<li>female</li>
<li>monster</li>
</ul>
</div>
<div id="middleRight"><br/><br/><br/>who is monster?</div>
<div id="belowFooter">written by zhangtianyu</div>
</div>
</body>
</html>