HTML基础知识--标签

元素的分类

块级元素

特点：
1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　
3.元素的宽度如果不设置的话，默认为父元素的宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
4.可以容纳其他块级元素和行内元素(内联元素)。

常见块级元素：
<div>、<p>、<h1>~<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>、<hr>、<dir>;

块级元素	含义
<div></div>	常用块级元素
<p></p>	段落标签
<h1></h1>	1级标题即大标题标签
<h2></h2>	2级标题标签即副标题标签
<h3></h3>	3级标题标签
<h4></h4>	4级标题标签
<h5></h5>	5级标题标签
<h6></h6>	6级标题标签
<hr/>	水平分割线
<ul></ul>	非排序列表
<dl></dl>	定义列表
<ol></ol>	排序表单
<table></table>	表格标签
<address></address>	地址标签
<blockquote></blockquote>	块引用
<form></form>	交互表单（只能用来容纳其它块元素）
<dir></dir>	目录列表

行级元素

特点：
1.可以和其他元素处于一行，不用必须另起一行。
2.元素的高度、宽度及顶部和底部边距不可设置，完全靠内容撑开宽高。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
4.无法自动换行，会和相邻的行内元素排成一行。
5.设置宽、高无效，默认宽高是其自身内容的宽高。
6.行内元素的paddding可以设置，margin只能够设置水平方向的边距。

常见的行内元素：
<a>、<span>、<em>、<strong>、<b>、<i>、<select>、<label>、<br>、<img>、<input>；

行内元素	含义
<a></a>	锚点/超链接
<span></span>	常用内联容器 定义文本内区块
<em></em>	斜体标签 强调作用
<strong></strong>	加粗标签 强调作用
<b></b>	粗体标签（不推荐）
<i></i>	斜体标签（不推荐）
<select></select>	项目选择标签
<label></label>	表格标签
<br/>	换行标签
<img src=“” alt=“”>	插入图片标签
<input type=“text” name=" " id=" ">	输入框标签

行内块标签

特点：综合了块级元素和行内元素的特点
1.和相邻行内块级元素在同一行。
2.可以设置宽、高、行高、内外边距。
3 默认宽、高为其内容的宽、高。

常用的行内块元素：
<img>、<input>、<textarea>、<button>

行内块元素	含义
<img src=“” alt=“”>	插入图片标签
<input type=“text” name=" " id=" ">	文本框标签
<textarea></textarea>	文本区标签
<button></button>	按钮

各种标签之间的转换
1、块级标签转换为行内标签：display：inline;
2、行内标签转换为块级标签：display：block;
3、转换为行内块标签：display：inline-block。

标签的嵌套规则

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素,它只能包含其它的内联元素:

    <div><p>对</p></div>
    <a href="#"><span>对</span></a>
    <span><div>错</div></span>

2. 块级元素不能放在p标签里面：

    <p><ol><li>错</li></ol></p>
    <p><div>错</div></p>

3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

　　<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<dt>

4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列:

   <div><p><h2>对</h2></p></div>
   <div><a href="#"><span>对</span></a></div>
   <div><h2><span>错</span></h2></div>

5. li 内可以包含 div 标签:
   注意：li 和 div 标签都是装载内容的容器，地位平等，没有级别之分，要知道，li 标签连它的父级 ul 或者是 ol 都可以容纳。