代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Css
】
html5 + css3 + jQuery + 响应式布局设计
作者:
caizhiwei
/ 发布于
2013/2/1
/
680
<!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> </div> </aside> <article class="left"> <!-- 0 --> <p class="t" id="index0"><strong>html5特性</strong> <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>。我们将会在文章中涉及到以下的特性： <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> 在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走： <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> 其他检测 Javascript:<a href="http://diveintohtml5.org/everything.html">用Javascript 检测浏览器特性</a> 检测 HTML5/CSS3 本地支持的 Javascript 库<a target="_blank" href="http://www.modernizr.com/">Modernizr</a> 如果你选择用 Mootools可以使用<a target="_blank" href="http://www.aryweb.nl/projects/mooModernizr/">MooModernizr</a> <!-- 2 --> <p class="t" id="index2"><strong>html5 变更的标签</strong> <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> 新增的语义化标签 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表单属性，当然还有其他属性。 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> <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> <header> </header> <section> </section> <footer> </footer> </body> </html> </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>
试试其它关键字
响应式布局
同语言下
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后，在页面显示上传的图片
.
html5实现点击弹出图片
可能有用的
.
C#实现的html内容截取
.
List 切割成几份 工具类
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现，不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
caizhiwei
贡献的其它代码
(
3
)
.
查关键词排名
.
html5 + css3 + jQuery + 响应式布局设计
.
统计代码行数
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3