没有合适的资源?快使用搜索试试~ 我知道了~
首页解读_HTML5解读_HTML5.pdf
解读_HTML5解读_HTML5.pdf
5星 · 超过95%的资源 需积分: 49 320 下载量 38 浏览量
更新于2023-03-03
评论 8
收藏 1.08MB PDF 举报
解读_HTML5解读_HTML5.pdf解读_HTML5.pdf解读_HTML5.pdf解读_HTML5.pdf
资源详情
资源评论
资源推荐
解读 HTML5 :建议、技巧和技术
标签
: HTML , html5 ,
向后兼容
Design
想总结一下
HTML5
的支持列表,写了许久,无果。在众多文章中,这篇文章涉及到了我
想到的,以及没想到的。遂做粗略的翻译,因个人英文水平一般,本文 FYI 。原文请看
:
HTML5 Unleashed: Tips, Tricks and Techniques 。
=====
现今我们能用 HTML5 吗 , 能用它做些什么呢 , 是否真的是 Flash 杀手?想必你也注意到
了这些日渐增长且常被问起的类似问题 , 被讨论着 , 甚至被回答过 。 在我看来 , 你必须自己
回答这些基本的问题。
这篇文章的本意是想帮你通过一些基本指南的学习 , 以轻松学习代码模板 。 一旦你熟悉了这
些基本,并想更进一学习,你还将会找到更多提供了建议、技巧和技术的有用资源。
HTML 5 特性
官方详细的文档 是寻找
HTML5
特性的最好地方,当然你还可以轻松通过
W3Schools
来
学习 HTML5 标签 。我们将会在文章中涉及到以下的特性:
• 语义化标记
• Form 表单增强功能
• 视频
/
音频
• 画布(
Canvas
)
• 可编辑内容
• 拖放
• 稳健的数据存储
检测浏览器支持
在你开始尝试
HTML5
之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可
以帮助你向着正轨走:
• 何时能用
• 网页设计师的浏览器支持列表
•
HTML5
测试
• 布局引擎对比
你还可以运行 Javascript ( 用 Javascript 检测浏览器特性 )来检测 HTML5 特性的支持
。
你还应该用用 Modernizr : 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript
库。如果你选择用
Mootools
可以使用
MooModernizr (MooTools port of Modernizr)
。
你可能也会想留意不断变化的
"
浏览器市场份额分享
" —
这些信息对于你决定用何种解决或
折衷的方法将会是非常必要的。
值得注意的变更点
除了新的特征,你还应该记下这些重要的变更点:
• 简洁的
DOCTYPE
DOCTYPE
DOCTYPE
DOCTYPE HTML5
只需一个简洁的文档类型:
<!DOCTYPE
html> 。它有意不使用版本,因此文档将会适用所有版本的 HTML 。
• 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang
标记。
<html lang="en">
将对
HTML5
有效。
• 简单易记的编码类型 你现在可以在
meta
标签中使用
"charset"
:
<meta
charset="utf-8 ″ />
• 不需要闭合标签 在 HTML5 中 , 空标签 ( 如 : br 、 img 和 input ) 并不需
要闭合标签。
• 废弃的标签 下面这些标签并不被
HTML5
支持:
<acronym>
、
<applet>
、
<basefont> 、 <big> 、 <center> 、 <dir> 、 <font> 、 <frame> 、 <frameset> 、
<noframes> 、 <s> 、 <strike> 、 <tt> 、 <u> 和 <xmp>
简单代码示例
:
:
:
:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Document</title>
</head>
<body>
</body>
</html>
你可以使用
HTML5 Validator
或
W3C Markup Validation Service
来测试你的
HTML5
文
档。
语义化标记
HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品 , 并不提供额外
的功能。这些都是新增的标签: <article> 、 <section> 、 <aside> 、 <hgroup> 、
<header> , <footer>
、
<nav>
、
<time>
、
<mark>
、
<figure>
和
<figcaption>
。
这些标签被除了
IE
外的所有现代浏览器 (
Firefox 3+
、
Safari 3.1+
、
Chrome 2+
、
and Opera
9.6+ ) 支持 。 Javascript 提供了 document.createElement(tagName) 的方法 , 让你可以用
来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用 HTML5 Enabling
Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。
你可能会想到添加 CSS Reset 到这些新元素上 。 这里是一些可以用在你以 HTML5 为基础
的项目的
CSS Reset
:
• HTML5 Reset CSS
•
Reset5
简单代码示例 :
:
:
: 兼容 IE 的 HTML5 页面布局
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Semantic Markup Demo: Cross Browser</title>
<link rel="stylesheet" href="html5reset.css" type="text/css" />
<link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<header>
<h1>Article Heading</h1>
<time datetime="2010-05-05" pubdate>May 5th, 2010</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<section>
<header>
<h1>Section Heading</h1>
</header>
<p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
<footer>
<p>Section Footer: Pellentesque volutpat, leo nec auctor
euismod</p>
</footer>
</section>
<section>
<header>
<h1>Section Heading</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<figure>
<img src="item-1.png" alt="Club">
<img src="item-2.png" alt="Heart">
<img src="item-3.png" alt="Spade">
<img src="item-4.png" alt="Diamond">
<figcaption>FigCaption: Club, Heart, Spade and
Diamond</figcaption>
</figure>
<p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
<footer>
<p>Section Footer: Pellentesque volutpat, leo nec auctor euismod
est.</p>
</footer>
</section>
<footer>
剩余29页未读,继续阅读
ahck2008
- 粉丝: 0
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- ExcelVBA中的Range和Cells用法说明.pdf
- 基于单片机的电梯控制模型设计.doc
- 主成分分析和因子分析.pptx
- 共享笔记服务系统论文.doc
- 基于数据治理体系的数据中台实践分享.pptx
- 变压器的铭牌和额定值.pptx
- 计算机网络课程设计报告--用winsock设计Ping应用程序.doc
- 高电压技术课件:第03章 液体和固体介质的电气特性.pdf
- Oracle商务智能精华介绍.pptx
- 基于单片机的输液滴速控制系统设计文档.doc
- dw考试题 5套.pdf
- 学生档案管理系统详细设计说明书.doc
- 操作系统PPT课件.pptx
- 智慧路边停车管理系统方案.pptx
- 【企业内控系列】企业内部控制之人力资源管理控制(17页).doc
- 温度传感器分类与特点.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论29