你的位置:首页 > 网页设计

[网页设计]《HTML5与CSS3基础教程》学习笔记 ——One Day


第一章

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">(没有空格)