html介紹
什麼是HTML
- 超文本標記語言(Hyper Text Markup Language)
- 不是一種編程語言,而是一種標記語言
- html構成了網頁的內容
什麼是標記語言?
- 標記語言是一套標記標籤
- html使用標記標籤來描述網頁(內容)
html標籤
- 由尖括號包圍的關鍵詞,如: \<html>, \<body>, \<a>, \<q> 等
- 一般都是成對出現,如\<p>\</p>;也有特殊情況,如<br/>
- 成對標籤的第一個叫開始(頭)標籤,第二個標籤叫結束(尾)標籤。也可以叫開放標籤和閉合標籤
網頁
- 網頁 = html文檔
- html文檔 = html文檔 + 標籤內的內容
DOCTYPE文檔類型
<!DOCTYPE>文檔類型
- 不是HTML標籤,寫在最前面
- 告訴瀏覽器關於頁面使用哪個HTML版本進行編寫的指令
- 瀏覽器根據使用html版本(規則)來正確地顯示內容
常用<!DOCTYPE html>文檔類型
- HTML 5:<!DOCTYPE html>
- HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">
html註釋
HTML註釋
- 語法:<!-- ... -->
- 對代碼進行解釋,不會顯示在瀏覽器中
舉例
<!-- 註釋內容 -->
html結構
HTML結構
由頭部和身體構成
<html>
<head></head>
<body></body>
</html>
頭部head
- 包含網頁標題、描述、關鍵詞、引用的樣式文件、引用的腳本文件等
身體body
- 包含網頁所有顯示的內容、引用的腳本文件等
title標籤
<title><title/>
- 網頁標題,會顯示在瀏覽器的標題欄
- title是head標籤中唯一要包含的東西
link標籤
<link/>
- 必須置於head裏
- 定義文檔與外部資源的關係。比如:鏈接樣式表,引入樣式文件
<link/>屬性
- href屬性:被連接文檔的地址
- rel屬性:當前文檔與被連接文檔的關係
- type屬性:規定被連接文檔的類型
- media屬性:被連接的文檔顯示在什麼設備上
<html> <head> <title>test a page</title> <link rel="stylesheet" type="text/css" href="https://static5.51cto.com/51cto/cms/homepage/2015/css/layout.css"> </head> <body> this is a test page! </body> </html>
設置地址欄圖片
方法1: favicon.ico放置在網站的根目錄
方法2: 放在head內,使用link標籤引入
<link rel="shortcut icon" href="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" type="image/x-icon">
base標籤
<base/>
- 必須置於head裏
- href屬性:定義默認鏈接地址
-
target屬性:定義默認打開鏈接的方式(當前頁面打開還是新標籤打開)
這個就好比設置物理路徑 ,以方便使用相對路徑。比如:
<head> <base href="http://mystation/web/" /> <base target="_blank" /> </head>
<body>
<img src="1.gif" />
</body>
# meta標籤
## <meta/>
1. 必須置於head裏
2. 提供有關頁面的元信息,其屬性定義了與文檔相關聯的名稱/值對
## <meta/>的屬性
**名稱(三選一)**
1. **http-equiv:** 把content屬性關聯到HTTP頭部
2. **name:** 把content屬性關聯到一個名稱
3. **scheme:** 定義用於翻譯content屬性值的格式
**值(必須)**
- **content**
## 舉個例子
<meta http-equiv="expires" content="31 Dec 2018">
就會看到返回的HTML http頭部包含信息expires:31 Dec 2015
# meta標籤中的http-equiv屬性
## http-equiv屬性
**常見的值:**
- **content-type** 內容類型
- expires 過期時間
- refresh 頁面刷新
- set-cookie 設定cookie
- **X-UA-Compatible** 針對IE,設置瀏覽器優先使用什麼模式來渲染頁面
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Refresh" content="5;url=https://www.baidu.com" />