日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5 head 标签

發布時間：2024/4/15 编程问答 26 豆豆
生活随笔 收集整理的這篇文章主要介紹了 html5 head 标签 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、html lang 屬性

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

二、meta 標簽

  • 1.聲明文檔使用的字符編碼

    • <meta charset="utf-8"> 用于 HTML5
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 用于 HTML4 或者 XHTML 或用于過時的 dom 解析器

    通常我們會使用短的。實際上，在 HTML5 中，以上兩種是等價的，只是短的更容易被記住。更多對比見 stackoverflow

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

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

  • 3.360 使用 Google Chrome Frame

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

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

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

  • 4.百度禁止轉碼 在使用百度移動搜索時，百度會自動將網站進行轉碼，添加一些煩人的廣告，如果我們不做百度廣告，是可以通過 meta 標簽禁止網站被轉碼

    <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 表示頁面同時適合在移動設備和PC上進行瀏覽 --> <meta name="applicable-device" content="pc,mobile"> 復制代碼

    相關網站:

    • 百度移動搜索
    • 起飛頁網站
    • 博客

  • 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,可以讓布局在移動瀏覽器上顯示的更好

    <metaname ="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）
    <metaname="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格式 --> <metahttp-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/" > 復制代碼

三、參考鏈接

  • SEO--Robots
  • 移動端頭部 meta 大全

總結

以上是生活随笔為你收集整理的html5 head 标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。