HTML-必备三大元素

HTML-必备三大元素

行内元素

常用的行内元素：

• a - 锚点
• br - 换行
• img - 图片
• font - 字体设定(不推荐)
• span - 常用内联容器，定义文本内区块
• input - 输入框
• label - 表格标签
• select - 下拉选择框
• textarea - 多行文本输入框

块级元素

常用的块级元素：

• p - 标签定义段落
• h1 - 定义最大的标题
• h2 - 定义副标题
• h3 - 定义标题
• h4 - 定义标题
• h5 - 定义标题
• h6 - 定义最小的标题
• ul - 定义无序列表
• ol - 定义有序列表
• li - 标签定义列表项目
• dl - 定义列表
• dt - 定义列表中的项目
• dd - 定义列表中定义条目
• hr - 创建一条水平线
• div - 定义文档中的分区或节
• form - 创建 HTML 表单

行内元素与块级元素的区别

• 块级元素默认占一行高度，默认情况下宽度自动填满其父元素宽度；
  行内元素不会独占一行，相邻的行内元素会排在同一行，其宽度随内容的变化而变化。

• 块级元素可以设置宽高；
  行内元素不可以设置宽高。

• 块级元素可以设置 margin、padding；
  行内元素水平方向的 margin-left、margin-right、padding-left、padding-right 属性设置可以生效；
  行内元素竖直方向的 margin-bottom、margin-top、padding-top、padding-bottom 属性设置是无效的；
  行内元素的 padding-top、padding-bottom 从显示的效果上是增加的，但其实设置是无效的，并不会对它周围的元素产生影响。

特别注意img是一个特例，它虽然是行内元素，但也是置换元素，所以它的性质不同于行内元素。对于img设置padding和margin都是有效的。

常见的置换元素

img、input、textarea、select、object、iframecanvas

置换元素做为特殊的内联元素，特殊之处就在于可以设置宽度和高度

• 块级元素转行内元素：display:inline；
  行内元素转块级元素：display:block；
  行内元素或块级元素转行内块元素：display:inline-block。

空元素

常见的空元素：

<br>、<hr>、<img>、<input>、<link>、<meta>

空元素

常见的空元素：

<br>、<hr>、<img>、<input>、<link>、<meta>