Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 91精品在线免费,久久精品国产国产精品四凭,亚洲国产精品综合久久网络 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          前端常用meta標簽的作用以及全面整理
          
        
           
          
	
	
          
		
                        
          、定義
          <meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上，但是對于機器是可讀的?？捎糜跒g覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
          2、作用
          meta里的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容，例如我們為頁面中添加如下meta標簽：

          2. <meta http-equiv="charset" content="iso-8859-1">
          3. <meta http-equiv="expires" content="31 Dec 2008">
          瀏覽器的頭部就會包括這些:

          2. charset:iso-8859-1
          3. expires:31 Dec 2008
          只有瀏覽器可以接受這些附加的頭部字段，并能以適當的方式使用它們時，這些字段才有意義。
          3、meta的必需屬性和可選屬性
          meta的必需屬性是content，當然并不是說meta標簽里一定要有content，而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。例如：
          必需屬性
          <meta name="keywords" content="HTML,ASP,PHP,SQL">
          這里面content里的屬性就是對keywords進行的說明，所以呢也可以理解成一個鍵值對吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
          可選屬性
          在W3school中，對于meta的可選屬性說到了三個，分別是http-equiv、name和scheme?？紤]到scheme不是很常用，所以就只說下前兩個屬性吧。
          http-equiv
          http-equiv屬性是添加http頭部內容，對一些自定義的，或者需要額外添加的http頭部內容，需要發送到瀏覽器中，我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明，那么現在再舉個例子。例如我們不想使用js來重定向，用http頭部內容控制，那么就可以這樣控制：
          <meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
          •  
          在頁面中加入這個后，5秒鐘后就會跳轉到指定頁面啦，效果可看W3school的例子
          name
          第二個可選屬性是name，這個屬性是供瀏覽器進行解析，對于一些瀏覽器兼容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:
          <meta name="renderer" content="webkit">
          •  
          這個meta標簽的意思就是告訴瀏覽器，用webkit內核進行解析，當然前提是瀏覽器有webkit內核才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從哪里冒出來的，我要怎么知道呢？這個就是在對應的瀏覽器的開發文檔里就會有表明的，例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔
          常用meta標簽大總結
          接下來就是常用的meta標簽大總結啦，我會盡可能的做到全
          charset
          charset是聲明文檔使用的字符編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset一定要寫第一行，不然就可能會產生亂碼了。
          charset有兩種寫法

          2. <meta charset="utf-8">
          3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          •  
          兩個都是等效的。
          百度禁止轉碼
          百度會自動對網頁進行轉碼，這個標簽是禁止百度的自動轉碼
          <meta http-equiv="Cache-Control" content="no-siteapp" />
          SEO 優化部分

          2. <!-- 頁面標題<title>標簽(head 頭部必須) -->
          3. <title>your title</title>
          4. <!-- 頁面關鍵詞 keywords -->
          5. <meta name="keywords" content="your keywords">
          6. <!-- 頁面描述內容 description -->
          7. <meta name="description" content="your description">
          8. <!-- 定義網頁作者 author -->
          9. <meta name="author" content="author,email address">
          10. <!-- 定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 -->
          11. <meta name="robots" content="index,follow">
          viewport
          viewport主要是影響移動端頁面布局的，例如：

          2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
          3.  
          content 參數：
          • width viewport 寬度(數值/device-width)
          • height viewport 高度(數值/device-height)
          • initial-scale 初始縮放比例
          • maximum-scale 最大縮放比例
          • minimum-scale 最小縮放比例
          • user-scalable 是否允許用戶縮放(yes/no)
          各瀏覽器平臺
          Microsoft Internet Explorer

          2. <!-- 優先使用最新的ie版本 -->
          3. <meta http-equiv="x-ua-compatible" content="ie=edge">
          4. <!-- 是否開啟cleartype顯示效果 -->
          5. <meta http-equiv="cleartype" content="on">
          6. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
          7.  
          8.  
          9. <!-- Pinned Site -->
          10. <!-- IE 10 / Windows 8 -->
          11. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
          12. <meta name="msapplication-TileColor" content="#009900">
          13. <!-- IE 11 / Windows 9.1 -->
          14. <meta name="msapplication-config" content="ieconfig.xml">
          Google Chrome

          2. <!-- 優先使用最新的chrome版本 -->
          3. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
          4. <!-- 禁止自動翻譯 -->
          5. <meta name="google" value="notranslate">
          360瀏覽器

          2. <!-- 選擇使用的瀏覽器解析內核 -->
          3. <meta name="renderer" content="webkit|ie-comp|ie-stand">
          UC手機瀏覽器
          UCBrowser_U3_API
          QQ手機瀏覽器

          2. <!-- 鎖定屏幕在特定方向 -->
          3. <meta name="x5-orientation" content="landscape/portrait">
          4. <!-- 全屏顯示 -->
          5. <meta name="x5-fullscreen" content="true">
          6. <!-- 頁面將以應用模式顯示 -->
          7. <meta name="x5-page-mode" content="app">
          Apple iOS

          2. <!-- Smart App Banner -->
          3. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
          4.  
          5.  
          6. <!-- 禁止自動探測并格式化手機號碼 -->
          7. <meta name="format-detection" content="telephone=no">
          8.  
          9.  
          10. <!-- Add to Home Screen添加到主屏 -->
          11. <!-- 是否啟用 WebApp 全屏模式 -->
          12. <meta name="apple-mobile-web-app-capable" content="yes">
          13. <!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
          14. <meta name="apple-mobile-web-app-status-bar-style" content="black">
          15. <!-- 添加到主屏后的標題 -->
          16. <meta name="apple-mobile-web-app-title" content="App Title">
          Google Android

          2. <meta name="theme-color" content="#E64545">
          3. <!-- 添加到主屏 -->
          4. <meta name="mobile-web-app-capable" content="yes">
          5. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
          App Links

          2. <!-- iOS -->
          3. <meta property="al:ios:url" content="applinks://docs">
          4. <meta property="al:ios:app_store_id" content="12345">
          5. <meta property="al:ios:app_name" content="App Links">
          6. <!-- Android -->
          7. <meta property="al:android:url" content="applinks://docs">
          8. <meta property="al:android:app_name" content="App Links">
          9. <meta property="al:android:package" content="org.applinks">
          10. <!-- Web Fallback -->
          11. <meta property="al:web:url" content="http://applinks.org/documentation">
          12. <!-- More info: http://applinks.org/documentation/ -->
          最后——移動端常用的meta

          2. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          3. <meta name="apple-mobile-web-app-capable" content="yes" />
          4. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
          5. <meta name="format-detection"content="telephone=no, email=no" />
          6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          7. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 -->
          8. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 -->
          9. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
          10. <!-- 啟用360瀏覽器的極速模式(webkit) -->
          11. <meta name="renderer" content="webkit">
          12. <!-- 避免IE使用兼容模式 -->
          13. <meta http-equiv="X-UA-Compatible" content="IE=edge">
          14. <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
          15. <meta name="HandheldFriendly" content="true">
          16. <!-- 微軟的老式瀏覽器 -->
          17. <meta name="MobileOptimized" content="320">
          18. <!-- uc強制豎屏 -->
          19. <meta name="screen-orientation" content="portrait">
          20. <!-- QQ強制豎屏 -->
          21. <meta name="x5-orientation" content="portrait">
          22. <!-- UC強制全屏 -->
          23. <meta name="full-screen" content="yes">
          24. <!-- QQ強制全屏 -->
          25. <meta name="x5-fullscreen" content="true">
          26. <!-- UC應用模式 -->
          27. <meta name="browsermode" content="application">
          28. <!-- QQ應用模式 -->
          29. <meta name="x5-page-mode" content="app">
          30. <!-- windows phone 點擊無高光 -->
          31. <meta name="msapplication-tap-highlight" content="no">
          32. <!-- 適應移動端end -->
          、
          <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
           1.name="viewport" //設置視口（網頁可繪制的區域）
           2.width=device-width //應用程序的寬度和屏幕的寬度是一樣的
           3.height=device-height //應用程序的高度和屏幕的高是一樣的
           4.initial-scale=1.0 //應用程序啟動時候的縮放尺度（1.0表示不縮放）
           5.minimum-scale=1.0 //用戶可以縮放到的最小尺度（1.0表示不縮放）
           6.maximum-scale=1.0 //用戶可以放大到的最大尺度（1.0表示不縮放）
           7.user-scalable=no //用戶是否可以通過他的手勢來縮放整個應用程序，使應用程序的尺度發生一個改變（yes/no）
          二、
          <meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no">
           1.target-densitydpi=device-dpi //指定屏幕像素密度DPI,device-dpi 為設備原本的DPI值,不會有任何縮放.( dpi是單位,一般指每英寸的像素)
          三、
          <meta name="apple-mobile-web-app-capable" content="yes"> 
           //說明：網站開啟對web app程序的支持
           1.apple-mobile-web-app-capable //
           2.content="yes" //是否開啟（開啟）
          四、
          <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
           //強制使用ie最新內核模式渲染
          五、
          <meta name="format-detection" content="telephone=no">
          當該 HTML 頁面在手機上瀏覽時，該標簽用于指定是否將網頁內容中的手機號碼顯示為撥號的超鏈接
          在 iPhone 上默認值是：
           <meta name="format-detection" content="telephone=yes"/>
           如果你不希望手機自動將網頁中的電話號碼顯示為撥號的超鏈接，那么可以這樣寫：
           <meta name="format-detection" content="telephone=no"/>
          六、
          <meta content="email=no" name="format-detection" />//將不識別郵箱，告訴設備忽略將頁面中的數字識別為電話號碼 。
          七、
          <meta name="apple-mobile-web-app-status-bar-style" content="black" />
          在web app應用下狀態條（屏幕頂部條）的顏色；
          默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
          注意：若值為“black-translucent”將會占據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
          八、
          <meta name="apple-touch-fullscreen" content="yes"> 
           //"添加到主屏幕“后，全屏顯示
          九、
          <meta name="apple-mobile-web-app-capable" content="yes" />
          //這meta的作用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
          十、
          蘋果web app其他設置：
           1).<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
           說明：這個link就是設置web app的放置主屏幕上icon文件路徑。
           使用：該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。圖片尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）。
           2).<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
           說明：這個link就是設置啟動時候的界面（圖片五），放置的路勁和上面類似。
           使用：該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。官方規定啟動界面的尺寸必須為 320*640（px），原本以為Retina屏幕可以支持雙倍，但是不支持，圖片顯示不出來。
          十一、
          <META NAME="MobileOptimized" CONTENT="240">
          //瀏覽器不會自動調整文件的大小,也就是說是固定大小,不會隨著瀏覽器拉伸縮放。
          想了解更多，請關注訂閱我們的頭條號：IT點點滴，每天更新一篇您身邊的IT點點滴
          • 統布局會用到margin，float，position。
          • 這個例子，我用flex，彈性布局。
          • 完成這個例子有三個文件，兩個圖片是我用ps做的，大的有640*1040，小的是300*300，其實大小無所謂，關鍵還是在布局。
          一、先看一下完成后的界面，我不想搞太多圖，因為我的PS水平一般，這個標識圖還是從wps里拿來的，好了，重點在布局。
          • 根據圖片，我規劃為flex的列布局，我也劃分了比例，大概如下圖：
          二、做個盒子main，它就是主要的盒子。
          • 用谷歌瀏覽器或是其它瀏覽器，F12進入控制臺，調用手機預覽界面。
          三、你會發現這個手機界面紅色滿屏，可惜有間隙，問題在body，我們去掉它。
          • margin為0就能去掉間隙。
          • 間隙沒有了。
          四、開始放各個盒子了，數了一下，一共五個，用flex排列好，為了區分，我加了背景色和1個像素的間隔，你們會發現，這五個盒子擠在了一起，因為他們沒有分配比例，也就是還沒有彈性。
          五、這些盒子都沒有按比例布滿它們的父盒子main，給它們加flex樣式，按原先我標的比例分配添加樣式。
          • 確實得出了比例是2：2：3：2：1。
          六、盒子都弄好了，可以放東西了，把原先的背景色去掉，放main盒子的背景。
          七、在2的位置放兩行字和圖片。
          • 重新把box命名為box1,box2……
          • 你會發現兩行字太貼左邊了，于是加padding。
          • h3和h5分得太開，用相對定位調整一下。
          八、做第三塊，放帳號密碼輸入框，讓它們水平居中。
          九、賬號和密碼間間隔開，然后在密碼右下角加上“忘記密碼”字樣，調整位置。
          十、加登錄按鈕。
          十一、加上最后一行字，就完成整個網頁的制作了，在這個網頁的制作中，我沒有做后臺數據處理，只為布局而界面，甚至于里面的鏈接都沒加上空鏈接，希望大家不要介意。
          • 圖片素材在這里：
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
在线视频一区二区|
无码人妻一区二区三区免费视频
|
国内自拍视频一区二区三区|
波多野结衣电影区一区二区三区|
色窝窝无码一区二区三区成人网站|
日韩精品一区二三区中文|
国产精品无码亚洲一区二区三区
|
性色AV 一区二区三区|
国产一区二区在线观看|
国产精品高清一区二区人妖
|
国产日韩视频一区|
国产精品区一区二区三|
国产精品亚洲一区二区三区
|
中文字幕av一区|
久久人做人爽一区二区三区|
无码少妇一区二区三区浪潮AV|
国模吧无码一区二区三区|
福利一区国产原创多挂探花|
免费人人潮人人爽一区二区|
国产亚洲福利精品一区二区|
国产精品盗摄一区二区在线|
精品一区二区三区视频|
日韩精品无码Av一区二区|
亚洲一区二区三区免费观看|
人妻AV中文字幕一区二区三区|
少妇无码一区二区三区|
无码精品人妻一区二区三区漫画|
无码AV中文一区二区三区|
2021国产精品一区二区在线|
精品香蕉一区二区三区|
日本高清天码一区在线播放|
美女免费视频一区二区|
红桃AV一区二区三区在线无码AV|
免费一区二区无码东京热|
亚洲国产精品一区|
精品国产一区在线观看|
亚洲国产高清在线一区二区三区|
成人免费区一区二区三区|
精品一区二区三区四区在线播放|
亚洲av无码成人影院一区|
亚洲毛片不卡av在线播放一区|