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>


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

Windows编程基础学习笔记

Windows编程概述     Windows系统是一个消息驱动的操作系统,每一个事件的发生都会产生一个消息,我们通过消息来知道发生了什么事件。    Windows编程是在实现程序算法的基础上进行窗...
  • lindagod
  • lindagod
  • 2015年02月17日 08:28
  • 3114

机器视觉学习笔记(一)

来秦皇岛快一周了,跟导师、学长聊了聊,觉得自己还是想做机器视觉,毕竟做一个智能机器人或者做智能家居一直是我的兴趣所在。这两天学了opencv,进度很慢,有待提高效率。在csdn上发现了很多有用的资料,...
  • sunlightli1216
  • sunlightli1216
  • 2015年01月16日 11:19
  • 262

[持续更新]HTML5学习笔记(二)

1.  元素分类 元数据元素(metadata element):由此可见主要是元素中的事情了,向浏览器提供信息和指示; 流元素(flow element):听名字怪异,但是其实是规定这些元素可以...
  • u014267351
  • u014267351
  • 2015年09月01日 13:03
  • 1749

Java 之JNI基础篇(一)

JNI,即Java Native Interface。它其实就是一套java与本地代码交互的接口或者说是一个协议。通俗的比喻,就是中国人讲中国话,日本人讲日本话,于是中国人碰到日本人,各说各话,无法交...
  • yingshukun
  • yingshukun
  • 2018年01月13日 18:51
  • 10036

机器学习笔记(二)(Draft Version)

摘要 笔记(一)中讨论的情况显示,模型越复杂并不一定error越小。那所以这些error到底来自什么地方呢? 1. bias 2. variance 在具体训练过程中,如果可以诊断error的...
  • yucicheung
  • yucicheung
  • 2017年09月18日 15:12
  • 347

西瓜书学习笔记(二)

啊啊啊啊啊,昨天本来第二章写了不少内容,但是不知道CSDN的Markdown编辑器是不会自动保存的,中途发别的博客会把之前编辑的也给覆盖掉,这一章就简单写点吧。第二章 模型评估与选择2.1 经验误差与...
  • Cyril__Li
  • Cyril__Li
  • 2017年04月25日 18:49
  • 390

HTML5常见面试题及答案(二)

1、HTML5的新特性    (1) 绘画canvas    (2) 用于媒介回放的video和audio元素    (3) 本地离线存储localStorage长期存储数据,浏览器关闭后数据不...
  • Admin_yi
  • Admin_yi
  • 2017年01月15日 18:37
  • 1310

node.js学习笔记(2)---Nodejs开发框架Express3.0开发手记–从零开始

目录 此文重点介绍Express3.0的开发框架,其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。   项目源码下载地址:http://download.csdn.net/det...
  • liuwu0720
  • liuwu0720
  • 2014年03月15日 10:59
  • 1602

HTML5学习笔记(总结提炼版)——001常见的HTML标签

前言:最近在学HTML5,想想还是把笔记放到博客来,一来可以相互分享和交流学习,二来2可以督促自己不要放松! 练习1: src和href的区别 src:引用,该资源是页面不可缺少的一部分,如(...
  • sunnyboy9
  • sunnyboy9
  • 2016年03月14日 00:42
  • 929

html5 - 基础格式认识和标签用法(文本元素常用方法)

实例01 第一个实例的html5
  • li5685918
  • li5685918
  • 2015年12月06日 23:29
  • 1428
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5基础学习笔记(二)
举报原因:
原因补充:

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