JavaScript開發工具WebStorm使用教程：WebStorm項目

論在WebStorm 中做什么，都是在項目的上下文中執行的。WebStorm 中的項目是一個文件夾，其中包含您編輯的源代碼、您使用的庫和工具（例如，在node_modules子文件夾中）以及各種應用程序配置文件（例如，package.json或.eslintrc）。

WebStorm已更新至V2022.1，歡迎下載WebStorm最新版本試用：

點擊獲WebStorm官方正式版

在 WebStorm 中打開一個文件夾后，.idea子文件夾將添加到其中 WebStorm 存儲其內部配置設置，例如項目代碼樣式或版本控制系統。

.idea目錄中的所有設置文件都應置于版本控制之下，除了workspace.xml，它存儲您的本地首選項。workspace.xml文件應被VCS標記為忽略。

WebStorm 不支持直接編輯遠程主機上的文件。因此，要在 WebStorm 中使用遠程源，需要下載它們，打開存儲它們的文件夾，并將它們安排在 WebStorm 項目中，如從現有本地源創建項目中所述。要使本地和遠程源保持同步，請使用“部署選項”對話框中的“將更改的文件自動上載到默認服務器”列表配置自動上載。

在項目之間切換

如果您同時打開了多個項目，您可以使用以下選項在它們之間切換：

切換到下一個項目窗口：（Ctrl+Alt+]窗口|下一個項目窗口）
切換到上一個項目窗口：（Ctrl+Alt+[窗口|上一個項目窗口）
或者，打開窗口菜單并選擇要切換到的項目。

重命名項目

右鍵單擊項目的根文件夾并選擇Refactor | 從上下文菜單重命名Shift+F6或按。
在打開的對話框中，選擇重命名策略。
如果項目名稱與其根文件夾的名稱相同，請選擇Rename directory。
如果項目名稱與其根文件夾的名稱不同，請選擇Rename project。
或者，選擇文件 | 從主菜單重命名項目并在打開的對話框中輸入項目的新名稱。
如果您的應用程序部署到遠程服務器并且項目根文件夾映射到服務器根目錄，也請選擇此選項。
當然，您可以重命名根文件夾并相應地更新服務器配置中的映射。

將項目移動到另一個位置

在Project工具窗口Alt+1中，右鍵單擊項目的根目錄并選擇Refactor | 移動目錄( F6)。
在打開的對話框中，為項目指定一個新位置，然后單擊Refactor。

更改項目的默認位置

在 WebStorm 中，您可以為項目指定默認父文件夾。當您打開項目時，WebStorm 將從該文件夾開始。每次創建新項目時也會建議使用此默認位置。

打開設置/首選項對話框 ( Ctrl+Alt+S) 并轉到外觀和行為 | 系統設置。
在默認目錄字段中，指定要存儲項目的文件夾的路徑。
下次創建項目時，WebStorm 會建議指定目錄作為新項目的父目錄。

通過 VCS 共享項目設置

根據您的選擇處理配置文件。修改項目設置并創建新的配置文件后，IDE 會在屏幕底部顯示一條通知，提示您選擇如何處理此項目中的配置文件：

查看文件：查看已創建配置文件的列表并選擇要置于版本控制之下的配置文件。之后，選定的文件將被安排添加到 VCS。
Always Add：靜默計劃在.idea目錄中創建的所有配置文件以添加到 VCS（僅適用于當前項目）。
不要再問：永遠不要安排配置文件添加到 VCS；在您手動將它們添加到 VCS 之前，它們將具有未版本化狀態（僅適用于當前項目）。

如果您在未選擇任何選項的情況下關閉通知，則在創建新配置文件后它將再次出現。即使您重新啟動 IDE，新文件也將進入該列表，直到您選擇其中一個選項。

不可共享的配置文件列表

前端開發工具WebStorm 識別配置文件并將它們自動添加到忽略文件列表中。但是，如果您手動共享項目，我們建議您避免將這些文件和文件夾置于版本控制之下：

.idea/workspace.xml
.idea/usage.statistics.xml
.idea/字典文件夾
.idea/架子文件夾

將全局設置復制到項目級別

全局 (IDE) 設置與項目分開存儲。這就是為什么這些設置不會通過版本控制與項目一起共享。

但是，可以將某些設置復制到項目級別。例如，您可以創建檢查配置文件的副本，從代碼完成和自動導入中排除的類和包的列表。如果這樣做，IDE 會在.idea目錄中創建相應的配置文件，您可以通過 VCS 與項目一起共享這些配置文件。

以上就是有關WebStorm項目的介紹，更多關于WebStorm價格信息可進入慧都官網查看。

WebStorm是一個針對JavaScript和相關技術的集成開發環境。像其他JetBrains IDE一樣，它使你的開發體驗更加愉快，使日常工作自動化，并幫助你輕松處理復雜的任務。

過前兩天的洗禮，應該對網頁制作有了一個初步的認識吧，其實就是標簽，而且大多數都是重復的標簽，所以啊，縱觀來看，并不是很難，這些所謂的標簽，不要大家去刻意地來記，因為孰能生巧嗎，你練得多了，自然也就會了，跟以前學的《賣油翁》一樣，代碼這件事，不僅僅是前端，任何一門語言，都是要經過多敲多練，才能了然于胸。

這個系列的課程，不同網上的其他教程，大家可以去搜搜，基本上網上的課程要么冗余太多，要么過于簡單，基本上沒有一個系統的流程，也就說，對于零基礎的朋友而言，沒有一個針對性，可靠性的學習流程，為了照顧多數的零基礎朋友，基本上，每一天的課程，我都會親自去實現里面的案例，代碼和效果，都會一步步來呈現，所以啊，大家只要跟上步伐，學有所成不在話下，每篇的文章，我都會同步多個平臺，首發微信公眾號（一個北漂程序員），還望給個關注。

今天的課程目錄如下：

1、IDE(WebStorm)下載和安裝

2、WebStorm工具簡單教程

3、Html中的注釋

1、IDE(WebStorm)下載和安裝

昨天的課程中已經說到，我們要鳥槍換炮，說干就干，其實市場上有很多用于前端開發的工具，基本上只要能夠寫代碼的，都能進行web開發，為什么要選擇WebStorm這款工具作為我們課程的講述？主要原因是目前相對使用率還是挺高的，畢竟是針對web開發所研發的工具，當然了，大家可以選擇自己喜歡的，比如Vscode了，Hbuilder了，等等，用著順手就行，不一定非得要用某個。

WebStorm可能對于大家而言，正版的會收費，這個大家放心好了，網上一大堆破解文章，還有免費的注冊碼使用，根本不用花費一分錢，這里呢，我也專門寫了一個網頁，免費獲取注冊碼的，地址是：https://www.vipandroid.cn/ming/page/registerCode.html，大家可以直接獲取。

WebStorm的相關介紹，來自百科的解讀，這里我截了一個圖，我們一起來看下：

WebStorm下載：

第一步，打開官網

https://www.jetbrains.com/webstorm/

官網截圖如下，點擊DownLoad按鈕：

第二步，選擇自己對應的電腦系統進行下載，一定要看仔細哦，然后點擊DownLoad按鈕。

第三步，靜靜地等待下載就好，我的電腦是Windows，最新下載是367MB，會在瀏覽器左下角進行下載展示。

WebStorm安裝：

下載好之后，大家盡量把把它單放到一個文件夾里，當然了盡量不要放到C盤下。下載后，我把把它放到在D盤下，如下圖。

下面我就開始雙擊“WebStorm-2021.2.exe”這個文件，會出現下面這個畫面，點擊Next。

點擊之后會出現下面的圖，這里我們選擇安裝路徑，盡量我們不要選擇默認的，因為默認會安裝到C盤下，C盤為系統盤，盡量不要安裝軟件，這里我選擇了上圖中我創建的config文件夾：

更改完安裝路徑后，直接點擊下一步：

這里的關聯我們可以不用打鉤，直接進行Next。

進入到這個畫面，我們點擊Install，進行安裝。

下面就是安裝的進度，稍等片刻后，就會安裝成功。

安裝成功后畫面：

我們可以打鉤Run WebStorm，也可以直接點擊Finish進行退出，這里我選擇直接退出。

回到我們安裝的目錄，這里我是安裝到了config下，如圖：

我們點擊WebStorm 2021.2這個文件夾：

再點擊bin文件夾，下圖我紅色箭頭指的，就是WebStorm工具，可以直接雙擊啟動。

當然了，為了方便開發，大家可以右鍵點擊它，選擇發送到桌面快捷方式，這樣你的桌面就會出現WebStorm的啟動圖標了，我們以后就可以直接雙擊打開了。

第一次打開，可能會出現下面的畫面，我們直接選擇ok即可：

接著我們就會進入到下面的畫面：

出現這個畫面呢，是讓咱們進行登錄，或者輸入注冊碼，畢竟這個軟件是收費的，第一次安裝，我建議大家，選擇先試用，這個軟件給第一次試用的用戶時間為30天，其實還蠻好的。

如果試用時間到了，大家可以操作如下圖，選擇注冊碼輸入，上邊已經給大家出了一個免費的獲取地址，大家打開后獲取到注冊碼，復制到這里就ok了：

好，我們先選擇試用，點擊后出現下面的畫面，直接點擊跳過：

點擊后，我們就進入到了選擇頁面

我們選擇創建新的項目，進入下面的頁面，選擇項目存放的路徑后，直接點擊Create：這里有一個需要注意的地方，在以后的開發中，大家的目錄盡量用英文字母，這里我為了方便授課，寫了個中文，雖然說不影響，但是還是希望大家注意一下。

創建好之后，我們就進入了主頁面，至此我們這個軟件的下載和安裝，整個流程就完了。

2、WebStorm工具簡單教程

下載安裝好之后，以后呢，我們就可以在這個軟件里進行開發了，從此就告別記事本了，來，先來個“hello,world”。

為了方便管理，日后的所有案例我都會在“零基礎10天學會網頁制作”這個項目進行開發，準備以各個目錄來區分，

點擊“零基礎10天學會網頁制作”，新建一個目錄為“第三天”，輸入“第三天”后，回車進行創建。

建好后如下圖：

我們第三天的所有的案例都寫到第三天這個文件夾里，先整個"hello,world":

第一步，新建網頁，右鍵點擊第三天，創建一個HTML：

第二步，選擇HTML5，起名字為“hello”,點擊回車按鈕。

最終效果如下：

看到這里，是不是我們已經知道了使用工具的好處了，直接后綴“html”，不用我們再去更改，更重要的是模板都給我們寫好了，看看右邊的代碼，簡直方便的不能再方便，還有一個更加為之神奇的，就是代碼的聯想提示和直接補全。

看，在下面，我就輸入了一個

這里，我們用h1寫個“hello,world”，可以直接在右上角，選擇合適的瀏覽器進行打開瀏覽：

瀏覽如下圖：

上面就是我們從創建頁面到寫代碼，到瀏覽的整個過程。下面再說一下WebStorm幾個小功能。

第一個，改背景顏色

大家看到，目前我的WebStorm是黑色背景，如果你不喜歡，可以按照下面步驟去改。

點擊左上角File,再點擊Settings：

進入到設置頁面后，按照如下圖操作，在第2步中，選擇自己喜歡的背景：

第二個，改文字大小

如果大家感覺編輯區的代碼文字過小，可以通過以下，來更改文字大小。

還是通過點擊左上角File,再點擊Settings后，按照下圖，在第三步進行設置字體大小。

如果大家是第一次接觸這個開發工具，可以多熟悉熟悉，多點點，放心，點不壞。

3、Html中的注釋

在實際的開發中，由于我們寫的代碼可能太多，為了便于以后知道當初寫的是什么意思，以及別人接手后能夠很清晰地知道，很多場合下，我們都會進行代碼注釋。

注釋呢，不是代碼，是用來給自己和別人看的，是某一塊代碼的解釋和說明，不具有程序的效果，我們可以看下面的例子：

針對上邊的“hello,world”，我們加個注釋：

看下運行效果：

是吧，即便我們添加了注釋，運行的效果也不會發生改變，因為注釋是不參與程序的，在網頁源代碼中我們可以看到：

這就是注釋的作用，Html中的注釋語法為，左右兩個尖括號，開頭以!--，結尾是--。如下面：

<!-- -->

在開發工具中，我們可以使用快捷鍵，直接添加注釋，快捷鍵是，Ctrl+/，就會自動出來注釋，有一點需要注意，注釋呢，可以無限的，并不是只能寫一個，也就說，你想寫幾個就寫幾個。

好了，第三天的內容就給大家講述到這里了，大家可以把前兩天所講述的內容，用開發工具寫上一遍，熟悉熟悉這個工具。

.1 HTML簡介

1.1.1 HTML：Hyper Text Markup Language（超文本標記語言）

在學習使用HTML之前，大家經常會問，什么是HTML？HTML是用來描述頁面的一種語言，它是一種超文本標記語言，也就是說，HTML不是一種編程語言，僅是一種標記語言。 HTML由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。

1.1.2 發展史

1.1.3 HTML5的優勢

HTML5自正式推出以來，就以一種驚人的速度被迅速推廣著，各主流瀏覽器對于HTML5表現出來的熱烈歡迎、積極支持。

1、世界知名瀏覽器廠商對HTML5的支持

通過對Internet、Explorer、Google、Firefox、Safari、Opera等主要的web瀏覽器發展策略調查，發現它們都在支持HTML5上采取了措施

- 微軟：2010年3月16日，微軟與拉斯維加斯市舉行的MIX10技術大會上宣布已推出InternetExplorer(IE)9瀏覽器開發者預覽版。

- Google：2010年2月19日，GoogleGears項目經理伊安~費特通過博客宣布，谷歌將放棄對Gears瀏覽器插件項目支持、重點開發HTML5項目

- 蘋果：2010年6月7日，蘋果開發者大會的會后發布了Safari5。這款瀏覽器支持10個以上HTML5的新技術，包括全屏播放、HTML5地理位置、HTML5的形式驗證等功能

- Opera：2010年5月5日，Opera軟件公司首席技術官Hakon Wium Lie先生在訪華之際，接受了中國軟件資訊網等少數幾家媒體采訪，他認為HTML5和CSS3將是全球互聯網發展的未來趨勢

- Mozilla：2010年7月，Mozilla基金會發布了Firefox4瀏覽器的第一個測試版，從官方文檔看，它對HTML5是完全級別的支持

2、市場的需求

現在的市場已經迫不及待地要求有一個統一的互聯網通用標準。HTML5之前的情況是，由于各瀏覽器之間不統一，僅修改web瀏覽器之間的由于兼容性而引起的bug就浪費了大量的時間。而HTML5的目標就是將web帶入一個成熟的應用平臺，在HTML5平臺上，視頻，音頻，圖像，動畫及同計算器的交互都被標準化。

3、跨平臺

HTML5可以做到跨平臺開發，用戶只用打開瀏覽器即可訪問應用，PC網站、各種移動設備，插件等核心代碼就可以不需要重復編寫，極大地減少了開發人員的工作量。

1.1.4 W3C標準

發明HTML的初衷是實現信息資料的網絡傳播和共享，希望HTML文檔具有平臺無關性，即同一個HTML文件，在不同的瀏覽器上看到同樣的頁面內容和效果。但是遺憾的是，隨著瀏覽器市場的激烈競爭，各大瀏覽器廠商為了吸引用戶，都在早期HTML版本的基礎上擴展各類標簽，各瀏覽器之間互不兼容，導致HTML編碼規則混亂，違背了HTML發明的初衷，因此需要一個組織來指定和維護統一的國際化web開發標準，確保多個瀏覽器都兼容，HTML內容結構都是語義化的。

W3C標準不是某一個標準，而是一系列的標準集合，一個網頁主要有三部分組成，即結構、表現、行為。

對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3CDOM）、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

1.1.5 網頁編輯工具

1、開發工具：

記事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
你可以從以上軟件的官網中下載對應的軟件，按步驟安裝即可。
接下來我們將為大家演示如何使用 WebStorm來創建 HTML 文件。

2、使用WebStorm編輯HTML文檔如下：

打開WebStorm編輯器后，選擇File->New->HTML File命令，打開“HTML File”對話框;
在“Name”文本框中輸入HTML的文件名為“my_firstPage”在“Kind”下拉列表框中選擇HTML5 file選項后OK按鈕即可創建一個HTML5頁面的模板;
在body元素和title元素中添加網頁內容;
網頁內容添加完成后，鼠標移動到編輯器的右上方，會出現幾個常見的瀏覽器圖標，單擊Chrome瀏覽器附表即可打開頁面;
在Chrome瀏覽器中可以顯示出結果。

2.1 HTML基礎

2.1.1 HTML5的基本結構

<html>
    <head>
             <title>我的第一個網頁</title>
    </head>
    <body>
             我的第一個網頁
    </body>
</html>

標簽都是成對出現的。有一個開頭標記就應該有一個對應的結束標記記，“<>”開始，以“</>”結束，要求成對出現，標簽之間有縮進，提現層次感，方便閱讀。

HTML5的基本結構分為兩部分。整個HTML包括頭部｛head｝和主體｛body｝兩部分，頭部包括網頁標題｛title｝等基本信息，主體包括頁面的內容信息，如圖片、文字等。

2.1.2 網頁的基本信息

1、DOCTYPE 聲明在這個HTML5文件最上面有一行關于DOCTYPE文檔類型的聲明，約束HTML文檔結構。檢查是否符合相關WEB標準，同時告訴瀏覽器使用那中規范來解釋這個文檔中的代碼。DOCTYPE聲明必須位于HTML文檔的第一行。

HTML5:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">

2、<title>標簽 使用<title>標簽描述頁面的標簽，類似一個文檔的標題，為一個簡介的主題，并能使讀者有興趣。

<title>搜狐-中國最大的門戶網站</title>

3、<meta>標簽 使用<meta>標簽描述網頁的摘要信息，包括文檔內容類型、字符編碼信息，搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標簽的內容并不顯示，其目的是方便瀏覽器解析或利于搜索引擎搜索，它采用“名稱/值”對的方式描述摘要信息。

meta標簽可分為兩大部分：http-equiv和name變量。

http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。

name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

1.文檔內容類型，字符編碼信息書寫如下：

HTML5:

<meta charset="UTF-8">

HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

屬性：charset表示字符集編碼，常用的編碼有以下幾種。

1.gb2312：簡體中文，一般用于包含中文和英文的頁面；

2.ISO-885901：純英文，一般用于只包含英文的頁面；

3.big5：繁體，用于帶有繁體字的頁面；

4.UTF-8：國際性通用的編碼，同樣適用于中文和英文的頁面。和gb2312編碼相比，國際通用性更好。

2.搜索關鍵字和內容描述信息書寫如下：

<meta name="keywords" content="云圖智聯">
<meta name="description"content="云圖智聯是國內的IT教育集團，致力于為中國培養優秀的IT技術人才">

網站示例：

<!--京東-->
 <meta name="description"
          content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>

<!--淘寶-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>淘寶網 - 淘！我喜歡</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨后付款)等安全交易保障服務，并由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪" />

2.1.3 HTML5的基本標簽

1、標題標簽

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

標題標簽表示一段文字和標題或主題，并且支持多層的內容結構。例如，一級標題采用h1，二級標題采用h2，其他級別標題以此類推。HTML共提供了六級標題h1~h6，并賦予了標題一定的外觀，所有標題字體加粗，h1字號最大，h6字號最小。

2、段落標簽、換行標簽和水平線標簽

<p>段落標簽</p>
<br/><!--換行標簽-->
<hr><!--水平線標簽-->

3、字體樣式標簽

<!--加粗-->
<strong></strong>
<b></b>
<!--傾斜-->
<em></em>
<i></i>
<!--字體縮小-->
<small></small>
<!--刪除線-->
<s></s>
<!--下劃線-->
<u></u>

4、圖像標簽

（1）常見的圖像格式

1.JPG格式

JPG格式圖像是在Internet上被廣泛支持的圖像格式，它是聯合圖像專家組格式的英文縮寫。JPG格式采用的是有損壓縮，會造成圖像畫面的失真，不過壓縮之后的體積很小，而且比較清晰，所以比較適合在網頁中應用此格式最適合用于排和或連續取色調圖像的高級格式，這事因為JPG文件可以包含數百萬種顏色。隨著JPG格式文件品格式質的提高，文件的大小和下載時間也會隨著增加。通常可以通過壓縮JPG格式文件在圖像品質和文件大小之間達到良好的平衡。

