2017年10月16日 / 70次阅读
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="https://www.maixj.net/about">关于</a>
<a href="https://www.maixj.net/xiaowuzhi">小悟志</a>
<a href="https://www.maixj.net/sitemap">网站地图</a>
<a href="https://www.maixj.net/archive">归档</a>
<a href="https://www.maixj.net/links">友情链接</a>
<a href="https://www.maixj.net/contact-us">联系</a>
<a href="https://www.maixj.net/feed">Feed</a>
这段代码在编辑的时候看着很舒服,但是在浏览器显示的时候,各个连接之间不会换行,反而多出来一个空格。如果你使用 来增加间隔,由于文本中多出来的回车换行,间隔会变大一点,而且很难察觉。这时,将代码修改为这样,去掉回车换行,用空格来间隔(下面的示例使用的是 空格,这个空格在微软雅黑字体的时候比较宽,推荐阅读:HTML中空格的宽度)
<a href="https://www.maixj.net/about">关于</a> <a href="https://www.maixj.net/xiaowuzhi">小悟志</a> <a href="https://www.maixj.net/sitemap">网站地图</a> <a href="https://www.maixj.net/archive">归档</a> <a href="https://www.maixj.net/links">友情链接</a> <a href="https://www.maixj.net/contact-us">联系</a> <a href="https://www.maixj.net/feed">Feed</a>
虽然编辑时,看着不太爽(以上代码端的换行,是浏览器自动显示的效果,实际上没有换行),但是浏览器显示效果很好。
总结本文的目的,就是觉得需要在编写HTML代码的时候,有块级元素和内联元素的意识。
本文链接:https://www.maixj.net/wz/kuaiji-neilian-16892
©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。