前端开发H5基本页面样式

网站前端开发实用插件

前端开发试题网站

国内购物网站前端开发状况

html 代码片段

<!DOCTYPE html>

<!–<!DOCTYPE html>;

DOCTYPE标签没有结束标签。DOCTYPE 对大小写不敏感。–>

<!–<html lang=”zh-CN”>–>

<head>

<!–页面的编码格式，utf-8是中文编码–>

<meta

name=”viewport”

content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”

<!–

说明：强制让文档与设备的宽度保持 1:1 ；

文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；

user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；

注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，

解决方法：定义页面的最小宽度

body {min-width: 320px;}

–>

<!– 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ –>

<!–

说明：使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。

若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。

–>

<!–

说明：网站开启对 web app 程序的支持。

该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。

–>

<!–

说明：在 web app 应用下状态条（屏幕顶部条）的颜色；

默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。

–>

<!–name 属性设置作者姓名及联系方式–>

<!–页面关键字，帮助主页被各大搜索引擎登录–>

<!–定义对页面的描述–>

<!–

一、meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）

1、http-equiv 属性的 Content-Type 值（显示字符集的设定）

说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。

如：<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

2、name 属性的 viewport 值（移动屏幕的缩放）

也就是可视区域。对于桌面浏览器，我们都很清楚 viewport 是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽

度不同于传统 web，因此我们需要改变 viewport 值。实际上我们可以操作的属性有 4 个：

width – // viewport 的宽度（范围从 200 到 10,000，默认为 980 像素）

height – // viewport 的高度（范围从 223 到 10,000 ）

initial-scale – // 初始的缩放比例（范围从 > 0 到 10）

minimum-scale – // 允许用户缩放到的最小比例

maximum-scale – // 允许用户缩放到的最大比例

user-scalable – // 用户是否可以手动缩放 (no，yes)

如：<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

3、name 属性的 format-detection 值（忽略页面中的数字识别为电话号码

如：<meta name=”format-detection” content=”telephone=no” />

4、name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）

如：<meta name=”apple-mobile-web-app-capable” content=”yes” />

5、name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）

如：<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

6、name 属性设置作者姓名及联系方式

如：<meta name=”author” contect=”liudanyun, liudy102@163.com” />

二、苹果 Web App 其他设置：

当然，配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定，如下所示：

1、<link rel=”apple-touch-icon-precomposed” href=”iphone_logo.png” />

说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径（图片四）。

使用：该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。

图片尺寸可以设定为 57*57（px）或者 Retina 可以定为 114*114（px），iPad 尺寸为 72*72（px）

2、<link rel=”apple-touch-startup-image” href=”logo_startup.png” />

说明：这个 link 就是设置启动时候的界面。

使用：放置的路径和上面一样。

官方规定启动界面的尺寸必须为 320*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。

–>

<meta

name=”viewport”

content=”width=640,user-scalable=no,uc-fitscreen=yes”

<!– Bootstrap –>

<link

href=”http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css”

rel=”stylesheet”

<link

href=”//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css”

rel=”stylesheet”

<!– 引入网上Bootstrap 核心 CSS 文件 –>

<!– 引入下载后的Bootstrap样式 –>

<!–二者任选其一–>

<!–插入自定义样式表–>

<!– Favicons –>

<link

rel=”apple-touch-icon-precomposed”

href=”http://static.bootcss.com/www/assets/ico/apple-touch-icon-precomposed.png”

<link

rel=”shortcut icon”

href=”http://static.bootcss.com/www/assets/ico/favicon.png”

<!–插入下载后的js库–>

<!–插入自定义JS–>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>

<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>

<!–[if lt IE 9]>

<![endif]–>

<style>

/* 大屏幕 */

@media (min-width: 1200px) {

…;

}

/* 平板电脑和小屏电脑之间的分辨率 */

@media (min-width: 768px) and (max-width: 979px) {

…;

}

/* 横向放置的手机和竖向放置的平板之间的分辨率 */

@media (max-width: 767px) {

…;

}

/* 横向放置的手机及分辨率更小的设备 */

@media (max-width: 480px) {

…;

}

</style>

</head>

<body>

>header标签是 HTML 5

中的新标签。header标签定义文档的页眉（介绍信息）。</P

<p>

header>元素定义文档的页面组合，通常是一些引导和导航信息，标签内通常包含

secti- on的头部信息，如h1~h6 或 hgroup等。

</p>

</header>

<!–页头–>

<p>article 新元素</p>

<ul>

</ul>

</footer>

</header>

</article>

<!–article元素表示文档，页面，用来显示一块独立的文章内容，如一则网站新闻，一偏博客文章等。–>

<p></p>

</section>

<p></p>

</section>

</article>

<!–section元素第一位文章中的节，比如章节，页眉，页脚。–>

</hgroup>

</header>

<!–<hgroup>定义为对网页或区段的标题元素进行组合，通常使用多级别的h1~h6标签节点进行分组。–>

<!–aside元素用于定义一个页面的区域，用来表示包含页面相关的主要内容，用于装载非正文的主要内容，如广告栏，侧边栏等。–>

<!–页中–>

<nav>

<ul>

</ul>

</nav>

<!–nav元素用于定义构建导航，显示导航链接，用于放入一些当前页面的主要导航链接–>

<p>

footer元素定义文档或章节的末尾部分，包含一些章节的基本信息，如作者信息，相关连及版权信息。

一个页面上可以使用多个header和footer,也可以插入一些别的元素，比如div

ul 等。

</p>

</footer>

<!–页尾–>

<!– jquery文件。务必在bootstrap.min.js 之前引入 –>

<!– 最新的 Bootstrap 核心 JavaScript 文件 –>

</body>

</html>

实际上，除了我们介绍的语义标签外，在HTML5的标准中还定义了更多不同语义的标签。

audio:定义音频内容。
canvas:定义画布功能。
command:定义一个命令按钮。
datalist:定义一个下拉列表。
details:定义一个元素的详细内容。
dialog:定义一个对话框。
keygen:定义表单里一个声称的键值。
mark:定义有标记的文本。
output:定义一些输出类型。
progress:定义任务的过程。
source:定义媒体资源。
video:定义一个视频内容。
虽然HTML5标准中新增了很多新的元素，但实际上在移动Web应用中使用的机会并不多。
audio及video等标签虽然可以在移动Web应用中得到实践，但由于其性能、兼容性以及页面渲染等原因，它们还不能很好地应用到智能手机以及平板电脑的Web浏览器上。

前端开发H5基本页面样式

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发