HTML學習

html介紹

什麼是HTML

  1. 超文本標記語言(Hyper Text Markup Language)
  2. 不是一種編程語言,而是一種標記語言
  3. html構成了網頁的內容

什麼是標記語言?

  1. 標記語言是一套標記標籤
  2. html使用標記標籤來描述網頁(內容)

html標籤

  1. 由尖括號包圍的關鍵詞,如: \<html>, \<body>, \<a>, \<q> 等
  2. 一般都是成對出現,如\<p>\</p>;也有特殊情況,如<br/>
  3. 成對標籤的第一個叫開始(頭)標籤,第二個標籤叫結束(尾)標籤。也可以叫開放標籤和閉合標籤

網頁

  1. 網頁 = html文檔
  2. html文檔 = html文檔 + 標籤內的內容

DOCTYPE文檔類型

<!DOCTYPE>文檔類型

  1. 不是HTML標籤,寫在最前面
  2. 告訴瀏覽器關於頁面使用哪個HTML版本進行編寫的指令
  3. 瀏覽器根據使用html版本(規則)來正確地顯示內容

常用<!DOCTYPE html>文檔類型

  1. HTML 5:<!DOCTYPE html>
  2. HTML 4.01 Strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> 
  4. HTML 4.01 Frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">

    html註釋

HTML註釋

  1. 語法:<!-- ... -->
  2. 對代碼進行解釋,不會顯示在瀏覽器中

舉例

<!-- 註釋內容 -->

html結構

HTML結構

由頭部和身體構成

<html>
    <head></head>
    <body></body>
</html>

頭部head

  • 包含網頁標題、描述、關鍵詞、引用的樣式文件、引用的腳本文件等

身體body

  • 包含網頁所有顯示的內容、引用的腳本文件等

title標籤

<title><title/>

  1. 網頁標題,會顯示在瀏覽器的標題欄
  2. title是head標籤中唯一要包含的東西

link標籤

<link/>

  1. 必須置於head裏
  2. 定義文檔與外部資源的關係。比如:鏈接樣式表,引入樣式文件

<link/>屬性

  1. href屬性:被連接文檔的地址
  2. rel屬性:當前文檔與被連接文檔的關係
  3. type屬性:規定被連接文檔的類型
  4. 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/>

  1. 必須置於head裏
  2. href屬性:定義默認鏈接地址
  3. 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" />

``` # meta標籤中的name屬性 ## name屬性 **常見的值:** description 描述 keywords 關鍵詞 renderer 設置瀏覽器渲染內核 viewport 指定用戶是否可以縮放頁面 ## 舉例 ``` ``` # script標籤 ## ``` # style標籤 ## ``` # h1到h6標籤 ## 1. 定義標題,文檔的重點內容 2. h1是最大的標題,h6是最小的標題 3. 常用h1-h3 ## 舉例 ```

一級標題測試

二級標題測試

三級標題測試

```
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章