分享一个HTML5页面开发的基础性模板，包含了两个版本： 开发版本 注释版本

　　开发版本

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta charset="utf-8">

<title></title>

<meta name="description" content="">

<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="">

<!--[if lt IE 9]>

<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

<link rel="shortcut icon" href="">

</head>

<body>

<!-- 这里添加页面主要内容 -->

<!-- SCRIPTS：个人建议在天朝不要使用Google的CDN了，是不是你就发现你的网站功能失效了 -->

<!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->

</body>

</html>

　　注释版本

<!DOCTYPE html>

<!-- 

设置lang值来保证<html>标签的互操作性及其可访问性

　  更多HTML标签全局性属性

　  请阅读这里: http://www.w3.org/TR/html-markup/global-attributes.html -->

<html>

<head>

<!--

告诉IE使用目前最新的布局引擎：

&nbsp;更多信息阅读这里: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--

针对web性能定义字符集，首选通过HTTP header来设置

　  确保HTTP header和Meta标签设置一致

　  更多信息阅读这里: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->

<meta charset="utf-8"> 

<!-- 指定页面标题 -->

<title></title>

<!-- 指定web页面描述 -->

<meta name="description" content="">

<!-- 指定web页面作者 -->

<meta name="author" content="">

<!-- 提示移动浏览器使用设备宽度和缩放比 -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 在页面加载前来加载CSS

保证相关样式的及时加载

指定对应的URI属性 -->

<link rel="stylesheet" href="">

<!--

加载htmlshiv和respond.js来兼容老版本的IE浏览器

　  方便使用HTML5中的新元素和media queries -->

<!--[if lt IE 9]>

<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

<!-- 指定favicon的URI -->

<link rel="shortcut icon" href="">

<!-- 下面注释掉的是ios/android书签图标-->

<!--

<meta name="mobile-web-app-capable" content="yes">

<link rel="icon" sizes="196x196" href="">

<link rel="apple-touch-icon" sizes="152x152" href="">

-->

<!-- 

如果可能使用async属性来非阻断的加载脚本

　  例子: <script src="" async></script> -->

</head>

<body>

<!-- 这里添加页面主要内容 -->

<!-- 如果可能使用async属性来非阻断的加载脚本 -->

<!-- SCRIPTS -->

<!-- 例子: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->

</body>

</html>

HTML5页面开发的基础性模板的更多相关文章

  1. 今天再给大家带点html5前端开发的干货模板“text/tpl”怎么用 script template怎么用

    text/tpl 顾名思义就是模板,其实和C++模板函数类似的作用,就是利用他生成一个HMTL内容,然后append或者替换html里面 有什么好处,假如后端返回来的数据都是一样的,但是需要生成不同的 ...

  2. html5 app开发重大消息-腾讯在技术端推进Html5生态发展

    中新网5月3日电 日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏 ...

  3. 小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

    为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...

  4. 快速入门系列--MVC--07与HTML5移动开发的结合

    现在移动互联网的盛行,跨平台并兼容不同设备的HTML5越来越盛行,很多公司都在将自己过去的非HTML5网站应用渐进式的转化为HTML5应用,使得一套代码可以兼容不同的物理终端设备和浏览器,极大的提高了 ...

  5. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  6. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  7. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  8. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  9. H5案例分享：html5移动开发细微之美

    html5移动开发细微之美 1.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=dev ...

随机推荐

  1. 个人新站 【EXP技术分享博客】 落成~ 全新的技术资源~ 欢迎莅临~

    对的,我筹备了大半年的个站技术网站正式开张了~ EXP技术分享博客: http://exp-blog.com CSDN上面大部分文章已经迁移过去了,以后也会更多地在新站点更新~ 为了庆祝新站开张,近期 ...

  2. 安装logstash及logstash的初步使用-处理DNS日志

    安装logstash 需要高版本的java 使用1.4版本的java会有报错 # Can't start up: not enough memory 查询java信息 rpm -qa | grep j ...

  3. C++基础知识（1）

    C语言是结构化编程语言(for循环.while循环.do while循环和if else语句),将低级语言的效率.硬件访问能力和高级语言的通用性.可移植性融合在一起. UNIX编译和链接 UNIX用C ...

  4. 强化学习算法DQN

    1 DQN的引入 由于q_learning算法是一直更新一张q_table,在场景复杂的情况下,q_table就会大到内存处理的极限,而且在当时深度学习的火热,有人就会想到能不能将从深度学习中借鉴方法 ...

  5. 1082. Read Number in Chinese (25)-字符串处理

    题意就是给出9位以内的数字,按照汉子的读法读出来. 读法请看下方的几个例子: 5 0505 0505 伍亿零伍佰零伍万零伍佰零伍 5 5050 5050 伍亿伍仟零伍拾万伍仟零伍拾  (原本我以为这个 ...

  6. Notes of Daily Scrum Meeting（11.12）

    今天我们召开了Beta阶段MOOC项目开发的第一次Scrum Meeting,在会上就alpha阶段进行了总结,然后我们确定了 接下来的Beta阶段的项目分工,并且就每天的进度汇报做了一个约定,就是每 ...

  7. 【Beta阶段】第四次Scrum Meeting！

    每日任务内容: 本次会议为第四次Scrum Meeting会议~ 由于本次会议女生今日因身体不适未参与会议,故在宿舍楼开会,大家集会15分钟. 队员 昨日完成任务 明日要完成任务 刘乾 #130 学习 ...

  8. 团队作业(五)-笔记app top5

    在互联网快速发展的情况下,各个行业的软件层出不穷,五花八门.各个行业都有相当多的软件介入其中,在如此多的软件之中,便有了相当激烈的竞争角逐.今天我们十五万的总冠军就着笔记APP行业中位列top 5的软 ...

  9. Eclipse使用较多的快捷键

    快速修正:Ctrl+1 单词补全:Alt+/ 快速Outline:Ctrl+O 删除行:Ctrl+D 选中到行末/行首:Shift+End/Home 注释:Ctrl+/ 变为大/小写:Ctrl+Shi ...

  10. Linux命令（三） 移动文件 mv

    用户可以使用 mv 命令来移动文件或目录至另一个文件或目录, 还可以将目录或文件重命名. 如果将一个文件移动到一个已经存在的目标文件中,目标文件的内容将会被覆盖.mv 命令接收两个参数时,第一个参数表 ...