微信公众号开发
第01天/
微信开发VIP教程第一节.avi
1.微信的现在发展微信，是一个生活方式1-12.微信公众号1-n+3.微信公众号和个人微信的区别Mp.weixin.qq.com
4.微信与微博的区别微信：有私密性，达到率高，客户管理，即搜即用的特点。微博：更侧重于传播和公开
5.为什么要使用公众平台再小的个体，也有自己的品牌！市场对微信公众平台的二次开发需求巨大！6.订阅号，服务号，企业号是一种账号类型，都是提供服务的服务器：1.1个月内能发4条消息2.这个消息会显示在用户聊天的列表中。3.服务号可以申请自定义菜单
订阅号1.每天可以发送1条群发消息2.发给用户的消息会显示在“订阅号”文件夹中，点两次才能打开3.个人只能申请订阅号
是企业进行“管理”的平台，是对内部员工的管理7.公众号能做什么？1．定位2.客户服务定制，3.客户分组管理4.解答客户
4.解答客户咨询的专家5.客户互动游戏
只能订阅号 jdg ulm
old...
第02天/
百度开放服务平台
.sinaapp.com
第03天/
息消息息息息置息消消消消位消本片音频理接文图语视地链123456
配合后台开发
自己服务器 微信api 对接....
属于后端...
官网api appid secret
demo
+frame.../3plugin
官网doc / blog openproject
api语音 接口 to text to other api 天气/定位....
用模板....
第04天/
第05天/
第06天/
开发者可通过OpenID来获取用户基本信息。请使用https协议。
服务器sql save
关于access token的问题因为这个token有个时间的限制…百度知道
注意缓存 不用频繁调用
过期再获取..
HTML5与CSS3的应用---微信网站页面设计使用高洛峰
第07天/
第08天/
第09天/
HTML5中提供了地理位置信息的API，通
window.navigator.geolocation
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>H5地理位置Demo</title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=dGg7NKEkMCp8j1pWHCHZ3nhk"></script><script type="text/javascript" src="js/convertor.js"></script><style>html,body,#map{width:100%;height:100%;padding:0;margin:0;}</style>
</head>
<body><div id="map"></div><script type="text/javascript">if (window.navigator.geolocation) {var options = {enableHighAccuracy: true,};window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);} else {alert("浏览器不支持html5来获取地理位置信息");}function handleSuccess(position){// 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度var lng = position.coords.longitude;var lat = position.coords.latitude;// 调用百度地图api显示var map = new BMap.Map("map");var ggPoint = new BMap.Point(lng, lat);// 将google地图中的经纬度转化为百度地图的经纬度BMap.Convertor.translate(ggPoint, 0, function(point){var marker = new BMap.Marker(point);map.addOverlay(marker);map.centerAndZoom(point, 15);});}function handleError(error){alert('error');}
</script>
</body>
</html>
第10天/
SWIPEJS-移动WEB页面内容触摸滑动类库
第11天/
第12天/
微信开发源码/
<?php//声明一个常量定义一个token值, tokendefine("TOKEN", "glfshidashuaige");//通过Wechat类， 创建一个对象$wechatObj = new Wechat();//如果没有通过GET收到echostr字符串， 说明不是再使用token验证if (!isset($_GET['echostr'])) {//调用wecat对象中的方法响应用户消息$wechatObj->responseMsg();}else{//调用valid()方法，进行token验证$wechatObj->valid();}//声明一个Wechat的类， 处理接收消息， 接收事件， 响应各种消息， 以及token验证class Wechat {//验证签名, 手册中原代码改写public function valid() {//在开发者首次提交验证申请时，微信服务器将发送GET请求到填写的URL上，并且带上四个参数（signature、timestamp、nonce、echostr），开发者通过对签名（即signature）的效验，来判断此条消息的真实性。 $echoStr = $_GET["echostr"]; // 随机字符串 $signature = $_GET["signature"]; //微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。$timestamp = $_GET["timestamp"]; //时间戳 $nonce = $_GET["nonce"]; // 随机数 //上面通过常量声明的token值$token = TOKEN;//将token、timestamp、nonce三个参数进行字典序排序$tmpArr = array($token, $timestamp, $nonce);sort($tmpArr);//将三个参数字符串拼接成一个字符串进行sha1加密$tmpStr = implode($tmpArr); //将数排序过的数组组合成一个字符$tmpStr = sha1($tmpStr); //使用sha1加密//如果公众号上的签名和服务器上的签名是相等的则验正成功if( $tmpStr == $signature ){return true;}else{return false;}}//响应消息处理public function responseMsg(){//接收微新传过来的xml消息数据 $postStr = $GLOBALS["HTTP_RAW_POST_DATA"];//如果接收到了就处理并回复if (!empty($postStr)){//将接收到的XML字符串写入日志， 用R标记表示接收消息$this->logger("R \n".$postStr);//将接收的消息处理返回一个对象$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);//从消息对象中获取消息的类型 text image location voice vodeo link $RX_TYPE = trim($postObj->MsgType);//消息类型分离, 通过RX_TYPE类型作为判断， 每个方法都需要将对象$postObj传入switch ($RX_TYPE){case "text":$result = $this->receiveText($postObj); //接收文本消息break;case "image":$result = $this->receiveImage($postObj); //接收图片消息break;case "location":$result = $this->receiveLocation($postObj); //接收位置消息break;case "voice":$result = $this->receiveVoice($postObj); //接收语音消息break;case "video":$result = $this->receiveVideo($postObj); //接收视频消息break;case "link":$result = $this->receiveLink($postObj); //接收链接消息break;default:$result = "unknown msg type: ".$RX_TYPE; //未知的消息类型break;}//将响应的消息再次写入日志， 使用T标记响应的消息！$this->logger("T \n".$result);//输出消息给微新echo $result;}else {//如果没有消息则输出空，并退出echo "";exit;}}//接收文本消息private function receiveText($object){//从接收到的消息中获取用户输入的文本内容， 作为一个查询的关键字， 使用trim()函数去两边的空格$keyword = trim($object->Content);//自动回复模式if (strstr($keyword, "文本")){$content = "这是个文本消息";}else if (strstr($keyword, "单图文")){$content = array();$content[] = array("Title"=>"小规模低性能低流量网站设计原则", "Description"=>"单图文内容", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwrVibuKUibkqMjicCmjTjNMYic8vwv3zMPNfichUwLQp35apGhiciatcv0j6xwA/0", "Url" =>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222165&idx=1&sn=68b6c2a79e1e33c5228fff3cb1761587#rd");}else if (strstr($keyword, "图文") || strstr($keyword, "多图文")){$content = array();$content[] = array("Title"=>"多图文1标题", "Description"=>"动手构建站点的时候，不要到处去问别人该用什么，什么熟悉用什么，如果用自己不擅长的技术手段来写网站，等你写完，黄花菜可能都凉了。", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwrVibuKUibkqMjicCmjTjNMYic8vwv3zMPNfichUwLQp35apGhiciatcv0j6xwA/0", "Url" =>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222165&idx=1&sn=68b6c2a79e1e33c5228fff3cb1761587#rd");$content[] = array("Title"=>"多图文2标题", "Description"=>"动手构建站点的时候，不要到处去问别人该用什么，什么熟悉用什么，如果用自己不擅长的技术手段来写网站，等你写完，黄花菜可能都凉了。", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwrVibuKUibkqMjicCmjTjNMYic8vwv3zMPNfichUwLQp35apGhiciatcv0j6xwA/0", "Url" =>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222165&idx=1&sn=68b6c2a79e1e33c5228fff3cb1761587#rd");$content[] = array("Title"=>"多图文3标题", "Description"=>"动手构建站点的时候，不要到处去问别人该用什么，什么熟悉用什么，如果用自己不擅长的技术手段来写网站，等你写完，黄花菜可能都凉了。", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwrVibuKUibkqMjicCmjTjNMYic8vwv3zMPNfichUwLQp35apGhiciatcv0j6xwA/0", "Url" =>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222165&idx=1&sn=68b6c2a79e1e33c5228fff3cb1761587#rd");}else if (strstr($keyword, "音乐")){$content = array();$content = array("Title"=>"小歌曲你听听", "Description"=>"歌手：不是高洛峰", "MusicUrl"=>"http://wx.buqiu.com/app/hlw.mp3", "HQMusicUrl"=>"http://wx.buqiu.com/app/hlw.mp3");}else{$content = date("Y-m-d H:i:s",time())."\n技术支持 高洛峰";}if(is_array($content)){if (isset($content[0]['PicUrl'])){$result = $this->transmitNews($object, $content);}else if (isset($content['MusicUrl'])){$result = $this->transmitMusic($object, $content);}}else{$result = $this->transmitText($object, $content);}return $result;}//接收图片消息private function receiveImage($object){$content = array("MediaId"=>$object->MediaId);$result = $this->transmitImage($object, $content);return $result;}//接收位置消息private function receiveLocation($object){$content = "你发送的是位置，纬度为：".$object->Location_X."；经度为：".$object->Location_Y."；缩放级别为：".$object->Scale."；位置为：".$object->Label;$result = $this->transmitText($object, $content);return $result;}//接收语音消息private function receiveVoice($object){if (isset($object->Recognition) && !empty($object->Recognition)){$content = "你刚才说的是：".$object->Recognition;$result = $this->transmitText($object, $content);}else{$content = array("MediaId"=>$object->MediaId);$result = $this->transmitVoice($object, $content);}return $result;}//接收视频消息private function receiveVideo($object){$content = array("MediaId"=>$object->MediaId, "Title"=>"this is a test", "Description"=>"pai pai");$result = $this->transmitVideo($object, $content);return $result;}//接收链接消息private function receiveLink($object){$content = "你发送的是链接，标题为：".$object->Title."；内容为：".$object->Description."；链接地址为：".$object->Url;$result = $this->transmitText($object, $content);return $result;}//回复文本消息private function transmitText($object, $content){$xmlTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[text]]></MsgType>
<Content><![CDATA[%s]]></Content>
</xml>";$result = sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time(), $content);return $result;}//回复图片消息private function transmitImage($object, $imageArray){$itemTpl = "<Image><MediaId><![CDATA[%s]]></MediaId>
</Image>";$item_str = sprintf($itemTpl, $imageArray['MediaId']);$xmlTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[image]]></MsgType>
$item_str
</xml>";$result = sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time());return $result;}//回复语音消息private function transmitVoice($object, $voiceArray){$itemTpl = "<Voice><MediaId><![CDATA[%s]]></MediaId>
</Voice>";$item_str = sprintf($itemTpl, $voiceArray['MediaId']);$xmlTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[voice]]></MsgType>
$item_str
</xml>";$result = sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time());return $result;}//回复视频消息private function transmitVideo($object, $videoArray){$itemTpl = "<Video><MediaId><![CDATA[%s]]></MediaId><Title><![CDATA[%s]]></Title><Description><![CDATA[%s]]></Description>
</Video>";$item_str = sprintf($itemTpl, $videoArray['MediaId'], $videoArray['Title'], $videoArray['Description']);$xmlTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[video]]></MsgType>
$item_str
</xml>";$result = sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time());return $result;}//回复图文消息private function transmitNews($object, $newsArray){if(!is_array($newsArray)){return;}$itemTpl = " <item><Title><![CDATA[%s]]></Title><Description><![CDATA[%s]]></Description><PicUrl><![CDATA[%s]]></PicUrl><Url><![CDATA[%s]]></Url></item>
";$item_str = "";foreach ($newsArray as $item){$item_str .= sprintf($itemTpl, $item['Title'], $item['Description'], $item['PicUrl'], $item['Url']);}$xmlTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[news]]></MsgType>
<ArticleCount>%s</ArticleCount>
<Articles>
$item_str</Articles>
</xml>";$result = sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time(), count($newsArray));return $result;}//回复音乐消息private function transmitMusic($object, $musicArray){$itemTpl = "<Music><Title><![CDATA[%s]]></Title><Description><![CDATA[%s]]></Description><MusicUrl><![CDATA[%s]]></MusicUrl><HQMusicUrl><![CDATA[%s]]></HQMusicUrl>
</Music>";$item_str = sprintf($itemTpl, $musicArray['Title'], $musicArray['Description'], $musicArray['MusicUrl'], $musicArray['HQMusicUrl']);$xmlTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[music]]></MsgType>
$item_str
</xml>";$result = sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time());return $result;}//日志记录private function logger($log_content){$max_size = 100000; //声明日志的最大尺寸$log_filename = "log.xml"; //日志名称//如果文件存在并且大于了规定的最大尺寸就删除了if(file_exists($log_filename) && (abs(filesize($log_filename)) > $max_size)){unlink($log_filename);}//写入日志，内容前加上时间， 后面加上换行， 以追加的方式写入file_put_contents($log_filename, date('H:i:s')." ".$log_content."\n", FILE_APPEND);}
}
?><?phpdefine("TOKEN", "glfwx");
$wechatObj = new Test;
if (isset($_GET['echostr'])) {$wechatObj->valid();
}else{$wechatObj->responseMsg();
}class Test
{public function valid(){$echoStr = $_GET["echostr"];if($this->checkSignature()){echo $echoStr;exit;}}private function checkSignature(){$signature = $_GET["signature"];$timestamp = $_GET["timestamp"];$nonce = $_GET["nonce"];$token = TOKEN;$tmpArr = array($token, $timestamp, $nonce);sort($tmpArr);$tmpStr = implode( $tmpArr );$tmpStr = sha1( $tmpStr );if( $tmpStr == $signature ){return true;}else{return false;}}public function responseMsg(){$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];if (!empty($postStr)){$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);$fromUsername = $postObj->FromUserName;$toUsername = $postObj->ToUserName;$keyword = trim($postObj->Content);$time = time();$textTpl = "<xml><ToUserName><![CDATA[%s]]></ToUserName><FromUserName><![CDATA[%s]]></FromUserName><CreateTime>%s</CreateTime><MsgType><![CDATA[%s]]></MsgType><Content><![CDATA[%s]]></Content><FuncFlag>0</FuncFlag></xml>";if($keyword == "帅哥" || $keyword == "hello"){$msgType = "text";$contentStr = date("Y-m-d H:i:s",time())."8高洛峰8";$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);echo $resultStr;}}else{echo "";exit;}}
}
?><?php
//声明一个常量定义一个token值, token
define("TOKEN", "glfwx");//通过Wechat类， 创建一个对象，才能使用这个类中的成员
$wechat = new Wechat;
if(!isset($_GET['echostr'])) {$wechat-> responseMsg();
}else {$wechat->valid();
}//在这个类中可以接收用户的所有消息， 可以响应用户的所有消息，token验证
class Wechat {//写一个方法去处理tokenfunction valid() {//签名$signature = $_GET["signature"];//时间戳$timestamp = $_GET["timestamp"];//随机数$nonce = $_GET["nonce"]; //token $token = TOKEN;//将接到的三个再结合token值， 做成一个数组$tmpArr = array($token, $timestamp, $nonce);//对这个数组进行字典排序sort($tmpArr, SORT_STRING);//排序过的再全成一个字符串$tmpStr = implode( $tmpArr );//通过sha1()加密$tmpStr = sha1( $tmpStr );if( $tmpStr == $signature ){return true;}else{return false;}}//专门用来响应用户消息function responseMsg() {$postStr = $GLOBALS['HTTP_RAW_POST_DATA'] ; //接收的XMLif(!empty($postStr)) {$result = ""; //返回的结果消息xml//接收到的消息写入日志 xml$this->logger("R \n".$postStr);$postObj= simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);$RX_TYPE= trim($postObj->MsgType); //text image location voice video linkswitch($RX_TYPE) {case 'text':$result = $this->receiveText($postObj);break;case 'image':break;case 'location':break;case 'voice':break;case 'link':break;case 'video':break; default:$result = "unknow msg type:".$RX_TYPE;break;}//回复给用户之间写入日志 xml$this->logger("T \n".$result);//输出消息给威信echo $result;}else {echo "";exit;}}//接收文本消息的函数function receiveText($object) {//接收用户的广西内容，放到keyword这个变量中$keyword= trim($object -> Content);//如果$keyword中有文本两个字， 就回复给用户一个字符串if(strstr($keyword, "文本")) {$content = "这是一个文本消息吧！";}else if(strstr($keyword, "单图文")) {$content = array();$content[]= array("Title"=>"这是一个标题", "Description"=>"众 人人人人人", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwraG01QMPvFIomI7RctK5fxHicwBqB4QFic8QM7zu5mo7nib3vDIW1OWkLQ/0", "Url"=>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222084&idx=1&sn=bdaf9cf134479616563ec8a8180f3809#rd");}else if(strstr($keyword, "图文") || strstr($keyword, "多图文")) {$content = array();$content[]= array("Title"=>"这是一个标题1", "Description"=>"1111", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwraG01QMPvFIomI7RctK5fxHicwBqB4QFic8QM7zu5mo7nib3vDIW1OWkLQ/0", "Url"=>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222084&idx=1&sn=bdaf9cf134479616563ec8a8180f3809#rd");$content[]= array("Title"=>"这是一个标题2", "Description"=>"222", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwraG01QMPvFIomI7RctK5fxHicwBqB4QFic8QM7zu5mo7nib3vDIW1OWkLQ/0", "Url"=>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222084&idx=1&sn=bdaf9cf134479616563ec8a8180f3809#rd");$content[]= array("Title"=>"这是一个标题3", "Description"=>"333", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwraG01QMPvFIomI7RctK5fxHicwBqB4QFic8QM7zu5mo7nib3vDIW1OWkLQ/0", "Url"=>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222084&idx=1&sn=bdaf9cf134479616563ec8a8180f3809#rd");$content[]= array("Title"=>"这是一个标题4", "Description"=>"4444", "PicUrl"=>"http://mmbiz.qpic.cn/mmbiz/2j8mJHm8CogqL5ZSDErOzeiaGyWIibNrwraG01QMPvFIomI7RctK5fxHicwBqB4QFic8QM7zu5mo7nib3vDIW1OWkLQ/0", "Url"=>"http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDEyMg==&mid=201222084&idx=1&sn=bdaf9cf134479616563ec8a8180f3809#rd");}else if(strstr($keyword, "音乐")) {$music=array("Title"=>"小小歌曲", "Description"=>"很好听，你也听听", "MusicUrl"=>"http://wx.buqiu.com/app/hlw.mp3", "HQMusicUrl"=>"http://wx.buqiu.com/app/hlw.mp3");$result=$this->transmitMusic($object, $music);}else {$content ="高洛峰 ".date("Y-m-d H:i:s")." 技术支持!";}if(is_array($content)) {$result = $this->transmitNews($object, $content);}else{$result = $this->transmitText($object, $content);}return $result;}//回复音乐消息private function transmitMusic($object, $music) {$xmltpl = " <xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[music]]></MsgType>
<Music>
<Title><![CDATA[%s]]></Title>
<Description><![CDATA[%s]]></Description>
<MusicUrl><![CDATA[%s]]></MusicUrl>
<HQMusicUrl><![CDATA[%s]]></HQMusicUrl>
</Music>
</xml>
";return sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time(),$music['Title'], $music['Description'], $music['MusicUrl'], $music['HQMusicUrl']);}//回复图文消息function transmitNews($object, $newsArray) {if(!is_array($newsArray)) {return '';}$itemTpl ="<item>
<Title><![CDATA[%s]]></Title>
<Description><![CDATA[%s]]></Description>
<PicUrl><![CDATA[%s]]></PicUrl>
<Url><![CDATA[%s]]></Url>
</item>
";$item_str = "";foreach($newsArray as $item) {$item_str .=sprintf($itemTpl, $item['Title'], $item['Description'], $item['PicUrl'], $item['Url']);}$xmlTpl=" <xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[news]]></MsgType>
<ArticleCount>%s</ArticleCount>
<Articles>$item_str
</Articles>
</xml>
";return sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time(),count($newsArray));}//向用户传文件消息的方法function transmitText($object, $content) {$xmlTpl ="
<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[text]]></MsgType>
<Content><![CDATA[%s]]></Content>
</xml>
";$result = sprintf($xmlTpl, $object->FromUserName, $object->ToUserName, time(), $content);return $result;}//写日志, 参数log_content传日志的内容private function logger($log_content) {//日志大小 10000$max_size = 10000;$log_filename = "log.xml";if(file_exists($log_filename) && (abs(filesize($log_filename)) > $max_size )) {unlink($log_filename);}//写入日志file_put_contents($log_filename, date("H:i:s")." ".$log_content."\n", FILE_APPEND);}}
BootStrap 的优点和不住
HTML5 与 CSS3 的应用
----- 微信网站页面设计使用
高洛峰虽然我们现在已经普遍使用了 HTML4 和 CSS2.1，但是我们还可以做得更好！我们可
以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美
丽外观样式代码量并让他们有更高的可扩展性。如今，HTML5 和 CSS3 的技术和应用环境
已经日趋成熟， 它们将书写 Web 前端领域的新历史，HTML5 将成为新一代的 Web 技术标
准， 必定会改变整个 Web 应用领域的游戏规则， 它在给新的 Web 应用带来无限可能性的
同时，还能带来更快、更好、更炫的用户体验。 CSS3 也将为 Web 开发带来革命性的影响，
很多以前需要 JavaScript 和 Ajax 才能实现的复杂效果（如背景、圆角、3D 动画，等等）， 现
在使用 CSS3 就能简单地实现，极大地提高了程序的开发效率。HTML5 和 CSS3 已经成为
全球各大互联网巨头必争之地， Microsoft、Google、Apple、Mozilla、Opera 等浏览器厂商
对它们的支持犹如一场竞赛，似乎已经成为衡量它们的浏览器性能优劣的一个重要标准。
1 现在是用 HTML5 的时候
近几年来，HTML5 的大潮似乎是势不可挡。在桌面应用环境中，各大浏览器纷纷地朝
着支持 HTML5、结合 HTML5 的方向迈进着；在移动平台上，HTML5 已经成为了 iOS、
Windows Phone 和 Android 移动互联网的唯一选择。放眼望去，仿佛四野皆充满着 HTML5
千秋万代一统江湖的高呼。
HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG（Web Hypertext Application
Technology Working Group）致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。
在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。HTML5 刚发布时由于各浏
览器之间的标准不统一， 开发者的时间都浪费在解决 Web 浏览器之间的兼容性上。但由于
W3C 和 WHATWG 对 HTML5 新版本的制定，以及近年来对 HTML5 的使用，再加上各大
浏览器鼎力支持，已经有非常丰富的兼容性解决方案，HTML5 在老版本的浏览器上也可以
正常运行，正是因为保障了兼容性才能让人毫不犹豫的用 HTML5 开发网站。HTML5 的目
标是将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频、音频、图像、动画，以
及同电脑的交互都被标准化。另外，HTML5 内部并没有封装什么很复杂的、不切实际的功
能，而是封装了简单实用的功能，HTML5 内部功能不是革命性的而是发展性的，并不代表
HTML4创建出来的网站必须全部要重建，只会要求各Web浏览器今后能正常运行用 HTML5
开发出来的功能。虽然 HTML5 还有一些不足，但 HTML5 应用已经是大势所趋，HTML5
已经开始提供各种各样 Web 应用上的解决方案。
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。IE 9 将支
持某些 HTML5 特性，IE10 将全面支持 HTML5。IE8 及以下 IE 版本对 HTML5 标签的支
持是有限的，我们可以通过在网页中添加脚本的方式来解决目前 IE 浏览器对 HTML5 支持
的问题。让 IE（包括 IE6）支持 HTML5 元素，我们需要在 HTML 头部添加以下 JavaScript，
Opera，FireFox 等其他非 IE 浏览器就会忽视这段代码，也不会存在 http 请求。
上面这段代码仅会在 IE 浏览器下运行，还有一点需要注意，在页面中调用 html5.js 文
件必须添加在页面的 head 元素内，因为 IE 浏览器必须在元素解析前知道这个元素，所以这
个 js 文件不能在页面底部调用。这个 html5 的 js 文件如果觉得这样会影响你的网页打开速
度，你可以把 html5 的 js 文件直接下载下来让后上传到自己的服务器单独调用。
1.1 HTML4+CSS2 与 HTML5+CSS3 区别
互联网发展越来越快，有些东西总会要被取代，HTML4+CSS2 将渐渐退出舞台，而
HTML5+CSS3 将取而代之，HTML5 规范是 2004 年新成立的 WHATWG 工作组创立的；2006
年 W3C 加入 HTML，并于 2008 年发布了 HTML5 工作草案，2009 年，XHTML2 工作组停
运；2010 年 HTML5 开始解决实际问题，渐渐的各大浏览器厂家开始升自己的产品以支持
HTML5+CSS3，HTML5 得到了持续的完善，2012 年 HTML5 完成规范编写工作。HTML5
以 HTML4 为基础， 对 HTML4 进行了大量的修改。学习 HTML5 则需要掌握 HTML5 与
HTML4 在基本语法上有什么区别；了解在 HTML5 中新增了哪些元素和属性，删除了哪些
HTML4 中的元素和属性， 为什么要删除这些元素，用什么元素或方法来取代这些被删除
的元素和属性；还需要掌握什么是全局属性；
2 HTML5 语法的改变
HTML5 的一个很大的目标就是提高浏览器之间的兼容性，需要有一个统一的标准， 因
些 HTML5 重新定义了一套在现有 HTML4 基础上修改而来的语法，使它运行在知浏览器都
能够符合这个通用标准。
2.1 HTML5 中的标记方法
HTML5 的文件扩展符号内容类型(ContentType)保持不变的， 扩展符仍然为“.html”
或“.htm”，内容类型仍然为“text/html”。
1. HTML 5 的 DTD 的声明
在编写 HTML5 文档时，要求指定文档类型，以确保浏览器能在 HTML5 的标准模
式下进行渲染。在 HTML5 中刻意不使用版本声明，一份文档将会适用于所有版本的
HTML，非常简便， HTML5 中的 DTD 声明方法如下：
<!DOCTYPE html>
在 HTML5 中不区分大小写， 引号不区分是单引号还是双引号。
2. 设置页面字符编码
在 HTML5 中可以使用对<meta>元素直接追加 charset 属性的方式来指定字符编码， 如
下所示：
<meta charset=”UTF-8”>
从 HTML5 开始， 对于文件的字符编码推荐使用 UTF-8。
2.2 HTML5 做到了与之前版本的兼容
为了保证 HTML5 能与之前的 HTML 版本达到最大的兼容， HTML5 对一些元素标记
的省略、boolean 值的属性，以及引号的省略这几方面进行了兼顾， 确保与之前版本的
HTML 达到兼容。
1. 可以省略标记的元素
元素的标记分为三种情况：不允许写结束标记的元素，可以省略结束标记的元素和
开始标记结结束标记都可省略三种类型。不允许写结束标记的元素是指不允许使用开始
标记和结束标记将元素括起来的形式，例如，换行标记正确的书写方式为“<br/>”，而
“<br>…</br>”的书写就是错误的。可以省略全部标记的元素是指该元素可以完全被
省略，当然被省略的标记还是以隐式的方式存在的，例如“<html>”元素省略不写时还
是存在的。针对这三种情况的列举清单如表 1-1 所示：
表 1-1 三种情况列举清单
不允许写结束标记的 可以省略结束标记的 可以省略全部标记的
br、hr、img、input、link、
meta、base、param、area、
col、 command、 embed、
keygen、source、track、 wbr
Li、 dt、 dd、 p、 option、thead、
tbody、 tr、 td、 th、 rt、 rp、
optgroup、 colgroup、 tfoot
Html、head、 body、 colgroup、
tbody
2. 具有 boolean 值的属性
在html中有一些元素的属性，当只写属性名称而不指定属性值时，表求属性值为true, 如
果设置该属性值为 false，则不使用该属性即可。另外，要想将属性值设定 true 时，也可以
将属性名设定为属性值， 或将空字符串设定为属性值。例如 input 元素中的 disabled 与
readonly 就是这样的属性。
3. 引号使用
在 html 中使用属性时， 属性值可以使用双引号，也可以使用单引号括起来，在 HTML5
中做了一些改进，当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，
属性两边的引号是可以省略的。
2.3 HTML5 语法改变的简单示例
在这个示例中，将前面介绍的几个 HTML5 应用方法集成到本例中， 另外，没有特别
说明使用什么浏览器，本章默认使用的都是 Firefox 4 浏览器。代码演示结果如图 3-1 所示：
3 HTML5 新增的元素和废除的元素
HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类
似 <div> 和 <span> 标签，但有一定含义，例如 <nav>（网站导航块）和 <footer>。这种
标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供
了新的功能，通过一个标准接口，如 <audio> 和 <video> 标记。还有一些过时的 HTML 4
标记将取消，其中包括纯粹用作显示效果的标记，如 <font> 和 <center>，因为它们已经被
CSS 取代，还有一些是透过 DOM 的网络行为。
3.1 新增的结构元素
曾经，网页编写经常会跟频繁使用基于 table 的没有任何语义的布局。不过最终还是慢
慢的接受了相对更语义化的<div>布局替代了 table 布局，并且开始调用外部样式表。但不幸
的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“<div>-soup” 综合
症。我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减
带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5 和 CSS3 正跃跃
欲试的等待大家。下图是 HTML4 的 DIV 和 HTML5 新增标记布局的对比，如图 1-1 所示：
图 1-1 DIV+CSS 布局 VS HTML5 结构元素布局
尽管这有些勉强，但上面这个实例还是可以说明使用 HTML4 对一个复杂的设计进行代
码化后依然过于臃肿。不过值得激动的是，HTML5 解决“<div>-soup” 综合症并带给我们一
套新的结构化元素。这些新的 HTML5 元素富有更细致的语义从而代替了那些毫无语义的
<div>标签，并同时为 CSS 的调用提供了”自然”的 CSS 钩子。这种语义化的特性不仅提升了
我们网页的质量和语义，并且大量减少了曾经代码中用于 CSS 必须调用的 class 和 id 属性。
事实上，后面课程中介绍的 CSS3 也是可以忽略掉所有 class 和 id 的。 结合了富有新的语
义化标记的 HTML5，CSS3 为 web 设计师们的网页提供了神一般的力量。新增的结构元素
及说明如下表 1-2 所示：
表 1-2 新增的结构元素及说明
元素名 说明
section
表求页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与 h1、h2、
h3、h4、h5、h6 等元素结合起来使用，标示文档结构。
article 表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。
aside 表示 article 元素内容之外的，与 article 元素内容相关的辅助信息。
header 表示页面中一个内容区块或整个页面的标题。
hgroup 用于整个页面或页面中一个内容区块的标题进行组合。
footer
表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名，创建日期及
创作者联系信息。
nav 表示页面中导航链接的部分
figure
表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用 figcaption 元素为
figure 元素组添加标题。
3.2 HTML5 表单增加的新特性
在创建 Web 应用程序时，会用到大量的表单元素，在 HTML5 中关于表单给我们增加
了很多诱人的属性，强化了表单元素的功能，使得关于表单的编写更快、更方便。先了解一
下 form 的新属性，如表 1-3 所示：
表 1-3 HTML5 中 form 表单的新增属性
属性名 说明及示例 支持浏览器
from
在 HTML4 中， 表单内的从属元素必须书写在表单内部，但是在 HTML5 中，可
以书写在页面上任何位置，只要给该元素指定一个 form 属性，属性值为该表单的
id 就可以了，这样做的好处是给页面中的元素添加样式时更方便。
Opera 10
formaction
在 HTML4 中，一个表单内的所有元素都只能通过表单的 action 属性统一提交到另
一个页面， 而在 HTML5 中可以给所有的提交按钮都增加不同的 formaction 属性，
使得点击不同的按钮，将表单提交到不同的页面。 没有浏览器
支持
formmethod
在 HTML5 中可以使用 formaction 属性来对每个表单元素分别指定不同的提交页
面，同时也可以使用 formmethod 属性来对每个表单元素分别指定不同的提交方法。
没有浏览器
支持
placeholder
当文本框“text”或“textarea”处于未输入状态时文本框中显示的输入提示，只要
在表单中加上 placeholder 属性，再指定提示文字就可以实现.
Safaru 4
Chrome 3
Firefox 4
autofocus
当页面一打开，文本框、选择框或按钮可以自动获得光标焦点。不过一个页面只
能有一个控件使用该属性。例如登录页面一打开焦点在用户名上。
Safaru 4
Chrome 3
Firefox 4
list
该属性需要和 datalist 元素(HTML5 新增)一起使用， list 属性的值就是 datalist 的
id。使用 datalist 元素设置一个选择列表（类似 select）， 当用户输入的值在列中可
以出现选择提示，当用户相要设定的值不在选择列表之内时，允许其自行输入。
Opera 10
autocomplete
辅助输入所有的自动完成功能，是一个节省输入时间，同时也十分方便的功能，
在 HTML5 之前，因为谁都可以看见输入的值，所以存在安全隐患。 对于
autocomplete 属性， 可以指定“on”、“off”和“”(不指定)三种值， 不指定时，
使用浏览器的默认值。把该属性设为 on 时，可以显式指定候补输入的数据列表。
使用 detalist 元素与 list 属性提供候补输入的数据列表，自动完成时， 可以将该
datalist 元素中的数据作为候补输入的数据在输入框中自动显示.
Opera 10
在 HTML5 中，除了 form 表单元素增加了一些好用的属性外，大幅度增加与改良 iput
元素的种类，可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的
许多功能。如表 1-4 所示：
表 1-4 HTML5 中增加与改良的 input 元素
种类 说明及示例 支持浏览器
search
search 类型的 input 元素是一种专门用来输入搜索关键词的文本框。 Search 类型
与 text 类型仅仅在外观上有区别，在 Safari 4 浏览器中， 它的外观为操作系统默
认的圆角矩形文本框， 但这个外观可以用 CSS 样式进行改写。在其他浏览中，
它的外观暂与 text 类型的文本框外观相同，但可以用 css 样式进行改写。
所有最新版
本浏览器
tel
被设计为用来输入电话号码的专用文本框，它没有特殊的校验规则，不强制输入
数字，因为许多电话号码通常都带有其它文字，但开发者可以通过 pattern 属性来
指定对于输入的电话号码格式的验证。
所有最新版
本浏览器
url
是一种专门用来输入 url 地址的文本框， 提交时如果该文本框中内容不是 url 地
址格式的文字， 则不允许提交。
Opera 10
email
是一种专门用来输入 email 地址的文本框, 提交时如果该文本框中内容不是 email
地址格式的文字则不允许提交，但是它并不检查该 email 地址是否存在，提交时
该文本框可以为空，除非加了 required 属性。Email 类型的文本框还具有一个
multiple 属性，它允许在该文本框中输入一个串以逗号分隔的 email 地址。当然并
不强制要求用户输入该 email 地址列表。
Opera 10
Datetime,
date, month,
week, time,
datetime-local
datetime 类型的 input 元素是一种专门用来输入 UTC 日期和时间的文本框， 并且
在提交时对输入的日期格式进行有效检查。
date类型的 input元素是深受开发者喜爱的一种元素，以日历的形式方便用户输入。
month 类型的 input 元素是一种专门用来输入月份的文本框，并且在提交时对输入
Opera 10
的月份格式进行有效检查。
week 类型的 input 元素是一种专门用来输入周号的文本框，并且在提交时对输入
的周号格式进行有效检查。它可能是一个简单的输入文本框，允许用户输入一个
数字，也可能更复杂更精确。它的格式类型似于“2014-W10”，代表 2014 年第 10
周。
time 类型的 input 元素是一种专门用来输入时间的文本框，并且在提交时对输入的
时间格式进行有效检查。它的外观取决于浏览器，可能是简单的文本框， 只是提
交时检查是否在其中输入了有效的时间，也可能以时钟形式出现， 还可以携带时
区。
datetime-local 类型的 input 元素是一种专门用来输入本地日期和时间的文本框，并
且在提交时对输入的日期和时间格式进行有效检查。
number
number 类型的 input 元素是一种专门用来输入数字的文本框，并且在提交时检查
输入的内容是否为数字。它具有 min、max 与 step 属性。 Opera 10
range
是一种只允许输入一段范围内数值的文本框，它具有 min、max 与 step 属性，默
认范围是 0 与 100。 Opera 10
color
用来选择颜色，它提供了一个颜色选择器。 BlackBerry
(黑莓)
file
文件选择文本框， 与 HTML4 最大的不同是，可以通过指定 multiple 属性，一次
选择多个文件， value 属性的值为用逗号分隔的一个或多个文件名。 同时，通过
把 M IME 类型指定给 accept 属性，可以限制选择文件的种类。
所有最新版
本浏览器
到目前为止，对于这些 input 的新增种类来说， 支持最多、最全面的是 Opera 10 浏览
器。 对于不支持新增 input 元素的浏览器来说， 统一将这些 input 元素视为 text 类型，另
外，HTML5 中也没有规定这些元素在各浏览中的外观形式， 所以同样的 input 元素在不同
的浏览器中可能会有不同的外观。
在 HTML5 追加了新的 output 元素， 也增加了大量在提交时对表单与表单内新增元素
进行内容有效性验证的功能。其中 output 元素定义不同类型的输出，比如计算结果或脚本
的输出。output 元素必须从属于某个表单， 写在表单的内部，或者对它添加 form 属性，目
前，只被 Opera 10 浏览器支持。output 结合 range 元素使用代码如下：
在 HTML5 中， 通过对表单元素使用一些新增属性，能实现在表单提交时执行自动验
证的功能。新增的 required 属性可以应用在大多数输入元素上，在提交表单时， 如果元素
中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必
须输入内容。如果要求输入内容必须符合一定的格式，可以对 input 元素使用 pattern 属性，
并且将属性值设为某个格式的正则表达式，在提交表单时会检查其内容是否符合给定格式，
不符合就不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格
式。
例如，在开发阶段我们可能想把表单临时提交一下， 又不想让它进行表单中所有元素
内容的有效性检查，有两种方法可以取消表单验证。一种是在 form 元素中使用 novalidate
属性， 让整个表单验证全都失效， 另一种是利用 input 元素中使用 formnovalidate 属性，
让指定的单个 input 元素验证失效。
3.3 新增多媒体播放元素
在 HTML5 之前，要在网站上展示视频、音频、动画等多媒体信息，除了使用第三方自
主开发的播放器之外， 使用的最多的工具应该算是 FLASH 了, 但是它们都需要在浏览器中
安装各种插件才能使用，有时速度很慢。HTML5 的出现使这一局面得到了改观。在 HTML5
中，提供了音频的标准接口，多媒体播放再也不需要安装插件了， 只需要一个支持 HTML5
的浏览器就可以了。本节介绍 video 元素和 audio 两个 HTML5 新增加的元素, 它们分别用来
处理视频与音频数据。目前Safari 3以上、Firefox 4以上、Opera 10以上，以及时Google chrome
3.0 以上的浏览器都实了对这两个媒体元素的支持。以 audio 元素为例，只要把播放视频的
url 地址指定给该元素的 src 属性就可以了。代码如下所示：
视频 video 元素的使用方法和 audio 相似，只要设定好元素的长、宽等属性。
各浏览器对于各种媒体的类型及编码格式的支持情况都各不相同，你可以通过 source
元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自
己支持的播放格式进行播放， 浏览器的选择顺序为代码中的书写顺序，它会从上往下判断
自己对该播放格式是否支持， 选到为止。各浏览器对于编码格式的支持情况，如表 1-5 所
求。
表 1-5 各浏览器对于编码格式的支持情况
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 S afari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
两个媒体元素 audio 和 video 通过一些常用属性的使用，可以定义和扩展一些功能，它
们所具有的属性大致相同，两个元素常用的属性如下表 1-6 所示：
表 1-6 audio 和 video 常见属性说明
属性名 值 说明
src url 在该属性中指定媒体数据的 URL 地址。
autoplay autoplay 在该属性中指定媒体是否在页面加载后自动播放。
preload
none
metadata
auto(默认)
在该属性中指定视频或音频数据是否预加载。 如果使用预加载，浏览器会预先将数
据进行缓冲，这样可以加快播放的速度。有三个可选择值：
none 表示不进行预加载
metadata 表示只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续时间等）
auto 表示预加载全部视频或音频
poster 图片 url video 元素独有属性，当视频不可用时，向用户展示一幅替代的图片。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
controls controls
指定是否为视频或音频添加浏览器自带的播放用的控制条，控制条中具有播放、暂停
等按钮。
width/height pixels video 元素独有属性，设置视频的宽度与高度，以像素为单位。
除了上表中的提供的属性外， 还有一些属性、一些方法和多个事件可用，但需要结合
JavaScript 来实现一些特定的效果。例如，通过 error 属性可以处理出现的错误等，使用
networkState 属性读取当前网络状态。使用 play 方法来播放媒体，使用 load 方法重新载入媒
体进行播放等，通过 timeupdate 事件来通知当前播放位置的改变，再结合 JavaScript 来显示
当前的播放进度等。
3.4 新增的其他元素
在 HTML5 中新增加了很多元素，除了结构元素、表单元素和媒体元素外，还新增加了
以下一些比较常用的元素。如表 1-7 所示，列出部分 HTML5 新增元素：
表 1-7 HTML5 中增加的其它元素
新元素 说明及示例
mark
表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。它通常使
用于引用原文的时候，目的是吸引当前用户的注意。例如，对网页全文检索某个关键词时显
示的检索结果。
wbr
该元素表示软换行，br 元素表示此处必须换行，而 wbr 元素的意思是浏览器窗口或父级元素
的宽度足够宽时（没有必要换行时），不进行换行，而当宽度不够时，主动在此处进行换行，
但是对于中文没有多大用。
progress
定义任何类型的任务的进度。可以使用<progress>标签来显示 javascript 中耗费时间的函数的进
度
meter 定义预定义范围内的度量。仅用于已知最大和最小值的度量
canvas
定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法 Canvas 元素本身没有绘图能力，
所有的绘制工作必须在 javascript 内部完成渐变
command
表示命令按钮，例如单选按钮、复选框或按钮。
datails 表示用户要求得到并且可以得到的细节信息，即定义元素的细节。
keygen
标签提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提
交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥
（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
ruby 标签定义 ruby 注释（中文注音或字符）在东亚使用
3.5 废除的元素
HTML 在进步，有一些落后的元素就要被淘汰掉，在 HTML5 中废除了一些元素, 像有
一些功能标签纯粹是为页面展示服务的， 完全可以用 CSS 来替代统一进行编辑，所以
basefont、big、center、font、s、strike、tt、u 这些元素在 HTML5 中废除了。在 HTML5 中
不再使用 frame 框架了， 由于 frame 框架对网页可用性存在负面影响， 所以像 frameset、
frame 和 noframes 元素在 HTML5 中已不支持了, 只支持 iframe 框架。另外，有一些元素只
有部分浏览器支持，也在 HTML5 中被废除，像 bgsound 和 marquee 元素只有 IE 支持，applet
元素可以使用 embed 或 object 元素替代，所以也被废除。 还有废除 rb 元素使用 ruby 元素
替代，废除 acronym 元素由 abbr 替代，以及我们不常使用的 dir、isindex、listing、xmp、nextid、
plaintext 都有替代的元素，所以都在 HTML5 中废除了。
4 HTML5 新增的属性和废除的属性
在 HTML5 中，在增加和废除了很多元素的同时， 也增加和废除了很多属性。像我们
前面介绍过的与表单相关的属性就有很多，例如，autofocus、placeholder、form、required、
autocomplete、min、max、step、multiple、pattern、formaction、formmethod、novalidate 属
性等与特定的表单元素结合使用。在 HTML5 也为链接元素增加了几个比较有用的属性，包
括为 a 与 area 元素增加了 media 属性，规定目标 URL 是为什么类型的媒介或设备进行优化
的，需要在 href 属性存在时使用。也为 area 元素增加了 hreflang 属性， 以保持与 a 和 link
元素的一致。为 link 元素增加了 sizes 属性， 在和 icon 元素结合使用时，该属性指定关联
图标(icon 元素)的大小。另外，也为 base 元素增加了 target 属性， 主要目的是保持与 a 元
素的一致性。其它为一些特定元素增加的常用属性如下所示：
为 ol 元素增加了 reversed 属性，指定列表倒序显示。
为 menu 元素增加了两个新的属性, 一个是 label 属性为菜单定义一个可见的标注，
另一个 type 属性让菜单可以以上下文菜单、工具条与列表菜单三种形式出现。
为 style 元素增加了 scoped 属性，用来规定样式的作用范围， 可以只对页面上某
个树起作用。
为 script 元素增加 async 属性， 可以让脚本异步执行。
为 iframe 元素增加三个属性 sandbox、seamless 和 srcdoc，用来提高页面安全性，
防止不信任的 web 页面执行某些操作。
还有，在 HTML5 中，新增了一些“全局属性”， 即可以对任何元素都使用的属性，几
种常用的全局属性如下所示：
contentEditable：是否允许用户编辑元素中的内容。contentEditable 有两个值（true
和 false）。
designMode：用来指定整个页面是否可编辑，有两个值(on 和 off)。该属性只可以
通过 JavaScript 来修改值。如果 design 设置为 on 的话，所以允许设置 contentEditable
的元素都可以编辑。
hidden：在 HTML5 中所有的元素都可以使用 hidden 属性，表示元素的不可见状态，
有两个值(true 和 false)。
spellcheck：针对 input 元素（text,textarea）用户输入的内容进行拼写和语法检查，
有两个值(true 和 false)，必须先声明属性值是 true 或者 false。
在 HTML5 中还废除了一些 HTML4 中用的元素属性，而是采用其它属性或 CSS 来替代。
就像在 HTML4 中好多元素的属性是设置页面显示效果的，而我们都是通过 CSS 来统一实
现，所以在 HTML5 将不再被使用这样的属性。如下表 1-8 所示：
表 1-8 在 HTML 中被废除的属性
在 HTML 4 中使用的属性 使用该属性的元素 在 HTML 5 中的替代方案
rev link、a rel
charset link、a 在被链接的资源的中使用 HTTP Content-type 头元
素
shape、coords a 使用 area 元素代替 a 元素
longdesc img、iframe 使用 a 元素链接到校长描述
target link 多余属性，被省略
nohref area 多余属性，被省略
profile head 多余属性，被省略
version html 多余属性，被省略
name img id
scheme meta 只为某个表单域使用 scheme
archive、chlassid、codebose、
codetype、declare、standby
object 使用 data 与 typc 属性类调用插件。需要使用这些
属性来设置参数时，使用 param 属性
valuetype、type param 使用 name 与 value 属性，不声明之的 MIME 类型
axis、abbr td、th 使用以明确简洁的文字开头、后跟详述文字的形
式。可以对更详细内容使用 title 属性，来使单元
格的内容变得简短
scope td 在被链接的资源的中使用 HTTP Content-type 头元
素
align caption、input、legend、
div、h1、h2、h3、h4、
h5、h6、p
使用 CSS 样式表替代
alink 、link 、 text 、vlink 、
background、bgcolor
body 使用 CSS 样式表替代
align 、 bgcolor 、 border 、
cellpadding 、 cellspacing 、
frame、rules、width
table 使用 CSS 样式表替代
align、char、charoff、height、
nowrap、valign
tbody、thead、tfoot 使用 CSS 样式表替代
align、bgcolor、char、charoff、
height、nowrap、valign、width
td、th 使用 CSS 样式表替代
align、bgcolor、char、charoff、
valign
tr 使用 CSS 样式表替代
align、char、charoff、valign、
width
col、colgroup 使用 CSS 样式表替代
align、border、hspace、vspace object 使用 CSS 样式表替代
clear br 使用 CSS 样式表替代
compace、type ol、ul、li 使用 CSS 样式表替代
compace dl 使用 CSS 样式表替代
compace menu 使用 CSS 样式表替代
width pre 使用 CSS 样式表替代
align、hspace、vspace img 使用 CSS 样式表替代
align、noshade、size、width hr 使用 CSS 样式表替代
align、frameborder、scrolling、
marginheight、marginwidth
iframe 使用 CSS 样式表替代
autosubmit menu
5 HTML5 的高级功能介绍
作为一名 Web 开发者能掌握前面介绍过的 HTML5 技术，就几乎可以满足我们的需求，
当然，HTML5 的内容远不指这些，如果你从事一些 HTML5 游戏开发， 或基于移动设备
的 APP 应用开发，你还需要了解更多 HTML5 的内容。 像绘制图形、本地存储、离线应
用程序、通信 API、处理线程、获取地理位置信息等。HTML5 的这些功能的介绍如下：
1. 绘制图形
如果人见过基于 HTML5 的游戏，多数都是通过 HTML5 新增元素 canvas 元素实现的，
这个元素有一套编程接口(Canvas API)， 专门用来绘制图形， 可以实现非常漂亮的图形与
图像， 创建出更多丰富多彩、赏心悦目的下一代 Web 页面。在 canvas 元素里进行绘画，并
不是指拿鼠标来作画，canvas 元素只是一个无色通明区域，是 JavaScript 语言的画布，需要
利用 JavaScript 编写脚本进行绘画。
2. 本地存储与离线应用
在 HTML5 中除了 canvas 元素之外， 另一个新增的非常重要的功能是可以在客户端本
地保存数据。 在 HTML5 中与本地存储相关的有两个重要内容，分别是 Web Storange 与本
地数据库。基中 Web Storange 存储机制是对 HTML4 中 cookies 存储机制的一个改善。本地
数据库是 HTML5 新增的功能，可能使用它在客户端本地建立一个数据库，实现原本必须保
存在服务器端数据库中的内容，可以直接保存在客户端本地了， 这就大大减轻了服务器端
的负担， 提高了访问数据库的速度。现在 Web 应用程序已经变得越来越复杂， 如果没有
和 Internet 建立连接， 就不能使用这个 Web 应用程序，在 HTML5 中新增加的 API，利用
本地缓存机制很好地解决了这个问题，让 Web 应用程序在离线状态时也可能正常工作。就
是把所有构成 Web 应用程序的资源文件， 像 HTML 文件、CSS 文件和 JavaScript 脚本等放
在本地缓存中，当服务器没有和 Internet 建立连接时， 也可以利用本地缓存中的资源文件
来正常运行 Web 应用程序。
3. 通信 API
在 HTML5 中提供了网页文档之间互相接收与发送信息的功能， 使用这个功能， 只要
获取到网页所在窗口对象的实例， 不仅同源的 Web 网页之间可以互相通信， 甚至可以实
现跨域通信。HTML5 新增两个和通信相关的功能，跨文档消息传输功能与使用 Web Sockets
API 来通过 socket 端口传递数据的功能。使用跨文档消息传输功能， 可以在不同网页文档、
不同端口、不同域之间进行消息的传递。使用 Web Sockets API 可以让客户端与服务器通过
Socket 端口来传递数据，这样做就可以实现数据推送技术，服务器不再是被动地等待客户端
发出的请求，只要客户端与服务器建立了一次连接之后， 服务器端就可以在需要的时候，
主动地将数据推送到客户端， 直到客户端显示关闭这个连接。
4. 处理线程
在使用 HTML4 与 JavaScript 编写的 Web 程序中， 因为所有的处理都是在单线程内执
行的，如果花费时间比较长的话， 程序界面会处于长时间没有响应的状态，而当时间长到
一定程度，浏览器还会跳出一个脚本运行时间过长的提示框， 用户就不得不中断正在执行
的处理。为了解决这个问题， HTML5 新增了一个 Web Workers API, 用户可以很容易地创
建在后台运行的线程（在 HTML5 中被称为 worker）, 创建一个不会影响前台处理的后台程
序， 并且在这个后台线程中还能创建多个子线程，你可以将耗时较长的处理交给后台线程
去运行， 对用户在前台页面中执行的操作就完全没有影响了。
5. 获取地理位置信息
HTML5 中提供了地理位置信息的 API，通过浏览器来获取用户当前位置。如果浏览器
支持， 且设备具有定位功能，就能够直接使用这组 API 业获取当前位置信息。在获取地理
位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。
基于此特性可以开发基于位置的服务应用。
6 CSS3 概述
CSS3 对于我们 Web 开发者来说不只是新奇的技术，更重要的是这些全新概念
的 Web 应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我
们将不必再依赖图片或者 JavaScript 去完成圆角、多背景、用户自定义字体、
3D 动画、渐变、盒阴影、文字阴影、透明度等提高 Web 设计质量的特色应用。
6.1 CSS3 在选择器上面的支持
CSS3 在选择器上的丰富支持让我们可以灵活的控制样式，通过选择器的使
用，你不再需要在编辑样式时使用多余的以及没有任何语义的 class 属性， 而
可以直接将样式与元素绑定起来，利用属性选择器我们可以根据属性值的开头或
结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个
结点的元素，利用伪类选择器可以选择某一类元素，从而节省在网站或 Web 应用
程序完成之后又要修改样式所需花费的大量时间。
6.2 CSS3 在样式上的支持
只要提起 CSS3 的特性是什么？ 回答最多的就是“圆角”，不错，圆角这个
功能可以让前端布局省去很多时间和精力去切图拼凑一个圆角。CSS3 还支持阴
影（盒阴影和文本阴影），以及渐变，之前你可能是通过 IE 的滤镜看到过，其
实 CSS3 实现起来更加方便。还可以自定义字体，传统的方式是使用特殊文字的
图片实现，而通过 CSS3 用@font-face 就可以了。CSS3 对于连续文本换行也新增
了一个属性 word-wrap,你可以设置其为 normal(不换行)或 break-word(换行)，
这解决了连续英文字符出现页面错位的问题，也不需要后端去截取这个连续字
符。使用 CSS3 你还可以给边框加背景，这在 iphone 上也有应用的例子。CSS3
在背景上支持背景调整大小，如当你用一张大图要做一个小的元素背景时可以通
过 background-size 来调整背景图的大小来适应这个元素。CSS3 支持 opacity,
rgba 和 hsl/a, opacity 和 rgba 的区别是 opacity 设置的透明对其内容也会产
生影响，而 rgba 只对你应用的元素产生影响。CSS3 在布局上对于盒模型提供了
支持，可以设置 box-sizing 为 content-box 或 border-box，应用为 content-box
就是正常的模式，而应用为 border-box 和 IE5.5 的盒模型很相似，即元素的宽
度包括 border 和 padding，这个在布局上可能会比较方便，不用去管到底这个
元素会占用多大的宽度，而用 content-box 还需要手动计算一下这个元素实际占
用的宽度。
6.3 CSS3 对于动画的支持
CSS3 支持的动画类型有：transform(变换)、transition(过渡)和
animation(动画)。你可以对特定的属性设置 transition，transiton 和
animation 的区别不大，animation 的动画是自己定义的，面向的更多的是脚本
开发者，往往更加复杂。为了使用大部分 CSS3 特性，我们不得不与原来的属性
一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分 CSS3 属
性。最常见的私有属性是用于 Webkit 核心浏览器的(比如, Safari)， 它们以
-webkit-开始，以及 Gecko 核心的浏览器(比如, Firefox)，以-moz-开始，还有
Konqueror (-khtml-)、Opera (-o-) 以及 Internet Explorer (-ms-)都有它们
自己的属性扩展（目前只有 IE8 支持-ms-前缀）
6.4 在开发中该如何去用 CSS3
首先是遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对
Firefox 和 Safari 等这些支持圆角的浏览器中应用 CSS 圆角，而那些不支持 CSS
圆角的浏览器则显示为直角。其次就是对于不支持 CSS3 的浏览器可以使用
Javascript 来实现。在向用户或企业推广新技术的同时也要关注他们的目标与
可行性，不能为了技术而技术。
7 CSS3 中的样式选择器
要使用 CSS 对 HTML 页面中的元素实现一对一，一对多或者多对一的控
制，这就需要用到 CSS 选择器。选择器是 CSS3 中一个重要的内容，使用它
可以大幅度提高开发人员书写或修改样式表的工作效率。在大型网站中，
样式表中的代码可能会达到几千行，而当我们需要对样式进行修改时，在
大篇 CSS 代码中，并没有说明什么样式服务于什么元素，只是在元素中使
用了 class 属性。而 class 属性本身没有语义，它纯粹是用来为 CSS 服务
的，属于多余属性，并没把样式和元素绑定起来，一个 CSS 类选择器，文
本框可以使用，下拉框也可以使用，甚至按钮也可以使用，这样其实非常
混乱， 修改时就不方便，所以 CSS3 中提倡使用选择器来将样式与元素直
接绑定起来，这样的话，在样式中什么样式与什么元素相匹配变得一目了
然，修改起来也很方便。不仅如此，通过选择器我们还可以实现各种复杂
的指定， 同时也能大量减少样式表的代码书写量，最终书写出来的样式表
也会变得简洁明了。那么从现在开始我们先丢开他们版本的区别，从头一起来看看 CSS
选择器的运用。
7.1 基本选择器
CSS 是一种用于屏幕上渲染 HTML 一种语言，CSS 主要是在相应的元素中应用样式，来渲
染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时
就需要我们所说的选择器。选择器主要是用来确定 HTML 的树形结构中的 DOM 元素节点。
可以把 CSS 选择器分开成几个部分，有常用的部分，通常叫做基本选择器；属性选择器；
伪类选择器。基本选择器如表 1-9 所示：
表 1-9 CSS3 基本选择器及实例
选择器 说明
* 通用元素选择器，匹配任何元素
E 标签选择器，匹配所有使用 E 标签(所有 HTML 元素)的元素
.info class 选择器，匹配所有 class 属性中包含 info 的元素
#footer id 选择器，匹配所有 id 属性等于 footer 的元素
7.2 多元素的组合选择器
多个选择器可以组合在一起使用， 有多种形式，包括多元素选择器、后代元素选择器、
子元素选择器，及毗邻选择器四种类型。如表 1-10 所示：
表 1-10 CSS3 多元素的组合选择器及实例
选择器 说明
E,F 多元素选择器，同时匹配所有 E 元素或 F 元素，E 和 F 之间用逗号分隔
E F 后代元素选择器，匹配所有属于 E 元素后代的 F 元素，E 和 F 之间用空格分隔
E > F 子元素选择器，匹配所有 E 元素的子元素 F（第一层后代）
E + F 毗邻元素选择器，匹配所有紧随 E 元素之后的同级元素 F
E ~ F 同级元素通用选择器，匹配任何在 E 元素之后的同级 F 元素
7.3 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择有某个属性的元
素，而不论属性值是什么，可以使用简单属性选择器。CSS2.1 就引入了一些属性选择器，
如表 1-11 所示：
表 1-11 CSS2.1 属性选择器及实例
选择器 说明
E[att]
匹配所有具有 att 属性的 E 元素，不考虑它的值。（注意：E 在此处可以省略，比如“[cheacked]”，
以下同。）
E[att=val] 匹配所有 att 属性等于“val”的 E 元素
E[att~=val] 匹配所有 att 属性具有多个空格分隔的值、其中一个值等于“val”的 E 元素
E[att|=val]
匹配所有 att 属性具有多个连字号分隔（h yphen-separated）的值、其中一个值以“val”开头的
E 元素，主要用于 lang 属性，比如“en”、“en-us”、“en-gb”等等
在 CSS3 中又添加了一些属性选择器， 使用 CSS3 属性选择器，你可以只指定元素的
某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。CSS3 的属性选择器，
如表 1-12 所示：
表 1-12 CSS3 属性选择器及实例
选择器 说明
E[att^=”val”] 属性 att 的值以"val"开头的元素
E[att$=”val”] 属性 att 的值以"val"结尾的元素
E[att*=”val”] 属性 att 的值包含"val"字符串的元素
7.4 结构性伪类选择器
在学习结构性伪类选择器之前，先了解两个概念(CSS 中的伪类选择器和伪元素)。伪类
选择器是 CSS 中已经定义好的选择器，不能随便取名 常用的伪类选择器是使用在 a 元素
上的几种，如 a:link|a:visited|a:hover|a:active。而伪元素选择器并不是针对真正的元素使用
的选择器，而是针对 CSS 中已经定义好的伪元素使用的选择器，CSS 中有如下四种伪元素
选择器（first-line、first-letter、before、after），例如p:first-line{ color:#ff0000;}，li:after{ content:
url(dot.png)} 。而在 CSS3 中引入的结构性伪类选择器的共同特征是允许开发者根据文档
树中的结构来指定元素的样式，以下进行分类介绍，如表 1-13 到 3-20 所示：
表 1-13 四个最基本的结构性伪类选择器 root、not、empty 和 target
选择器 说明
E:root
将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在 HTML
页面中就是指包含着整个页面的<html>部分
E:not 想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用 not 样式
E:empty 指定当元素内容为空白时使用的样式
E:target
对页面中某个 target 元素指定样式，该样式只在用户点击了页面中的链接，并且跳转到 target
元素后生效
表 1-14 选择器 first-child、last-child、nth-child、nth-last-child
选择器 说明
E:first-child 对一个父元素中的第一个子元素指定样式
E:last-child 对一个父元素中的最后一个子元素指定样式
E:nth-child
对指定序号的子元素设置样式(正数)
:nth-child(odd): 所有正数下来第偶数个子元素
:nth-child(even):所有正数下来第奇数个子元素
E:nth-last-child
对指定序号的子元素设置样式(倒数)
:nth-last-child(odd): 所有倒数上去第偶数个子元素
:nth-last-child(even):所有倒数上去第奇数个子元素
表 1-15 选择器 nth-of-type、nth-last-of-type
选择器 说明
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
表 1-16 循环使用样式
选择器 说明
E:nth-child(an+b) a 表示每次循环中共包括几张样式； b 表示指定的样式在循环中所在的位置；
表 1-17 选择器 only-child、only-of-type
选择器 说明
E:only-child
匹配父元素下仅有的一个子元素
等同于: first-child:last-child 或 :nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同种标签的唯一一个子元素
等同于: first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1)
表 1-18 CSS 3 中与用户界面有关的伪类
选择器 说明
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的 radio（单选框）或 checkbox（复选框）元素
E::selection 匹配用户当前选中的元素
8 CSS3 的样式属性
通过 CSS 选择器找到元素， 就要使用 CSS 属性给找到元素设置样式。尽管现代浏览
器已经支持了众多的 CSS3 属性，但作为初学者最应该关注的就是一些“主流”的属性，如
border-radius、box-shadow 或者 transform 等。它们有良好的文档、很好的测试并且最常用到，
所以如果你在设计网站，你很难能脱离它们。学习 CSS3 的属性就要先从主流的属性开始，
其它的属性则可通过 CSS3 手册获得帮助。
8.1 使用 CSS3 属性前的准备
虽然大多数的 CSS3 属性在很多流行的浏览器中不支持，但是还是鼓励在前端开发中要
学会并且运行这些 CSS3 属性，因为这是未来的趋势。 关键是首先确定你是否对各个浏览
器之间的细微的差别有所了解，你能肯定的说 IE 显示的 90 度的角就不圆滑嘛？这取决于你
的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在使用 CSS3 的一些高级
特性时，需指定所有浏览器的前缀，CSS3 的前缀是一个浏览器生产商经常使用的一种方式，
它暗示该 CSS 属性或规则尚未成为 W3C 标准的一部分。CSS3 前缀的浏览器属性规则如表
3-10 所示：
表 1-19 CSS 3 前缀的浏览器规则
CSS 3 前缀 代表浏览器
-webkit- 代表 Chrome、Safari
-moz- 代表 Firefox
-ms- 代表 IE
-o- 代表 Opera
既然 CSS3 代码中（暂时）需要写上这么多前缀，就需要注意顺序问题，要先写私有的
CSS3 属性，再写标准的 CSS3 属性。如果以后当一个属性成为标准，并且被 Firefox、Chrome
等浏览器的最新版普遍兼容的时候，就可以去除这些前缀了。
8.2 边框属性
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。圆角实现
是一大堆 CSS3 属性中最受欢迎的一种，通过 border-radius 属性来实现， 是 CSS3 中级别最
高的一个属性。radius 就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可
以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。使用格式
如下：
可以通过 box-shadow 属性向边框添加一个或多个阴影，也是开发时常用的效果。使用
示例如下所示：
box-shadow 属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值
以及可选的 inset 关键词来规定，省略长度的值是 0。该属性可用值如下所示：
none： 无阴影
<length>①： 第 1 个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第 2 个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第 3 个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④： 如果提供了第 4 个长度值则用来设置对象的阴影外延值。可以为负值
<color>： 设置对象的阴影的颜色。
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
此属性还可以设置多组值，中间用","隔开。另外，通过 CSS3 的 border-image 属
性，还可以使用图片来创建边框，详见手册。
8.3 背景属性
在 CSS3 中提供了多个背景属性，这里只介绍两个比较常用的属性，其它可以从手册中
获取帮助。CSS3 的诞生为我们解决了这一问题，在 CSS3 里，通过 background-image 或者
background 可以为一个容器设置多张背景图像，也就是说可以把不同背景图象只放到一个块
元素里。多个背景图片的 url 之间使用逗号隔开即可，如果有多个背景图片，而其他属性只
有一个，那么所有背景图片都应用该属性值。代码如下所示：
背景大小调整也是 CSS3 提供的一个新特性，它可以让你随心所欲的控制背景图的尺寸
大小。我们知道在 CSS2 中，背景图的大小在样式中是不可控的，比如要想使得背景图填充
满某个区域，你要么重新做帐大点的图，要么就只能让它以平铺的方式来填充。在 CSS3 中
提供了 background-size 属性， 让你既可以直接缩放背景图来填充满这个区域，也可以让你
先给背景图设置大小，然后以设置好的尺寸去平铺满这个区域。background-size 需要 1 个或
2 个值（1 个为必填，1 个为可选），这些值既可以是像素 px，也可以是百分比%或 auto，还
可以是特定值 cover, contain。示例代码如下所示：
其中 background-size 第 1 个值用于指定背景图的 width，第 2 个值用于指定背景图的
height，如果只给 background-size 设置 1 个值，则第 2 个值默认为 auto（cover 和 contain 特
定值除外）。background-size 的特定值：
cover: 保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域；
contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的
8.4 文本属性
关于 css3 的文本新属性还是满多的，在这些属性中比较出彩的属性有两个：一个是可
以为文字添加阴影的 text-shadow，另外一个则是可以强制对单词进行换行处理的 word-wrap
属性。text-shadow 属性要求的浏览器版本较高，对于 ie 来说，至少需要 ie10 以上版本的支
持，至于 Firefox、Chrome、Safari 以及 Opera 等浏览器则完全支持这一新属性。大家或许
常常会借鉴一些国外的主题，常常会发现有些标题会带有很好看的阴影，但在 ie 下无法正
常的显示出来，这正是 text-shadow 属性的功劳。word-wrap 属性算是一个能够被广泛支持的
新属性，几乎所有的主流浏览器都支持这一属性，即使是 ie 也不例外。
1.给文字加上阴影的 text-shadow 属性：
属性 text-shadow 是我们可以省略前缀的几个之一，这个属性与边框的阴影属性
（box-shadow）差不多，总共包含了四个参数：水平阴影、垂直阴影、模糊距离，以及阴影
的颜色。与我们所讲的边框阴影属性同样类似的是，这些值除了最后的颜色之外，均可以用
负值来表示。下面给个简单的代码示例：
2.强制单词换行的 word-wrap 属性：
当我们的段落中出现特别长的单词的话，因为没有强制换行，可能导致某个单词大量溢
出或者直接自动换行而出现行尾留出很大的空白，这些都使得我们的文本便的很不整齐，
word-wrap 这个属性也正是因此而生。请看下面的简单用法：
8.5 用户界面属性
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。本节着重介
绍一下 resize 属性，只有 Firefox 4 和 Safari 3 支持此属性，resize 是可用于重定义 textarea
的大小。可能的值：
none： UserAgent 没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
both： UserAgent 提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。
horizontal： UserAgent 提供单向水平尺寸调整机制，让用户可以调节元素的宽度。
vertical： UserAgent 提供单向垂直尺寸调整机制，让用户可以调节元素的高度。
8.6 动画属性
也许 CSS3 最令人兴奋的增补，就是在没有 JavaScript 的元素的情况下产生动画。CSS3
的动画有三个常用属性：transform﹑transition﹑animation。 transform 属性虽然看起来可以
实现动画的效果，但本质其实是静态的，其实就是一个图形的变形工具；而 transition 属性
是一个简单 的动画属性，操作起来非常的简单；Animations 属性是个名副其实的动画属性，
是 transition 属性的扩展，但功能可谓十分的强大，Animations 可以定义多个关键帧以及定
义每个关键帧中元素的属性值来实现复杂 的动画效果。下面的示例使用 transition 属性模仿
一个效果，当鼠标滑过右侧链接时，文本向右滑动。代码如下：
8.7 多列布局属性
通过 CSS3，您能够创建多个列来对文本进行布局，就像报纸那样！在 CSS2 时代，对
于多列布局的设计，大多采用浮动布局和绝对定位布局两种方式。浮动布局比较灵活，但是
需要编写大量的附加样式代码，而且在网页缩放等操作下容易发生错位，影响网页整体效果。
绝对定位方式要精确到标签的位置，但固定标签位置的方式无法满足标签的自适应能力，也
影响文档流的联动。CSS3 新增 columns 属性，即多列自动布局功能，利用多列布局属性可
以自动将内容按指定的列数排列（例:columns: 250px 3;250px 表示的是列宽，3 表示的是多
列的数目）。可以结合 column-gap 属性定义列之间的间距、使用 column-rule 属性可以定义
每列之间边框的宽度、样式和颜色。应用示例代码如下所示：
CSS3 多列布局还有很多新属性和特性，如栏目高度 column-fill 属性以及分列打印等，
本节只做简单介绍，全做抛砖引玉。
8.8 渐变属性
对于正常的渐变背景，一般都是切丝然后平铺，至于横向平铺还是纵向平铺还是得看实
际情况而定，复杂点的背景就只能切块图，然而 CSS3 可以让 Firefox 和 Safari/Chrome 实现
颜色渐变，IE 可以用滤镜，这也是一种值得考虑的很酷的方法。先看语法：
先看第一行 Firefox，属性“-moz-linear-gradient”有三个参数。第一个参数表示线性渐
变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下
角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，
表示多种颜色的渐变。
再看第二行属性“-webkit-gradient”是 webkit 引擎对渐变的实现，一共有五个参数。第
一个参数表示渐变类型（type），可以是 linear（线性渐变）或者 radial（辐射渐变）。第二个
参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，
也可以用关键值表示，比如 left top（左上角）和 left bottom（左下角）。第四个和第五个参
数，分别是两个 color-stop 函数。color-stop 函数接受两个参数，第一个表示渐变的位置，0
为起点，0.5 为中点，1 为结束点；第二个表示该点的颜色。
IE 依靠滤镜实现渐变。startColorstr 表示起点的颜色，endColorstr 表示终点颜色。
GradientType 表示渐变类型，0 为缺省值，表示垂直渐变，1 表示水平渐变。
8.9 透明属性
元素透明也是我们常用的样式，在 CSS2 中使用滤镜属性 opacity 实现透明效果。现在
有了 CSS3 的 rgba 属性，就不用这么麻烦了，当然这也得要浏览器支持才行。通常我们定义
颜色都是用十六进制表示。如：background:#000000，表示背景色为黑色。当然也可以用 RGB
三原色值表示，如：background:rgb(0,0,0)，也表示背景色为黑色。rgba 只是在 rgb 的基础上
增加了一个 a，这个 a 表示透明度。而且这个属性不会被子元素继承下去，可以在定义颜色
的属性使用，应用代码如下：
除了 IE，其他浏览器几乎都支持 rgba 函数。它有四个参数，前三个为一种颜色的 RGB
值，第四个为透明度。
8.10 旋转属性
在 CSS3 中，可以使用 transform 允许我们对元素进行旋转，放缩，倾斜，平移的功能，
以旋转为例，代码如下所示：
除了早版本的 IE 以外，其他浏览器都是用 rotate 函数，实现某个对象的旋转。比如
rotate(7.5deg)就表示顺时针旋转 7.5 度（degree）。利用 CSS3，还可以完成 skew（扭曲）和
scale（缩放），以及 css transitions（动态变换）等。
8.11 服务器端字体属性
设计网页的时候，可能会用到某种特殊的字体。如果用户的机器中没有安装，文字只能
以普通字体显示。CSS 可以让用户的浏览器自行下载服务器端字体，然后就能呈现
出设计者想要的效果。应用示例代码如下所示：
需要注意的是，字体文件必须与网页文件来自同一个域名，符合浏览器的"同源政策"。
另外，由于中文字体文件太大，服务器端字体显然只适用于英文字体。
9 使用 HTML5 中新增元素来构建网页
HTML5 中新增了几个结构元素：section 元素、article 元素、nav 元素、aside 元素、header
元素和 footer 元素，通过运用这些结构元素，可以让网页的整体结构更加直观和明确、更加
富有语义化和更具有现代风格。本例以一个博客网站为例业介绍如何综合运用 HTML5 中的
这些结构元素，并与 CSS3 样式结合，让你了解在 HTML5 实现的网页中应该如何使用 CSS3
样式来对页面中的元素进行页面布局及视觉美化。在一个用 HTML5 实现的网页中，每个网
页都将由一些主体结构元素构成，在大型的网站中，一个网页通常由以下几个结构元素组成。
header 结构元素：通常用来展示网站的标题、企业或公司的 LOGO 图片、BANNER、
网站导航条，等等。
section 结构元素：一个网页中要显示的主体内容通常被放置在 section 结构元素中， 每
个 section 结构元素都应该有一个标题来显示当前要展示的主要内容的标题信息。每个
section 结构元素中通常还应该包括一个或多个 section 元素或 article 元素, 用来显示网
页主体内容中每一个相对独立的部分。
aside 结构元素：通常用来展示与当前网页或整个网页相关的一些辅助信息。例如，在
博客网站中，可以用来显示博主的文章列表和浏览者的评论信息等。在购物网站中，可
以用来显示商品清单、用户信息、用户购买历史等。在企业网站中，可以用来显示产品
信息、企业联系方式、友情链接等。aside 结构元素可以有多种形式，其中最常见的形
式是侧边栏。
footer 结构元素：通常，每个网页中都具有 footer 结构元素， 用业放置网站的版权声明
和备案信息等与法律相关的信息， 也可以放置企业的联系信息。
在本例中，都是使用 HTML5 的标记方法， 也通过 html5.js 文件的导入，实现让早期
IE 版本可以兼容 HTML5， 一个简单的博客系统首页面的 HTML5 布局代码如下所示：
接下来，我们来看一下这部分 HTML5 页面代码所使用到的 CSS 样式代码， 除可用到
了 CSS2 中可以让 HTML5 中新增的结构元素而使用的样式， 还使用了一些 CSS3 设置一下
简单的页面特效。例如，一些圆角和阴影效果，为同一个元素使用多张背景图片等。全部
CSS3 代码如下所示：
本例是一个博客系统页面的半成品，目的就是让你了解 HTML5 结构元素和 CSS3 样式
的使用。其中在每个区块的盒子中， 都标记出来使用的 HTML5 结构元素， 让你对 HTML5
的结构元素有一个更直观的认识。本例你可以使用多种浏览器查看效果，包括 IE 的几个常
用版本，运行结构如图 1-2 所示：
图 1-2 HTML5 和 CSS3 的页面布局
10 LESS CSS 框架简介
CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的
CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数等
概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin
（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，
就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情，它对于大网站海
量的页面编写非常有帮助。
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样
式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS
原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程
序式语言的特性。示例如下所示：
LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们
更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档
中应用。
Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）
特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个
已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。这种方式是我们在开发大
型网站多页面时常用的方式，我们先简单看一下 Mixins 在 LESS 中的使用：
上例是我们使用 LESS 最多的情况， 如果有海量的样式要编写时，就不需要大量的重
复写解决各浏览器兼容性的前缀了。本节只是让你对 LESS 有所了解， 在开发中我们可以
根据我们的项目特性选择使用 LESS 的部分特性，我们只需用很少的成本就可以换了很大
的回报，借助 LESS 可以更便捷的进行 Web 开发。
11 响应式布局
不管您的用户使用何种终端访问您的网站，都能够自动识别适应终端设备的分辨率以及
宽度，让您的网站在众多设备中无缝浏览(在 CSS2.1 中定义了各种媒体类型，包括显示器、
便携设备、电视机，等等)。对于智能手机和平板电脑的逐渐普及，普通的网站对于这些持
有移动设备的用户来说，访问无疑是困难的，他们必须在设备上放大和缩小整个网页，以便
能够阅读适合字体大小，稍不小心可能会点错进入别的区域，这种状况在响应式网页设计中
会有所改善。响应式布局是就是一个网站能够兼容多个终端，而不是为每个终端做一个特定
的版本。这个概念是为解决移动互联网浏览而诞生的，响应式布局可以为不同终端的用户提
供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，可以说响应式
的布局是大势所趋，现在越来越多的网站开始采用响应式的布局方案。
11.1 响应式布局的优缺点
使用响应式布局的优点比较明显，就是面对不同分辨率设备灵活性强，还有就是能够快
捷解决多设备显示适应问题，也就是在非响应式 web 设计中，多设置中访问视觉不统一，
非最佳视觉， 而在响应式设计中能达到多终端视觉和操作体验非常风格统一。并且可以做
到兼容当前和未来设备，另外响应式 web 设计中的大部分技术都可以用在 WebApp 开发中，
这是是现在比较流行的开发模式。还可以节约开发成本，维护成本也轻松很多。
当然也存在缺点，像兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的
元素，加载时间加长（相比较手机定制网站，流量稍大，但比较加载一个完整 pc 端网站显
然是小得多）；多方面因素影响而达不到最佳效果；在一定程度上改变了网站原有的布局结
构，会出现用户混淆的情况。所以是否在你的产品中使用响应式布局方案可以折衷考虑。
11.2 响应式布局该怎么设计
一个普通的自适应显示的三栏网页，当你用不同的终端来查看这个页面的时候，他会根
据几种终端来显示不同的样式，在电脑上是三列，在 pad 上应该也是三列，在大屏手机上是
三行，在屏幕小于 320 的手机上只显示主要内容，隐藏掉了次要元素。
我们知道，在不同的设置中，浏览的窗口尺寸可能是不同的。如果只针对某种窗口尺寸
来制作网页，在其他设备中呈现该网页就会产生很多问题， 如果针对不同的窗口尺寸制作
不同的网页，则要制作的网页就会太多。为了解决这个问题在 CSS3 中加入了 Media Queries
模块（媒介查询）， 是制作响应式布局的一个利器，使用这个工具我们可以非常方便快捷的
制造出各种丰富的实用性强的界面。Media Queries 模块中允许添加媒体查询表达式，用以
指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内
容的情况下，在样式中选择一种页面的布局以精确地适应不同的设备， 从而改善用户体验。
网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式，然后让浏览器根据不同的
窗口尺寸来选择使用不同的样式即可。
到目前为止， Media Queries 模块得到了 Firefox 浏览器、Safari 浏览器、Chrome 浏览
器以及 Opera 浏览器的支持。移动终端一般都是对 css3 支持比较好的高级浏览器不需要考
虑响应式布局的媒体查询 media query 兼容问题。还有 IE8 及以下版本浏览器不支持媒体查
询，虽然也有好多解决方案，几乎都是通过下载 JavaScript 插件实现， 但没有必要去解决
这个问题，因为小屏幕显示都是在移动端使用， IE 低版本只要按正常电脑页面显示页面布
局就可以了。
在开发中只要拖动浏览器也可以触发判断条件，测试的时候你不需要去找一堆手机，只
要把自己的浏览器窗口缩小到一定尺寸就可以了。另外还有一个不错的在线 Web 工具-
Responsivator（开源的直接在 https://github.com/johnpolacek/Responsivator 下载），提供了很
多不同的尺寸屏幕的展示效果，你只需要提供一个 url，就可以看到你的网站在不同的屏幕
下的显示效果。
11.3 响应式布局实例
在学习 Media Queries 模块前， 先通过一个响应式布局实例，来了解一个响应式布局和
Media Queries 的简单应用。在本例中，使用 HTML5 的结构元素定义了 5 个盒子。当浏览器
窗口尺寸不同时，页面会根据当前窗口的大小选择使用不同的样式。当窗口宽度在 1000px
以上时， 页头和页脚分别在页面的最上方和最下方整行显示，中间主体分为三列显示。 当
窗口宽度在 640px 以上、1000px 以下时, 中间的第三列隐藏。而当窗口宽度在 640 像素以下
时，5 个区块从上往下排列显示。代码如下所示：
在本例中， 通过不同的屏幕分辨率访问可以获取不同的样式， 在各自的样式中重新设
置了每个区块的布局，不仅需要改变布局样式，在不同屏幕分辨率下，字体、图片及背景图
片都也同样需要重新设置样式，以适应当前屏幕下的内容展示。至于要判断多少种分辨率，
完全取决于你产品的需求，常见的分辨率有手机、平板(注意这些终端是存在横屏、竖屏区
别的)，桌面显示器。自己为自己所面对的终端定制样式。一般大于 960px 的显示器都可以
用默认样式而不必在媒体查询里判断了。本例在不同屏幕分辨率下展示效果如图 1-3 到 1-5
所示：
图 1-3 窗口宽度在 1000px 以上时的页面显示
图 1-4 窗口宽度在 640 以上，1000px 以下时的页面显示 图 1-5 在 640px 以上时的页面显示
在各自不同窗口大小的子样式区域中，可以继承全局的样式， 只要重新设置的需要改
变的样式即可。另外，有一些次要的区块内容为了页面摆放合适，可以隐藏它，如图 1-4 中,
在窗口宽度在 640px 和 1000px 之间时，将右部区块隐藏。
11.4 Media Query 的使用方法
在上例中， 我们使用 Media Queries 来根据 3 种不同尺寸的窗口使用 3 种不同的样式。
通过不同的媒体类型和条件定义样式表规则，媒体查询让 CSS 可以更精确作用于不同的媒
体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min 和 max 用于表达”
大于或等于”和”小与或等于”。如：width 会有 min-width 和 max-width 媒体查询可以被用
在 CSS 中的@media 和@import 规则上，也可以被用在 HTML 和 XML 中。通过这个标签属
性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的
广泛。媒体查询能够获取的值如下：
设备的宽和高 device-width，device-heigth 显示屏幕/触觉设备。
渲染窗口的宽和高 width，heigth 显示屏幕/触觉设备。
设备的手持方向，横向还是竖向 orientation(portrait|lanscape)和打印机等。
画面比例 aspect-ratio 点阵打印机等。
设备比例 device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表 color，color-index 显示屏幕。
设备的分辨率 resolution。
语法结构及用法
媒体查询有两种使用方式， 一种是在 CSS 样式中内嵌“@media”，在同一个 CSS 中通
过不同窗口编写不同的样式去选择。 另一种是使用外部样式表的引用， 在@import 和 link
中使用“@media”，根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一
样的。Media Queries 的使用方法如下所示：
@media 设备类型 only (选取条件) not (选取条件) and (设备特性)，设备二 { 样式代码 }
在 CSS3 中的 Media Queries 模块中支持对外部样式表的引用，使用方法类型如下代码：
@import url(color.css) screen and (min-width: 1000px); /*使用@import 导入 css 文件*/
或：
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and
(max-device-width: 480px)" href="link.css" rel="external nofollow" /> /*使用 link 导入外部 css 文件*/
简写：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px) href="link.css" />
上面使用中 only 可省略，限定于计算机显示器，第一个条件 max-width 是指渲染界面
最大宽度，第二个条件 max-device-width 是指设备最大宽度。在样式表中内嵌@media 的代
码示例如下所示：
@media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px),
(max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px)
and (orientation:portrait) { 样式代码 }
简写：
@media screen and (max-width:640px) { 样式代码 }
在上面的示例代码中，设置了电脑显示器分辨率（宽度）大于或等于 1024px（并且最
大可见宽度为 989px）；屏宽在 480px 及其以下手持设备；屏宽在 480px 以及横向（即 480
尺寸平行于地面）放置的手持设备；屏宽大于或等于 480px 小于 1024px 以及垂直放置设备
的 css 样式。从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，样式
代码为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑
与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了 css 基本语
法。
可用的设备类型
在上面的语法中，例如在 CSS 中嵌入“@media”的方式， 开头必须书写“@media”,
然后指定设备类型（上例使用 screen 代表电脑显示器）。CSS 中定义了 10 种设备类型，可
以指定的值与该值所代表的设备类型如表 1-20 所示：
表 1-20 在 Media Queries 中可以指定的值与该值所代表的设备类型
可以指定的值 设置类型
all 所有设备
braille 盲文，即盲人用点字法触觉回馈设备
embossed 盲文打印机
handheld 手持的便携设备
print 文档打印用纸或打印预览视图模式
projection 各种投影设备
screen 彩色电脑显示器屏幕
speech 语言和音频合成器
tty 固定字母间距的网格的媒体，比如电传打字机和终端
tv 电视机类型的设备
可用的设备特性参数
通过设备类型可以区分使用的设备，再通过设备特性参数来设置同一设备的不同型号。
例如，通过设备类型指定电脑显示器， 再通过设备特性参数指用多大屏幕的显示器。设备
特性的书写方式与样式的书写方式很相似， 分为两个部分，当中由冒号分割， 冒号前书写
设备的某种特性， 冒号后书写该特性的具体值。例如“(min-width:320px)”。CSS 中的设置
特性共有 13 种， 是一个类似于 CSS 属性的集合。但与 CSS 属性不同的是，大部分设备特
性的指定接受 min/max 的前缀， 用来表示大于等于或小于等于的逻辑，以此避免使用“<”
和“>”这些字符。对于这 13 种设备特性参数的说明如表 1-21 所示：
表 1-21 13 种设备特性的说明
特性 可指定值 可用媒体类型
是否接受
min/max 前缀
特性说明
width
带单位的长度值
例如：640px
视觉屏幕/触摸设备 允许
定义输出设备中的页面可见区域宽度(单位一般
为 px)，即浏览器窗口的宽度
heigth
带单位的长度值
例如：320px
视觉屏幕/触摸设备 允许 定义输出设备中的页面可见区域高度(单位一般
为 px)，即浏览器窗口的高度
device-width
带单位的长度值
例如：640px
视觉屏幕/触摸设备 允许 定义输出设备的屏幕可见宽度(单位一般为 px)，
即设备屏幕分辨率的宽度值
device-heigth
带单位的长度值
例如：320px
视觉屏幕/触摸设备 允许 定义输出设备的屏幕可见高度(单位一般为 px) ，
即设备屏幕分辨率的高度值
orientation
只能指定两个值：
portrait 或 landscape
位图介质类型 不允许
浏览器窗口的方向是纵向还是横向，当窗口商度
大于等于宽度值是该特性值为 portait（横向），否
则为 landscape（竖向）
aspect-ratio
比例值
例如 16/9
位图介质类型 允许 定义’width’与’height’的比率，即浏览器的长宽比
device-aspect-ratio
比例值
例如 16/9
位图介质类型 允许
定义’device-width’与’device-height’的比率，即设
备屏幕长宽比。如常见的显示器比率：4/3， 16/9，
16/10
color 整数值 视觉媒体 允许 设备使用多少位的颜色值，如果不是彩色设备，
则值等于 0
color-index 整数值 视觉媒体 允许 色彩表中的色彩数
monochrome 整数值 视觉媒体 允许
定义在一个单色框架缓冲区中每像素包含的单色
原件个数。如果不是单色设备，则值等于 0
resolution
分辨率值
例如 300dpi
位图介质类型 允许 定义设备的分辨率。如：96dpi，300dpi，118dpcm
scan 只能指定两个值： 电视类 不允许 定义电视类设备的扫描方式，progressive 逐行扫
progressive 或 interlace 描，interlace 隔行扫描
grid
只能指定两个值：
0 或 1
栅格设备 不允许 用来查询输出设备是否使用栅格或基于位图。1
代表是，0 代表否
可以使用 and 关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的
样式， 例如以下语句指定了当设备窗口宽度小于 640px 时所使用的样式：
@media screen and (max-width: 640px) { 样式代码 }
可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中， 指定方式类
似如下所示：
@media handheld and (min-width:360px), screen and (max-width: 480px) { 样式代码 }
可以在表达式中加上 not 关键字或 only 关键字， not 关键字表示对后面的表达式执行
取反操作， 书写方法类似如下所示：
/* 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中 */
@media not handheld and (color) { 样式代码 }
/* 样式代码将被使用在非彩色设备中 */
@media all and (not color) { 样式代码 }
使用 only 关键字的作用是让那些不支持 Media Queries 但是能够读取 Media Type 的设备
的浏览器将表达式的样式隐藏起来。 例如：
@media only screen and (color) { 样式代码 }
上面的语句对于支持 Media Queries 的设备来说，将能够正确应用样式， 就像 only 不
存在一样。对于不支持 Media Queries 但能够读取 Media Type 的设备（例如 IE8 只支持
“@media screen”）来说， 由于先读到的是 only 而不是 screen, 将忽略这个样式。对于不支
持 Media Queries 的浏览器（例如 IE8 之前的浏览器）来说， 无论是否有 only, 都将忽略这
个样式。
11.5 在移动设备上设置原始大小显示
在 iPhone 系列和 iPod touch 使用的是 Safari 浏览器，支持前面介绍的媒体查询表达式。
例如，使用 iPhone 分辨率是 320px × 480px 去访问我们前面的布局示例，却不是我们想看
到的结果， 并不是从上到下排列显示， 而是和电脑显示器访问的布局是一样的。为什么会
这样？因为在 iPhone 中使用的 Safari 浏览器在进行页面显示时是将窗口的宽度作为 980px
进行显示的， 因为太多网页是按照 800px 左右标准进行制作的， 所以 Safari 浏览器默认按
照 980px 的宽度来显示，就可以正常显示绝大多数的网页了。所以即使在页面中已经写好了
页面在小尺寸窗口中运行的样式， iPhone 中的 Safari 浏览器也不会使用这个样式， 而是选
择窗口宽度为 980px 时所使用的样式。 所以我们需要在移动设备上设置原始大小显示和是
否缩放的声明。是在页面的头部<head></head>之间加上下面这样的语句∶
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
或
<meta name="viewport" content="width=600px " />
meta 标签的 viewport 属性是在移动设备上设置原始大小显示和是否缩放的声明。可以
使用的参数设置如下∶
width ： viewport 的宽度
height ： viewport 的高度
initial-scale ： 初始的缩放比例
minimum-scale ： 允许用户缩放到的最小比例
maximum-scale ： 允许用户缩放到的最大比例
user-scalable ： 用户是否可以手动缩放
如果在页面中已经准备好了在小尺寸的窗口中使用的样式， 并且有可能在 iPhone 或
iPod touch 中被打开时，请不要忘记了加入<meta>标签并在标签中写入指定的窗口宽度。其
实还可以通过 viewport 把自己冒充成更宽的屏幕。
11.6 响应式网站的内容设计
基于响应式开发网站，除了页面的布局是我们设计的重点， 网站中显示的图片和文字
也是我们不能轻视的内容。
响应式图片显示内容设计
真正具有响应性的 Web 设计是完全调整您的网站以满足访问者的设备。 我们需要在响
应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片，我们可以准备多张
不同尺寸的图片，然后在各自的媒体查询样式中使用对应的图片背景即可。再能结合 一些
“min-width，min-height,max-width,max-height”等样式属性，来限制窗口最小或最大宽度和
高度，模拟响应式及流式布局，从而保证其图片不失真。
如果是在 HTML 中加载图片，实现图片在不同分辨率的屏幕上的适应，当然可以通过
设置图片样式的百分比来实现，但是，它不只是包括缩放，同样重要的是减少你传送到观众
的图片，比如说用户是处在移动设备中浏览您的网站，网速慢，流量少等因素，可能访客会
放弃您的网站！如果一个网站上的大多数数据元素都是图像。为了减少这些元素给我们的网
站带来的影响，我们可以用更合适的图片为我们的访问者使用的设备替换其中的数据。在开
发时解决这样的问题可以通过一些 JavaScript 插件实现。
响应式文字显示内容设计
响应式的设计应该秉承“内容优先，移动优先”的设计原则，那么我们知道网页中
的内容主要是由文字图片等元素组成的，那么文字该如何响应式呢？排版是响应式 Web
设计最重要的内容之一，如果你想内容能在所有尺寸屏幕上友好地显示，那就绝对有必
要地为移动设备优化字体，我们不能忽视指定字体来适应我们响应式网站。我们可能使
用不用单位标准来实现这个目标，包括 pixel(像素)，em，rem 或者是百分比。那么选择
一个正确的标准对设计一个可塑的，响应式的交互界面是至关重要的。
1. Pixel(像素)
很早之前，Pixel（像素）就是被用作 web 设计的单位，原因就是它本身固有的精
密度和准确度。一旦字体赋具体的值，就能在所有设备以及浏览器中保持相同的大小。
虽然这种方法提供了非常精确的大小控制，但它却与我们需要的弹性和响应式相违背
的。当你给一个“父”元素设置尺寸时，通过继承特性就会把尺寸“传递”给“子”元
素(这就是为什么把 CSS 命名为“层叠”样式表)。例如，设置一个固定的像素值给 body
的 font-size，然后就会把这个值“传递”给你设计的所有其他元素。这时候，开发人员
如果想单独地分配样式，那就必须手动地设置不同的参数去覆盖已存在的样式。因此，
基本编辑以及调整将需要小心翼翼地对所有预设样式进行修改。这会引发的不只是不方
便的问题，还会在各种浏览器和设备上出现显示不友好的问题，其中很多是由于选择字
体大小而造成的。很多读者是在特定字体大小的情况会出现阅读障碍的,而这些都是要
被防止出现的，尤其是考虑到我们响应式设计的目标是在所有的屏幕尺寸和视窗下很好
的显示。如果你为设计采用前卫的方法思想，那么精确的像素单位并不算是最好的选择。
现在，设备有各种各样的屏幕尺寸，也就是说不同的像素宽高的屏幕。使用一个特定大
小的字体来适应所有的屏幕，那是跟我们的响应式设计相违背的。
2. Em
一个 em 也是一个大小的单位，可以定义 font-size 的值大小。举个例子，如果我们
创建一个 div 包含 font-size 值为 16px 的文本，那么 1em 就代表 16px，2em 就等于 32px，
依此类推。em 在所有浏览器中是可变化的，不需要去为每一个元素设置值，因为 CSS
具有继承特性，也就是“层叠”。很明显，使用 em 需要考虑优缺点。尽管，使得维护
网站的成本降低，但会阻碍开发人员正在寻求控制、精度和可预测性的字体大小。幸运
的是，这个问题可以很容易地被解决，通过为大部分内容使用相同的计算单位，需要添
加一些简单的文本元素，如 header 和 footer。
3. 百分比
类似 em 单位，百分比也是可变化的，可被继承的。理论上，两者是没有很大的区
别，都是计算单位。实际上，需要理解两者的区别是自己打算选择使用哪种计算单位在
你的设计上。你当然不想在指定的元素使用 em，而在其他元素使用百分比。例如，CSS
声明： { font-size:100%; }，这样可以覆盖掉浏览器默认定义或者其他不想要的百分比
声明，在这里，可以使用 em 单位的。
4. Rem
还有另外一个选择提供弹性字体大小的单位：rem（root(根) Em）。这个 rem 跟 em
很相似，不同的是，rem 只定义“父”元素的尺寸。这个重要的不同点可以解决很多出
现内嵌套的元素问题。大多数设计师都知道,绝大多数的设计本质上是包含嵌套的元
素；。然而，现在需要意识到的是 rem 是一个很新的单位，因此不是所有的桌面浏览器
都支持，解释或者很好地显示它们，至少目前是这种情况的。
前面介绍的 4 种字体的计算单位，究竟哪一种更加适合响应式 Web 设计呢？确定
的是，em 使得字体更加容易缩放和维护。如果你打算，例如，使用百分比来增加字体
大小，你将可能去改变应用于 body 的百分比，而不用做其他操作。维护是一个很大的
问题，是值得你在设计中多多考虑到的。
11.7 响应式网站的设计流程
当客户提出产品功能移动化的需求时，虽然响应式站点并不能算是一种纯粹的移动化解
决方案，但是，在某些情况下，这种方式是非常值得考虑的。需要先花些心思将原本的网站
打造的更具弹性，使其在各种主流移动设备中都拥有尽量优秀的用户体验。响应式网站设计
需要考虑以下流程。
第一步：确定需要兼容的设备类型、屏幕尺寸
通过用户研究，了解用户使用的设备分布情况，确定需要兼容的设备类型、屏幕尺寸。
设备类型：包括移动设备（手机、平板）和 PC。对于移动设备，设计和实现的时候注意增
加手势的功能。屏幕尺寸：包括各种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸
（包括横向和竖向）、普通电脑屏幕和宽屏。需要考虑的问题：某个页面进行响应式设计时
其适用的尺寸范围是哪些？例如，某搜索网站的搜索结果页面，跨度可以从手机到宽屏，而
该首页，由于结构过于复杂，想直接迁移到手机上，不太现实，不如直接设计一个手机版的
首页。结合用户需求和实现成本，对适用的尺寸进行取舍。比如一些功能操作的页面，用户
一般没有在移动端进行操作的需求，没有必要进行响应式设计。
第二步：制作线框原型
针对确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的
布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的设
计等。这个过程需要设计师和前端开发人员保持密切的沟通。
第三步：测试线框原型
将图片导入到相应的设备进行一些简单的测试，可帮助我们尽早发现可访问性、可读性
等方面存在的问题。
第四步：视觉设计
注意，移动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时候需要保证内容文
字的可读性、控件可点击区域的面积等。
第五步：前端实现
与传统的 web 开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所
以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。
12 Web 前端 CSS 框架 Bootstrap 介绍
Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。简洁、直观、强悍、
移动设备优先的前端开发框架，让 Web 开发更迅速、简单，帮助我们加快项目开发，在前
端开发中大行其道，越来越多的企业和个人开始基于它开发项目。让我们拥有一套完整一致
的设计方案和实现的办法，不需要在外观上花费过多时间和精力，使用 Bootstrap 能让我们
在开发的时候精力集中于更首要的功能上。
12.1 Bootstrap 主要功能
Bootstrap 中包含了丰富的 Web 组件，可以快速的搭建一个漂亮、功能完备的网站。其
中包括的组件主要有：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、
排版、缩略图、警告对话框、进度条、媒体对象等。还有 Bootstrap 是基于 jQuery（JavaScript
框架）开发的，它在 jQuery 框架的基础上进行了更为个性化和人性化的完善，形成一套自
己独有的网站风格，并兼容大部分 jQuery 插件。这些插件为 Bootstrap 中的组件赋予了“生
命”。其中包括：模式对话框、标签页、滚动条、弹出框等。你也可以对 Bootstrap 中所有的
CSS 变量进行修改，依据自己的需求裁剪代码。
12.2 Bootstap 页面布局和排版
布局在每个项目中都必不成少，Bootstrap 使用一套优良的网格（Grids）布局，而在
“响应式布局”中有更强大的功能，能让网格布局自适应各类设备。应用也相当简单，只须
要遵守 HTML 模板应用，就能轻松地构建你所需的布局结果。此外，改变模板中的类名，就
能实现不同的布局风格。比如常见的“固定布局”，只须要在 HTML 中添加“container”类
名；而要实现“流体布局”，只须要在 HTML 中添加“container-fluid”类名。 Bootstrap
还为开发者设计了“Responsive”， 让布局框架更为超卓。开发者可以在此基础上进行任
何样式的覆盖，从而实现幻想中的响应式设计。网格布局如图 1-6 所示：
图 1-6 Bootstrap 网格布局
12.3 页面下拉菜单
页面排版的短长直接影响产品风格，说直白点就是好欠都雅。在 Bootstrap 中，页面的
排版都是从全局的概念上出发，定制了主体文本、段落文本、夸大文本、题目、Code 风 格、
按钮、表单、表格等格局。在“按钮”中增长了组合、下拉、图标等结果，如图 1-7 所示。
图 1-7 Bootstrap 中的下拉菜单组件
Bootstrap 在“Icon”项目组采取了“Sprites”技巧，Bootstrap 筹办了上百种常
用的“Icon”图标应用。如图 1-8 所示：
图 1-7 Bootstrap 中的部分图标
Icon 最大的特点在于，整套图标中没有应用任何图片,都是应用了 CSS3 的“＠
font-face”和“伪元素”实现的。
12.4 BootStrap 的优点和不住
如今的 Bootstrap 已包含了几十个组件，具有完全的实例文档，定义了真正的组件和模
板。无论处在何种技巧程度的开发者，也无论处在哪个工作流程中，都可以应用 Bootstrap
快速、便利地构建开发自己喜欢的应用。
1． 规范的命名规则，代码输写比较规范；
2． 应用视觉效果一致性,可以让你的链接、按钮、提醒都有统一的视觉效果，你可以为不
同级别的提醒使用不同的颜色；
3． 通过多个浏览器测试，主流的浏览器支持都没问题，对 IE-8 及以下的兼容性不是很好，
原因是 BootStrap 采用了 HTML5 的新的属性；
4． 完整的框架解决方案. 这是一个 CSS 框架，你只需使用它而无需重新制作，这个框架专
为 Web 应用设计，所有的元素都可以非常完美的在一起工作，可快速开发。你可以把
精力放在业务上，而不是 UI。
当然缺点也很明显，对于在国内的开发者和 UI 设计者来说，最可怕的就是 IE 浏览器的
兼容问题，现在的 Bootstrap 对 IE6 到 IE8 的支撑都不友好。还有采取 Bootstrap 开发的
模板，网站布局时常会显得痴肥，覆盖一些样式时会造成代码冗余。综合优缺点， 我们为
什么要使用 Bootstrap？ 第一就是速度， 提升项目的进度；还有就是一致性。 使用
Bootstrap 可以让我的整个 Web 应用的风格完全一致，一致的用户体验，一致的操作习惯。
