前端基礎入門（HTML）

習目標

了解常用瀏覽器
掌握WEB標準

理解標簽語義化
掌握常用的排版標簽
掌握常用的文本格式化圖像鏈接等標簽
掌握三種列表標簽
掌握表格標簽
掌握表格標簽
掌握表單標簽

HTML第一天目標

能夠寫出基本的頁面（里面包含圖片、各種標簽和鏈接）

開發工具

我們主要用的開發工具有chrome、hbuilder、Photoshop

瀏覽器顯示

瀏覽器是網頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。

瀏覽器內核（理解）

瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎：它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎并沒有區分得很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多，如果加上沒什么人使用的非商業的免費內核，可能會有10多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。

了解一點：移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發。

iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的

Web標準

了解常用瀏覽器

1、讓Web的發展前景更廣闊
2、內容能被更廣泛的設備訪問
3、更容易被搜尋引擎搜索
4、降低網站流量費用

5、使網站更易于維護
6、提高頁面瀏覽速度

web標準的結構

結構標準：結構用于對網頁元素進行整理和分類，咱們主要學的是HTML。最重要
表現標準：表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：行為是指網頁模型的定義及交互的編寫，咱們主要學的是 Javascript

HTML初識

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”。是用來描述網頁的一種語言。

所謂超文本，因為它可以加入圖片、聲音、動畫、多媒體等內容，不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接。

<h1> 我是一個大標題 </h1>

注意：體會文本標簽語言幾個詞語

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)

標記語言是一套標記標簽 (markup tag)

總結： HTML 作用就是用標記標簽來描述網頁，把網頁內容在瀏覽器中展示出來。

HTML骨架格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

骨架結構解析

1.HTML標簽：
作用所有HTML中標簽的一個根節點。最大的標簽根標簽
2 head標簽：文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

注意在head標簽中我們必須要設置的標簽是title

3.title標簽：文檔的標題
作用：讓頁面擁有一個屬于自己的標題。
4.body標簽：文檔的主體以后我們的頁面內容基本都是放到body里面的
body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）

HTML標簽分類

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 HTML、head、body都是HTML骨架結構標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素

1.雙標簽

<標簽名> 內容 </標簽名>

該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。

比如 <body>我是文字 </body>

2.單標簽

<標簽名 />

單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。

比如 <br />

HTML標簽關系

標簽的相互關系就分為兩種：

1.嵌套關系

2.并列關系

HTML常用標簽

首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標簽，認識標簽就可以了。不會再給結構標簽指定樣式了。

HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。

排版標簽

標題標簽（熟記）

單詞縮寫： head 頭部. 標題 title 文檔標題

為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式如下：

段落標簽（熟記）

水平線標簽（認識）

<hr />是單標簽

換行標簽（熟記）

<br />

div span標簽(重點)

div span 是沒有語義的是我們網頁布局主要的2個盒子 css+div

div 就是 division 的縮寫分割，分區的意思其實有很多div 來組合網頁。

span, 跨度，跨距；范圍

語法格式：

文本格式化標簽(熟記)

在網頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。

b i s u 只有使用沒有強調的意思 strong em del ins 語義更強烈

標簽屬性

使用HTML制作網頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設置。其基本語法格式如下：

<標簽名屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>

在上面的語法中，

1.標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。

2.屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。

3.任何標簽的屬性都有默認值，省略該屬性則取默認值。

采取鍵值對的格式 key="value" 的格式

比如:

屬性是寬度

值是 400

圖像標簽img (重點)

單詞縮寫： image 圖像

HTML網頁中任何元素的實現都要依靠HTML標簽，要想在網頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和他相關的屬性。其基本語法格式如下：

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。

鏈接標簽(重點)

單詞縮寫： anchor 的縮寫 [???k?(r)] 。基本解釋錨, 鐵錨的

在HTML中創建超鏈接非常簡單，只需用標簽環繞需要被鏈接的對象即可，其基本語法格式如下：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href：用于指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用

target：用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認值，blank為在新窗口中打開方式。

注意：

1.外部鏈接需要添加 http:// www.baidu.com

2.內部鏈接直接鏈接內部頁面名稱即可比如 < a href="index.html"> 首頁

3.如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。

4.不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

錨點定位（難點）

通過創建錨點鏈接，用戶能夠快速定位到目標內容。

創建錨點鏈接分為兩步：

1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本（被點擊的） <a href="#two"> 2.使用相應的id名標注跳轉目標的位置。 <h3 id="two">第2集</h3>

base 標簽基本的

base 可以設置整體鏈接的打開狀態

base 寫到 <head> </head> 之間

把所有的連接都默認添加 target="_blank"

特殊字符標簽（理解）

注釋標簽

在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。其基本語法格式如下：

ctrl + / 或者 ctrl +shift + /

注釋內容不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。

路徑(重點、難點)

實際工作中，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。

路徑可以分為：相對路徑和絕對路徑

相對路徑

以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。

圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如img src="logo.gif" /。
圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如img src="img/img01/logo.gif" /。

圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如img src="../logo.gif" /。

絕對路徑

絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的

“D:webimglogo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/l...”。

總結今天的思路貫穿線

列表標簽

無序列表 ul （重點）

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

注意：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。

無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

有序列表 ol （了解）

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

所有特性基本與ul 一致。

但是實際工作中，較少用 ol img src="media/1.jpg" />

自定義列表（理解）

定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

表格 table(會使用)

創建表格

在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。創建表格的基本語法格式如下：

<table> <tr> <td>單元格內的文字</td> ... </tr> ... </table>

在上面的語法中包含三對HTML標簽，分別為 table</table、tr</tr、td</td，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體的解釋
1.table用于定義一個表格。

2.tr 用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。

3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。

注意：

1. <tr></tr>中只能嵌套<td></td> 2. <td></td>標簽，他就像一個容器，可以容納所有的元素

表格屬性

表頭標簽

表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標簽th</th替代相應的單元格標簽td</td即可。

表格結構（了解）

在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述），具體如下所示：

<thead></thead>：用于定義表格的頭部。

必須位于<table></table> 標簽中，一般包含網頁的logo和導航等頭部信息。

<tbody></tbody>：用于定義表格的主體。

位于<table></table>標簽中，一般包含網頁中除頭部和底部之外的其他內容。

表格標題

表格的標題： caption
定義和用法

caption 元素定義表格標題。

<table>    <caption>我是表格標題</caption> </table>

caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。

合并單元格(難點)

跨行合并：rowspan 跨列合并：colspan

合并單元格的思想：

將多個內容合并的時候，就會有多余的東西，把它刪除。例如把 3個 td 合并成一個，那就多余了2個，需要刪除。公式：刪除的個數 = 合并的個數 - 1

合并的順序先上先左

總結表格

表格提供了HTML 中定義表格式數據的方法。
表格中由行中的單元格組成。

表格中沒有列元素，列的個數取決于行的單元格個數。
表格不要糾結于外觀，那是CSS 的作用。

表格的學習要求：能手寫表格結構，并且能合并單元格。

表單標簽(掌握)

表單控件：

包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。

提示信息：

一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

表單域：

他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。

input 控件(重點)

在上面的語法中，input /標簽為單標簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，input /標簽還可以定義很多其他的屬性，其常用屬性如下表所示。

label標簽(理解)

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

作用：用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

如何綁定元素呢？

for 屬性規定 label 與哪個表單元素綁定。

<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的信息，就需要用到textarea/textarea標簽。通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下：

<textarea cols="每行中的字符數" rows="顯示的行數">   文本內容 </textarea>

下拉菜單

使用select控件定義下拉菜單的基本語法格式如下

<select>   <option>選項1</option>   <option>選項2</option>   <option>選項3</option>   ... </select>

注意：

select</select中至少應包含一對option></option。
在option 中定義selected =" selected "時，當前項即為默認選中項。

表單域

在HTML中，form標簽被用于定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：

<form action="url地址" method="提交方式" name="表單名稱">   各種表單控件 </form>

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數據的服務器程序的url地址。
method
用于設置表單數據的提交方式，其取值為get或post。

name
用于指定表單的名稱，以區分同一個頁面中的多個表單。

注意：每個表單都應該有自己表單域。

如需轉載，請注明出處，否則將追究法律責任。

TML 段落

段落是通過 <p> 標簽定義的。

實例

[demo]

<html>

<head>

</head>

<body>

<p>段落元素由 p 標簽定義。</p>

</body>

</html>

[/demo]

注釋：瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素）

提示：使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標簽代替它！（但是不要用 <br /> 標簽去創建列表。不要著急，您將在稍后的篇幅學習到 HTML 列表。）

不要忘記結束標簽

即使忘了使用結束標簽，大多數瀏覽器也會正確地將 HTML 顯示出來：

實例

[demo]

<html>

<head>

</head>

<body>

<p>This is a paragraph.

<p>不要忘記關閉你的 HTML 標簽！</p>

</body>

</html>

[/demo]

上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。

注釋：在未來的 HTML 版本中，不允許省略結束標簽。

提示：通過結束標簽來關閉 HTML 是一種經得起未來考驗的 HTML 編寫方法。清楚地標記某個元素在何處開始，并在何處結束，不論對您還是對瀏覽器來說，都會使代碼更容易理解。

HTML 折行

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標簽：

[demo]

<html>

<head>

</head>

<body>

<p>

To break<br />lines<br />in a<br />paragraph,<br />use the br tag.

</p>

</body>

</html>

[/demo]

<br /> 元素是一個空的 HTML 元素。由于關閉標簽沒有任何意義，因此它沒有結束標簽。

您也許發現 <br> 與 <br /> 很相似。

在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結束標簽（閉合標簽）的 HTML 元素。

即使 <br> 在所有瀏覽器中的顯示都沒有問題，使用 <br /> 也是更長遠的保障。

HTML 輸出 - 有用的提示

我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整都可能導致不同的結果。

對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。

[demo]

<html>

<head>

</head>

<body>

<p>

春眠不覺曉，

處處聞啼鳥。

夜來風雨聲，

花落知多少。

</p>

<p>注意，瀏覽器忽略了源代碼中的排版（省略了多余的空格和換行）。</p>

</body>

</html>

[/demo]

（這個例子演示了一些 HTML 格式化方面的問題）

HTML 標簽參考手冊

標簽描述

<p> 定義段落。

<br /> 插入單個折行（換行）。

HTML 可定義很多供格式化輸出的元素，比如粗體和斜體字。

下面有很多例子，您可以親自試試：

HTML 文本格式化實例

文本格式化

[demo]

<html>

<head>

</head>

<body>

<br />

<strong>This text is strong</strong>

<br />

<br />

<em>This text is emphasized</em>

<br />

<i>This text is italic</i>

<br />

<small>This text is small</small>

<br />

This text contains

<sub>subscript</sub>

<br />

This text contains

<sup>superscript</sup>

</body>

</html>

[/demo]

預格式文本

[demo]

<html>

<head>

</head>

<body>

<pre>

這是

預格式文本。

它保留了空格

和換行。

</pre>

<p>pre 標簽很適合顯示計算機代碼：</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

[/demo]

“計算機輸出”標簽

[demo]

<html>

<head>

</head>

<body>

<code>Computer code</code>

<br />

<kbd>Keyboard input</kbd>

<br />

<tt>Teletype text</tt>

<br />

<samp>Sample text</samp>

<br />

<var>Computer variable</var>

<br />

<p>

<b>注釋：</b>這些標簽常用于顯示計算機/編程代碼。

</p>

</body>

</html>

[/demo]

地址

[demo]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

</body>

</html>

[/demo]

縮寫和首字母縮寫

[demo]

<html>

<head>

</head>

<body>

<br />

<p>在某些瀏覽器中，當您把鼠標移至縮略詞語上時，title 可用于展示表達的完整版本。</p>

<p>僅對于 IE 5 中的 acronym 元素有效。</p>

<p>對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>

</html>

[/demo]

文字方向

[demo]

<html>

<head>

</head>

<body>

<p>

如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)；

</p>

Here is some Hebrew text

</bdo>

</body>

</html>

[/demo]

塊引用

[demo]

<html>

<head>

</head>

<body>

這是長的引用：

這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。

</blockquote>

這是短的引用：

<q>

這是短的引用。

</q>

<p>

使用 blockquote 元素的話，瀏覽器會插入換行和外邊距，而 q 元素不會有任何特殊的呈現。

</p>

</body>

</html>

[/demo]

刪除字效果和插入字效果

[demo]

<html>

<head>

</head>

<body>

<p>大多數瀏覽器會改寫為刪除文本和下劃線文本。</p>

<p>一些老式的瀏覽器會把刪除文本和下劃線文本顯示為普通文本。</p>

</body>

</html>

[/demo]

如何查看 HTML 源碼

您是否有過這樣的經歷，當你看到一個很棒的站點，你會很想知道開發人員是如何將它實現的？

你有沒有看過一些網頁，并且想知道它是如何做出來的呢？

要揭示一個網站的技術秘密，其實很簡單。單擊瀏覽器的“查看”菜單，選擇“查看源文件”即可。隨后你會看到一個彈出的窗口，窗口內就是實際的 HTML 代碼。

文本格式化標簽

標簽描述

<b> 定義粗體文本。

<big> 定義大號字。

<em> 定義著重文字。

<i> 定義斜體字。

<small> 定義小號字。

<strong> 定義加重語氣。

<sub> 定義下標字。

<sup> 定義上標字。

<ins> 定義插入字。

<del> 定義刪除字。

<s> 不贊成使用。使用 <del> 代替。

<strike> 不贊成使用。使用 <del> 代替。

<u> 不贊成使用。使用樣式（style）代替。

“計算機輸出”標簽

標簽描述

<code> 定義計算機代碼。

<kbd> 定義鍵盤碼。

<samp> 定義計算機代碼樣本。

<tt> 定義打字機代碼。

<var> 定義變量。

<pre> 定義預格式文本。

<listing> 不贊成使用。使用 <pre> 代替。

<plaintext> 不贊成使用。使用 <pre> 代替。

<xmp> 不贊成使用。使用 <pre> 代替。

引用、引用和術語定義

標簽描述

<abbr> 定義縮寫。

<acronym> 定義首字母縮寫。

<address> 定義地址。

<bdo> 定義文字方向。

<blockquote> 定義長的引用。

<q> 定義短的引用語。

<cite> 定義引用、引證。

<dfn> 定義一個定義項目。

、HTML文本結構

瀏覽器通常會為其文本元素添加不同的樣式，以區別于普通文本。例如 em 和 cite 元素中的文本都是斜體的。又如，code 元素專門用來格式化腳本或程序中的代碼，該元素中的文本默認使用等寬字體。內容顯示的樣子與其使用的標記沒有關系。因此不應該為了讓文字變為斜體就使用 em 或 cite，添加樣式是 css 的事情。相反，應該選擇能描述內容的 HTML 元素。

添加段落：要在網頁中開始一個新的段落，使用 p元素。（通過 css 可以為段落添加樣式，包括字體、字號、顏色等。以及控制內行間距，段落文本對齊方式等。）

<p> HTML <small> HyperText Markup Language </small> </p>

指定細則：small元素表示細則一類的旁注，通常是文本中的一小塊。

<p> HTML <small> HyperText Markup Language </small> </p>

3.標記重要和強調文本：strong元素 表示內容的重要性，而 em元素 表示內容的著重點。

   <p> <strong> Warning:Do not approach the ... <em>
     under any... </em> </strong> just because... </p>

瀏覽器通常將 strong 文本以粗體顯示，em 文本以斜體顯示。可以用 CSS 將任何文本變為粗體或斜體，也可以覆蓋 strong 和 em 等元素的瀏覽器默認顯示樣式。

4.創建圖：圖可以是圖表、照片、圖形、插圖、代碼片段以及其他類似的獨立內容。通過引入 figure 和 figcaption，figcaption 是 figure 的標題。

<figure>
<figcaption>
 [標題內容]
</figcaption>
 [插入內容]
<img src = "xxx.png" width = "180" height = "143" 
 alt = "Reveue chart:Clothing 42%,Toys 36%, Food 22%" />
</figure>

figcaption 元素并不是必須的，但是只有包含它，就必須是 figure 元素內嵌的第一個或最后一個，且只能有一個。 5.指明引用或參考：使用 cite元素 可以指明對某內容源的引用或參考。默認以斜體顯示（不因使用 cite 引用人名）

 <p> he Listend to <cite> Abbey Road </cite> </p>

6.引述文本：有兩個特殊的元素用以標記引述的文本。blockquote元素 表示單獨存在的引述，其默認顯示在新的一行。而 q元素 則用于短的引用，如句子里面的引述。由于q元素存在夸瀏覽器問題，應該避免使用，而是直接輸入引號。

<blockquote>
 text...
</blockquote>
瀏覽器對應q元素中的文本自動加上語音的引號。
<p> And then she said,<q lang ="" > Have you read... </q> </p>

7.指定時間：使用 time元素 標記時間、日期或時間段。輸入 datetime="time" 指定格式日期，可以按照你希望的任何形式表示日期。

<time> 16:20 </time>  <time > 2021-07-24 </time>
<time datetime= "2021-07-24"> Ochtober 24,2021 </time>

