整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML頭部 <head>

          lt;title> - 定義了HTML文檔的標題

          使用 <title> 標簽定義HTML文檔的標題

          <base> - 定義了所有鏈接的URL

          使用 <base> 定義頁面中所有鏈接默認的鏈接目標地址。

          <meta> - 提供了HTML文檔的meta標記

          使用 <meta> 元素來描述HTML文檔的描述,關(guān)鍵詞,作者,字符集等。

          HTML <head> 元素

          <head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。

          可以添加在頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

          HTML <title> 元素

          <title> 標簽定義了不同文檔的標題。

          <title> 在 HTML/XHTML 文檔中是必須的。

          <title> 元素:

          • 定義了瀏覽器工具欄的標題

          • 當(dāng)網(wǎng)頁添加到收藏夾時,顯示在收藏夾中的標題

          • 顯示在搜索引擎結(jié)果頁面的標題

          一個簡單的 HTML 文檔:

          <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文檔標題</title></head><body>文檔內(nèi)容......</body></html>

          HTML <base> 元素

          <base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

          <head>

          <base target="_blank">

          </head>

          HTML <link> 元素

          <link> 標簽定義了文檔與外部資源之間的關(guān)系。

          <link> 標簽通常用于鏈接到樣式表:

          <head>

          <link rel="stylesheet" type="text/css" href="mystyle.css">

          </head>

          HTML <style> 元素

          <style> 標簽定義了HTML文檔的樣式文件引用地址.

          在<style> 元素中你需要指定樣式文件來渲染HTML文檔:

          <head>

          <style type="text/css">

          body {background-color:yellow}

          p {color:blue}

          </style>

          </head>

          HTML <meta> 元素

          meta標簽描述了一些基本的元數(shù)據(jù)。

          <meta> 標簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上,但會被瀏覽器解析。

          META元素通常用于指定網(wǎng)頁的描述,關(guān)鍵詞,文件的最后修改時間,作者,和其他元數(shù)據(jù)。

          元數(shù)據(jù)可以使用于瀏覽器(如何顯示內(nèi)容或重新加載頁面),搜索引擎(關(guān)鍵詞),或其他Web服務(wù)。

          <meta>一般放置于 <head>區(qū)域

          <meta> 標簽- 使用實例

          為搜索引擎定義關(guān)鍵詞:

          <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

          為網(wǎng)頁定義描述內(nèi)容:

          <meta name="description" content="Free Web tutorials on HTML and CSS">

          定義網(wǎng)頁作者:

          <meta name="author" content="Hege Refsnes">

          每30秒中刷新當(dāng)前頁面:

          <meta http-equiv="refresh" content="30">

          HTML <script> 元素

          <script>標簽用于加載腳本文件,如: JavaScript。

          <script> 元素在以下章節(jié)會詳細描述。

          HTML head 元素

          標簽描述
          <head>定義了文檔的信息
          <title>定義了文檔的標題
          <base>定義了頁面鏈接標簽的默認鏈接地址
          <link>定義了一個文檔和外部資源之間的關(guān)系
          <meta>定義了HTML文檔中的元數(shù)據(jù)
          <script>定義了客戶端的腳本文件
          <style>定義了HTML文檔的樣式文件

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          管現(xiàn)代Web開發(fā)更加依賴于各種MVC框架,但是開發(fā)者仍然需要對HTML和DOM有基本的了解。然而,即使對有多年經(jīng)驗的前端開發(fā)人員來說,也會遇到一些不知道的情況。

          HTML頭部元素描述

          HTML<head>元素用作元數(shù)據(jù)(關(guān)于數(shù)據(jù)的數(shù)據(jù))的容器。它用在<html>標簽和<body>標簽之間。

          HTML文檔的頭部內(nèi)容在頁面加載時不會顯示在瀏覽器中。它僅包含有關(guān)HTML文檔的元數(shù)據(jù)。

          元數(shù)據(jù)定義HTML文檔的標題,字符集,樣式,鏈接,腳本和其他元信息。

          HTML頭部可以包含很多元數(shù)據(jù)信息,也可以很少或沒有信息,這取決于我們的需求。但是頭部對HTML文檔至關(guān)重要。

          HTML<head>元素

          <head>元素包含了所有的頭部標簽元素。在<head>元素中你可以插入腳本(scripts),樣式文件(CSS),及各種meta信息。

          可以添加在頭部區(qū)域的元素標簽為:<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。

          HTML<title>元素

          HTML<title>元素用于定義文檔的標題。它在所有HTML/XHTML文檔中使用。<title>元素必須放在<head>元素之間,并且一個文檔只能有一個title元素。

          <title>元素作用

          它定義了瀏覽器選項卡中的標題。

          當(dāng)用戶將頁面添加到收藏夾時,它為頁面提供標題。

          它在搜索引擎結(jié)果中顯示頁面的標題。

          示例代碼

          <!DOCTYPE html>
          <html>
              <head>
                  <meta charset="utf-8">
                  <title>文檔標題</title>
              </head>
              <body>文檔內(nèi)容......</body>
          </html>12345678復(fù)制代碼類型:[html]

          HTML<base>元素

          <base>標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

          <head>
          <base href="http://www.runoon.com/images/" target="_blank">
          </head>123復(fù)制代碼類型:[html]

          HTML<link>元素

          HTML<link>元素用于將外部樣式表鏈接到您的網(wǎng)頁。<link>元素包含兩個主要屬性,即“rel”和“href”。rel屬性表示它是一個樣式表,href給出該外部文件的路徑。

          <head>
          <link rel="stylesheet" type="text/css" href="mystyle.css">
          </head>123復(fù)制代碼類型:[html]

          HTML<style>元素

          HTML<style>元素用于為HTML頁面設(shè)置樣式。<style>元素只影響當(dāng)前頁面HTML頁面的CSS屬性。如果要對多個頁面應(yīng)用CSS,則應(yīng)使用單獨的CSS文件。

          <head>
              <style type="text/css">body {background-color:yellow} p {color:blue}</style>
          </head>123復(fù)制代碼類型:[html]

          HTML<meta>元素

          HTML<meta>元素用于指定網(wǎng)頁上的字符集,頁面描述,關(guān)鍵字,作者和其他元數(shù)據(jù)。

          搜索引擎和其他Web服務(wù)使用元數(shù)據(jù)來更好地對網(wǎng)頁進行排名。

          <meta>標簽提供的元數(shù)據(jù)不顯示在頁面上,但會被瀏覽器解析。

          <meta>一般放置于<head>區(qū)域。

          <meta>標簽定義字符集:

          <meta charset="UTF-8">  1復(fù)制代碼類型:[html]

          charset屬性指定字符編碼。在此示例中,我們將其設(shè)置為“UTF-8”,這意味著它可以顯示任何語言。

          <meta>標簽定義搜索引擎關(guān)鍵詞:

          <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">1復(fù)制代碼類型:[html]

          <meta>標簽定義網(wǎng)頁描述內(nèi)容:

          <meta name="description" content="免費 Web & 編程 教程">1復(fù)制代碼類型:[html]

          <meta>標簽定義網(wǎng)頁作者:

          <meta name="author" content="Runoon">1復(fù)制代碼類型:[html]

          <meta>標簽定義每30秒鐘刷新頁面:

          <meta http-equiv="refresh" content="30">1復(fù)制代碼類型:[html]

          元刷新用于向瀏覽器提供指令,以在給定的時間間隔后自動刷新頁面。如上例所示,它將在30秒后自動刷新。

          <meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html>1復(fù)制代碼類型:[html]

          如果添加了URL,則在指定時間結(jié)束后重定向到該頁面。

          <meta>標簽定義設(shè)備尺寸

          HTML5中引入了此方法,以通過使用<meta>標簽來控制視窗大小。視窗是用戶在網(wǎng)頁上的可見區(qū)域。它隨設(shè)備的不同而變化,在手機上的顯示尺寸明顯小于計算機屏幕。

          <meta name="viewport" content="width=device-width, initial-scale=1.0">  1復(fù)制代碼類型:[html]

          <meta>視窗元素如何設(shè)定和控制頁面的尺寸和縮放比例。

          width=device-width是用來設(shè)置頁面的寬度將與設(shè)備的屏幕寬度保持一致。

          當(dāng)最初由瀏覽器加載頁面時,initial-scale=1.0用于設(shè)置初始縮放級別。

          HTML<script>元素

          <script>標簽用于加載腳本文件,如:JavaScript。

          <script>元素在以后的章節(jié)中會詳細描述。

          HTMLhead元素

          標簽

          描述

          <head>

          定義了文檔的信息

          <title>

          定義了文檔的標題

          <base>

          定義了頁面鏈接標簽的默認鏈接地址

          <link>

          定義了一個文檔和外部資源之間的關(guān)系

          <meta>

          定義了HTML文檔中的元數(shù)據(jù)

          <script>

          定義了客戶端的腳本文件

          <style>

          定義了HTML文檔的樣式文件

          「鏈接」

          、定義

          <meta> 標簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內(nèi)容或重新加載頁面),搜索引擎(關(guān)鍵詞),或其他 web 服務(wù)。

          2、作用

          meta里的數(shù)據(jù)是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務(wù)器發(fā)送到瀏覽器的http頭部內(nèi)容,例如我們?yōu)轫撁嬷刑砑尤缦耺eta標簽:


          1. <meta http-equiv="charset" content="iso-8859-1">
          2. <meta http-equiv="expires" content="31 Dec 2008">

          瀏覽器的頭部就會包括這些:


          1. charset:iso-8859-1
          2. expires:31 Dec 2008

          只有瀏覽器可以接受這些附加的頭部字段,并能以適當(dāng)?shù)姆绞绞褂盟鼈儠r,這些字段才有意義。

          3、meta的必需屬性和可選屬性

          meta的必需屬性是content,當(dāng)然并不是說meta標簽里一定要有content,而是當(dāng)有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頭部內(nèi)容,對一些自定義的,或者需要額外添加的http頭部內(nèi)容,需要發(fā)送到瀏覽器中,我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明,那么現(xiàn)在再舉個例子。例如我們不想使用js來重定向,用http頭部內(nèi)容控制,那么就可以這樣控制:

          <meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

          在頁面中加入這個后,5秒鐘后就會跳轉(zhuǎn)到指定頁面啦,效果可看W3school的例子

          name

          第二個可選屬性是name,這個屬性是供瀏覽器進行解析,對于一些瀏覽器兼容性問題,name屬性是最常用的,當(dāng)然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以,不然就是沒有意義的。還是舉個例子吧:

          <meta name="renderer" content="webkit">

          這個meta標簽的意思就是告訴瀏覽器,用webkit內(nèi)核進行解析,當(dāng)然前提是瀏覽器有webkit內(nèi)核才可以,不然就是沒有意義的啦。當(dāng)然看到這個你可能會有疑問,這個renderer是從哪里冒出來的,我要怎么知道呢?這個就是在對應(yīng)的瀏覽器的開發(fā)文檔里就會有表明的,例如這個renderer是在360瀏覽器里說明的。360瀏覽器內(nèi)核控制Meta標簽說明文檔

          常用meta標簽大總結(jié)

          接下來就是常用的meta標簽大總結(jié)啦,我會盡可能的做到全

          charset

          charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,值得一提的是,這個charset一定要寫第一行,不然就可能會產(chǎn)生亂碼了。

          charset有兩種寫法


          1. <meta charset="utf-8">
          2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          兩個都是等效的。

          百度禁止轉(zhuǎn)碼

          百度會自動對網(wǎng)頁進行轉(zhuǎn)碼,這個標簽是禁止百度的自動轉(zhuǎn)碼

          <meta http-equiv="Cache-Control" content="no-siteapp" />

          SEO 優(yōu)化部分


          1. <!-- 頁面標題<title>標簽(head 頭部必須) -->
          2. <title>your title</title>
          3. <!-- 頁面關(guān)鍵詞 keywords -->
          4. <meta name="keywords" content="your keywords">
          5. <!-- 頁面描述內(nèi)容 description -->
          6. <meta name="description" content="your description">
          7. <!-- 定義網(wǎng)頁作者 author -->
          8. <meta name="author" content="author,email address">
          9. <!-- 定義網(wǎng)頁搜索引擎索引方式,robotterms 是一組使用英文逗號「,」分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。 -->
          10. <meta name="robots" content="index,follow">

          viewport

          viewport主要是影響移動端頁面布局的,例如:


          1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

          content 參數(shù):

          • width viewport 寬度(數(shù)值/device-width)
          • height viewport 高度(數(shù)值/device-height)
          • initial-scale 初始縮放比例
          • maximum-scale 最大縮放比例
          • minimum-scale 最小縮放比例
          • user-scalable 是否允許用戶縮放(yes/no)

          各瀏覽器平臺

          Microsoft Internet Explorer


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

          Google Chrome


          1. <!-- 優(yōu)先使用最新的chrome版本 -->
          2. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
          3. <!-- 禁止自動翻譯 -->
          4. <meta name="google" value="notranslate">

          360瀏覽器


          1. <!-- 選擇使用的瀏覽器解析內(nèi)核 -->
          2. <meta name="renderer" content="webkit|ie-comp|ie-stand">

          UC手機瀏覽器

          UCBrowser_U3_API

          QQ手機瀏覽器


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

          Apple iOS


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

          Google Android


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

          App Links


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

          最后——移動端常用的meta


          1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          2. <meta name="apple-mobile-web-app-capable" content="yes" />
          3. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
          4. <meta name="format-detection"content="telephone=no, email=no" />
          5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          6. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 -->
          7. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設(shè)置蘋果工具欄顏色 -->
          8. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數(shù)字識別為電話,忽略email識別 -->
          9. <!-- 啟用360瀏覽器的極速模式(webkit) -->
          10. <meta name="renderer" content="webkit">
          11. <!-- 避免IE使用兼容模式 -->
          12. <meta http-equiv="X-UA-Compatible" content="IE=edge">
          13. <!-- 針對手持設(shè)備優(yōu)化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 -->
          14. <meta name="HandheldFriendly" content="true">
          15. <!-- 微軟的老式瀏覽器 -->
          16. <meta name="MobileOptimized" content="320">
          17. <!-- uc強制豎屏 -->
          18. <meta name="screen-orientation" content="portrait">
          19. <!-- QQ強制豎屏 -->
          20. <meta name="x5-orientation" content="portrait">
          21. <!-- UC強制全屏 -->
          22. <meta name="full-screen" content="yes">
          23. <!-- QQ強制全屏 -->
          24. <meta name="x5-fullscreen" content="true">
          25. <!-- UC應(yīng)用模式 -->
          26. <meta name="browsermode" content="application">
          27. <!-- QQ應(yīng)用模式 -->
          28. <meta name="x5-page-mode" content="app">
          29. <!-- windows phone 點擊無高光 -->
          30. <meta name="msapplication-tap-highlight" content="no">
          31. <!-- 適應(yīng)移動端end -->

          主站蜘蛛池模板: 一区二区高清在线| 久久精品国产一区二区| 三上悠亚亚洲一区高清| 福利一区二区三区视频午夜观看| 亚洲Av无码国产一区二区| 春暖花开亚洲性无区一区二区| 日韩精品无码久久一区二区三| 国产色欲AV一区二区三区| 女同一区二区在线观看| 日本在线电影一区二区三区| 精品人妻一区二区三区四区在线| 一区二区免费电影| 成人午夜视频精品一区| 精品国产日产一区二区三区| 爆乳熟妇一区二区三区霸乳| 在线视频一区二区三区三区不卡| 国产91精品一区二区麻豆亚洲| 久久久久久一区国产精品| 日韩精品无码免费一区二区三区| 无码一区二区三区老色鬼| 亚洲综合一区二区| 久久人妻无码一区二区| 国产福利电影一区二区三区| 中文字幕精品一区二区日本| 国产精品综合一区二区| 亚洲一区二区影视| 亚洲日韩激情无码一区| 国产一区二区三区内射高清| 台湾无码一区二区| 精品人妻少妇一区二区| 麻豆国产在线不卡一区二区| 精品国产亚洲一区二区在线观看 | 极品少妇一区二区三区四区| 国产精品一区三区| 日本一区二区三区久久| 国产午夜精品一区理论片飘花| 韩国精品一区二区三区无码视频| 亚洲一区无码精品色| 精品视频在线观看一区二区| 亚洲一区欧洲一区| 激情一区二区三区|