HTML5元素
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元素:定义文本的文本方向,使其脱离其周围文本的方向设置
<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 | 用于应该包含数值的输入域。只能输入数字 |
用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。 | |
url | 用于编辑URL的字段。 |
range | 用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。 |
这些新类型设计用户代理(浏览器)可以提供用户界面,如日历、日期选择器,或整合用户的地址簿,并提交到服务器的格式。它给用户一个更好的经验,因为在发送到服务器之前,进行输入类型检查,这意味着有更少的时间等待反馈。
最新文章
- Upload Files To FTP in Oracle Forms D2k
- 两段for循环代码的区别
- win7以管理员身份运行bat提示系统找不到指定的路径。
- ArcGIS API for Silverlight地图加载众多点时,使用Clusterer解决重叠问题
- LayoutParams使用
- 自定义颜色显示的CheckBox
- asp.net执行cmd命令(包括第三方应用的命令行)
- cf C. Vasya and Robot
- EZOJ 网同14(蛋蛋与北大信科-Splay的颜色分离,寻找结点所在子树)
- ASP.NET Core MVC上传、导入、导出知多少
- JaveScript用二分法与普通遍历(冒泡)
- Java开发笔记(十三)利用关系运算符比较大小
- 利用DNSLOG获取看不到的信息(给盲注带上眼镜)
- mysql 各种关系代数的使用
- 20145320《网络对抗》注入Shellcode并执行
- thinkphp5.0自定义验证器
- 浅谈BFC和IFC
- jQuery的dialog弹窗实现
- JavaScript总结(四)
- json 数据分析
热门文章
- 【01】SpringBoot2核心技术-基础入门
- python 豆瓣top250
- MySQL 报错:[Err] 1071 - Specified key was too long; max key length is 767 bytes
- SpringBoot 设置请求字符串格式为UTF-8
- 一个在线MP4提取mp3的网站
- 【LeetCode】1018. Binary Prefix Divisible By 5 解题报告(Python)
- 【LeetCode】779. K-th Symbol in Grammar 解题报告(Python)
- Manthan, Codefest 16 D. Fibonacci-ish
- Sky Code(poj3904)
- 倍福CX5120嵌入式控制器使用教程