重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄, 天天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的能夠加入winter的專欄學習【原文有winter的語音】,若有侵權請聯繫我,郵箱:kaimo313@foxmail.com。
元信息
,是指描述自身的信息。元信息類標籤
,就是HTML
用於描述文檔自身的一類標籤。
做爲盛放其它語義類標籤的容器使用。
一、head 標籤
規定了自身必須是 html 標籤
中的第一個標籤,它的內容必須包含一個 title
,而且最多隻能包含一個 base
。html
二、若是文檔做爲 iframe
,或者有其餘方式指定了文檔標題時,能夠容許不包含 title 標籤
。前端
title 標籤
表示文檔的標題,title
應該完整地歸納整個網頁內容的。
base 標籤
做用是給頁面上全部的 URL
相對地址提供一個基礎。
<html> <head> <base href="https://time.geekbang.org" target="_blank"/> </head> <body> <a href="">極客時間</a> </body> </html>
上面的代碼裏面a標籤
的屬性href
沒有值,可是當你點擊極客時間
,它就會新開一個頁面打開base標籤
裏的href
。web
meta 標籤
是一組鍵值對,它是一種通用的元信息表示標籤。
HTML5
開始meta
標籤新增charset
屬性的meta
標籤無需再有name 和 content
。
charset 型 meta 標籤很是關鍵
,它描述了 HTML 文檔自身的編碼形式。建議放在 head
的第一個。chrome
<html> <head> <meta charset="UTF-8"> ……
具備http-equiv
屬性的meta
標籤,表示執行一個命令,能夠不須要name
屬性。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
其餘命令:瀏覽器
content-language
:指定內容的語言default-style
:指定默認樣式表refresh
:刷新set-cookie
:模擬 http 頭 set-cookie
,設置 cookie
x-ua-compatible
:模擬 http 頭 x-ua-compatible
,聲明 ua
兼容性content-security-policy
:模擬 http 頭 content-security-policy
,聲明內容安全策略<meta name="viewport" content="width=500, initial-scale=1">
width
:頁面寬度,能夠取值具體的數字,也能夠是 device-width
,表示跟設備寬度相等。height
:頁面高度,能夠取值具體的數字,也能夠是 device-height
,表示跟設備高度相等。initial-scale
:初始縮放比例minimum-scale
:最小縮放比例maximum-scale
:最大縮放比例user-scalable
:是否容許用戶縮放作好了移動端適配的網頁,應該把用戶縮放功能禁止掉,寬度設爲設備寬度安全
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
application-name
:若是頁面是 Web application
,用這個標籤表示應用名稱。cookie
author
: 頁面做者description
:頁面描述,用於搜索引擎或者其它場合generator
: 生成頁面所使用的工具,主要用於可視化編輯器,若是是手寫 HTML 的網頁,不須要加這個 meta
keywords
: 頁面關鍵字,對於 SEO
場景很是關鍵
referrer
: 跳轉策略,是一種安全考量theme-color
: 頁面風格顏色,實際並不會影響頁面,可是瀏覽器可能據此調整頁面以外的 UI(如窗口邊框或者 tab 的顏色)補充:app
<head> <!-- 默認使用最新瀏覽器 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 不被網頁(加速)轉碼 --> <meta http-equiv="Cache-Control" content="no-siteapp"> <!-- 搜索引擎抓取 --> <meta name="robots" content="index,follow"> <!-- 刪除蘋果默認的工具欄和菜單欄 --> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 設置蘋果工具欄顏色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> </head>
關於這一塊在業務中確實關注比較少,base標籤
也是看了winter這篇文章才知道的,加油加油才行。。。編輯器