HTML5 新旧语法标记对我们有什么好处


Posted in HTML / CSS onDecember 13, 2012

众所周知,HTML是互联网有史以来最伟大的发明。这种超文本标记语言实际上是现代互联网发展的一个基石,以它为中心出现了一个独特的自给自足的体系。

当开发HTML5时,它的设计者们正面对着一些很重要的问题,希望能在HTML5里解决。其中的一个问题是,要创建一个真正简洁明了而且易于扩展的语义。 目前这个问题中棘手的部分是老版本的HTML当时是以功能多样的理念为目标设 – 大量的各种各样的标记,当时认为都是一些基本的标记,但如今证明完全是没有什么用途的。HTML5的目的就是要根据目前互联网的状况对其进行改进。

HTML5 的新标记
设计者们需要完成的任务是要给HTML5开发一个更丰富的和更有含义的语义 – 当然可以想象这种新方案将会是很灵活和很高效的,同时与所有的现代互联网标准相适应。下面就是一些将要在HTML5里新加入的标记.

<article> 标记 定义一篇文章
<aside> 标记 定义页面内容部分的侧边栏
<audio> 标记 定义音频内容
<canvas> 标记 定义图片
<command> 标记 定义一个命令按钮
<datalist> 标记 定义一个下拉列表
<details> 标记 定义一个元素的详细内容
<dialog> 标记 定义一个对话框(会话框)
<embed> 标记 定义外部的可交互的内容或插件
<figure> 标记 定义一组媒体内容以及它们的标题
<footer> 标记 定义一个页面或一个区域的底部
<header> 标记 定义一个页面或一个区域的头部
<hgroup> 标记 定义文件中一个区块的相关信息
<keygen> 标记 定义表单里一个生成的键值
<mark> 标记 定义有标记的文本
<meter> 标记 定义 measurement within a
predefined range
<nav> 标记 定义导航链接
<output> 标记 定义一些输出类型
<progress> 标记 定义任务的过程
<rp> 标记是用在Ruby annotations 告诉那些不支持 Ruby 元素的浏览器如何去显示
<rt> 标记 定义对ruby
annotations的解释
<ruby> 标记 定义 ruby annotations.
<section> 标记 定义一个区域
<source> 标记 定义媒体资源
<time> 标记 定义一个日期/时间
<video> 标记 定义一个视频
希望所有的这些标记都能成为真正”有生命力“的和有用的标记,而不是只是今天看来是很酷的标记。

HTML5 的减负 – 旧的标记,永别了…
你是否很记得那个古老的年代,HTML3被当成一种只能在Netscape里运行的神奇的东西?是的,那就是互联网时代的黎明初现。我们当然不会忘记那段历史,但向一些优秀的却陈旧的东西说再见也是合乎情理的(特别是当它们目前不被认为那么好用,或已没有人再注意它们的时候时)。

因此,HTML5的设计者们废除了一些老的标记,因为这些标准只有那些HTML怪才才会使用,也因为这些标记已经完全失去用处,新的HTML标记里将不会再包括它们 – 我想我们应该就此感谢这些设计者们。 毕竟是这些标记实在是太老旧了,以至于可以想象,20年后我们的孩子们会认为只有莎士比亚在他的十四行诗里才会用到。不管怎样,还是让我们到互联网博物馆里再看它们一眼吧(真有这样的博物馆吗?)。

<acronym> 标记 定义 an acronym.
<applet> 标记 定义 an embedded applet.
<basefont> tag specifies a default
font-color, font-size, or font-family for all the text in a document.
<big> tag is used to format the text one
size bigger, and can be in relation to your <font> or
<basefont> size, if you’ve specified either one.
<center> tag is used to center text.
<dir> tag is used to list directory titles.
<font> tag specifies the font face, font
size, and font color of text.
<frame> 标记 定义 one particular window
(frame) within a frameset.
<frameset> 标记 定义 a frameset. The
frameset element holds two or more frame elements. Each frame element
holds a separate document.
<s> and <strike> tags
define strikethrough text.
<tt> tag is used for “typetype” text, or
fixed-width typewriter-type font. Other than the different type style,
it has normal font characteristics
<u> tag is used to underline text.
这些标记基本上都没有什么用处了(也许你会觉得有几个标记和HTML5里的新标记有些相似)。其中一些我们在早期的旧版的浏览器里使用过,但如今已经失去其作用,而另一些标记的功能已经被CSS功能所取代了(例如设置字体和文本样式的标记)。

关于 <DIV> 标记的重要问题
使用新标记替换掉 <div> 标记是HTML5在语义方面的主要成就。这 <div> 标记是HTML4里是一个重要的(现在仍是)的标记,在HTML里被广泛使用,但是它所表达的语义太弱,在声明网页组织结构里不同的区块的任务面前它毫无用武之地。新的HTML5标记 – 例如 <article>, <aside>, <nav>, <figure>, <header>, <footer> – 会更有用和更方便,这些标记能够让你指明网页不同区域的用途,清楚的显示网站的结构。这意味着即使你是个新手或中等的程序员,仅依据HTML代码就能清楚的了解整个页面的结构 – 更值得一提的是搜索引擎将会因为能如此方便的解析页面的结构而会高兴的发狂的。

对我们有什么好处?
关于新标记和语义的价值的讨论已经很多,有些人认为这些语义以及可视化表现方式没有任何意义 – 因为它们带来的是更复杂的代码,创造了使用这些新HTML代码犯新错误的机会,HTML5新语义的价值在于提升了网站用户和这些技术之间的交互和协作的水平,这是使互联网前进的原因。

同样的道理 – 我们应该明白,就像HTML5给我们的感觉是那样酷一样,人们在其上付出了很多的努力,对未来5年互联网的发展寄予厚望。 今天,这些新标记和语义看起来的确是很棒,我们都很喜欢,但别忘了,任何东西都是在不断变化着来适应人们的需求,新的语言特征必须依赖于人们的使用,互联网社区的大量使用 – 只有这样才能使单纯的新事物变成有用的新事物。

HTML / CSS 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 #HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 #HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 #HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 #HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 #HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 #HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 #HTML / CSS
You might like
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python操作xml文件详细介绍
2014/06/09 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
深入分析python 排序
2020/08/24 Python
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
干部考核评语
2014/04/29 职场文书
使用Redis实现分布式锁的方法
2022/06/16 Redis