html标签元素类型

傷城~ 2022-12-27 06:28 159阅读 0赞

> HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

#### 块级元素： ####

*  独占一行，宽度和父元素宽度一样宽（默认）
 *  可以设置宽高
 *  设置的width属性和元素的宽度（width+padding2+border2+margin2）是两回事(盒子模型)
 *  如果没有设置高度，高度由内容撑开
 *  块级元素可以包裹别的元素。p标签尽量不要包裹别的块级元素

常用的块级元素：

*  `<div> </div>`：  
    块级的块标签，用于在效果中 定义一块；
 *  `<p> </p>`：  
    段落标签，用于展示效果中划分段落；
 *  `<h1>.....<h6>`：  
    标题标签，用于展示效果中划分标题；
 *  `<ol> </ol>`：  
    有序列表标签，用于在效果中定义一个有序列表
 *  `<ul> </ul>`：  
    无序列表标签，用于在效果中定义一个无序列表；
 *  `<dl> </dl>`：  
    引起定义列表；
 *  `<table></table>`：  
    表格标签，用于在效果中定义一个表格；
 *  `<form></form>`：  
    指定所包含控件在表单中起作用。

#### 行内元素： ####

*  可以和别的标签共享一行，标签的宽度和高度由内容决定
 *  不能设置宽高，外边距和内边距部分可控制(盒子模型)

常用的行内元素：

*  `<a> </a>`：  
    超链接标签，用于在效果中定义一个可以点击跳转的链接；
 *  `<span></span>`  
    行级的块标签，用于在效果中 一行上定义一个块，进行内容显示；
 *  `</br>` ：  
    换行；
 *  `<i>`：  
    指定文本应以斜体渲染，若可用的话；
 *  `<em>` ：  
    强调文本，通常以斜体渲染；
 *  `<strong>` ：  
    以粗体渲染文本；
 *  `<label>` ：  
    为页面上的其它元素指定标签；
 *  `<q>` ：  
    分离文本中的引语；
 *  `<cite>`：  
    用斜体显示标明引言；
 *  `<code>`：  
    指定代码范例；
 *  `<var>`  
    定义编程变量。通常以斜体渲染；

#### 行内块级元素： ####

*  可以和别的元素共享一行，宽高由内容决定（默认）
 *  可以设置宽高
 *  注意：行内块级元素并排显示的时候，两个行内块级元素之间默认有一个间隔
 *  取消行内块级元素之间的空格：

（1）给行内元素的父元素设置字体大小为0px（行内元素的内容无法显示，行内元素之间的空格也无法显示）  
（2）给行内元素设置合理的字体大小（行内元素的内容就能显示了）

常用的行内块状元素：

*  `<img></img>` ：  
    图片标签，用于在页面效果中展示一张图片；
 *  `<input></input>`：  
    创建各种表单输入控件。