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

[网页设计]H5学习笔记


1.section:页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分;可以与h1、h2、h3、h4、h5、h6等结合使用,标示文档结构;

        不要将section元素用作设置样式的页面容器,那是div的工作;如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素;不要为没有标题的内容区块使用section元素。 

2.article:页面中的一块与上下文不相干的独立内容,如博客中的一篇文章或报纸中的一篇文章;

        article可以看做是一种特殊的section。section强调分块或分段,而article强调独立性。如果一块内容相对来说比较独立、完整的时候,应该使用article,但是如果想将一块内容分成几段的时候,应该使用section元素。div元素变成了一种容器,当使用css样式的时候,可以对这个容器进行一个总体的css样式的套用。 

3.aside:article元素的内容之外的、与article的内容相关的辅助信息;

4.header:页面中一个内容区块或整个页面的标题;

5.hgroup:用于对整个页面或页面中一个内容区块的标题进行组合;

6.footer:整个页面或页面中一个内容区块的脚注。一般来说,包含创作者的姓名、创作时间日期以及作者联系信息;

7. nav:页面中的导航链接的部分;

        nav的使用场合主要是:传统导航条、侧边导航条(将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去)、页内导航(在本页面几个主要的组成部分之间进行跳转)、翻页导航(在多个页面的前后页或博客网站的前后篇文章滚动)、也可以是其他认为是重要的基本的导航链接组中;
        在H5中不要用menu元素替换nav元素。menu元素使用在一系列发出命令的菜单上的,是一种交互性的元素(在web应用程序中使用的)。 

8.figure:一段独立的流内容,一般表示文档主体流内容的一个独立单元。使用figcaption元素为figure组添加标题;<figure></figure>类似于<dl></dl>;

9.video:定义视频,如电影片段或其他视频流;类似于object元素

10.audio:定义音频,如音乐或其他音频流;类似于object元素

11.embed:用来插入各种多媒体,格式可以是Midi、wav、aiff、au、mp3等;

12.mark:主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。比较典型的应用是在搜索结果中向用户高亮显示搜索关键字;

13.progress:运行中的进程,可以用来显示JS中耗时间的函数的进程;

14.time:日期或时间,或同时表示两者;

 

15.ruby:注释(中文注音或字符);

          rt:表示字符(中文注音或字符)的解释或发音;
         rp:定义不支持ruby元素的浏览器所显示的内容;

      例子:<ruby>義<rt> <rp>(</rp>weh<rp>)</rp></rt></ruby>

16.wbr:软换行。浏览器窗口或父级元素的宽度足够宽时,不换行;而当宽度不够时,主动在此换行。对字符型的语言作用大,对中文貌似没多大用处。

17.canvas:表示图形,比如图表和其他图像。本身没行为,仅提供一块画布,它把API展现给JS,以使脚本能够把像绘制的东西绘制到这块画布上。

18.command:命令按钮,比如单选按钮、复选框或按钮。

 

19.details:用户要求得到并且可以得到的细节信息。可以与summary元素配合使用。summary提供标题或图例。标题是可见的,用户点击标题时,会显示出细节信息。summary应该是details的第一个子元素。

20.datalist:可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。

21.datagrid:可选数据的列表,它以树形列表的形式来显示。

22.Keygen:生成密钥;

 

23.output:不同类型的输出,如脚本的输出;

24.source:为媒介元素(如video和audio)定义媒介资源;

25.menu:菜单列表。当希望列出表单控件时使用该标签;

 

26.input元素的新增类型:

a.email:必须输入email地址的文本输入框;
b.url:必须输入url地址的文本输入框;
c.number:必须输入数值的文本输入框;
d.range:必须输入一定范围内数值的文本输入框;
e.Date Pickers:H5拥有多个可供选择的日期和时间的新型输入文本框:
                   date-选取日、月、年
                month-选取月、年
                  week-选取周、年
                   time-选取时间(小时和分钟)
             datetime-选取时间、日、月、年(UTC时间)
     datetime-local-选取时间、日、月、年(本地时间)