html5出来已经有一段时间了,之前听过看过,就是没怎么用过。本来打算把现在做的这个东西完成后再好好的去研究一番,这不,给我机会了。
这个要从写的一个即时聊天的工具说起,这个程序其实是从网上找的一个现成的东西来改的。前端界面方面由于不符合要求,我就先从某牛逼网站学习了一个过来,人家用的html5标签,我想都没有想就直接用了。现在遇到ie下面的问题了,不认识这些标签,汗!!!!!!不认识也是正常的。
html5其实很简单,至少在标签上来说,写法更简单了。
先看代码:
<!--xhtml-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html";charset=UTF-8 />
<script src="url" type="text/javascript"></script>
<style type="text/css"></style>
<!--html5-->
<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="UTF-8" />
<script src="url"></script>
<style></style></pre>
看了上面的代码,是不是觉得html5在这些方面更简洁了呢。
新增加标签
标签 | 描述
----------|-------- <acronym>| HTML 5 中不支持
,定义首字母缩写 <applet> | HTML 5 中不支持
,定义 applet <area> | 定义图像映射中的区域 <article> | 定义 article(new)<aside> | 定义页面内容之外的内容。(new)<audio> | 定义声音内容(new)<b> | 定义粗体文本 <base> | 定义页面中所有链接的基准 URL <basefont> | HTML 5 中不支持
,请使用 CSS 代替 <bdo> | 定义文本显示的方向 <big> | HTML 5 中不支持
,定义大号文本 <blockquote> | 定义长的引用 <body> | 定义 body 元素 <br> | 插入换行符 <button> | 定义按钮 <canvas> | 定义图形。(new)<caption> | 定义表格标题 <center> | HTML 5 中不支持
,定义居中的文本。 <cite> | 定义引用 <code> | 定义计算机代码文本 <col> | 定义表格列的属性 <colgroup> | 定义表格列的分组 <command> | 定义命令按钮(new)<datalist> | 定义下拉列表(new)<dd> | 定义定义的描述 <del> | 定义删除文本 <details> | 定义元素的细节(new)<dfn> | 定义定义项目 <dir> | HTML 5 中不支持
,定义目录列表 <div> | 定义文档中的一个部分 <dl> | 定义定义列表 <dt> | 定义定义的项目 <em> | 定义强调文本 <embed> | 定义外部交互内容或插件(new)<fieldset> | 定义 fieldset <figcaption> | 定义 figure 元素的标题(new)<figure> | 定义媒介内容的分组,以及它们的标题(new)<font> | HTML 5 中不支持
<footer> | 定义 section 或 page 的页脚(new)<form> | 定义表单 <frame> | HTML 5 中不支持
,定义子窗口(框架) <frameset> | HTML 5 中不支持
,定义框架的集 <h1> to <h6> | 定义标题 1 到标题 6 <head> | 定义关于文档的信息 <header> | 定义 section 或 page 的页眉(new)<hgroup> | 定义有关文档中的 section 的信息(new)<hr> | 定义水平线 <html> | 定义 html 文档 <i> | 定义斜体文本 <iframe> | 定义行内的子窗口(框架) <img> | 定义图像 <input> | 定义输入域 <ins> | 定义插入文本 <keygen> | 定义生成密钥(new) <isindex> | HTML 5 中不支持
,定义单行的输入域 <kbd> | 定义键盘文本 <label> | 定义表单控件的标注 <legend> | 定义 fieldset 中的标题 <li> | 定义列表的项目 <link> | 定义资源引用 <map> | 定义图像映射 <mark> | 定义有记号的文本 <menu> | 定义菜单列表 <meta> | 定义元信息 <meter> | 定义预定义范围内的度量(new)<nav> | 定义导航链接(new)<noframes> | HTML 5 中不支持
,定义 noframe 部分 <noscript> | 定义 noscript 部分 <object> | 定义嵌入对象 <ol> | 定义有序列表 <optgroup> | 定义选项组 <option> | 定义下拉列表中的选项 <output> | 定义输出的一些类型(new)<p> | 定义段落 <param> | 为对象定义参数 <pre> | 定义预格式化文本 <progress> | 定义任何类型的任务的进度(new)<q> | 定义短的引用 <rp> | 定义若浏览器不支持 ruby 元素显示的内容(new)<rt> | 定义 ruby 注释的解释(new)<ruby> | 定义 ruby 注释(new)<s> | HTML 5 中不支持
,定义加删除线的文本 <samp> | 定义样本计算机代码 <script> | 定义脚本 <section> | 定义 section(new)<select> | 定义可选列表 <small> | 将旁注 (side comments) 呈现为小型文本 <source> | 定义媒介源(new)<span> | 定义文档中的 section <strike> | HTML 5 中不支持
,定义加删除线的文本 <strong> | 定义强调文本 <style> | 定义样式定义 <sub> | 定义下标文本 <summary> | 定义 details 元素的标题(new)<sup> | 定义上标文本 <table> | 定义表格 <tbody> | 定义表格的主体 <td> | 定义表格单元 <textarea> | 定义 textarea <tfoot> | 定义表格的脚注 <th> | 定义表头 <thead> | 定义表头 <time> | 定义日期/时间(new)<title> | 定义文档的标题 <tr> | 定义表格行 <track> | 定义用在媒体播放器中的文本轨道 <tt> | HTML 5 中不支持
,定义打字机文本 <u> | HTML 5 中不支持
,定义下划线文本 <ul> | 定义无序列表 <var> | 定义变量 <video> | 定义视频(new) <xmp> | HTML 5 中不支持
,定义预格式文本
从上表可以看出来,增加了非常多的新的更语义化的标签,当然,回到文章开始处,这些标签在ie系列中肯定是不支持的。
很多人说,html5有那么必要去跟风么,我觉得还是很有必要的。那么这些在ie下不支持的标签应该怎么来支持呢?
看了网上很多人的做法就是:
<!--[if lt IE 9]>
<script type="text/javascript">
(function(){
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),
i=0,
length=e.length;
while(i<length){
document.createElement(e[i++])
}
})();
</script>
<![endif]-->
把上面这段代码放到<head>中。
demo(请在ie下打开下面两个页面):添加了js的html5页面,没有js的html5页面 其实像淘宝是这样做的:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
嗯,这就是很有名的html5shiv