一起自学前端开发!

块级元素和内联元素---前端入门教程

来源:原创    更新时间:2017-07-28 20:24:40    编辑:前端网编辑    浏览:1543

在前面介绍标签的时候,我们常常会提到块级元素和内联元素。那么什么是块级元素,什么是内联元素呢?

首先了解一下什么是元素,什么是标签。从开始标签到闭合标签中,这整个内容被称之为元素。

例如:"<p>分针网</p>"是一个元素,"<p>"是一个标签。但是一般我们也把"<p>"称为元素。

 

一、块级元素

块级元素是单独占据一行的元素,使用块级元素会从新的一行开始。

常见的块级元素有: h1~h6,p,pre,ul,li

块级元素中可以包含块级元素和内联元素

举例:块级元素展示

代码如下:

<div>

<h1>前端网</h1>

<p>前端网是个不错的学习网站。</p>

</div>

 

效果:

 3333.png

二、内联元素

内联元素也称之为行内元素。

内联元素与其他元素显示在同一行。两个内联元素会在同一行显示。

常见的内联元素有: img,a,em,i,span

内联元素中可以包含其他内联元素,但是不能包含块级元素。

举例:内联元素展示

代码如下:

<a href="#">HTML</a>

<a href="#">CSS</a>

<a href="#"> </a>

<a href="#"><img src="../img/logo.png"></a>

 

效果:

3333.png

注意事项

 

在写HTML代码的时候,有一些需要注意的地方。

 

1. 元素嵌套问题,块级元素可包含块级元素和内联元素,内联元素不可包含块级元素

<!-- 正确嵌套 -->

<div>

<p></p>

<a href="#"></a>

</div>

 

<!-- 错误嵌套 -->

<a href="#">

<div></div>

</a>

 

2. 标题标签h1~h6和段落标签p内不要包含其余块级元素

<!-- 正确代码 -->

<h1>前端网</h1>

<p>前端网是个不错的学习网站!</p>

 

<!-- 错误代码 -->

<p>

<h1>分针网</h1>

分针网是个不错的学习网站!

</p>

 

 

3. li元素中可以包含其余块级元素和内联元素,ul和ol的子元素只能是li

<!-- 正确嵌套 -->

<ul>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

 

<!-- 错误嵌套 -->

<ul>

<div><a href="#"></a></div>

<div><a href="#"></a></div>

</ul>

 

4.元素并排(块级和块级并列,内联和内联并列)

<!-- 规范的写法 -->

<div>

   <h2></h2>

   <p></p>

</div>

 

<div>

   <img src="" alt="">

   <a href=""></a>

   <span></span>

</div>

 

<!-- 不规范的写法 -->

<div>

   <span>我是内联元素</span>

   <p>我是块级元素</p>

</div>

 

5.标签用小写,虽然HTML对于大小写并不敏感,但是推荐使用小写。

<!-- 不推荐写法 -->

<A href="#"></A>

 

<!-- 推荐写法 -->

<a href="#"></a>

 

6.成对出现的标签要记住闭合,如果不闭合可能会出现一些错误。

<!-- 错误写法 -->

<h1>前端网

<p>前端网是个不错的学习网站!

 

<!-- 正确写法 -->

<h1>前端网</h1>

<p>前端网是个不错的学习网站!</p>

 

7.注意代码缩进显示,养成良好习惯

<!-- 错误写法 -->

<div>

<h1>前端网</h1>

<p>前端网是个不错的学习网站!</p>

</div>

 

<!-- 正确写法 -->

<div>

<h1>前端网</h1>

<p>前端网是个不错的学习网站!</p>

</div>

 

8.标签嵌套时注意不要交叉

<!-- 错误写法 -->

<div><h1><p></h1></div></p>

 

<!-- 正确写法 -->

<div><h1></h1><p></p></div>


评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