HTML5移动Web开发(三)——在移动网站中使用HTML5

news/2024/5/13 4:34:05/文章来源:https://blog.csdn.net/weixin_30580943/article/details/97494613

创建一个简单得HTML5页面ch01e2.html

<html><head><meta name="viewport" content="width=device-width,initial-scale=1.0"></head><body>hello to the HTML5 world.</body>
</html>

  HTML5和其他HTML页面的唯一区别就在于我们使用的文件类型定义(DTD Document Type Definition:<!doctype html>

  Safari(iPhone最常用的浏览器)会根据<meta name="viewport" content="width=device-width,initial-scale=1.0">,将页面宽度设为屏幕宽度,并且根据initial-scale=1禁用浏览器的缩放。

  HTML5与版本号

  为什么HTML5会没有版本号?

  1.浏览器并不会针对HTML的某个版本做支持,而是针对某个功能做支持。就是说如果浏览器支持你使用某个功能,及时你把文档申明为HTML4,浏览器仍然会按照HTML5的标准来显示页面。

  2.名字可以很简洁。 

  移动文档类型

  使用HTML5文档类型<!doctype html>是否是可靠的?

  文档类型只是用作确认,而非浏览器实际显示。

   在怪异模式(一些网页浏览器为了维持对较旧的网页设计的向后兼容性而使用的一种技术)中是否是可靠的?

  <!doctype html>是浏览器按照标准工作所需要的最少的信息,所以使用<!doctype html>时非常可靠的。

  我们使用<!doctype html>而不是<!DOCTYPE html>,这是因为HTML5不是大小写敏感,但是出于一致性的考虑,我们都将使用小写。

  跨浏览器HTML5

  旧浏览器无法识别HTML5元素,也无法对这些元素设置样式,但是有许多工具可以解决这个问题,例如Modernizr.

  Windows Mobile的自带浏览器无法识别HTML5元素。如果没有Windows Mobile你可以使用IE7来测试,因为他们都是基于相同的浏览器引擎。Modernizr下载地址:http://www.modernizr.com/

  新建HTML文件ch01e3.html

<!doctype html>
<html><head><title>Mobile Cookbook</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>header, footer {display:block;}</style></head><body><header>Main Navigation here</header>body content here<footer>Footer links here</footer></body>
</html>

  再新建一个HTML文件ch01e4.html,引入Modernizr。

  modernizr-1.7.min.js 下载:http://pan.baidu.com/s/1c0v1Api 提取码:kepb
<!doctype html>
<html><head><title>Mobile Cookbook</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="modernizr-1.7.min.js"></script><style>header, footer {display:block;}</style></head><body><header>Main Navigation here</header>body content here<footer>Footer links here</footer></body>
</html>

效果图:

  Modernizr的使用需要在<head>标签中引入。Modernizr不是唯一可以帮助我们跨浏览器的 库,还有其他两点值得注意:

  1.html5shim,对打印也同样有效:http://code.google.com/p/html5shim/
  2.InnerShiv,支持元素的innerHTML。http://jdbartlett.github.com/innershiv/

  HTML5 CSS重置
  下面的代码可以清除HTML5元素的默认样式:
  article,aside,canvas,detailsfigcaption,figure,footer,header,hgroup,menu,nav,se
  ction,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
  }

  使HTML5元素在旧版本IE中变为块级元素:
  下面的代码可以使HTML5圆度变为块级元素,但是不是所有的HTML5元素都需要显示为块级元素。
  下面是HTML5中的块级元素:
  article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block;
  }

  Modernizr

  Modernizr不仅使HTML5元素可以被设置样式,他还可以检测HTML5各个功能在不同浏览器中的兼容性。你可以在2.0版本中自定义下载内容:http://www.modernizr.com/download/  

  学习HTML5的免费资源

  如果你对HTML5不是很熟悉,可以在下面的网站学习:

  HTML5 Doctor:http://html5doctor.com/

  Dive Into HTML5:http://diveintohtml5.org/

  HTML5 Rocks:http://www.html5rocks.com/

  如果希望详细了解HTML5,你可以阅读官方HTML5文档,W3C版本的文档: http://dev.w3.org/html5/spec/Overview.html

  WHATWG版本的在线标准:http://www.whatwg.org/specs/web-apps/current-work/multipage/

