HTML/CSS菜鳥系列-今天就說說&lt;a&gt;標簽

lt;a>標簽是常用的標簽之一，今天就一起說說這個<a>標簽，不足之處，還望指正。

<a>標簽的作用：鏈接、下載、錨點等。其中最為重要的屬性為href.

鏈接是其最基本的功能，例如：

<a href="#">這是一個鏈接</a>

<a href="##">這是一個鏈接</a>

那么這時候就會產生一個鏈接指向#或者##

第二個屬性target

<a href="#" target=“_blank”>這是一個鏈接</a>

這時候，點擊鏈接時，會在一個新的頁面打開，那么target有哪些值呢？如下：

_self -- 在當前窗體打開鏈接,此為默認值

_blank -- 在新窗口中打開鏈接

_parent -- 在父窗體中打開鏈接（我喜歡用name）

_top -- 在當前窗體打開鏈接，并替換當前的整個窗體(框架頁)（跳出框架）

我們做的都是文字鏈接，當然也可以生成圖片鏈接：

下載功能：

<a href="#">下載</a> 此時#為文件地址

錨點功能：

此外，<a>標簽還有偽類，偽類選擇符包括：

① a:link：未訪問鏈接 ,如 a:link {color:blue}

② a:visited：已訪問鏈接 ,如 a:visited{color:blue}

③ a:active：激活時（鏈接獲得焦點時）鏈接的顏色 ,如 a:active{color:blue}

④ a:hover：鼠標移到鏈接上時 ,如 a:hover {color:blue}

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

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

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

TML 代碼約定

很多 Web 開發人員對 HTML 的代碼規范知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕:

<p>這是一個段落。</p>

</SECTION>

推薦:

<body>

<p>菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。</p>

</body>

表格實例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

</head>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

聲明語言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標簽是可以省略的。

默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

實例

<!DOCTYPE html>

<html>

<body>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

</body>

</html>

嘗試一下 ?

	現在省略 head 標簽還不推薦使用。

元數據

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

比較長的評論可以在  中分行寫：

<!--

這是一個較長評論。這是一個較長評論。這是一個較長評論。

這是一個較長評論這是一個較長評論。這是一個較長評論。

-->

長評論第一個字符縮進兩個空格，更易于閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

短的規則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

	在逗號和分號后添加空格是常用的一個規則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規則。

訪問 JavaScript 代碼規范。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區別

.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

區別在于：

.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。

在 Unix 系統中后綴沒有特別限制，一般用 .html。

技術上區別

如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

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

人問我前端課程難嗎？這怎么說呢！天下事有難易乎?為之,則難者亦易矣不為,則易者亦難矣。

能不能自學成功貴在自我的堅持當然還有配合正確科學的方法。我負責科學的方法你負責堅持。

首先你需要一臺個人電腦，最好不要是臺式機，筆記本更佳，MAC系統的畢竟本更好，如果你的財力允許的話。筆記本更便于攜帶，幾乎每個前端工程師都有自己的筆記本電腦，Mac系統更穩健好用，不像Windows運行幾年就變慢了。

其次你需要安裝一款適合自己的前端開發軟件，也就是你的開發工具。

”假輿馬者，非利足也，而致千里；假舟楫者，非能水也，而絕江河。君子生非異也，善假于物也?！?-《勸學》

有一刻合適的開發工具會讓你的效率提高很多，事半功倍。那么有哪些開發工具呢？

Dreamweaver是個由Macromedia公司所開發的著名網站開發工具，一個很古老的前端網站開發工具，多數前端工程師都用他起步的，DW的好處是，有設計和源碼兩種模式，所見即所得，功能齊全，非常適合剛入門的工程師，但不推薦大家使用DW ，雖然他功能強大但很多功沒什么實際用處，所見即所得的開發方式也不利于工程師成長，重點是不免費啊，還的費勁兒去找破解版。

Visual Studio Code中文版是微軟推出的帶 GUI 的代碼編輯器，軟件功能非常強大，界面簡潔明晰、操作方便快捷，設計得很人性化。軟件主要改進了文檔視圖，完善了對 Markdown的支持，新增PHP語法高亮，功能強大很多插件，安裝方便，重點是免費，但還是不推薦初學者使用。

Sublime Text是一個代碼編輯器也是HTML和散文先進的文本編輯器，雖然一個輕量級的編輯器，但有豐富的插件和第三方支持，插件需要翻墻安裝，對于初學者也不是太合適，不推薦使用。

WebStorm 是一款比較Nice 的JavaScript開發工具，被眾多前端工程師譽為“Web前端開發神器” 主要是各種提示比較給力，而且除了代碼管理，還提供了對ES6的支持。打開有點慢?？梢赃x擇使用。

hbuilder是一款知名的且廣受好評的專門為前端研發的開發工具，而且全中文，語法庫齊全和瀏覽器兼容數據、可以方便的制作手機APP、最保護眼睛的綠柔設計等特點。支持HTML、CSS、JS、PHP的快速開發。。其強大全面的提示功能、調試等功能，讓程序員用起來感覺非常順手，而且是免費的，推薦初學者使用。

沒錯記事本也能做為前端的開發工具，但很少有人使用這玩意兒，完全不推薦初學者使用。