8.解釋縮寫詞：使用 abbr元素 標記縮寫詞并解釋其含義。（通常是使用括號提供縮寫詞的全稱是解釋縮寫詞最直接的方式）

<p> The <abbr title = "Notional Football league"> NFL </abbr> </p>
<p> But,that's ... <abbr> MLB </abbr> (Major league Baseball) ... </p>

9.定義術語:在HTML中定義術語時，使用 dfn元素 對其作語義上的區分，首次定義術語通常會對其添加區別于其他文本格式，后續在使用術語時不再需要使用dfn對其進行標記。（默認以斜體顯示）

  <p> The contesttant ... <dfn> pleonasm </dfn> </p>

10.創建上標和下標:比主體文本稍高或稍低的字母或數字分別成稱為上標和下標。可以使用 sub元素 創建下標， sup元素 創建上標。上標和下標字符會輕微地擾亂行與行之間的均勻間距，但可以使用 CSS 修復這個問題。

<p> ... <a href = "#footnote-1" title = "REad footnote 1"> 
    Text   <sub> 1 </sub> </a> </p>
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
    Text <sup> 1 </sup> </a> </p>

11.添加作者聯系方式: address元素 用以定于與 HTML 頁面或頁面一部分有關的作者、相關人士信息或組織聯系信息，通常位于頁面底部或相關部分內。

 <footer role = "contentinfo">
  <p> <small> ? 2021 The Paper of ... </small> </p>
 <address>
  Hava a question or ... <a href = "site-feedback.html"> Contact our </a>
  </address>		
</footer>

12.標注編輯和不再準確的文本:有時可能需要將在前一版本之后對頁面的編輯標出來，或者對不再準確、不再相關的文本進行標記。有兩種用于標注編輯的元素：代表添加內容的 ins元素 和標記已經刪除內容的 del元素。

  <li> <del> desks </del> </li>
  <li> <ins> bicycle </ins> </li>

通常對已刪除的文本加上刪除線，對插入的文本加入下劃線。標記不再準確或不再相關的文本

  <li> <s> 5 p.m </s> SOLD </li>

13.標記代碼:如果你的內容包含代碼示例或文件名，使用 code元素。

 <p> The <code> showPhoto() </code> ... <code> < ;ul 
 id = "thumbanil" > </code> list </p>

14.使用預格式化的文本：通常瀏覽器會將所有額外的回車和空格壓縮，并根據窗口大小自動換行，預格式化的文本可以保持固有的換行和空格。pre元素。

<pre>
 <code>
  abbr[title] {
    border-boottom: 1px dotted #000;
  }
</code>

如果要顯示包含 HTML 元素內容，應將包圍元素名稱的 < 和 > 分別改為對應的字符實體<和 >否則瀏覽器就會試著顯示這些元素。大多數情況下推薦隊 div 元素使用 white-space:pre 以替代 pre，因為空格可能對這些內容的語義非常重要。

15.突出顯示文本：類似文本中的熒光筆！HTML5 使用新的 mark元素 實現，引起讀者對特定文本片段的注意。對原生支持的瀏覽器將對該元素文字默認加上黃色背景。

<p> GSL is <mark> YYDS! </mark>

16.創建換行：當我們希望在文本中手動強制文字進行換行時，可以使用 br元素 (空元素).

<p> 123 <br />
    456 <br />
</p>

17.創建span：同 div 一樣，span元素 是沒有任何語義的，不同的是，span 只適合包圍字詞或短語內容，而 div 適合包含塊級內容。

 <p> Gaudi's work was essentially useful.
 <span lang ="es"> La Casa Mila </span> is an ...
 </p>

18.其他元素：

U元素：用來為文本添加下劃線。

wbr元素：表示可換行處。讓瀏覽器知道在哪里可以根據需要進行換行（存在跨版本問題）。

ruby元素：旁注標記是一種慣用符號，通常用于表示生僻字的發音。

bdi和bdo元素：如果某些頁面中混合了從左至右書寫的字符（如拉丁字符）和從右至左書寫的字符（如阿拉伯語）, 就可能使用到bdi和bdo元素。

meter元素：用 meter 元素表示分數的值或已知范圍的測量結果。

  <p> Project completion status: <meter value="0.60">80% completed </meter> </p>

progress元素:表示某項任務完成的進度，可用它表示一個進度條。不能與 meter 混在一起使用。

<p> Current progress: <progress max="100" value="30"> 30% saved </progress> </p>

二、 HTML圖片

在頁面插入圖片：輸入 <img src=image.url" />

