《HTML5与CSS3基础教程》学习笔记

HTML5与CSS3基础教程（第8版）中文高清版 PDF 下载

第一章

1、    邮箱地址的URL地址包括：mailto:+邮箱地址

2、    ../表示向上走一级，开头直接使用/表示根目录

第三章

1、    <header>:

role = “banner”【 适用于页面级的页眉】

2、    <nav>标记导航：

role = “navigation”不是必须的，提高可访问性

3、    <main>主要区域，一个页面只有一个,不能将main放在article、aside、footer、header、nav元素中。

role=”main”

4、    <article>创建文章,可以用于独立的内容项,可以嵌套,比如:一篇博客条目/一则用户提交的评论/一个交互的小部件/案例研究

5、    <section>定义区块，相似主题的一组内容，通常包含一个标题，相对于article组织、结构性更强

6、    < aside >指定附注栏,放在main之后

role=”complementary”

7、    <footer>代表嵌套它的最近的元 素的页脚。只有当它最近的祖先是 body 时，它才是整个页面的页脚

role="contentinfo"【只有页面级页脚有】

第四章

1、    各元素使用：

1)        em 元素用于标识强调的文本

2)        cite 元素用于标识对艺术作品、电影、图书等内容的引用

3)        small 表示细则一类的旁注（side comment），“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求。

4)        strong 元素表示内容的重要性

5)        b用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语

6)        i 元素表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称

2、    创建图：

1)        <figure>添加图像、 视频、数据表格等内容

2)        < figcaption >元素并不是必需的，但如果包含它，它就必须是 figure 元素内嵌的第一个或最后一个元素,并且只允许有一个figcaption。

3、    引述文本

1)        blockquote：浏览器默认对 blockquote 文本进行缩进，cite 属性的值则不会显示出来

2)        可以对 blockquote 和 q 使用可选的cite 属性，cite=url(引用的地址)

3)        q 元素引用的内容不能跨越不同的段落，在这种情况下应使用 blockquote

4、    指定时间

1)        <time>

2)        datetime="2014-07-16"等，atetime，文本内容就可以按你希望的任何形式表示日期、 时间或时间段了

5、    解释缩写词

1)        <abbr>

2)        属性：title="缩写词的全称"

6、    定义术语

1)        <dfn>

7、    创建上标和下标

1)        输入 <sub> 创建下标，或输入 <sup>创建上标

2)     

/*
* 在所有浏览器中防止sub和sup影响line-height
* gist.github.com/413930
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}

8、    添加作者联系信息

1)        <address>

9、    标注编辑和不再准确的文本(既可以包围短语内容（HTML5 之前称“ 行内元素”）又可以包围块级内容的元素，)

1)        < ins >标记新插入文本

2)        < del >标记已删除文本

3)        <s>标记不再准确或不再相关的文本

10、标记代码

1)        <code>

2)        < kbd >标记用户输入指示

3)        < samp >元素用于指示程序或系统的示例输出

4)        < var >元素表示变量或占位符的值

11、预格式化的文本

1)        <pre>

2)        对 pre 的内容打开自动换行(IE<8不适用)

pre {
white-space: pre-wrap;
}

12、突出显示文本

1)        <mark>即加上黄色背景

13、其他元素

1)        浏览器默认为 < u >元素添加下划线

2)        <wbr>：可以在必要的时候进行换行

3)        旁注标记：ruby、 rp 和 rt 元素

4)        bdi（于内容的方向未知的情况。不必包含 dir 属性，因为默认已设为自动判断）

5)        bdo（必须包含 dir 属性并将属性值设为 ltr（由左至右）或 rtl（由右至左），指定你希望呈现的方向）

6)        meter：表示分数的值或已知范围的测量结果

7)        progress：它指示某项任务的完成进度。可以用它表示一个进度条

(1)      max：任务的总工作量， 其值必须大于 0

(2)      value ：任务已完成的量

(3)       form：添加 form 属性并将其值设为该 form 的 id

第六章

1、    创建锚

在需要跳转到元素添加id="anchor-name"

2、    创建链接到特定锚的链接

<a href="#anchor-name">

3、    锚位于另一个文档，就使用 <ahref ="page.html#anchor-name"> 引 用 该区域。（在 URL 和 # 之间没有空格。）

4、    锚位于另一台服务器上的页面， 则需输入

<a href="http://www.site.com/directory/age.html#anchor-name">（没有空格）