當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5 head 标签

發(fā)布時間：2024/4/15 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 html5 head 标签小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、html lang 屬性

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

二、meta 標(biāo)簽

1.聲明文檔使用的字符編碼
- <meta charset="utf-8"> 用于 HTML5
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 用于 HTML4 或者 XHTML 或用于過時的 dom 解析器
通常我們會使用短的。實(shí)際上，在 HTML5 中，以上兩種是等價的，只是短的更容易被記住。更多對比見 stackoverflow
2.優(yōu)先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 復(fù)制代碼
3.360 使用 Google Chrome Frame
 <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> 復(fù)制代碼
具體詳情見 360 瀏覽器內(nèi)核控制
 <meta name="renderer" content="webkit"> <meta name="force-rendering" content="webkit"> 復(fù)制代碼
4.百度禁止轉(zhuǎn)碼在使用百度移動搜索時，百度會自動將網(wǎng)站進(jìn)行轉(zhuǎn)碼，添加一些煩人的廣告，如果我們不做百度廣告，是可以通過 meta 標(biāo)簽禁止網(wǎng)站被轉(zhuǎn)碼
<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" />  <meta name="applicable-device" content="pc,mobile"> 復(fù)制代碼
相關(guān)網(wǎng)站:
- 百度移動搜索
- 起飛頁網(wǎng)站
- 博客
5.SEO 優(yōu)化
- 頁面標(biāo)題 title
<title>your title</title> 復(fù)制代碼
- 頁面關(guān)鍵詞 keywords
<meta name="keywords" content="your keywords"> 復(fù)制代碼
- 頁面描述內(nèi)容 description
<meta name="description" content="your description"> 復(fù)制代碼
- 定義網(wǎng)頁作者 author
<meta name="author" content="author,email address"> 復(fù)制代碼
- 定義網(wǎng)頁搜索引擎索引方式 SEO--Robots
<meta name="robots" content="index,follow"> 復(fù)制代碼
6.為移動設(shè)備添加 viewport,可以讓布局在移動瀏覽器上顯示的更好
<metaname ="viewport"content ="width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=no" > 復(fù)制代碼
width=device-width 會導(dǎo)致 iPhone5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊

注意： minimal-ui iOS8 中已經(jīng)刪除
7.ios 設(shè)備
- 添加到主屏后的標(biāo)題（iOS 6 新增）
<meta name="apple-mobile-web-app-title" content="標(biāo)題"> 復(fù)制代碼
- 是否啟用 WebApp 全屏模式，刪除蘋果默認(rèn)的工具欄和菜單欄
<meta name="apple-mobile-web-app-capable" content="yes"/> 復(fù)制代碼
- 設(shè)置狀態(tài)欄的背景顏色
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 復(fù)制代碼
content 參數(shù)
default 默認(rèn)值。 black 狀態(tài)欄背景是黑色。 black-translucent 狀態(tài)欄背景是黑色半透明。如果設(shè)置為 default 或 black ,網(wǎng)頁內(nèi)容從狀態(tài)欄底部開始。如果設(shè)置為 black-translucent ,網(wǎng)頁內(nèi)容充滿整個屏幕，頂部會被狀態(tài)欄遮擋。復(fù)制代碼
- 禁止數(shù)字識自動別為電話號碼
<meta name="format-detection" content="telephone=no" />  <meta name="format-detection" content="telephone=no,email=no" /> 復(fù)制代碼
- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）
<metaname="apple-itunes-app"content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" > 復(fù)制代碼
content 屬性可以傳三個參數(shù)，以逗號隔開:
app-id(必選) 填寫應(yīng)用在APPStrore的ID affiliate-data(可選) 是iTunes 分銷聯(lián)盟計(jì)劃的ID 一般用不到。 app-argument（可選）點(diǎn)擊『打開』給APP傳參數(shù) 復(fù)制代碼
8.關(guān)閉 chrome 瀏覽器下翻譯插件
<meta name="google" value="notranslate" /> 復(fù)制代碼
9.去除手機(jī)半透明背景
- ios 點(diǎn)擊鏈接，會出現(xiàn)一個半透明灰色遮罩
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 復(fù)制代碼
- android 點(diǎn)擊鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可以做一下設(shè)置去除部分機(jī)器自帶的效果
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 復(fù)制代碼
- windows phone 系統(tǒng)，點(diǎn)擊標(biāo)簽產(chǎn)生的灰色半透明背景，添加 meta 標(biāo)簽去除
<meta name="msapplication-tap-highlight" content="no"> 復(fù)制代碼
注意：部分機(jī)型可能去除不了，如果是按鈕，可以避免使用 a、input，使用 div 代替
10.刷新瀏覽器 content -- 時間;網(wǎng)址
<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com"> 復(fù)制代碼
11.強(qiáng)制豎屏與全屏 landscape -- 橫屏;portrait -- 豎屏
 <meta name="screen-orientation" content="portrait">  <meta name="x5-orientation" content="portrait">  <meta name="full-screen" content="yes">  <meta name="x5-fullscreen" content="true"> 復(fù)制代碼
12.應(yīng)用模式
 <meta name="browsermode" content="application">  <meta name="x5-page-mode" content="app"> 復(fù)制代碼
browsermode 作用：
 <meta name="layoutmode" content="fitscreen">  <meta name="imagemode" content="force">  <meta name="nightmode" content="disable">  <meta name="wap-font-scale" content="no"> 復(fù)制代碼
13.UC排版模式

UC 瀏覽器提供兩種排版模式，分別是適屏模式（fitscreen）及標(biāo)準(zhǔn)模式（standard），其中適屏模式簡化了一些頁面的處理，使得頁面內(nèi)容更適合進(jìn)行頁面閱讀、節(jié)省流量及響應(yīng)更快，而標(biāo)準(zhǔn)模式則能按照標(biāo)準(zhǔn)規(guī)范對頁面進(jìn)行排版及渲染。
<meta name="layoutmode" content="fitscreen|standard"> 復(fù)制代碼
14.cookie 設(shè)定指定時間后刪除
 <metahttp-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/" > 復(fù)制代碼

三、參考鏈接

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

标签
HEAD

上一篇：标准 I/O （带缓冲）
下一篇：智能检测营销是否合规，网易易盾发布广告合