2.GIF格式

GIF格式圖像是網頁中使用最廣泛，最普通的一種圖像格式，它是圖像交換格式的英文縮寫。GIF格式文件支持透明色，使得GIF格式在網頁的背景和一些多層特效的顯示上用得非常多；還支持動畫，這是它最突出的一個特點，因此GIF格式圖像在網頁中應用非常廣泛。

3.BMP格式

BMP格式圖像在Windows操作系統中使用得比較多，它是位圖的英文縮寫。BMP格式圖像格式與其他Microsoft Windows程序兼容。它不支持文件壓縮，也不是用于Web頁。

4.PNG格式

PNG格式是20世紀90年代中期開始開發的圖像文件儲存格式，它兼有GIF和JPG格式的優勢，同時具備GIF格式不具備的特性。

（2）圖像標簽

<img src="path" alt="text" title="text"  width="x"  height="y" />

src屬性表示圖片路徑，alt屬性指定圖像的代替文本，表示圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代先是文本，這樣，即使當圖像無法顯示時，用戶還可以看到網頁丟失的信息內容。

title屬性可以提供額外的提示或幫助信息，當鼠標移至圖片上時顯示提示信息，方便用戶使用。

width和height兩個屬性分別表示圖片的寬度和高度，如果不設置，那么圖片默認顯示原始大小。

