bindu

1.1结构元素

  HTML5定义了一组新的语义化标签,目前主流浏览器均已支持,语义化标签使用标记元素的内容,虽然可以使用原有标签替换,但是它可以简化HTML页面设计,并且也为搜索引擎在抓取和索引网页的时候展现元素的优势。

header 通常被放置在页面或者页面中某个区块元素的顶部,用来介绍内容或者做导航链接栏,在一个文档中,您可以定义多个header元素。
nav 通常表示页面的导航。
main 文档内容
article 使用在相对比较独立,完整的内容模块,一般使用在博客,论坛帖子,新闻报道,用户评论。
section 一般用来做内容的分组,比如文章的章节
aside 包含的内容不是页面的主要内容,具有独立性,是对页面的补充。aside标签一般使用在页面,文章的侧边栏,广告,友情链接等区域。
footer 一般放在页面或页面中某个区块的底部,包含版权信息,联系方式等。
ruby

定义ruby注释(中文或字符),将ruby标签与rt和rp标签一起使用。rp标签可选,该标签定义的是当浏览器不支持“ruby元素”时显示的内容。

progress 定义进度条
mark 用来标记文本
embed 用来嵌入指定的内容,比如插件。
1.2功能元素  

hgroup元素:用于对整个页面或页面中一个内容区块的标题进行组合。

video元素:定义视频

<video src="movie.ogg" controls="controls">video元素</video>

audio元素:定义音频

<audio src="someaudio.wav">audio元素</audio>

embed元素:用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

<embed src="horse.wav" />

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

dialog元素:定义对话窗或窗口

<dialog open>这是打开的对话窗口</dialog>

bdi元素:定义文本的文本方向,使其脱离其周围文本的方向设置

  1.  
    <ul>
     
        <li>Username<bdi>Bill</bdi>:80 points</li>
     
        <li>Username<bdi>Steve</bdi>: 78 points </li>
     
    </ul>

     

figcaption元素:定义figure元素

figure>
 
    <figcaption>我是小可爱</figcaption>
 
</figure>

 

time元素:表示日期或时间,也可以同时表示两者。

canvas元素:表示图形,如图表和其他图像。元素本身没有行为,仅提供一块画布,但他把一个绘制API展现给客户端javascript以使脚本把想绘制的东西绘制到这块画布上。

output元素:表示不同类型的输出,比如脚本的输出

menu元素:表示菜单列表。当希望列出表单控件时使用该标签。

<menu>
 
    <li><input type="checkbox" />Red</li>
 
    <li><input type="checkbox" />Blue</li>
 
</menu>

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

<details>
 
<summary>老鼠</summary>
 
</details>

1.3表单元素

  通过type属性,HTML5为input元素新增了很多类型,简单说明如下:

color 用于指定颜色的控件。
date 用于输入日期的控件(年,月,日,不包括时间)。
month 用于输入年月的控件,不带时区。
week 用于输入一个由星期-年组成的日期,日期不包括时区
time 用于输入不含时区的时间控件。
datetime 基于UTC时区的日期时间输入控件(时,分,秒及几分之一秒)。
datetime-local 用于输入日期时间控件,不包含时区。
search 用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel 用于输入电话号码的控件。在移动端输入会显示数字键盘,PC端无效果
number 用于应该包含数值的输入域。只能输入数字
email 用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。
url 用于编辑URL的字段。
range 用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

  这些新类型设计用户代理(浏览器)可以提供用户界面,如日历、日期选择器,或整合用户的地址簿,并提交到服务器的格式。它给用户一个更好的经验,因为在发送到服务器之前,进行输入类型检查,这意味着有更少的时间等待反馈。

分类:

HTML5

技术点:

相关文章: