HTML基础知识补充

块级元素和行内元素

  • 块级元素:比如标题和段落,相互堆叠在一起沿页面向下排列,每个元素分别占一行。
  • 行内元素:比如链接和图片,会相互并列,只有在空间不足以并列的情况下才会折到下一行显示。

在昨天的notes中,问到这个问题,这里得到解决。事实上我的页面中,链接和图片是堆叠向下排列的。我将图片的尺寸改下后,链接和图片依然时向下排列的,并不像上面所说的那样。why?——现在知道答案了。因为我用<div>包着<img>了,虽然<img>是行内元素,但是<div>是块级元素。这样。

对于每一个html元素,第一个问题就应该时:它时块级元素,还是行内元素。这样才能在编写标记的时候预想其初始定位状态,才能进一步用css重新定位。

<img src="images/acoustic_nylon.jpg" alt="nylon string acoustic guitar" /><img src="images/acoustic_steel.jpg" alt="steel string acoustic guitar" />

这样的虽然img在两行,但是如同上面所说,是行内元素,两个guitar会在显示时候排列在一排上。

为什么块级元素会占一行呢。因为块级元素盒子会扩展到与父元素同宽。在这里所有块级父元素都是body,它的默认宽度是与浏览器窗口一样宽(有少量边距)。所以,块级元素酒和浏览器窗口一样宽了,占一行。不能容纳另一个块级元素了。

在chrome中,右键审查元素,可以清楚地看到每个元素的轮廓。(joker ocean教的~原来joker还挺有用的)

html实体

html实体常用语键盘上没有的印刷字符。&开头,结尾,之间时表示实体的字符串。

<blockquote>&ldquo;Sometimes you want to give up the guitar, you'll hate the 5 guitar. But if you stick with it, you're gonna be rewarded.&rdquo;
<cite>Jimi Hendrix</cite> //使用 cite 元素包含作者姓名
</blockquote>

这个例子加了双引号,左双引号时“left-double-quote”,右双引号是“right-double-quote”。

另外,一个分享html实体的网站:
http://www.elizabethcastro.com/html/extras/entities.html

在上例中,<blockquote>是块级元素,<cite>是行内元素。文本结束后若有空间,它就紧接着显示在后面。

再给一个嵌套的例子。

<p>It is <strong>absolutely critical</strong> that <em>everyone</em> does this <abbr title="as soon as possible">ASAP</abbr>!</p>

不多说了,就提一下,<abbr>表示简写。一个块级元素里面嵌套有三个行内元素。

文档对象模型

DOM就是文档对象模型,是从浏览器视角来观察页面中的元素以及每个元素的属性,由此得出这些元素的一个家族树。

需要知道的概念有:子元素,父元素,同胞元素,祖先元素和后代元素。

小结

前面的学习中,了解了html最基础的内容。比如标签时如何为内容提供结构的,各种盒子,块级元素和行内元素的区别,元素嵌套情况下的层次关系等。作为学习css的补充,这些知识只是html的很小的一部分,在之后的学习中希望能不断进阶和积累。下面就要开始css了!Ready, go!

2015-04-22 14:0166