學習筆記：html學習之一：html基本標記

時間 2019-12-02

標籤學習筆記 html 之一基本標記欄目 HTML 简体版

原文原文鏈接

1. 概論

一個完整的 HTML 文檔必須包含 3 個部分：html

一個由元素定義的文檔版本信息。瀏覽器
一個由定義各項聲明的文檔頭部，做爲各類聲明信息的包含元素出如今文檔的頂端，而且要先於出現。網絡
一個由定義的文檔主體部分，用來顯示文檔主體內容。工具

示例:優化

<html>
<head>
文檔頭部信息
</head>
<body>
文檔正文信息
</body>
</html>

2. html頭部標記head

在 HTML 語言的頭部元素中，通常須要包括標題、基礎信息和元信息等。 HTML 的頭部元素是以爲開始標記，以爲結束標記的。網站

語法：ui

<head>.......</head>

說明：搜索引擎

元素的做用範圍是整篇文檔。元素中包含：元信息定義、文檔樣式表定義和腳本等信息，定義在 HTML 語言頭部的內容每每不會在網頁上直接顯示。編碼

2.1 標題標記title

HTML 頁面的標題通常是用來講明頁面的用途，它顯示在瀏覽器的標題欄中。在 HTML 文檔中，標題信息設置在與之間。標題標記以開始，以結束。url

語法:

<title>......</title>

說明:

在標記中間的「…」就是標題的內容，它能夠幫助用戶更好地識別頁面。頁面的標題只有一個，它位於 HTML 文檔的頭部，即和之間

示例:

<html>
<head>
<meta http-equiv="content-type"  content="text/html"; charset="gb2312" />
<title>
文本標題部分
</title>
</head>
<body>
文本主體部分
</body>
</html>

2.2 元信息標記meta

meta 元素提供的信息不顯示在頁面中，通常用來定義頁面信息的說明、關鍵字、刷新等。在 HTML 中， meta 標記不須要設置結束標記，在一個尖括號內就是一個 meta 內容。在一個 HTML 頁面中能夠有多個 meta 元素。 meta 元素的屬性有 name和http-equiv，其中 name 屬性主要用於描述網頁，以便於搜索引擎查找、分類。

2.2.1 name用法

（1）. 設置頁面關鍵字keywords

在搜索引擎中，檢索信息都是經過輸入關鍵字來實現的。關鍵字是整個網站登陸過程當中最基本也是最重要的一步，是進行網頁優化的基礎。關鍵字在瀏覽時是看不到的，它可供搜索引擎使用。當用關鍵字搜索網站時，若是網頁中包含該關鍵字，就能夠在搜索結果中列出來。

語法：

（2）.設置頁面說明

設置頁面說明也是爲了便於搜索引擎的查找，它用來詳細說明網頁的內容，頁面說明在網頁中不顯示出來。

語法

<meta name="description" content="具體的頁面說明">

（3）.定義編輯工具

如今有不少編輯軟件均可以製做網頁，在源代碼的頭部能夠設置網頁編輯工具的名稱。與其餘 meta 元素相同，編輯工具也只是在頁面的源代碼中能夠看到，而不會顯示在瀏覽器中

語法

<meta name="generator" content="具體的編劇工具名稱">

（4）.設置做者信息

在源代碼中還能夠設置網頁製做者的姓名。

語法：

<meta name="author" content="做者姓名">

####2.2.2 http-equiv用法

（1）. 設置網頁文字及語言

在網頁中還能夠設置語言的編碼方式，這樣瀏覽器就能夠正確地選擇語言，而不須要人工選取。

語法：

<meta http-equiv="content-type" content="text/html; charset=字符集類型" />

說明：

在該語法中， http-equiv 用於傳送 HTTP 通訊協議的標頭，而在 content 中才是具體的屬性值。 charset 用於設置網頁的內碼語系，也就是字符集的類型，國內經常使用的是 GB 碼， charset 每每設置爲 gb2312 ，即簡體中文。英文是 ISO-8859-1 字符集，此外還有其餘的字符集。

舉例：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
</head>
<body>
文本正文部分
</body>
</html>

此處設置語言爲簡體中文。

（2）. 設置網頁的定時跳轉

使用標記可使網頁在通過必定時間後自動刷新，這可經過將 http-equiv 屬性值設置爲 refresh 來實現。 content 屬性值能夠設置爲更新時間。在瀏覽網頁時常常會看到一些歡迎信息的頁面，在通過一段時間後，這些頁面會自動轉到其餘頁面，這就是網頁的跳轉。

語法：