<img src="xxx.jpg" alt="" />

提供替代文本：在 img 標簽內，src 屬性及值的后面，輸入 alt=""；輸入圖像出于某種原因沒有顯示時應該出現的文本。指定圖像的尺寸：在 img 標簽內，src 屬性后輸入width="x", heigth="y"; 以像素為單位指定 x 和 y。

三、 HTML鏈接

創建一個指向另一個網頁的鏈接：

輸入 <a href="URL"> 此處輸入鏈接標簽 </a>
    
<a href = "http://www.baidu.com"> 百度一下 </a>

創建錨并鏈接到錨：通常激活一個鏈接會將用戶帶到對應網頁的頂端。如果想用戶跳至網頁特定區域，可以創建一個錨，并在鏈接中引用該錨。

1.創建錨：輸入 id="anchor-name",其中 name 是在內部用來標識網頁中這部分內容的文字。

2.創建錨鏈接到特定錨鏈接：輸入 <a href="#"anchor-name>，其中 anchor-name 是目標的 id 屬性值。

3.輸入標簽文本（默認帶下劃線藍色字體），用戶激活該字體時將用戶帶到（1）步中引用的區域文本。

```<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Creating and Linking to Anchors</title>
</head>
<body>

<article>
	<header>
		<h1>Frequently Asked Questions (FAQ)</h1>
		
		<nav>
			<ul>
				<li><a href="#question-01">Can an id have more than one word?</a></li>
				<li><a href="#question-02">Can visitors bookmark anchor links?</a></li>
				<li><a href="#question-03">My anchor link isn't working. What am I doing wrong?</a></li>
				<li><a href="#question-04">How do I link to a specific part of someone else's webpage?</a></li>
			</ul>
		</nav>
	</header>

	<h2 id="question-01">Can an id have more than one word?</h2>
	<p>Yes, your ids can have more than one word as long as there are no spaces. Separate each word with a dash instead.</p>

	<h2 id="question-02">Can visitors bookmark anchor links?</h2>
	<p>Yes, they can! And when they visit that link, the browser will jump down to the anchor as expected. Visitors can share the link with others, too, so all the more reason to choose meaningful anchor names.</p>

	<h2 id="question-03">My anchor link isn't working. What am I doing wrong?</h2>
	<p>The problem could be a few things. First, double-check that you added an id (without "#") to the element your link should point to. Also, be sure that the anchor in your link <em>is</em> preceded by "#" and that it matches the anchor id.</p>

	<h2 id="question-04">How do I link to a specific part of someone else's webpage?</h2>
	<p>Although you obviously can't add anchors to other people's pages, you can take advantage of the ones that they have already created. View the source code of their webpage to see if they've included an id on the part of the page you want to link to. (For help viewing source code, consult "The Inspiration of Others" in Chapter 2.) Then create a link that includes the anchor.</p>
</article>

</body>
</html>

作者：excavate
https://juejin.cn/post/6988467705909248014

在線咨詢

上一篇：網頁文字不能復制的解決辦法
下一篇：一個簡單的 HTML 網頁設計代碼

您的項目需求

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

整合營銷服務商

前端基礎入門（HTML）

習目標

HTML第一天目標

開發工具

瀏覽器顯示

瀏覽器內核（理解）

Web標準

web標準的結構

HTML初識

HTML骨架格式

骨架結構解析

HTML標簽分類

HTML標簽關系

HTML常用標簽

標題標簽（熟記）

段落標簽（熟記）

水平線標簽（認識）

換行標簽（熟記）

div span標簽(重點)

文本格式化標簽(熟記)

標簽屬性

圖像標簽img (重點)

鏈接標簽(重點)

錨點定位 （難點）

base 標簽 基本的

特殊字符標簽 （理解）

注釋標簽

路徑(重點、難點)

相對路徑

絕對路徑

總結今天的思路貫穿線

列表標簽

無序列表 ul （重點）

有序列表 ol （了解）

自定義列表（理解）

表格 table(會使用)

創建表格

表格屬性

表頭標簽

表格結構（了解）

表格標題

合并單元格(難點)

總結表格

表單標簽(掌握)

input 控件(重點)

label標簽(理解)

textarea控件(文本域)

下拉菜單

表單域

、HTML文本結構

二、 HTML圖片

三、 HTML鏈接

您的項目需求

錨點定位（難點）

base 標簽基本的

特殊字符標簽（理解）