整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標
head標簽處于html結構里的第一層。
他的作用是記錄和設置了這個HTML文件的很多有用的信息，比如網頁標題的設置、網頁的字符編碼，網頁是否啟用緩存，選擇啟用瀏覽器內核等等，還可以引用腳本方式來減少代碼量。
head的位置
Meta標簽的屬性分成兩個：name和http-equiv
主要用于描述網頁，比如定義網頁的關鍵詞，關鍵敘述、標注作者、標注版權等。
基本語法：
name屬性基本語法
常用的屬性：
說明：用于告訴搜索引擎，你網頁的關鍵字。
<meta name="keywords" content="我是前端旺">
說明：用于告訴搜索引擎，你網站的主要內容。
<meta name="description" content="前端旺，免費學習前端的好地方">
說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。
<meta name="robots" content="none">
說明：用于標注網頁作者舉例
<meta name="author" content="前端旺,296699783@qq.com">
說明：用于標明網頁是什么軟件做的舉例
<meta name="generator" content="Hbuilder">
說明：用于標注版權信息舉例：
<meta name="copyright" content="前端旺">
說明：renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。
<meta name="renderer" content="webkit"> //默認webkit內核 <meta name="renderer" content="ie-comp"> //默認IE兼容模式 <meta name="renderer" content="ie-stand"> //默認IE標準模式
主要用于描述網頁，比如定義網頁的關鍵詞，關鍵敘述、標注作者、標注版權等。
基本語法：
http-equiv屬性基本語法
常用的屬性：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦 <meta charset="utf-8"> //HTML5設定網頁字符集的方式，推薦使用UTF-8
說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設置為最新模式）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面
說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Set-Cookie" content="name, date"> //格式
head標簽的作用
更多前端教程，敬請關注微信公眾號：前端旺
通過之前三節的學習，我們基本了解了HTML標記語言的基本語法，也明確了一個基本原則，那就是網頁中所有的可視信息都是寫在<body></body>標簽之間的，在一文中，我們為第一個頁面添加了"標題"與"段落"標簽，實際上，未來我們要說到的圖片、音頻、視頻、表格以及區塊等元素也是放在<body></body>標簽之間的。
但是與<body></body>標簽并列的<head></head>標簽對于整個頁面有什么作用呢？
Head就是頭的意思，body是身體的意思。如果html頁面是個人的話，我們看到的都是他的外表，比如發型、衣服等，這些都是穿在body（身體）上的，而這個人的服飾風格卻與他的性格、教育程度、思維方式相關，這些是我們看不到的，是裝在這個人的head（頭）中的。因為腦袋中的觀念不同，因此有人喜歡漢服，有人喜歡唐裝。
一言以蔽之，<head>標簽的作用是把控HTML頁面的顯示形式。
在<head>標簽中添加<title></title>標簽為網頁指定顯示在瀏覽器小窗口上的名字。代碼示例如下：
<title>第一個網頁</title>
圖1
不要小看title標簽，搜索引擎非常看重title標簽中的文字信息，再進行關鍵字比對時，title中的文字占有較大權重。因此，認真選擇title內容對你的頁面是否能迅速被搜索引擎找到有著重要意義。關于搜索關鍵字我們會在下一節練習中再細致分析。
添加<link>標簽為HTML頁面引入圖標、JavaScript腳本、CSS樣式文件等。針對JavaScript腳本的引入，還有另外一個<script></script>標簽可用。導入CSS樣式文件也可以使用<style></style>標簽，這個在學完HTML之后才會接觸到，現在了解就可以。
通過以上學習我們知道了<head>標簽中通常添加<title></title>,<link>以及<script></script>,<style></style>等標簽。這些標簽控制著html文件的通用圖標引入、布局樣式引入、交互腳本引入等功能。
如果頁面都是給body穿上衣服，而穿什么樣的衣服，如何搭配等因素缺是由head里的內容決定。
在<head>標簽中還有一個非常重要的<meta>標簽（metadata：元數據，名字讀不懂沒關系，關鍵是怎么使用），這個標簽可以為整個頁面指定名稱、被搜索時的關鍵字以及非常重要的文檔字符編碼功能。
在指定文檔編碼時，經常使用"utf-8"編碼方式。
utf-8編碼方式賦予了html頁面顯示中文（或其他非英文文字）的能力。這對今天的互聯網世界來說是非常重要的功能。
utf-8這個重要的編碼方式就在<head>標簽中的<meta>標簽中指定的。寫法如下：
<head><meta charset="utf-8"><title>第一個網頁</title></head><meta>標簽不同于其他成對的標簽，它是個單身漢，只有這一個標簽，沒有帶有"/"符號的結尾標簽。原因有兩點；1.通常<meta>標簽中不需要添加內容。2.使用<meta>標簽只改變他的屬性即可。什么叫"屬性"呢？
大家看這行代碼：<meta charset="utf-8">
"charset"就叫做<meta>標簽中指定字符編碼方式的屬性。
在"charset"后面加"="號，這叫做指定屬性值。
大家注意，指定的這個值叫"utf-8"，切記！utf-8兩邊要加引號！
下面我們就目前可以看明白的<meta>屬性進行一下操作練習。
開始練習之前大家肯定有這樣一個問題（沒想到也沒關系），那就是在之前的案例中，那個簡單的網頁并沒有指定utf-8的字符編碼方式，為什么頁面的漢字照常顯示了？
這其實是瀏覽器本身在后臺為我們補齊了這段代碼。我使用的是聯想自帶的瀏覽器，使用火狐、Google瀏覽器的小伙伴們估計也可以正常顯示，如果使用低版本的ie瀏覽器，則無法正常顯示。因為低版本的ie瀏覽器不具備補齊這段代碼的功能。
關于meta標簽與utf-8的編碼方式先介紹到這里，下一節我們會在不同瀏覽器中測試添加utf-8或不添加utf-8的不同顯示效果，并講解meta標簽中keyword（關鍵字）的使用方法。
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
前言：
在第一篇教程中我們介紹了前端流行的開發工具和前端語言的基本介紹，今天開始html教程
自從xhtml出現之后，傳統的html已經被取代，隨便打開一個網頁，瀏覽網頁源碼,第一行里面一般都是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或者<!DOCTYPE HTML>等
標簽里面的!DOCTYPE聲明了文檔類型，告訴了瀏覽器應該如何顯示網頁
<!DOCTYPE html>代表文檔是html5類型文檔
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
代表文檔是XHTML1.0類型的文檔
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
代表文檔是XHTML4.01文檔
<html><head><title></title></head><body><h1>沒有聲明文檔類型的html</body></html>
那么我們在語法不嚴謹的時候，比如：<h1>標簽后面沒有結束標簽，瀏覽器也會解析文檔，這樣的后果就是不同類型的瀏覽器，顯示會有所不同，嚴重的話造成文檔不能解析，聲明文檔類型后瀏覽器會對文檔標簽(元素)進行了語法檢查，不會出現這樣的問題，這是一個良好的習慣，一定要在文檔第一行聲明文檔類型！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>元數據標簽</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <meta name="keywords" content="關鍵字" /> <meta name="description" content="描述"/> <link rel=”stylesheet” type=”text/css”href=”./css/style.csss”/> <script type=”text/javascript” src=”./js/common.js”></script> </head> <body> </body> </html>
Head標簽里面一般有3塊主要內容組成:
作用： 告訴瀏覽器當前文檔的標題，訪問者可以在瀏覽器窗口標題看到的內容
charset文檔頁面編碼我們最常見的有utf-8國際化編碼，中文編碼gbk,簡體中文gb2312,繁體中文 Big5，日文 EUC-JP，韓文 EUC-KR 等。
我們做網頁時，如果指定的 Charset 是 GB2312，那么就不應該在網頁中出現繁體字，因為 GB2312 標準只有幾千個簡體的中文字。如果我們的網頁編碼是 UTF-8，我們就不要指定字符集是 GB2312，因為雖然 UTF-8 編碼對應的 UTF-8 字符集包含了 GB2312 的字符，但同一個字符在兩個字符集中的編號不一樣。
下面這些編碼方式，比如：中文 GBK ，繁體中文 Big5，日文 EUC-JP，韓文 EUC-KR 等，每種語言的編碼方式是不同的，所以需要使用charset為網頁提供了一種編碼方式，否則頁面很可能出現亂碼。
字符編碼
UTF-8 是國際字符編碼，也就是獨立于任何一種語言，任何語言都可以使用。
UTF－8編碼則是用以解決國際上字符的一種多字節編碼，它對英文使用8位（即一個字節），中文使用24位（三個字節）來編碼。對于英文字符較多的論壇則用UTF－8節省空間。GBK包含全部中文字符；UTF-8則包含全世界所有國家需要用到的字符。GBK是在國家標準GB2312基礎上擴容后兼容GB2312的標準（好像還不是國家標準）UTF-8編碼的文字可以在各國各種支持UTF8字符集的瀏覽器上顯示。比如，如果是UTF8編碼，則在外國人的英文IE上也能顯示中文，而無需他們下載IE的中文語言支持包。 所以，對于英文比較多的論壇 ，使用GBK則每個字符占用2個字節，而使用UTF－8英文卻只占一個字節。UTF8是國際編碼，它的通用性比較好，外國人也可以瀏覽論壇，GBK是國家編碼，通用性比UTF8差，不過UTF8占用的數據庫比GBK大。
這里有必要簡述一下幾種中文字體的區別： GB2312，GBK，GB18030。這是市面上GB系列三種中文的編碼方式，三者越往后形成越晚，字符越多（后面版本全部兼容之前版本）。GB2312只支持簡體，共7445個字符。GBK有21886個漢字字符，支持繁體中文，GB18030就更多，甚至支持一些少數民族文字，是現在非手持跟植入式設備標準。現在仍有很多手持設備是GB2312的標準。這種情況用GB18030解碼就會出現錯誤。
由此可見，我們在做頁面的時候指定編碼優先選擇ut-8。
Viewport是頁面可視化寬度，一般我們指定屬性值content="width=device-width,initial-scale=1.0"，意思是可視化寬度等于設備的寬度，比如顯示器，平板，手機，initial-scale=1.0指初始縮放比例是1:1，這點我們以后再設計移動端自適應的時候很有用！
Keywords指的是當前頁面關鍵字，description指當前頁面描述，他們在做SEO的時候非常關鍵
<link rel=”stylesheet” type=”text/css”href=”./css/style.csss”/>
指定了當前頁面(和文檔一個意思)所引用的樣式表地址，這個地址可以是絕對路徑，也可以是相對路徑，也可以是url 遠程路徑。
絕對路徑是指絕對的不可更改的路徑，比如D:\css\style.css,因為缺乏靈活性，我們實戰中不要使用
相對路徑是指從當前路徑出發，找到目的的那個路徑，比如:
<link href=“../css/style.css" rel="stylesheet" />
指的是從當前路徑出發，進入上級路徑(..\),搜索文件夾css,尋找style.css文件
指定相對路徑的方法我們會經常使用，優點是：路徑靈活，在web項目遷移的時候無需關注css文件夾絕對路徑的改變，因為這個文檔和樣式文件是相對路徑的關系；另外一個優點是修改方便，因為style.css在本地，可以隨意定制。缺點是瀏覽器解析文檔的時候會下載這個css文件，占用一定的網絡流量，因為每個瀏覽者瀏覽頁面的時候，瀏覽者的瀏覽器都會下載解析當前頁面的所有文件，你的css文件有多大，就要使用web服務器上面多少流量
Ulr遠程路徑指文件不在本地，而是在遠程路徑上面，比如:
<link rel="stylesheet" />
代表的就是引用了遠程地址的css文件，優點是不需要耗費本地服務器流量，加載速度也快，這種行為我們一般稱之為公眾cdn資源加速或者公眾鏡像資源
文件，缺點是樣式文件沒有在本地，我們無法修改定制，靈活性差一點。一般情況下，我們使用各種前端框架的時候會使用這種方法。當然你可能較真說我有覆蓋大法，這牽扯到樣式作用優先級問題，我們在css篇章詳細再談！
<script type=”text/javascript” src=”./js/common.js”></script>
指的是當前頁面所用的腳本文件，type=”text/javascript”制定了網頁所使用的腳本類型是javascript,我們來思考一下，平時我們見到的引用腳本都是type=”text/javascirpt”,根據第一節中我們知道腳本中還有微軟的jsscript，我們可否使用type=”text/jsscirpt”那？我在網上找了很久，沒有找到答案，jsscript僅指支持IE瀏覽器，通用性不強，而且語法上和javascript存在較大的差異，現在網絡上面js默認指的就是javascript，我們權當jsscirpt是歷史中一粒塵土罷了
Src=”./js/common.js”指定了引用腳本的文件所在地址，原理和引用css一樣，分為絕對路徑，相對路徑和遠程url引用，我們這里不再贅述。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
