HTML标签小结

Posted 2022-05-07 miaoning

1. 块级元素--block

<div></div>  区域标签。

<h1></h1>  标题标签。

<p></p>  段落标签。

<ul> <li></li> </ul> 无序列表标签，ul和li都是块级标签，ul是unordered list，表示其内的列表标签li是无序的。

<ol> <li></li> </ol>  有序列表标签，ol是ordered list，表示其内的列表标签是有序的。

<dl> <dt></dt><dd></dd> </dl>  定义列表标签，dl是definiton list，dt是definition title，dd是definition description。

<table> <tr><th></th> </tr> <tr><td></td> </tr></table>  表格标签，tr是行(table row), th是表头(table head), td是单元数据格(table data cell), 其中<table>与<tr>是块级标签，<th>与<td>是行内块标签。

<form></form>  form表单，用于用户输入创建 html 表单，包含input、label等元素。

块级标签特点

1）独自占一行；

2）可设置宽高，默认是父标签的100%。

 

2. 行内元素--inline

<span></span>  组合行内元素，以便通过样式来格式化它。

<a></a> 超链接标签。

<em></em> 强调，倾斜。

<i></i>  显示斜体文本效果。

<strong></strong>  强调，加粗。

行内元素特点

1）在一行内显示；

2）不可设置宽高；

3）如果把行高设置为父级块元素的高度，则该行相对于父级元素会在垂直方向居中显示。

 

3. 行内块元素--inline-block

<img>  图片标签。

<input></input>  表单中的输入标签。

行内块元素特点

1）拥有行内元素的特点。；

2）可设置宽高。

 

这些标签的显示方式并不是固定不变的，都可以通过设置css的display属性值来相互转换，display有inline, block, inline-block等属性值。

通过以上这些标签的配合，我们就可以把许多网站的基本结构搭出来了。