5、超鏈接標簽

（1）超鏈接包含兩部分內容，一是鏈接地址，即鏈接的目標，可以是某個網站或文件路徑，對應a標簽的href屬性；二是鏈接文本或圖像，點擊該文本或圖像，將跳轉到href屬性指定的鏈接地址。

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

href：鏈接地址的路徑;

target：指定鏈接在哪個窗口打開，常用的取值有_self（自身窗口）、_blank（新建窗口）。超鏈接即可以是文本超鏈接，也可以使圖片超鏈接

（2）常用的超鏈接

1>頁面間鏈接

從一個頁面鏈接到另一個頁面

2>錨鏈接

錨鏈接也稱錨點鏈接，命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，自動跳轉到我們設置錨點的位置，類似于我們閱讀書籍時的目錄頁碼或章回提示。

錨點鏈接可以跳轉到頁面的任何位置。一般用于在頁面下面的時候，點擊回到最上面。錨點鏈接的名稱可以隨意取，只起到標記作用。

1.從A頁面的甲位置跳轉到本頁中的乙位置

示例：

    <a href="#a1">a1</a>
    <a href="#a2">a2</a>
    <a href="#a3">a3</a>
    <a href="#a4">a4</a>

    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
    <div id="a4">a4</div>

2.從A頁面的甲位置跳轉到B頁面中的乙位置

