HTML常用基礎標簽，前端從入門到精通

先，我們來理解一下一個網頁的基本組成

代碼如下

一個網頁是有許許多多的標簽對組成的，即開始標簽-結束標簽，都是成對出現（當然我們后面會說的還存在單標簽，表示自閉合標簽，例如：<br />）

對上述的標簽先來解釋一下

html------------超文本標記語言，瀏覽器識別的語言，主要負責頁面的內容和結構

head------------標簽用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

body------------元素定義文檔的主體。body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）

HTML常用基礎標簽用法及實例

1. 

2. 

3. <a href="http://www.baidu.com/">百度一下</a></br>

4. <address> 標簽定義文檔或文章的作者/擁有者的聯系信息。

如果 <address> 元素位于 <body> 元素內，則它表示文檔聯系信息。

如果 <address> 元素位于 <article> 元素內，則它表示文章的聯系信息.-->

</address>

5.

<p>全球最大的中文搜索引擎、致力于讓網民更便捷地獲取信息，找到所求。</p>

</article>

6.

<aside>

<h1>文本之外的內容</h1>

<p>我也是文本之外的內容</p>

</aside>

7.<!-- audio video-- <audio> 標簽定義聲音，比如音樂或其他音頻流。

</audio>

8.

9.

10.

11.

12.

13.

14.

<dl>

<dd>用來計算的儀器 ... ...</dd>

<dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>

15.

16.

17.<!--em span i strong <em>把文本定義為強調的內容。<span> 標簽被用來組合文檔中的行內元素。

<i> 標簽顯示斜體文本效果。<strong>把文本定義為語氣更強的強調的內容。

-->

<em>強調文本內容</em>

<p><span>組合文檔中的行內元素</span>你好啊</p>

18.

</footer>

<nav>

<a href="http://www.baidu.com">百度</a>|

</nav>

19.<!-iframe iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）-->

20.

21.<!--img input label-- img 元素向網頁中嵌入一幅圖像。

<input>--表單標簽（一共八種類型）如下所示：

<input type="radio" name=""value="單選"/>

<input type="checkbox" name=""value="選擇"/>

<input type="submit" name=""value="提交"/>

<input type="button" name=""value="按鈕"/>

<input type="password" name=""value="密碼"/>

<input type="text" name=""value="文本"/>

<input type="reset" name=""value="清空"/>

<input type="hidden" name=""value="隱藏"/>

<label> 標簽為 input 元素定義標注（標記）。

-->

22.

23.

24.

<select name="">
<option value="">請選擇</option>
<option value="">選項一</option>
<option value="">選項二</option>
<option value="">選項三</option>
<option value="">選項四</option>
</select>

25.

resize禁止拉伸文本框

outline取消文本框選中的顏色

Text-indent:2em首行縮進兩個字符

希望閱讀本篇文章以后大家有所收獲，幫助大家HTML5+CSS3從入門到精通。

綱

1、什么是<a>標簽

2、<a>標簽的幾個重要屬性

3、a標簽的運行機制

4、a標簽常用的協議

5、超鏈接標簽的樣式問題——a標簽的偽類選擇器的書寫順序

1、什么是<a>標簽

<a> 標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。

2、<a>標簽的幾個重要屬性

2.1、href

規定鏈接指向的頁面的 URL。

2.2、target

規定在何處打開鏈接文檔。

a:自定義打開錨點

target的特殊值：有 4 個保留的目標名稱用作特殊的文檔重定向操作：

2.3、name

規定錨的名稱。（Html5不支持）

2.4、downloadHTML5新增

HTML5新增，只有 Firefox 和 Chrome 支持 download 屬性。

download 屬性規定被下載的超鏈接目標。

在 <a> 標簽中必須設置 href 屬性。

該屬性也可以設置一個值來規定下載文件的名稱。所允許的值沒有限制，瀏覽器將自動檢測正確的文件擴展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

2.5、media

media 屬性規定目標 URL 是為什么類型的媒介/設備進行優化的。

該屬性用于規定目標 URL 是為特殊設備（比如 iPhone）、語音或打印媒介設計的。

該屬性可接受多個值。

只能在 href 屬性存在時使用。

3、a標簽的運行機制

4、a標簽常用的協議

5、超鏈接標簽的樣式問題——a標簽的偽類選擇器的書寫順序

5.1、a標簽的多重狀態

對于<a>元素，我們可以用“多重人格”來形容它。對于該標簽，它一共有五種狀態：:link, :visited, :hover, :focus, :active.

“:link”可以用于聲明未訪問狀態鏈接的樣式；

“:visited”可以用于聲明已經訪問鏈接的樣式；

“:hover”可以用于聲明鼠標懸停在鏈接上的樣式；

“:focus”可以用于聲明瀏覽器焦點懸停在鏈接上的樣式(通過鍵盤選擇鏈接)；

“:active”可以用于聲明瀏覽器點擊鏈接的樣式。

注意：冒號前后不要出現空格

一般a:hover和a:visited鏈接的狀態（顏色、下劃線等）應該是相同的。

link、visited、active分別對應body元素的link、vlink、alink這三個屬性。

四個“狀態”的先后過程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能設置有無下劃線（總是有的）。

