HTML 可以通过 <div> 和 <span>将元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。
HTML 块级元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
<h1>这是标题</h1>
<p>这是段落</p>
<ul>
<li>菜单</li>
<li>菜单</li>
</ul>
<table>
<tr>
<td>表格</td>
</tr>
</table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
<b>内联标签不会换行</b>
<a href="">链接是内联,但是可以通过css修改</a>
<img src="/uploads/QQ20190422-200458@2x.png" height=20>
HTML 分组标签
标签 | 描述 |
---|---|
<div> | 定义了文档的区域,块级 (block-level) |
<span> | 用来组合文档中的行内元素, 内联元素(inline) |
HTML <div> 元素
HTML div 元素是块级元素,它可用于组合其他 HTML 元素的容器。
div 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,div 元素可用于对大的内容块设置样式属性。
div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。
<div style="width:100px; height:100px; background: #ff0" >
</div>
<div style="width:200px; height:200px; background: #f0f" >
</div>
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
<p>一行文本可以使用span分组<span style="color:red">第一个span红色</span><span style="color:yellow">第二个span黄色</span></p>
讨论区