HTML 5中的新特性
HTML 5中的新特性
html5新增了一些语义化更好的标签元素。首先,让我们来了解一下HTML语义化。
1、什么是HTML语义化?
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化?
- 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
- 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
- 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
那么,HTML 5 大概有哪些新增的元素呢?
1、结构元素
- article元素,表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文章。
- aside元素,表示article内容之外的内容,辅助信息。
- header元素,表示页面中一个内容区块或整个页面的页眉。
- hgroup元素,用于对页面中一个区块或整个页面的标题进行组合。
- footer元素,表示页面中一个内容区块或整个页面的页脚。
- figure元素,表示媒介内容的分组,以及它们的标题。
- section元素,表示页面中一个内容区块,比如章节。
- nav元素,表示页面中的导航链接。
以上语义元素用于明确一个Web页面的不同部分。HTML页面布局效果如下:
2、其他元素
- video元素,用来定义视频。
- audio元素,用来定义音频。
- canvas元素,用来展示图形,该元素本身没有行为,仅提供一块画布。
- embed元素,用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。
- mark元素,用来展示高亮的文字。
- progress元素,用来展示任何类型的任务的进度。
- meter元素,表示度量衡,定义预定义范围内的度量。
- time元素,用来展示日期或者时间。
- command元素,表示命令按钮。
- details元素,用来展示用户要求得到并且可以得到的细节信息。
- summary元素,用来为details元素定义可见的标题。
- datalist元素,用来展示可选的数据列表,与input元素配合使用,可以制作出输入值的下拉列表。
- datagrid元素,也用来展示可选的数据列表,以树形列表的形式来显示。
- keygen元素,表示生成密匙。
- output元素,表示不同类型的输出。
- source元素,为媒介元素定义媒介资源。
- menu元素,表示菜单列表。
- ruby元素,表示ruby注释, rt元素表示字符的解释或发音。 rp元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。
- wbr元素,表示软换行。与br元素的区别是:br元素表示此处必须换行,而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行,而当宽度不够时,主动在此处进行换行。
- bdi元素,定义文本的文本方向,使其脱离其周围文本的方向设置。
- dialog元素,表示对话框或窗口。
3、纯表现元素
纯表现的元素就是那些可以用css替代的元素。basefont、big、center、font、s、strike、tt、u这些元素,他们的功能都是纯粹为页面展示服务的,html5提倡把页面展示性功能放在css样式表中统一处理,所以将这些元素废除,用css样式进行替代。
4、对可用性产生负面影响的元素
对于frameset元素、frame元素与noframes元素,由于frame框架对网页可用性存在负面影响,在html5中已不支持frame框架,只支持iframe框架,html5中同时将frameset、frame和noframes这三个元素废除。
5、只有部分浏览器支持的元素
对于applet、bgsound、blink、marquee等元素,由于只有部分浏览器支持,特别是bgsound元素以及marquee元素,只被IE支持,所以在html5中被废除。其中applet元素可由embed元素或object元素替代,bgsound元素可由audio元素替代,marquee可以由javascript编程的方式替代。
HTML 5中的新特性的更多相关文章
- ASP.NET 5与MVC 6中的新特性
差点忘了提一句,MVC 6中默认的渲染引擎Razor也将得到更新,以支持C# 6中的新语法.而Razor中的新特性还不只这一点. 在某些情况下,直接在Web页面中嵌入某些JSON数据的方式可能比向服务 ...
- Webpack 3 中的新特性
本文简短地分享下最新发布的 Webpack 3 中的新特性,供大家参考. 1. Webpack 3 的新特性 6 月 20 日,Webpack 发布了最新的 3.0 版本,并在 Medium 发布了公 ...
- 使用示例带你提前了解 Java 9 中的新特性
使用示例带你提前了解 Java 9 中的新特性 转载来源:https://juejin.im/post/58c5e402128fe100603cc194 英文出处:https://www.journa ...
- (数据科学学习手札73)盘点pandas 1.0.0中的新特性
本文对应脚本及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 毫无疑问pandas已经成为基于Pytho ...
- 1 PHP 5.3中的新特性
1 PHP 5.3中的新特性 1.1 支持命名空间 (Namespace) 毫无疑问,命名空间是PHP5.3所带来的最重要的新特性. 在PHP5.3中,则只需要指定不同的命名空间即可,命名空间的分隔符 ...
- Firefox 23中的新特性(新陷阱)
话说有一天突然发现我们的网站页面上的JQuery功能都失效了,Firebug中显示如下的错误 Blocked loading mixed active content "http://xxx ...
- Python3中的新特性(3)——代码迁移与2to3
1.将代码移植到Python2.6 建议任何要将代码移植到Python3的用户首先将代码移植到Python2.6.Python2.6不仅与Python2.5向后兼容,而且支持Python3中的部分新特 ...
- HTML5 中的新特性:
一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...
- C# 6.0中你不知道的新特性
为什么写? 今天去上班的公交上,有朋友在张队(张善友)的微信群里,发了一个介绍C# 6.0新特性的视频,视频7分钟,加上本人英语实在太low,整体看下来是一脸懵逼的. 下班回到家里,打开这个视频,把视 ...
随机推荐
- Python实现——二次多项式回归(最小二乘法)
2019/3/25 真的,当那个图像出现的时候,我真的感觉太美了. 或许是一路上以来自我的摸索加深的我对于这个模型的感受吧. 二次函数拟合--最小二乘法公式法 与线性回归相似,对二次函数进行拟合某种意 ...
- 老男孩Day9作业:高级FTP
一.作业需求 1. 用户加密认证(已完成) 2. 多用户同时登陆(已完成) 3. 每个用户有自己的家目录且只能访问自己的家目录(已完成) 4. 对用户进行磁盘配额.不同用户配额可不同(已完成) 5. ...
- WPF强制设置TextBox文本框的焦点
在需求中遇到这样一种场景:就是在无论何时都要把焦点设置在一个TextBox中. 引用空间:System.Windows.Input 方式1:在窗体的Load事件中去设置焦点,(注意:不能在窗体的构造函 ...
- Python第四次作业
设计题1: 设计一个本月份日历,输出格式如下: 要求: 1.初始化start_day,end_day两个日期 from datetime import datetime start_day=datet ...
- WinForm 修改App.config不起作用(但是调试没有异常)
修改Bin下的.exe.config文件,就能达到效果了. appconfig的修改,会保留在项目中,似乎不会实时地更改到.exe.config中..
- IntelliJ IDEA 把Maven项目导出可执行jar包
2017年04月05日 14:05:08 waterimelon 阅读数:1574 标签: intellij ideamaven 更多 个人分类: idea 第一步 第二步 第三步
- 理解Javascript_02_执行上下文01
执行上下文又名执行上下文环境 JS中为什么会产生这个概念呢,先来看一下下面的这段代码: 通过执行发现,第一句代码报了ReferenceError,第二句和第三句代码是undefined,由于undef ...
- BZOJ3065 带插入区间K小值 || 洛谷P4278
这是一道让我崩溃的题...... 然鹅洛谷上时限被改然后只有20分......好像所有人都被卡了(雾) 由于替罪羊树不是依靠旋转操作而是依靠暴力重构的方式维护树的平衡,所以我们可以考虑使用替罪羊树套区 ...
- P2801 教主的魔法
传送门 $N$ 太大了主席树过不了 考虑分块 对每个块内的元素排序,询问就对大块二分查找,对两边小的部分暴力枚举 修改时维护 $add[i]$ 标记,维护当前块内整块已经加的数 那么整块的就直接修改 ...
- C++ GUI Qt4编程(12)-6.1FindFileDialog
1. 主要介绍了QGridLayout, QHBoxLayout, QVBoxLayout3种布局管理器的使用方法. 2. 在linux中,继承自QDialog的对话框,没有最大化.最小化.关闭按钮, ...