HTML：行内元素与块级元素

一、行内元素：

1.概述：*行内元素又名内联元素(inline element)，和其对应的是块元素(block element)，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。
2.特点：
①和其他元素都在一行上；
②高度、行高和顶以及底边距都不可改变；
③宽度就是它的文字或图片的宽度，不可改变。
3.具体实例：
①标签<a><a/>，其中的a是 anchor 的缩写 。这些标签的作用是标明超连接的起始位置或目的位置。
eg:
<a href=“http://www.baidu.com” target="_blank">百度一下，你就知道</a>
上述代码中href指定了文本 “百度一下，你就知道” 将要跳转的地址即http://www.baidu.com，target="_blank"表示在新的网页页面打开，实现效果如下：
百度一下，你就知道
②标签<img>, 向网页上添加一张图片。
eg：
<img src=“img/meinv.pn” title=“篮球爱好者” alt=“蔡徐坤”/>
代码中src指明了要插入的图片的路径，title是图片说明（当鼠标移动到图片上时就会显示“篮球爱好者”），alt为当图片路径无效时显示的内容，示例如下：
③标签<span></span>：向网页中添加一段没有任何样式的内容。

二、块级元素：

1.概述：块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。同样的，当加入了css控制以后，块级元素可以变为行内元素。
2.特点：
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度；
④它可以容纳内联元素和其他块元素。
3.具体实例：
①标签<div></div >:
div即divsion的缩写，该标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
eg:
<p style=“text-align: center;”>你好</p>（在浏览器居中输出你好）
②标签<p><p/ >:
p是段落的意思，p是paragraph英文段落的缩写。p元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在CSS样式表中规定。
eg:
<div style=“text-align: center;”>你好</div>（在浏览器居中输出你好）
③标签<hn></hn>:
Heading标签也叫做H标签，HTML语言里一共有六种大小的heading 标签，是网页html 中对文本标题所进行的着重强调的一种标签，以标签<h1>、<h2>到<h6>定义标题头的六个不同文字大小的tags,本质是为了呈现内容结构。共有六对，文字从大到小，依此显示重要性的递减，也就是权重依次降低。eg:<h1>你好<h1/>.效果如下：

你好

你好

你好

你好

你好

你好

④标签<ol></ol>:

代表HTML有序列表，是ordered lists的缩写。

⑤标签<ul></ul>:
代表HTML无序列表，是unordered lists的缩写。
⑥标签<li></li>：
列表元素标签，该标签必须位于一个完整的<ol></ol>标签或<ul></ul>标签内：
eg:
<ul type=“disc”>
    <li>唱</li>
    <li>跳<li>
    <li>RAP</li>
</ul>
实现效果如下：

• 唱
• 跳
• RAP