<meta http-equiv="refresh" content="跳轉的時間;url=跳轉到的地址">

說明

在該語法中， refresh 表示網頁的刷新，而在 content 中設置刷新的時間和刷新後的連接地址，時間和連接地址之間用分號相隔。默認狀況下，跳轉時間以秒爲單位。

舉例：

<html>
<head>
<meta http-equiv="refresh" content="20;url=index.html">
<title>網頁自動刷新</title>
</head>
<body>
文本正文部分
</body>
</html>

3 網頁的主體標記body

網頁的主體部分包括要在瀏覽器中顯示處理的全部信息。在網頁的主體標記中有不少的屬性設置，包括網頁的背景設置、文字屬性設置和連接設置等。

3.1 網頁背景顏色bgcolor

對大多數瀏覽器而言，其默認的背景顏色爲白色或灰白色。使用標記的 bgcolor 屬性能夠爲整個網頁定義背景顏色。

語法：

<body bgcolor ="背景顏色">

說明：

在該語法中的 body 就是頁面的主體標記， bgcolor 的值能夠是一個已命名的顏色，如red，green，blue等，也能夠是十六進制的顏色值。

舉例：

<html>
<head>
<title>背景顏色</title>
<meta name=「keywords」 content="背景,顏色">
<meta name="description" content="背景顏色">
<meta http-equiv="content
-type" content="text/html;charset=gb
2312" />
<meta http-equiv="refresh" content=「40; url=index.html」>
</head>
<body bgcolor="red">
文本正文部分
</body>
</html>

設置網頁標題爲「背景顏色」;關鍵字爲"背景"，「顏色」；描述爲"背景顏色";字符集爲簡體中文;網頁自刷新，刷新時間爲40秒，跳轉網頁爲index.html;網頁背景顏色爲紅色。

3.2 網頁背景圖片background

使用恰當的圖片做爲背景，可以使頁面看上去更加生動美觀。使用 background 屬性能夠將圖片設置爲背景，還能夠設置背景圖片的平鋪方式、顯示方式等。

語法

<body background="圖片地址">

3.3 網頁文字顏色

能夠經過 text 標記來設置文字的顏色。在沒有對文字的顏色進行單獨定義時，這一屬性能夠對頁面中全部的文字起做用。

語法：

3.4 連接文字顏色

超連接是網頁中最重要、最根本的元素之一。網站中的一個個網頁是經過超連接的形式關聯在一塊兒的，正是由於有了網頁之間的連接才造成了這紛繁複雜的網絡世界。超連接中以文字連接最多，在默認狀況下，瀏覽器以藍色做爲超連接文字的顏色，訪問過的文字則顏色變爲暗紅色。能夠經過 link 參數修改連接文字的顏色。

（1）. 修改未點擊的連接文字顏色link

語法：

<body link=「red」>

說明：

這一屬性的設置與前面幾個設置顏色的參數相似，都是與 body 標籤放置在一塊兒，代表它對網頁中全部未單獨設置的元素起做用。

（2）. 修改正在訪問的連接文字顏色alink

語法：

<body alink=「blue」>

（3）. 修改訪問後連接文字的顏色vlink

語法：

<body vlink="green">

3.5 編劇margin

在網頁中能夠設置頁面與瀏覽器邊框之間的距離，包括上邊距和左邊距。

語法：

<body topmargin=上邊距的值 leftmargin=左邊距的值>

說明：

在默認狀況下，邊距的值以像素爲單位。通常網站的頁面左邊距和上邊距都設置爲 0 ，這樣看起來頁面不會有太多的空白。

3.6 頁面註釋標記

註釋是在 HTML 代碼中插入的描述性文本，用來解釋該代碼或提示其餘信息。註釋只出如今代碼中，在瀏覽器的頁面中不顯示。在 HTML 源代碼中適當地插入註釋語句是一種很是好的習慣。對於設計者往後的代碼修改、維護工做頗有好處。另外，若是將代碼交給其餘設計者，其餘人也能很快讀懂前者所編寫的內容。

語法：

<!--註釋內容-->

說明：

註釋語句元素由先後兩半部分組成，前半部分由一個左尖括號、一個半角感嘆號和兩個連字符組成，後半部分由兩個連字符和一個右尖括號組成。

舉例：

<html>
<head>
<title>這是最簡單的網</title>
<meta name=「keywords」 content="最簡單">
<meta name="description" content="最簡單">
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
</head>
<body>
<body bgcolor="yellow">
<body text="green">
這是最簡單的網頁
</body>
</html>

---end---

---20190504 22:16:23---