html5 head 標籤

時間 2019-12-07

標籤 html5 html head 標籤欄目 HTML5 简体版

原文原文鏈接

1、html lang 屬性

之前咱們經常使用的是 <html lang="zh-CN"> 或簡寫的 <html lang="zh">，但實際上 W3 language tags 推薦使用 zh-Hans 簡體中文、zh-Hant 繁體中文，能夠提升一致性和準確。html

2、meta 標籤

1.聲明文檔使用的字符編碼android
- <meta charset="utf-8"> 用於 HTML5
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 用於 HTML4 或者 XHTML 或用於過期的 dom 解析器
一般咱們會使用短的。實際上，在 HTML5 中，以上兩種是等價的，只是短的更容易被記住。更多對比見 stackoverflowios

2.優先使用 IE 最新版本和 Chromegit

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
複製代碼

3.360 使用 Google Chrome Framegithub

<!-- 若是沒有安裝 GCF(Google Chrome Frame)，使用最高版本的IE內核渲染 -->
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
複製代碼

具體詳情見 360 瀏覽器內核控制web

<!-- 強制使用webkit渲染 -->
<meta name="renderer" content="webkit"> 
<meta name="force-rendering" content="webkit">
複製代碼

4.百度禁止轉碼在使用百度移動搜索時，百度會自動將網站進行轉碼，添加一些煩人的廣告，若是咱們不作百度廣告，是能夠經過 meta 標籤禁止網站被轉碼chrome
```
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="applicable-device" content="pc,mobile">
複製代碼
```
相關網站:windows

5.SEO 優化瀏覽器

頁面標題 title

<title>your title</title>
複製代碼

頁面關鍵詞 keywords

<meta name="keywords" content="your keywords">
複製代碼

頁面描述內容 description

<meta name="description" content="your description">
複製代碼

定義網頁做者 author

<meta name="author" content="author,email address">
複製代碼

定義網頁搜索引擎索引方式 SEO--Robots

<meta name="robots" content="index,follow">
複製代碼

6.爲移動設備添加 viewport,可讓佈局在移動瀏覽器上顯示的更好bash
```
<meta name ="viewport" content =" width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0, user-scalable=no " >
複製代碼
```
width=device-width 會致使 iPhone5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊

注意： minimal-ui iOS8 中已經刪除

7.ios 設備

添加到主屏後的標題（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="標題">
複製代碼

是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄

<meta name="apple-mobile-web-app-capable" content="yes"/>
複製代碼

設置狀態欄的背景顏色

<!-- 在 "apple-mobile-web-app-capable" content="yes" 時生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
複製代碼

content 參數

default 默認值。
black 狀態欄背景是黑色。
black-translucent 狀態欄背景是黑色半透明。
    若是設置爲 default 或 black ,網頁內容從狀態欄底部開始。
    若是設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。
複製代碼

禁止數字識自動別爲電話號碼

<meta name="format-detection" content="telephone=no" />
<!-- 電話號碼、郵箱 -->
<meta name="format-detection" content="telephone=no,email=no" />
複製代碼

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" > 
複製代碼

content 屬性能夠傳三個參數，以逗號隔開:

app-id(必選) 填寫應用在APPStrore的ID 
affiliate-data(可選) 是iTunes 分銷聯盟計劃的ID 通常用不到。
app-argument（可選）點擊『打開』給APP傳參數
複製代碼

8.關閉 chrome 瀏覽器下翻譯插件

<meta name="google" value="notranslate" />
複製代碼

9.去除手機半透明背景
- ios 點擊連接，會出現一個半透明灰色遮罩
```
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
複製代碼
```
- android 點擊連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，能夠作一下設置去除部分機器自帶的效果
```
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
複製代碼
```
- windows phone 系統，點擊標籤產生的灰色半透明背景，添加 meta 標籤去除
```
<meta name="msapplication-tap-highlight" content="no">
複製代碼
```
注意：部分機型可能去除不了，若是是按鈕，能夠避免使用 a、input，使用 div 代替

10.刷新瀏覽器 content -- 時間;網址

<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com">
複製代碼

11.強制豎屏與全屏 landscape -- 橫屏;portrait -- 豎屏

<!-- UC強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
複製代碼

12.應用模式

<!-- UC應用模式:默認全屏，禁止長按菜單，禁止手勢，標準排版，強制圖片顯示 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
複製代碼

browsermode 做用：

<!-- UC使用適屏模式顯示 -->
<meta name="layoutmode" content="fitscreen">
<!-- UC強制圖片顯示 -->
<meta name="imagemode" content="force">
<!-- UC禁止夜間模式顯示 enable|disable -->
<meta name="nightmode" content="disable">
<!-- UC當頁面有太多文字時禁止縮放 -->
<meta name="wap-font-scale" content="no">  
複製代碼

13.UC排版模式

UC 瀏覽器提供兩種排版模式，分別是適屏模式（fitscreen）及標準模式（standard），其中適屏模式簡化了一些頁面的處理，使得頁面內容更適合進行頁面閱讀、節省流量及響應更快，而標準模式則能按照標準規範對頁面進行排版及渲染。
```
<meta name="layoutmode" content="fitscreen|standard">
複製代碼
```

14.cookie 設定指定時間後刪除

<!-- Set-Cookie(cookie設定):若是網頁過時，那麼存盤的cookie將被刪除 GMT格式 -->
<meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/" >
複製代碼

3、參考連接

1. html5 head 標籤
2. 移動端頭部標籤(HTML5 Head Meta)
3. 移動端頭部標籤(HTML5 head meta)
4. HTML5中Head內標籤詳解(一)：meta標籤
5. head標籤
6. html head 標籤
7. head標籤-HTML5精講課時ID:6.3 【表嚴肅】#HTML教程 #HTML5教程 #head標籤
8. HTML5標籤1
9. html5 Audio標籤
10. HTML5 datalist 標籤
更多相關文章...
• Git 標籤 - Git 教程
• MyBatis if標籤 - MyBatis教程
• Github 簡明教程
• 算法總結-雙指針

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。