HTML5基础学习笔记(二)

原创 2016年07月08日 13:01:29

六、文本格式化标记

标记

显示效果

<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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5学习笔记之二CSS基础

一般来说,CSS都存储为一个文件,然后各个html page可以指定shiyo
  • windhoo
  • windhoo
  • 2014年06月05日 22:24
  • 753

HTML5基础学习笔记(十八)

Day18 CSS文本样式 一.元素可见性 使用 visibility 属性可以实现元素的可见性,这种样式一般可以配合 JavaScript 来实现效果。样式表如下: //设置元素隐藏,但占位 ...

HTML5基础学习笔记(六)

Day06 HTML页面元素属性 五、音频和视频 1.概述 1.1视频容器 音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其 他一些元数据。视频播放时...

HTML5新特性基础学习笔记上

1.HTML5音频视频 音频播放 1.Audio(音频) HTML5提供了播放音频文件的标准 2.control(控制器) control属性供添加播放,暂停和音量控件 3.标签: 定义声音 规定...

HTML5基础学习笔记(三)

Day03 HTML页面元素属性 二、分组元素 1、为了页面的排版需要,HTML5 提供了几种语义的分组元素。 元素名称 说明 div ...

HTML5基础学习笔记(十九)

Day19 CSS边框与背景 一.声明边框 边框的声明有三个属性设置,样式表如下: 属性 值 说明 CSS 版本 border-width 长度值 设置边框的宽度,可选 1 border-styl...

HTML5基础学习笔记(四)

Day04 HTML页面元素属性 三、表格元素 1.表格元素汇总 元素名称 说明 table 表示表格 the...

HTML5基础学习笔记(十七)

Day17CSS盒模型 一、元素尺寸 //设置元素尺寸 div { width: 200px; height: 200px; } 解释:设置元素的固定尺寸...

HTML5基础知识学习笔记

1.Html5基础讲解1.1HTML5基础标签: head:头标签,一般会将一些网页的基本配置和文件引用在head中设置; body:内容标签,里面是整个网页要展示内容部分; 1.2HTML5标...

HTML5基础学习笔记(十)

Day10 HTML页面元素属性 七、全局属性 1.实体 HTML 实体就是将有特殊意义的字符通过实体代码显示出来。 显示结果 描述 实体名...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5基础学习笔记(二)
举报原因:
原因补充:

(最多只允许输入30个字)