從零開始學Web之HTML（二）標籤、超連接、特殊符號、列表、音樂、滾動、head等

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

---

1、標籤

一、單標籤

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

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

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

二、雙標籤

• 段落標籤：<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：圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，若是隻更改圖片的寬度或者高度，圖片等比例縮放

---

2、超連接

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

href ：去往的路徑、跳轉的頁面， 必寫屬性
title ： 提示文本，鼠標放到連接上顯示的文字
target=」self" （默認值），在自身頁面打開（關閉自身頁面，打開連接頁面）

Target=」blank」 打開新頁面，（自身頁面不關閉，打開一個新的連接頁面）

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

一、錨連接

咱們先搞清楚什麼是錨連接：

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

錨點連接能夠跳轉到頁面的任何位置。通常用於在頁面下面的時候，點擊回到最上面。錨點連接的名稱能夠隨意取，只起到標記做用。

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

二、空鏈

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

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

PS：空鏈至關於 #top，實際點擊此連接的時候會跳轉到頁首的位置。

三、壓縮文件下載

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

PS：不推薦使用

四、超連接優化寫法

<base target="_blank">   // 讓全部的超連接都在新窗口打開

PS：寫的位置在 head 裏面。

---

3、特殊字符

特殊符號	字符代碼
(空格)	 
<	&lt;
>	&gt;
&	&amp;
¥	&yen;
©	&copy;
®	&reg;
×	&times;
÷	&devide;

參考連接：HTML特殊字符編碼對照表

---

4、列表

一、無序列表

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

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

二、有序列表

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

type="1,a,A,i,I" ，type的值能夠爲1,a,A,i,I

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

三、自定義列表

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

---

5、音樂標籤

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

hidden="true" 隱藏音樂標籤

---

6、滾動標籤

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

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

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

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

---

7、head裏面相關知識

一、charset編碼

<meta charset="UTF-8">

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

二、name

2.一、關鍵字

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

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

2.二、網頁描述

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

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

2.三、做者

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

告訴搜索引擎你的站點的製做者

2.四、文件檢索

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

有時候會有一些站點內容，不但願被 robots 抓取而公開。爲了解決這個問題，robots 開發界提供了兩個辦法：一個是robots.txt，另外一個是 robots meta 標籤。
其中的屬性說明以下：
all：（默認）文件將被檢索，且頁面上的連接能夠被查詢；
none：文件將不被檢索，且頁面上的連接不能夠被查詢；
index：文件將被檢索；
follow：頁面上的連接能夠被查詢；
noindex：文件將不被檢索，但頁面上的連接能夠被查詢；
nofollow：文件將不被檢索，頁面上的連接能夠被查詢。

三、http-equiv 網頁重定向

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

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

四、連接外部樣式表

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

rel="stylesheet"：連接的是什麼？樣式表仍是圖標
type="text/css" type="text/css"：規定連接文件的MIME類型，就是說連接文件時css仍是js
href="1.css"：連接的文件路徑

五、設置 icon 圖標

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

---

8、小結

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

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