5.2、鏈接（a標簽狀態）定義的順序

沒有規矩不成方圓，雖然鏈接定義寫好了，但它也是有規則的，如果這四項的書寫順序稍有差錯，鏈接的效果可能就沒有了，所以每次定義鏈接樣式時務必確認定義的順序，link--visited--hover-active，也就是我們常說到的LoVe HAte原則（大寫字母就是它們的首字母）。

老外總結了一個便于記憶的“愛恨原則”（LoVe/HAte），即四種偽類的首字母:LVHA。定義A鏈接樣式的正確的順序：a:link、a:visited、a:hover、a:active。若沒有按照這樣的順序的話，有的狀態的樣式會被放置在后面的樣式覆蓋而導致像沒有觸發一樣沒有效果，如：如果hover放在visited之后，則就算我放上去變色了，但是同時這個標簽也具有visited狀態以及其的效果，會覆蓋了hover的效果。

為了符合瀏覽器解釋CSS遵循的"就近原則"。我們在定義CSS中，宜將最一般的條件放在最上面，并依次向下，最下面放最特殊的。

在W3C規范中，也規定了鏈接的聲明順序：

在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

TML5從入門到精通，兄弟連京修隨堂筆記（二）HTML的框架結構，每日都有新內容，訂閱走一波

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN“

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

DTD：（Document Type Definition, DTD）

<!DOCTYPE HTML PUBLIC "version name" "url">

HTML指定文檔類型的名稱，為了說明這個頁面使用了何種HTML規則，或者結構。

PUBLIC表明所依據的ＤＴＤ文件可對任何人公開訪問，而不是某個公司內部的規范文件。

version name指定該HTML版本的標識名稱。例如，HTML4.0的標識名稱為”-//w3c//DTD HTML 4.01 Transitional//EN”.對于ISO標準的DTD以”ISO”三個字母開頭；被改進的非ISO標準的DTD以加號“＋”開頭；沒被改進的非ISO標準的DTD以“－”開頭。

url指定該HTML語言的定義規范文件在internet上的位置，例如，http://www.w3.org/TR/html4/loose.dtd.

規范文件：loose.dtd、strict.dtd、frameset.dtd等文件名的區別。

頭元素

頭元素是指位于<head></head>標簽元素，主要包括：

<title></title>標簽對

<base>標簽

<link>標簽

<meta>標簽

<base>標簽用于指定網頁中的超鏈接的基準地址，以改變網頁中所有使用相對地址的URL的基準地址。

<base>標簽通常的使用形式如下：

作用

Href屬性設定該網頁中所有使用HTTP協議的相對URL地址的基準地址，若網頁中有如<a href=“index.html”></a>這樣的超鏈接，它不會再象沒有使用<base>標簽時那樣表示當前網頁相同目錄下的index.html,而是指向了http://yun.itxdl.cn/techworld/index.html頁面

超鏈接的target屬性用于設定該網頁中所有的超鏈接顯示的目標窗口，在<base>標簽中設定target屬性，可省得在所有的超　鏈接的<a>標簽中都加上target屬性。

<base>標簽

<link>標簽

幾個主要的屬性：

HREF

REL與REV

TITLE

TYPE

例如，　TYPE=“text/css”、TYPE=“text/javascript”

MEDIA

設置值：screen、print、projection、aural、braille、tty、tv、all

<meta>標簽

有兩種類型的<meta>,用不同的屬性名來劃分，這兩種屬性名為：name和http-equiv.

name屬性用于在網頁中加入一些關于網頁的描述信息，例如，網頁的關鍵字（可供網頁搜索引擎機器人查找、分類）、網頁的描述信息等。

http-equiv屬性用于在HTML文檔中模擬HTTP協議的響應消息頭，例如，告訴瀏覽器是否緩存該網頁、使用什么樣的字符集來顯示網頁內容、隔多長時間自動刷新網頁等。

meta標簽的name屬性設置

Keywords

例如，<meta name=“keywords” content=“php, java, 培訓”>

Description

Robots

設置值：index、noindex、follow、nofollow、all、none.

Generator

Author

Meta標簽的http-equiv屬性設置（１）

Content-Type

例如，<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>

Refresh

例如，<meta http-equiv=“Refresh” content=“1; url=http://yun.itxdl.cn”>

Expires

例如，<meta http-equiv=“Expires” content=“Mon, 12 may 2006 00:20:00 GMT”>,將content設置為0,可以禁止瀏覽器使用緩存頁面。

Meta標簽的http-equiv屬性設置（２）

Windows-Target

例如，要防止自己的網頁被別人當作一個fame頁面調用，可以使用<meta http-equiv=“Windows-Target” content=“_top”>.

Pragma

例如，<meta http-equiv=“Pragma” content=“no-cache”>.

Page-Enter和Page-Exit

例如，<meta http-equiv=“Page-Enter” content=“revealTrans(Transition=23, Duration=1.000)”>

在線咨詢

上一篇：CSS3動畫卡頓性能優化解決方案
下一篇：5分鐘讀懂Unicode

您的項目需求

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

整合營銷服務商

HTML常用基礎標簽，前端從入門到精通

您的項目需求