转载于:https://www.cnblogs.com/Joanna-Yan/p/4855724.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_817276.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python selenium采集速卖通_爬虫 | 大写牛逼,用 Python 登录主流 24 个网站

爬虫脚本是大家经常用到的&#xff0c;那就避开不了登录 这一关。使用Python一般需要request库&#xff0c;补充 header 中的 post 要素&#xff0c;有些还会有 隐藏的 hidden 参数&#xff0c;可以通过浏览器 F12 或者元素审查来发现&#xff0c;对于初学者来说都是一个坑。还…

php建站错误代码0xc0000005,0xc0000005错误代码怎么解决?

在使用电脑过程中经常会出现某些错误代码&#xff0c;如0xc0000005错误故障&#xff0c;造成电脑无法正常运行&#xff0c;这要怎么办呢&#xff1f;今天小编和大家分享电脑出现0xc0000005错误代码的解决方法。具体方法如下&#xff1a;1、首先按下“winr”打开运行&#xff0c…

网站服务器 64位,如何将win7系统从32位升级到64位_网站服务器运行维护,win7,32位,64位...

win10如何重置此电脑_网站服务器运行维护win10重置此电脑的方法是&#xff1a;1、点击【开始】按钮&#xff0c;进入设置&#xff1b;2、进入【更新和安全】选项&#xff0c;点击【恢复】&#xff1b;3、找到【重置此电脑】&#xff0c;点击【开始】&#xff1b;4、选择【保留我…

JPress v2.0-rc.6 发布,新增专业的 SEO 支持

JPress 是一个使用Java&#xff08;JFinal、Jboot框架&#xff09;开发的类似 WordPress 的系统&#xff0c;但更加侧重于企业营销和微信运营。 此版本&#xff0c;主要是完善对专业的 SEO 功能配置和支持&#xff0c;如下图所示&#xff1a; 以下是 JPress v2.0-rc.7 的更新内…

写个软件来防止服务器网站CPU百分百

2019独角兽企业重金招聘Python工程师标准>>> 问题: 大概每隔两个星期左右&#xff0c; 秋色园上服务器就会来一次CPU百分百&#xff0c;由于问题发生的概率极低&#xff0c;要它重现也难&#xff0c;所以只能意淫是内存太少的原故。 以前出现&#xff0c;远程上去结…

反击“猫眼电影”网站的反爬虫策略

001 前言 前两天在百家号上看到一篇名为《反击爬虫&#xff0c;前端工程师的脑洞可以有多大&#xff1f;》的文章&#xff0c;文章从多方面结合实际情况列举了包括猫眼电影、美团、去哪儿等大型电商网站的反爬虫机制。的确&#xff0c;如文章所说&#xff0c;对于一张网页&…

域名购买和网站备案心得

在上一篇部署云服务器的文章中&#xff0c;已经租用和部署好了服务器&#xff0c;那么就讲一下最麻烦的域名购买和备案。 1.域名购买 首先说一下域名购买&#xff0c;我是在腾讯云购买的&#xff0c;价格很便宜一年也就30左右&#xff0c;对比服务器价格便宜的多&#xff0c;…

开源项目大家谈-网站性能调校-Cache的使用

之所以用这个题目是因为很多人常常问我研究开源项目的意义&#xff0c;有一些开源项目在别人眼里看起来完全没有搞头&#xff0c;是一些没有实用价值的项目。其实开源项目往往是新技术的试验田&#xff0c;是全世界优秀程序开发者智慧的汇集&#xff0c;如果你仔细研读这些开源…

揭秘博友卡通身份 学做SEO链接诱饵

首先我们来揭秘一下各位博主的卡通身份&#xff0c;纯野随机选了几个博主&#xff0c;哈哈&#xff0c;真的是好逗啊。注&#xff1a;&#xff08;若下面的卡通中没有你&#xff0c;可以留言&#xff0c;纯野下期可以把你给放上来亮相&#xff01; 若是你不喜欢请通知纯野进行…

精选国外知名网站手机版网页设计欣赏

互联网发展如此的迅速&#xff0c;手机互联网用户逐渐成了一个相当庞大的群体。所以我们的网站必须去考虑适应手机互联网用户的需求&#xff0c;从传统的电脑互联网到手机互联网(更准确的说是移动互联网)需要有至少两个方面的考虑&#xff0c;一是移动互联网用户的带宽是有限制…

