html的内容呢,我们已经说了很多节了,这一节是时候总结一下块级元素或内联元素了。
目录
1 div
div这是一个块级元素,像很多元素一样,如果写2个div标签元素,第二个默认会重新起一行。
我们之前还学习了标题标签(h1到h6),段落标签(p),列表标签(ul)等,他们都具有这样的特性。也就是说,写2个标签,默认第二个会新起一行来显示。
但div呢,却没有特殊的含义,他主要的功能是负责包裹其他标签,作为一个容器。所以,很多人又把div标签看做是一个盒子。
当我们做项目开发的时候,很容易把一些离得比较近,或者是把一些内容归结为一部分,所以呢,就用div把这些内容包括起来。告诉其他开发者,这些内容是一个块。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<div id="form-box">
<div>
<label>用户名</label>
<input type="text" />
</div>
<div>
<label>密码</label>
<input type="password" />
</div>
<div>
<button>登录</button>
</div>
</div>
<div>
<p><b>登录需知:</b></p>
<p>这里是登录需知的内容。</p>
</div>
</body>
</html>
总之呢,div就是一个块元素,他可以看做是一个盒子,可以包裹一些业务场景比较近的所有元素们。甚至像上面说的,input 和 button 这些表单控件们,完全可以不放到form表单里,可以自由使用。
2 span
span呢,是一个内联元素,或者说是一个行内元素。他像很多其他行内元素一样,宽度默认由其内容决定。还有链接标签(a),加粗标签(b),图片标签(img)等,他们都具有这样的特性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<div id="form-box">
<p><a href="https://www.baidu.com">五星红旗</a><b>迎风飘扬</b>,胜利的<span>歌声多么<i>响亮</i></span></p>
</div>
</body>
</html>
3 包裹原则
html有这么多的标签们,几乎都是大的包小的,小的再包小的,包来包去。刚才我们又说了,div像是一个盒子,可以包裹很多业务场景相近的子标签们。
但后来我们又做了例子,行内的span标签,仍然可以包裹其他子行内标签。
但其实是有个包裹原则的,那就是块级元素,最好是做为大标签,他用来包裹行内(或者叫内联)标签们。
这是一个基本原则,但其实到了真实开发中,你会发现,不遵守原则的地方还是很多的,哈哈,慢慢去探索吧。