HTML5基础学习笔记（二）

六、文本格式化标记

标记	显示效果
<b></b>和<strong></strong>	文字以粗体方式显示（XHTML推荐使用strong）
<i></i>和<em></em>	文字以斜体方式显示（XHTML推荐使用em）
<s></s>和<del></del>	文字以加删除线方式显示（XHTML推荐使用del）
<u></u>和<ins></ins>	文字以加下划线方式显示（XHTML不赞成使用u）

Day02 HTML页面元素属性

2.1 列表元素

2.1.1 ul：无序列表

格式：<ul>
<li></li>
  </ul>

2.1.2 ol：有序列表

格式：<ol>
<li></li>
  </ol>

2.1.3 dl：定义列表

格式：<dl>
<li></li>
  </dl>

2.2 结构元素

2.2.1头部

<header>标签实现

<header id="page_header">
    <h1>Header</h1>
</header>
 说明：1）header不能喝h1,h2,h3这些标题混为一谈。<header>可以包含从公司logo到搜索框在内的各式各样的内容。例子中只含有标题。
       2）同一个页面可以包含多个<header>元素。每个独立的区块或文章都可以含有自己的<header>.所以示例中为<header>添加唯一标示id属性，便于CSS3中灵活的渲染。在CSS文件里会看到id标示的作用。

2.2.3.尾部
<footer>标签实现
<footer id="page_footer">
    <h2>Footer</h2>
</footer>
 
说明：位置是页面或者区块的尾部，用法和<header>基本一样，也会包含其他元素，这里也指定了id.

2.2.4.导航
<nav>标签实现
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>
 
说明：导航的重要性对于一个网页至关重要，快速方便的导航是留住访客所必须的。
1）可以被包含在<header>或<footer>或者其他区块中，一个页面可以有多个导航。
2）导航一般需要CSS来渲染，随后将会看到CSS的渲染。

2.2.5.区块和文章
<section>和<article>标签实现
<section id="posts">
        /*可以包含多个< article>*/
    <article class="post">
         /*article的内容*/
        </article>
        <article class="post">
         /*article的内容*/
        </article>
</section>
 
<section>元素将页面的内容合理归类，合理布局。
下面是<article>的一般内容
<article class="post">
        <header>
            <h2>Article Header</h2>
        </header>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>
 
可以看到它可以包含很多元素。

2.2.6.旁白和侧边栏
<aside>标签实现旁白，侧边栏则由<section>实现。
<aside>是为主内容添的附加信息，入引言，图片等
<aside>
    <p>sth. in aside
    </p>
</aside>
 
<aside>一般加在<article>中使用
<article class="post">
        <header>
            <h2>Article Header</h2>
        </header>
        <aside>
            <p>sth. in aside
            </p>
        </aside>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>
 
侧边栏，不是旁白！看做是右面的一个区域，包含链接，用<section>和<nav>实现即可。
<section id="sidebar">
    <nav>
    <ul>
          <li><a href="2012/04">April 2012</a></li>
          <li><a href="2012/03">March 2012</a></li>
          <li><a href="2012/02">February 2012</a></li>
          <li><a href="2012/01">January 2012</a></li>
    </ul>
    </nav>
</section>