Old_Soldier的博客

想成长为前端大牛的小学生!

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>


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Old_Soldier/article/details/51860076
文章标签: html5 学习笔记
想对作者说点什么? 我来说一句

Essential Guide to HTML5学习笔记

2012年08月08日 856KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