HTML&CSS 入门（一）

[The world is a fine place,and worth fighting for. I agree with the second part.]

1.block VS inline elements

    块和內联元素是两个非常基本的概念。最开始写前端的时候我并不很明白这些基本的概念，所以写起来有些莫名其妙，现在一点点地补充这些基本知识。

    在html里，所有的元素非块级（block level）即内联级（inline level）。区别在于块级元素会在页面上开始一个新行，并占据全部可用宽度；而内联级元素并不开始新行，它会在normal flow中保持必要的宽度。

    它们的关系是：块级元素可以嵌套自己，内联级元素也可以嵌套自己，块级元素可以嵌套内联级元素，而内联级元素不能嵌套块级元素。

    例子：div属于块级元素，span属于内联级元素。                                              

block	inline
h	em
p	strong
a（html5）	a

2.links

     (1) open links in a new window

     在a标签中加入target="_blank"，即<a href="http://google.com.cn" target="_blank">谷歌</a>

     (2) links to the same page

     如本页面有这样一个block：<div id="search-list">blablabla...</div>，我想在页面开头就可以直接跳过去，可以这样：<a href="#search-list ">search-list</a>

3.The new HTML5 structural elements outline

(1)  header不是h元素，它不显示在页面，而是用来描述页面信息，比如meta信息，文档信息等。

(2)  nav是块级元素，翻译为导航，功能就是导航。一般包含列表、面包屑、上一页、下一页等，基本上属于到网站的链接和到本网页的链接。

        下例为bootstrap的面包屑：

 
 

  
      <ul class="nav nav-tabs">
 
 
 
 

  
        <li class="active">
 
 
 
 

  
          <a href="#">事件代码</a>
 
 
 
 

  
        </li>
 
 
 
 

  
        <li>
 
 
 
 

  
          <a href="./virtools">虚拟页面代码</a>
 
 
 
 

  
        </li>
 
 
 
 

  
      </ul>
 
 
 
 
   
  
  结果：
 
 
 
 
 
  
  
 
 

(3)  div VS section

     使用哪一个取决于显示的内容。如果所显示的数据是大批量、无需特别CSS样式，比如数据库数据，就适合用section；而div适用于需要特别CSS样式的，例如背景、边框等。

(4)  aside是块级元素，使用需注意。

——  to be continued