html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>html5 - 新增属性与技术总结 - by sole</title>
<meta name="keywords" content="html5教程，html5研究，html5技术门户，html5权威指南，css3在线实列，html5与css3精髓，响应式布局设计" />
<meta name="description" content="html5新增技术使用与总结，采用最流行的响应时不觉设计，最全最精的html5知识，html5+css3+jQuery实列教程" />
<meta name="viewport" content="width=device-width" />
<meta name="copyright" content="imsole.net" />
<meta name="designer" content="sole" />
<meta name="publisher" content="imsole.net" />
<meta name="author" content="sole" />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<link rel="stylesheet" href="i_ui.css" />
<!--[if lt IE 9]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<section class="main">
<!-- 在线测试：http://mattkersley.com/responsive/ -->
<!-- header -->
<header>
<h1>html5新增属性与技术总结</h1>
<!-- nav -->
<nav class="nav clear">
<a href="index.html" class="now">首页</a>
<a href="ele.html">语义化标记</a>
<a href="form.html">表单增强功能</a>
<a href="media.html">视频 / 音频</a>
<a href="canvas.html">画布</a>
<a href="contenteditable.html">可编辑内容</a>
<a href="drag.html">拖放</a>
<a href="localStorage.html">本地存储</a>
<a href="other.html">Other</a>
</nav>
</header>
<!-- section -->
<section class="content clear">
<aside class="right">
<div class="sub_nav" id="sub_nav">
<div class="tags">
<a href="#index0">html5特性</a>
<a href="#index1">检测浏览器支持</a>
<a href="#index2">html5 变更的标签</a>
<a href="#index3">简单代码示例:</a>
</div>
<div class="weibo">
<iframe src="http://follow.v.t.qq.com/index.php?c=follow&a=quick&name=websole&style=4&t=1357281747315&f=1" marginwidth="0" marginheight="0" allowtransparency="true" frameborder="0" height="27" width="220" scrolling="auto"></iframe>
</div>http://www.huiyi8.com/gongzuozongjie/
</div>工作总结
</aside>
<article class="left">
<!-- 0 -->
<p class="t" id="index0"><strong>html5特性</strong></p>
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">官方详细的文档</a>是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习<a href="http://www.w3schools.com/html5/html5_reference.asp">HTML5 标签</a>。我们将会在文章中涉及到以下的特性：</p>
<ol>
<li>语义化标记</li>
<li>Form 表单增强功能</li>
<li>视频 / 音频</li>
<li>画布（Canvas）</li>
<li>可编辑内容</li>
<li>拖放</li>
<li>稳健的数据存储</li>
</ol>
<!-- 1 -->
<p class="t" id="index1"><strong>检测浏览器支持</strong></p>
<p>在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：</p>
<ol>
<li><a href="http://caniuse.com/">何时能用</a></li>
<li><a href="http://www.findmebyip.com/litmus">网页设计师的浏览器支持列表</a></li>
<li><a href="http://html5test.com/">HTML5 测试</a></li>
<li><a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)">布局引擎对比</a></li>
</ol>
<p>其他检测</p>
<p>Javascript:<a href="http://diveintohtml5.org/everything.html">用Javascript 检测浏览器特性</a></p>
<p>检测 HTML5/CSS3 本地支持的 Javascript 库<a target="_blank" href="http://www.modernizr.com/">Modernizr</a></p>
<p>如果你选择用 Mootools可以使用<a target="_blank" href="http://www.aryweb.nl/projects/mooModernizr/">MooModernizr</a></p>
<!-- 2 -->
<p class="t" id="index2"><strong>html5 变更的标签</strong></p>
<ol>
<li><strong>简洁的 DOCTYPE</strong> HTML5 只需一个简洁的文档类型：<!DOCTYPE html>。它有意不使用版本，因此文档将会适用所有版本的HTML。</li>
<li><strong>简单易记的语言标签</strong> 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang=”en”> 将对 HTML5 有效。</li>
<li><strong>简单易记的编码类型</strong> 你现在可以在 meta 标签中使用 “charset”：<meta charset=”utf-8″ /></li>
<li><strong>不需要闭合标签</strong> 在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。</li>
<li><strong>新增标签</strong> 新增的语义化标签 <br />
header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, keygen, meter, output, progress, rp, rt, ruby,
</li>
<li><strong>废弃的标签</strong> 下面这些标签并不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>[删除线]、<strike>[删除线]、<mark title="tt标签与 code 和 kbd 标签一样，<tt> 标签和必需的 tt 结束标签告诉浏览器，要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说，这个标签在文本的显示上就没有什么特殊效果了。"><tt>[定义打字机文本]</mark>、<u>[下划线文本]; 和 <xmp>[和pre类似];</li>
<li><strong>新增属性</strong> 在 HTML5 中，增加了很多form表单属性，当然还有其他属性。 <br />
required, <mark title="小偷属性">from</mark>, pattern, placeholder, email, range[min, max, step], url, date, time, datetime, datetime-local, month, week, tel, number, search, --, contentcontenteditableable, contextmenu, <mark title="自定义属性，html5规定自定义属性必须以 data- 开头">data-yourvalue</mark>, draggable, item, itemprop, spellcheck, subject
</li>
</ol>
<!-- 3 -->
<p class="t" id="index3"><strong>简单代码示例:</strong></p>
<p>
<!doctype html> <br />
<html lang="en"><br />
<head><br />
<meta charset="utf-8" /><br />
<title>HTML5 Document</title><br />
</head><br />
<body><br />
<header> </header><br />
<section> </section><br />
<footer> </footer><br />
</body><br />
</html><br />
</p>
</article>
</section>
<!-- footer -->
<footer>
© 2012 2012/11/12 by <a href="http://www.imsole.net/">sole</a>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=20322657" charset="UTF-8"></script>
<script src="http://s96.cnzz.com/stat.php?id=4913803&web_id=4913803" language="JavaScript"></script>
</footer>
</section>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script src=custom.js></script>
</body>
</html>
html5 + css3 + jQuery + 响应式布局设计的更多相关文章
- HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- 如何通过CSS3 实现响应式Web设计
如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...
- HTML5、CSS3与响应式Web设计入门(1)
HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...
- SharePoint 2013 的HTML5特性之响应式布局
今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...
- SharePoint 2013的HTML5特性之响应式布局
今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...
- CSS3之响应式布局
在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...
- WinForm响应式布局设计实践
引言 创建响应式WinForm应用程序并不那么简单. 响应式布局,在此我指的是应用程序在不同屏幕分辨率下的可用性. 对于WinForm应用程序,我们需要明确地根据分辨率来调整控件的大小和重新定位. 虽 ...
- [html5] 学习笔记-响应式布局
1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...
随机推荐
- linux无线网络配置_转
转自:http://www.cnblogs.com/dartagnan/archive/2010/12/05/2003521.html 一位资生linux 原文:http://www.hpl.hp ...
- 安装Struts2 类库
现在,如果一切正常,那么你可以继续设置您的Struts 2框架.以下是简单的步骤,下载并安装在机器上Struts2. 请选择是否要安装Hibernate在Windows或Unix,然后继续进行下一个步 ...
- DFS应用——查找强分支
[0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在 理解 "DFS应用--查找强分支" 的idea 并用源代码加以实现 : [1]查找强分支 1 ...
- 闪屏Flash动画
这个也比较简单,之前也做过不少 今天这个就为了方便日后使用,希望大家都可以借鉴借鉴啊! @ViewInject(R.id.linMain) private LinearLayout linMain; ...
- 执行动态的delphi脚本
相关资料:https://www.cnblogs.com/linyawen/archive/2011/10/01/2196950.html 如何在程序中执行动态生成的Delphi代码 经常发现有人提这 ...
- poj2891(线性同余方程组)
一个exgcd解决一个线性同余问题,多个exgcd解决线性同余方程组. Strange Way to Express Integers Time Limit: 1000MS Memory Limi ...
- IntelliJ IDEA集成JProfiler，入门教程
说明: JProfiler是用于分析J2EE软件性能瓶颈并能准确定位到Java类或者方法有效解决性能问题的主流工具,它通常需要与性能测试工具如:LoadRunner配合使用,因为往往只有当系统处于压力 ...
- 程序运行之ELF文件结构
ELF目标文件格式的最前部是ELF文件头.包含了整个文件的基本属性.比如ELF文件版本,目标机器型号,程序入口地址等.然后是ELF的各个段,其中ELF文件中与段有关的重要结构就是段表.段表描述了ELF ...
- Open AI Gym简介
介绍 OpenAI Gym是一款用于研发和比较强化学习算法的工具包,它支持训练智能体(agent)做任何事——从行走到玩Pong或围棋之类的游戏都在范围中. OpenAI Gym 是一个用于开发和比较 ...
- c++之helloworld与命名空间
首先在linux中需要安装g++编译器. 在中端输入 uname -a,可以查看版本信息. 输入g++,如果提示错误.则需要使用sudo apt-get install g++. #include&l ...