HTML语义化与元标签优化-优快云博客

1.html语义化

根据内容的结构（内容语义化）选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器更好的解析。

语义化的原因：（1）为了在没有css的情况下，页面也能呈现出很好的内容结构、代码结构；

（2）提升用户体验，例如title、alt用于解释名词或解释图片信息，label标签的活用。

（3）有利于SEO：和搜索引擎建立好良好的沟通，有助于爬虫抓取更多的有效信息；爬虫依赖于标签来确定上下文和关键字的权重；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）渲染网页；

（4）便于团队开发和维护，语义化更具有可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化；

语义化标签： h5æ°åç´

2 meta viewport

<!DOCTYPE html> <!-- H5标准声明，使用 HTML5 doctype，不区分大小写 -->
<head lang = "en"><!--标准lang写法-->
			<meta charset = "utf-8"><!--声明文档使用的字符编码-->
			<meta http-equiv = "X-UA-Compatible" content="IE=edge,chrome=1"><!--优先使用IE最新版本和chrome-->
			<meta name="description" content="不超过150个字符">
			<meta name="keywors" content=""><!--页面关键词-->
			<meta name="author" content="name,email@gmail.com">
			<meta name="robots" content="index,follow"><!--搜索引擎抓取-->
			<meta name="viewport" content="initial-scale=1,maximum-scale=3,minimum-scale=1,user-scalable=no"><!--为移动设备添加viewport-->
			<meta name="apple-mobile-web-app-title" content="yes"><!--IOS设备begin-->
			<meta name="apple-mobile-web-app-capable" content="yes"><!--添加到主屏后的标题-->
			<meta name="apple-itunes-app" content="app-id=myAppStoreID,affiliate-data=myAfffiliateData,app-argument=myURL">
			<!--添加智能app广告条Smart app banner(ios6 +safari)-->
			<meta name="apple-mobile-web-app-status-bar-style" content="black">
			<meta name="format-detection" content="telphone=no,email=no"><!--设置苹果工具栏颜色-->
			<meta name="renderer" content="webkit"><!--启动360浏览器的激素模式-->
			<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--避免IE使用兼容模式-->
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<meta name="HandheldFriendly" content="true"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
			<meta name="MobileOptimized" content="320"><!--微软的老式浏览器-->
			<meta name="screen-orientation" content="portarit"><!--UC强制竖屏-->
			<meta name="x5-orientation" content="portrait"><!--QQ强制竖屏-->
			<meta name="full-screen" content="yes"><!--UC强制全屏-->
			<meta name="x5-fullscreen" content="true"><!--QQ强制全屏-->
			<meta name="browsermode" content="application"><!--uc应用模式-->
			<meta name="x5-page-mode" content="app"><!--qq应用模式-->
			<meta name="msapplication-tap-highlight" content="no"><!--window phone点击无高光-->
			<meta http-equiv="pragma" content="no-cache">
			<meta http-equiv="Cache-Control" content="no-cache">
			<meta http-equiv="expires" content="0">	
		</head>