HTML5基本页面样式
在前端网看到bushiwuqingwu 写的关于HTML5的基本样式的文章 ，写的很详细，先mark下来学习一下 ，也给大家分享一下。还是一个小菜鸟，有什么不对的请各位大神不用留情的拍砖（轻点~~~~）
<!DOCTYPE HTML> <!--<!DOCTYPE html>; DOCTYPE标签没有结束标签。DOCTYPE 对大小写不敏感。--> <html lang="en"> <!--<html lang="zh-CN">--> <head> <meta charset="utf-8"> <!--页面的编码格式，utf-8是中文编码--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 说明：强制让文档与设备的宽度保持 1:1 ； 文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）； user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小； 注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题， 解决方法：定义页面的最小宽度 body {min-width: 320px;} --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta name="format-detection" content="telephone=no" /> <!-- 说明：使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。 若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 说明：网站开启对 web app 程序的支持。 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 说明：在 web app 应用下状态条（屏幕顶部条）的颜色； 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）； 注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。 --> <meta name="author" contect="liudanyun, liudy102@163.com" /> <!--name 属性设置作者姓名及联系方式--> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> <!--页面关键字，帮助主页被各大搜索引擎登录--> <meta name="description" content="博客园,程序员,C++程序员," /> <!--定义对页面的描述--> <!-- 一、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"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="robots" content="index,follow"> <meta name="application-name" content="bootcss.com"> <meta property="qc:admins" content="1603466166416277433363757477167" /> <title>HTML5运用</title> <!-- 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 文件 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- 引入下载后的Bootstrap样式 --> <!--二者任选其一--> <link rel="stylesheet" type="text/css" href="css/dark/wap.css"> <!--插入自定义样式表--> <!-- 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"> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <!--插入下载后的JS库--> <script type="text/javascript" src="js/common.js"></script> <!--插入自定义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]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![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> <h1>HTML5布局学习</h1> <P>header标签是 HTML 5 中的新标签。header标签定义文档的页眉（介绍信息）。</p> <p>header>元素定义文档的页面组合，通常是一些引导和导航信息，标签内通常包含 secti- on的头部信息，如h1~h6 或 hgroup等。 </p> </header> <!--页头--> <article> <header> <h1>HTML5新元素</h1> <p>article 新元素</p> <footer> <ul> <li>文章标签1</li> <li>文章标签2</li> </ul> </footer> </header> </article> <!--article元素表示文档，页面，用来显示一块独立的文章内容，如一则网站新闻，一偏博客文章等。--> <article> <section> <h1></h1> <p></p> </section> <section> <h1></h1> <p></p> </section> </article> <!--section元素第一位文章中的节，比如章节，页眉，页脚。--> <header> <hgroup> <h1></h1> <h2></h2> </hgroup> </header> <!--<hgroup>定义为对网页或区段的标题元素进行组合，通常使用多级别的h1~h6标签节点进行分组。--> <!--aside元素用于定义一个页面的区域， 用来表示包含页面相关的主要内容，用于装载非 正文的主要内容，如广告栏，侧边栏等。--> <!--页中--> <footer> <nav> <ul> <li>隐私信息</li> <li>版权信息</li> <li>关于我们</li> <li>联系我们</li> </ul> </nav> <!--nav元素用于定义构建导航，显示导航 链接，用于放入一些当前页面的主要导航链接--> <p>隐私信息</p> <p>关于我们</p> <p>footer元素定义文档或章节的末尾部分，包含一些章节的基本信息，如作者信息，相关连及版权信息。 一个页面上可以使用多个header和footer,也可以插入一些别的元素，比如div ul 等。 </p> </footer> <!--页尾--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