示例：

<!--A頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>錨鏈接</title>
</head>
<body>
<p>
    [<a href="help.html#register">A位置</a>] 
    [<a href="help.html#login">B位置</a>]
</p>
</body>
</html>

<!--B頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>錨鏈接</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
    <h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
    <h2>B位置</h2>
</div>
</body>
</html>

3>功能性鏈接

<!--下載圖片-->
<a href="img/qq.jpg">點擊下載圖片</a>

<!--發送郵件-->
<a href="mailto:Webmaster@ytzl.cn">聯系我們</a>

<!--引用腳本語言-->
<a href="javascript：alert('哈哈哈哈')"></a>

6、注釋和特殊符號

<!--注釋符號-->

當頁面的HTML結構復雜或內容較多時，需要添加必要的注釋方便代碼閱讀和維護。同時，有時為了調試，需要暫時注釋掉一些不必要的HTML代碼。特殊符號一般以"&"符號開頭，";"結尾。

3.1 練習

3.1.1 制作《悟空》歌詞

需求：

1、標題使用標題標簽，文字使用p標簽標題與正文之間的分隔線使用水平線標簽；歌詞詞結束后使用換行標簽換行

2、人名加粗顯示，時間斜體顯示

3、制作頁面版權部分

<html>
    <head>
             <title>我的第一個網頁</title>
    </head>
    <body>
             我的第一個網頁
    </body>
</html>

3.1.2 制作圖書簡介頁面

使用學過的圖像標簽、標題標簽、水平線標簽、斜體標簽、加粗標簽、段落標簽等制作京東讀書新聞資訊頁面，主標題使用一級標題標簽，副標題使用二級標題標簽，二級標題與圖片之間使用水平線分隔。

<h1>HTML5+CSS3從入門到精通（標準版）</h1>
<h2>作者：未來科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="圖書" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript從入門到精通（標準版）</em></p>
<p><em>  以基礎知識、示例、實戰案例相結合的方式詳盡講述了HTML  CSS  JavaScript及目前*的前端技術html5移動開發 html5實戰 html5 canvas html5 app html5入門 html5 動畫  html5揭秘 html 游戲 html5權威指南 的基本知識都有涉及。</em></p>
<p><strong>全書分兩大部分，共12章</strong></p>
<p>介紹了HTML5入門和CSS3實戰入門內容：使用HTML標簽標識網頁內容，使用CSS設計網頁基本樣式，如使用并美化文本、圖像、超鏈接、列表、表單和表格等</p>
<p>第二部分為CSS3布局部分，主要講解使用CSS3設計完整網頁的方法和技巧，以及CSS3中的各種新技術應用；</p>
<p>? 2015-2025 云圖智聯</p>

3.1.3 錨鏈接的應用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
        }
        div{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>

免費學習視頻歡迎關注云圖智聯：https://e.yuntuzhilian.com/

在線咨詢

上一篇：HTML教程（看完這篇就夠了）
下一篇：HTML5網頁錄音和上傳到服務器，支持PC、Android，支持IOS微信

您的項目需求

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

整合營銷服務商