大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、標籤

1、單標籤

• 註釋標籤 ：<!-- 註釋 -->

• 換行標籤：<br> 或 <br />

• 水平線標籤：<hr> 或 <hr />

2、雙標籤

• 段落標籤：<p></p>

特點：上下自動生成空白行。br 換行不會生成空白行。

• 標題標籤：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>

h1 在一個頁面裡只能出現一次。（作用是：便於SEO 搜尋引擎優化）

• 文字標籤：<font size="" color=""></font>

• 文字格式化標籤

文字加粗 ：<strong></strong> <b></b>

工作裡儘量使用strong，對於盲人來說 strong有語義強調的功能。

文字傾斜：<em></em> <i></i> <!-- 工作裡儘量使用em，原因同strong -->

刪除線標籤：<del></del> <s></s> <!--工作裡儘量使用del -->

下劃線標籤：<ins></ins> <u></u> <!--工作裡儘量ins-->

圖片標籤：<img src="" alt="" title=""width="" height="" >

src : 圖片的來源（必寫屬性）
alt : 替換文字 ，圖片不顯示的時候顯示的文字（重要性：1.SEO優化 2.盲人閱讀需求）
title : 提示文字，滑鼠放到圖片上顯示的文字
width : 圖片寬度
height : 圖片高度

PS：圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，如果只更改圖片的寬度或者高度，圖片等比例縮放

二、超連結

<a href="" title="" target="">填寫內容</a>

href ：去往的路徑、跳轉的頁面， 必寫屬性
title ： 提示文字，滑鼠放到連結上顯示的文字
target=”self" （預設值），在自身頁面開啟（關閉自身頁面，開啟連結頁面）

Target=”blank” 開啟新頁面，（自身頁面不關閉，開啟一個新的連結頁面）

PS：當 href 的值為 javascript:void(0); 或 javascript:; ，表示超連結不做任何事情，不做任何跳轉。

1、錨鏈接

我們先搞清楚什麼是錨鏈接：

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

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

<p id="AAA">
  
</p>
...
<a href="#AAA"></a>   // 超連結到錨點

2、空鏈

不知道連結到那個頁面的時候，用空鏈

<a href="#">空鏈</a>

PS：空鏈相當於 #top，實際點選此連結的時候會跳轉到頁首的位置。

3、壓縮檔案下載

<a href="../../xxx.rar"></a>

PS：不推薦使用

4、超連結優化寫法

<base target="_blank">   // 讓所有的超連結都在新視窗開啟

PS：寫的位置在 head 裡面。

三、特殊字元

四、列表

1、無序列表

<ul type="">
    <li></li>    <!-- 列表項 -->
    <li></li>
    <li></li>
    ......
</ul>

type="square" ：小方塊
type="disc" ： 實心小圓圈
type="circle" ： 空心小圓圈

2、有序列表

<ol type="" start="">
    <li></li>   <!-- 列表項 -->
    <li></li>
    <li></li>
    ......
</ol>

type="1,a,A,i,I" ，type的值可以為1,a,A,i,I

start="3" 決定了開始的位置。

3、自定義列表

<dl>
 <dt></dt>    <!-- 小標題 -->
  <dd></dd>   <!-- 解釋標題 -->
  <dd></dd>   <!-- 解釋標題 -->
</dl>

五、音樂標籤

<embed src="1.mp3" hidden="true"></embed>

hidden="true" 隱藏音樂標籤

六、滾動標籤

<marquee width="" height="" bgcolor="" behavior="" direction="" loop="">
</marquee>

width：寬度
height：高度
bgcolor：背景顏色

behavior：設定滾動的方式
​ alternate：在兩端之間來回滾動
​ scroll：由一端滾動到另一端，會重複
​ slide：由一端滾動到另一端，不會重複

direction：設定滾動的方向
​ left | right | up | down
loop：滾動次數（-1：一直滾動下去）

七、head裡面相關知識

1、charset編碼

<meta charset="UTF-8">

ASCII/ANSI/Unicode：英語
GBK ：亞洲通用字符集
GB2312：中文簡體
Big5 ：臺澳港繁體
UTF-8：世界通用字符集

2、name

2.1、關鍵字

<meta name="keywords" content="">

告訴搜尋引擎你的站點的關鍵字。SEO優化使用

2.2、網頁描述

<meta name="discription" content="">

告訴搜尋引擎你的站點的主要內容。這個description是給SEO和使用者看的。

2.3、作者

<meta name="author" content="名字">

告訴搜尋引擎你的站點的製作者

2.4、檔案檢索

<meta name="robots" content="all | none | index | noindex | follow | nofollow">

有時候會有一些站點內容，不希望被 robots 抓取而公開。為了解決這個問題，robots 開發界提供了兩個辦法：一個是robots.txt，另一個是 robots meta 標籤。
其中的屬性說明如下：
all：（預設）檔案將被檢索，且頁面上的連結可以被查詢；
none：檔案將不被檢索，且頁面上的連結不可以被查詢；
index：檔案將被檢索；
follow：頁面上的連結可以被查詢；
noindex：檔案將不被檢索，但頁面上的連結可以被查詢；
nofollow：檔案將不被檢索，頁面上的連結可以被查詢。

3、http-equiv 網頁重定向

<meta http-equiv="reflesh" content="5; http://www.google.com">

網頁自動跳轉：網頁5秒後自動跳轉到谷歌主頁

4、連結外部樣式表

<link rel="stylesheet" type="text/css" href="1.css">

rel="stylesheet"：連結的是什麼？樣式表還是圖示
type="text/css" type="text/css"：規定連結檔案的MIME型別，就是說連結檔案時css還是js
href="1.css"：連結的檔案路徑

5、設定 icon 圖示

<link rel="icon" href="1.ico">

八、小結

今天將的內容是：標籤、超連結、特殊符號、列表、音樂標籤、滾動標籤、和 head 裡面相關知識點。

下次將講解表格、表單等內容。