HTML基礎的 &lt;q&gt; 標簽

例

標記一個短的引用：

WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>

We hope they succeed.

瀏覽器支持

所有主流瀏覽器都支持 <q> 標簽。

標簽定義及使用說明

<q> 標簽定義一個短的引用。

瀏覽器經常會在這種引用的周圍插入引號。

提示和注釋

提示：請使用 <blockquote> 來標記摘自另一個源的塊引用。

HTML 4.01 與 HTML5之間的差異

無。

屬性

屬性	值	描述
cite	URL	規定引用的源 URL。

全局屬性

<q> 標簽支持 HTML 的全局屬性。

事件屬性

<q> 標簽支持 HTML 的事件屬性。

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

作為一個前端，經常寫html文檔，但是卻很少去在意頭部的標簽有哪些，也很少在意每個標簽的作用，下面我們來詳細了解下。

頭部的標簽，也就是寫在<head><head/>里。通常會有6個標簽：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title>

<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">

body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head> 
<body> 文檔內容...... </body> 
</html>

一、<title>元素。

1.title 標簽定義了文檔的標題，在HTML文檔中是必須的。它會展示在瀏覽器的工具欄上。

2.如果要展示一個圖標，可以再加一個<link>標簽，<link>標簽的 rel屬性為“icon”,后面的

href跟上圖片的地址。

<link rel="icon" href="圖片url">

二、<base>元素。

base標簽描述了基本的鏈接地址，該標簽作為HTML文檔中所有的鏈接的默認鏈接

　<head>
　　<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" /> 
  </head> 　　
  <body> 　
   　<img src="banner7.jpg"/>
  </body>

上面的img標簽的src鏈接的地址就是base里的地址加上img里的地址。

三、<link>元素。

link標簽定義了文檔與外部資源之間的關系，它通常用于鏈接到樣式表。

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

四、<style>元素。

style標簽定義了HTML文檔的樣式，這個我們經常會使用到，都不會陌生。

五、<meta>元素。

meta標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。它常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。

元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。

// 編碼格式定義
<meta charset="utf-8"> 
// 為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 為網頁定義描述內容:
<meta name="description" content="頭部標簽 & 使用">
// 定義網頁作者:
<meta name="author" content="Runoob">
// 每30秒鐘刷新當前頁面:
<meta http-equiv="refresh" content="30">

// 視圖層的參數定義
<meta
name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
 //    content屬性值 :
  //    width:可視區域的寬度，值可為數字或關鍵詞device-width
  //    height:同width
  //    intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
  //   maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
  //   maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
  //   user-scalable:是否可對頁面進行縮放，no 禁止縮放

六、<script>元素。

script標簽用于加載腳本文件，比如說javascript,可以直接書寫js,也能用于鏈接外部的js文件。

<script>
    document.write("Hello World!")
</script>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

來看下常用的標簽列表，后文會一一介紹：

<!DOCTYPE html>

<head>

</head>

基本標簽

使用 HTML5 doctype，不區分大小寫。

<!DOCTYPE html>

聲明文檔使用的字符編碼

更加標準的 lang 屬性寫法 http://zhi.hu/XyIa

簡體中文
<html lang="zh-cmn-Hans">
繁體中文
<html lang="zh-cmn-Hant">

很少情況才需要加地區代碼，通常是為了強調不同地區漢語使用差異，例如：

菠蘿和鳳梨其實是同一種水果。只是大陸和臺灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之為黃梨。

優先使用 IE 最新版本和 Chrome

SEO 優化

頁面描述

每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽。文檔

頁面關鍵詞

定義頁面標題

定義網頁作者

定義網頁搜索引擎索引方式，robotterms是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。文檔

可選標簽

為移動設備添加 viewport

content 參數：

width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 設備

添加到主屏后的標題（iOS 6 新增）

是否啟用 WebApp 全屏模式

設置狀態欄的背景顏色

content 參數：

default 默認值。
black 狀態欄背景是黑色。
black-translucent 狀態欄背景是黑色半透明。

如果設置為 default 或 black ,網頁內容從狀態欄底部開始。

如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

禁止數字識自動別為電話號碼

iOS 圖標

rel 參數：

apple-touch-icon 圖片自動處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。

iPhone 和 iTouch，默認 57x57 像素，必須有

iPad，72x72 像素，可以沒有，但推薦有

Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有

Retina iPad，144x144 像素，可以沒有，但推薦有

iOS 啟動畫面

官方文檔：https://developer.apple.com/library/ios/qa/qa1686/_index.html

參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的啟動畫面是不包括狀態欄區域的。

iPad 豎屏 768 x 1004（標準分辨率）

iPad 豎屏 1536x2008（Retina）

iPad 橫屏 1024x748（標準分辨率）

iPad 橫屏 2048x1496（Retina）

iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的。

iPhone/iPod Touch 豎屏 320x480 (標準分辨率)

iPhone/iPod Touch 豎屏 640x960 (Retina)

iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）文檔

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 標簽，用來控制選項卡顏色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁貼顏色

Windows 8 磁貼圖標

其他

添加 RSS 訂閱

添加 favicon icon

禁止 Chrome 瀏覽器中自動提示翻譯

在線咨詢

上一篇：HTML中的href屬性：掌握超鏈接技巧，提升網站用戶體驗
下一篇：HTML文檔常用元素匯總

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎的 &amp;lt;q&amp;gt; 標簽

您的項目需求

HTML基礎的 <q> 標簽