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 类型显示为滑动条。

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

最新文章

  1. Upload Files To FTP in Oracle Forms D2k
  2. 两段for循环代码的区别
  3. win7以管理员身份运行bat提示系统找不到指定的路径。
  4. ArcGIS API for Silverlight地图加载众多点时,使用Clusterer解决重叠问题
  5. LayoutParams使用
  6. 自定义颜色显示的CheckBox
  7. asp.net执行cmd命令(包括第三方应用的命令行)
  8. cf C. Vasya and Robot
  9. EZOJ 网同14(蛋蛋与北大信科-Splay的颜色分离,寻找结点所在子树)
  10. ASP.NET Core MVC上传、导入、导出知多少
  11. JaveScript用二分法与普通遍历(冒泡)
  12. Java开发笔记(十三)利用关系运算符比较大小
  13. 利用DNSLOG获取看不到的信息(给盲注带上眼镜)
  14. mysql 各种关系代数的使用
  15. 20145320《网络对抗》注入Shellcode并执行
  16. thinkphp5.0自定义验证器
  17. 浅谈BFC和IFC
  18. jQuery的dialog弹窗实现
  19. JavaScript总结(四)
  20. json 数据分析

热门文章

  1. 【01】SpringBoot2核心技术-基础入门
  2. python 豆瓣top250
  3. MySQL 报错:[Err] 1071 - Specified key was too long; max key length is 767 bytes
  4. SpringBoot 设置请求字符串格式为UTF-8
  5. 一个在线MP4提取mp3的网站
  6. 【LeetCode】1018. Binary Prefix Divisible By 5 解题报告(Python)
  7. 【LeetCode】779. K-th Symbol in Grammar 解题报告(Python)
  8. Manthan, Codefest 16 D. Fibonacci-ish
  9. Sky Code(poj3904)
  10. 倍福CX5120嵌入式控制器使用教程