好了工具裝完了，完事具備了只欠東風，是不是就可以開始學習了呢？

莫慌，我們再看看網絡上有哪些能幫助我們學習的網站。初級階段不用花錢看免費的資料就行。網絡上一抓一大把，主要是你的學會找到這些資料。

在線教育機構有很多，他們會提供一些免費的視頻和成體系的課程，不過也是魚龍混雜，死了一批活了一批。我推薦給不錯的網站，供大家參考。

聲明：所有排名不分先后

成立于2014年02月

極客學院也是一家純粹做線上的在線教育平臺，開設課程有前端，Python，go，Android和iOS。極客學院不同之處在于其模式類似于硅谷的培訓機構Udacity，通過包月與包年的會員制，為學生提供相應的課程視頻、文檔資料。并且試水“一對一”的在線教育模式，當然了極客的模式和傳統的“一對一”有所不同，極客學院的“一對一”主要指老師為學生一對一批改作業等，而在授課方式上，采取的依然是一對多模式。。

成立于2012年05月

麥子學院是比較純粹做在線教育的IT培訓教育平臺，課程體系根據用戶人群需求不同分為自學課和企業直通班（有導師進行跟蹤輔導，基本上可以看做是把線下的培訓模式實現了在線化），開設的課程種類非常的多，幾乎涵蓋了互聯網的各個領域。

教學模式純粹的在線化，課程可以在官網上找到，課程制作相對比較優質。

成立于2013年8月

慕課網主打免費IT技能培訓，當然了現在也有收費的實戰項目課程。慕課網在所有的在線培訓平臺中算是口碑比較良好的一個吧，這可可能和其免費優質的策略有關。就課程體系而言慕課網也幾乎涵蓋了所有的課程分類，課程特色為其規劃好的一些職業體系，方便一些自學入門的用戶可以按部就班的獲得一個系統的知識體系。其次慕課網內置的代碼編輯器也是非常的出色，所見即所得不需要配置本地環境，更加快捷，省去了很多的麻煩。

成立于2016年4月（進入國內的時間）

優達學城是一家來自硅谷的在線教育機構，“骨骼清奇”和硅谷多家世界知名企業達成合作，這也展示在其課程上，像人工智能，自動駕駛等課程算是國內獨樹一幟，但是對于國內大部分的學習者來說，其英文的課程是一個不小的挑戰。優達學城獨具特色的地方在于課程免費，對一些認證考試和就業介紹進行收費，作為其盈利點。

在其進入國內，根據國情也對少數的課程添加了漢語字幕，其次也努力的和國內的一些互聯網企業尋求合作，目標群體基本上定位在專業度高計算機基礎穩固的人群。

當然還有很多其他在線教育的網站，不過大多上來就彈窗，問你要不要報名啊，想盡辦法讓你花錢，煩。

不喜歡看視頻的同學可以選擇 W3C 菜鳥教程。這個教程簡單易用，非常適用于初學入門者。

首先學習html5 了解各種標簽的使用以及什么是語義化。當然只看html5是遠遠不夠的，接下來就是css了。html5只是頁面的結構編寫更多美好的工作還需要css來完成，具體的學習周期大概2~3周，大家就能記的差不多了。

大家在菜鳥教程中可以到css和css3兩種教程，學習順序別搞錯了是學完css再學習css3,因為css3是作為css的一個補償存在的。

學習完css3就到了JavaScript學習階段了

JavaScript 是 Web 的編程語言。所有現代的 HTML 頁面都使用 JavaScript。JavaScript之后還后ECAMScript6 哈哈

ES6的學習看看欒一峰的文件就可以了：http://es6.ruanyifeng.com/

這些都學完了就到框架階學習段了，目前流行的前端框架有三種：

Vue.js（讀音 /vju?/, 類似于 view）是一套構建用戶界面的漸進式框架。Vue 只關注視圖層，采用自底向上增量開發的設計。Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

React 是一個用于構建用戶界面的 JAVASCRIPT 庫。React主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。React 起源于 Facebook 的內部項目，用來架設 Instagram 的網站，并于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡單。

Angular2 是一款開源JavaScript庫，由Google維護，用來協助單一頁面應用程序運行。Angular2 是 Angular 1.x 的升級版本，性能上得到顯著的提高，能很好的支持 Web 開發組件。Angular2 發布于2016年9月份，它是基于ES6來開發的。

建議學習Vue.js 目前比較盛行，不會Vue都不好意思說自己是前端工程師了。

資料和路徑都有了你可以開始自學了。不過一個學習一但遇到問題就麻爪了，一個小問題卡住能停下一個星期。如果能組團一起學習可以進行交流。

還有如果有人帶你一起做項目是不是會更快呢？

最好找一個行內人士為師，好隨時進行指點，才可事半功倍。

歡迎關注，小故事演繹大前端。多多交流，一起學習。

在線咨詢

上一篇：HTML基礎之HTML常用標簽
下一篇：PyQt5-5.控件使用2（Radio Button、Check Box）

您的項目需求

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

整合營銷服務商

HTML/CSS菜鳥系列-今天就說說&amp;lt;a&amp;gt;標簽

您的項目需求

HTML/CSS菜鳥系列-今天就說說<a>標簽