关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

首页 » 网站建设 »

HTML之块级元素和内联元素

网站建设
2017年10月16日 / 12次阅读
标签:HTML

文章《HTML之块级元素和内联元素》的特色图片

HTML元素在显示的时候,分为两种,块级元素(block)和内联元素(inline)

简单来说,块级元素就是按照块的方式来显示,浏览器都会用新的一行来显示块级元素;而内联元素则不会重新开启一行,inline就是这个意思。

常见的块级元素有:

<h1>
<p>
<ul>
<table>
<div>
......

常见的内联元素有:

<br>
<strong>
<img>
<span>
<a>
......

通过CSS可以修改元素的这个属性:

p {
    display:inline 
}
img {
    display:block 
}

以上CSS代码,将p元素修改为内联元素,将img修改为块元素。

 

麦新杰多说几句,关于内联元素,有这个意识的好处是在编写HTML代码的时候,注意在内联元素之间不需要回车。这个回车换行只是在文档内能看到,在浏览器中,这个回车换行就会被显示为一个空格(chrome),如果你使用的不是等宽字体,有的时候这个多余的空格很难发现。比如下面的代码:

<a href="http://www.maixj.net/about">关于</a>
<a href="http://www.maixj.net/xiaowuzhi">小悟志</a>
<a href="http://www.maixj.net/sitemap">网站地图</a>
<a href="http://www.maixj.net/archive">归档</a>
<a href="http://www.maixj.net/links">友情链接</a>
<a href="http://www.maixj.net/contact-us">联系</a>
<a href="http://www.maixj.net/feed">Feed</a>

这段代码在编辑的时候看着很舒服,但是在浏览器显示的时候,各个连接之间不会换行,反而多出来一个空格。如果你使用&nbsp;来增加间隔,由于文本中多出来的回车换行,间隔会变大一点,而且很难察觉。这时,将代码修改为这样,去掉回车换行,用空格来间隔(下面的示例使用的是&emsp;空格,这个空格在微软雅黑字体的时候比较宽,推荐阅读:HTML中空格的宽度

<a href="http://www.maixj.net/about">关于</a>&emsp;<a href="http://www.maixj.net/xiaowuzhi">小悟志</a>&emsp;<a href="http://www.maixj.net/sitemap">网站地图</a>&emsp;<a href="http://www.maixj.net/archive">归档</a>&emsp;<a href="http://www.maixj.net/links">友情链接</a>&emsp;<a href="http://www.maixj.net/contact-us">联系</a>&emsp;<a href="http://www.maixj.net/feed">Feed</a>

虽然编辑时,看着不太爽(以上代码端的换行,是浏览器自动显示的效果,实际上没有换行),但是浏览器显示效果很好。

 

总结本文的目的,就是觉得需要在编写HTML代码的时候,有块级元素和内联元素的意识。

本文链接:http://www.maixj.net/wz/kuaiji-neilian-16892
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1

网站二维码
拍拍贷
go to top