【私活案例3】 获取某市网站普通高中录取分数小工具

私活案例3&#xff1a;获取某市网站普通高中录取分数小工具0 前言年龄越来越大&#xff0c;记性越来越差&#xff0c;只想把自己一些零零散散的私活经历记录下来&#xff0c;日后回头看&#xff0c;还能想起这些小项目、小技术点&#xff0c;还能想起那些和客户、朋友打交道的各…

使用whos.amung.us实时统计网站在线人数

如果需要在前台显示网站实时在线人数&#xff0c;可以使用whos.amung.us提供的一款在线人数实时统计工具&#xff0c;它可以统计你的网站或者博客当前在线人数&#xff0c;支持自定义颜色。 打开&#xff1a;https://whos.amung.us/ 滑动到下面&#xff1a; 直接复制代码&am…

转:利用ArcGIS Server REST API实现对Feature的编辑操作 - 开源IT技术网站

ArcGIS API for Flex中提供了一些工具实现对Feature的编辑操作&#xff0c;不过其实质是对ArcGIS Server REST API的再包装。为了更大的灵活性&#xff0c;在这里我们谈一下如何直接调用ArcGIS Server REST API来实现对Feature的新增、更新、删除操作。 FeatureServer 对Featur…

《大型网站系统与Java中间件》读书笔记 (中)

前言 只有光头才能变强。 文本已收录至我的GitHub仓库&#xff0c;欢迎Star&#xff1a;https://github.com/ZhongFuCheng3y/3y 回顾上一篇&#xff1a; 《大型网站系统与Java中间件》读书笔记&#xff08;一&#xff09;这周周末读了第四章&#xff0c;现在过来做做笔记&#…

.NET技术+25台服务器怎样支撑世界第54大网站

摘要&#xff1a;同时使用Linux和Windows平台产品&#xff0c;大量使用静态的方法和类&#xff0c;Stack Overflow是个重度性能控。同时&#xff0c;取代横向扩展&#xff0c;他们坚持着纵向扩展思路&#xff0c;因为“硬件永远比程序员便宜”。 StackOverflow是一个IT技术问答…

钓鱼网站盯梢微博 360“围剿中奖骗子”

一段时间以来&#xff0c;随着“织围脖”的兴起&#xff0c;微博晋升为全民级互联网应用&#xff0c;而一些曾以短信、聊天工具为主要传播载体的钓 鱼网站也开始悄悄出现在微博上&#xff0c;其伪装方法仍然是老套的——“您中奖了”。对此&#xff0c;360安全卫士官方微博发起…

网站域名续费 服务器续费,域名续费与服务器续费

域名续费与服务器续费 内容精选换一换华为云帮助中心&#xff0c;为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档&#xff0c;帮助您快速上手使用华为云服务。帮助用户完成云服务器备份存储库的创建&#xff0c;快速购买…

hexo博客pc端不能访问手机移动端可以访问_Hexo+Kaze+Gitee Pages 搭建静态博客网站...

前言建网站本身是一个很大的工程&#xff0c;涉及前端页面的搭建&#xff0c;网站数据的存储&#xff0c;还要购置服务器资源&#xff0c;甚至是后期的维护&#xff0c;过程相当繁琐。不过如果仅仅是想搭建个人的网站&#xff0c;写写博客&#xff0c;想要美观&#xff0c;又不…

创意无极限:创意产品闪购网站Fab融资1.05亿美元

据国外媒体报道&#xff0c;美创意产品闪购网站Fab今天宣布&#xff0c;公司成功获得1.05亿投资。这个消息最先是由《华尔街日报》爆出的&#xff0c;之后Fab CEO Jason Goldberg在一篇博文中证实了这一消息。 此轮融资之前就有风声传出&#xff0c;而此次融资成功也确实让Fab如…

网易云音乐刷听歌量网站_【java+selenium】网易云音乐刷累计听歌数

背景应该是在去年的时候&#xff0c;刷知乎看到一个问题&#xff0c;大概是说怎么刷网易云音乐个人累计听歌数&#xff0c;然后有一个高赞回答&#xff0c;贴了一段js代码&#xff0c;直接在浏览器console执行就可以了。当时试了下&#xff0c;直接一下子刷了有好几万。悲剧的是…