標籤：結構 reset 新視窗 文字 樣式表 符號 項目 網頁中顯示 button
HTML、 CSS、 JavaScript三者的關係
網頁主要由三部分組成： 結構（ Structure） 、 表現（ Presentation） 和行為（ Behavior）
HTML —— 結構， 決定網頁的結構和內容（ “是什麼”）
CSS —— 表現（ 樣式） ， 設定網頁的表現樣式（ “什麼樣子”）
JavaScript（ JS） —— 行為， 控制網頁的行為（ “做什麼”）
一、 HTML語言
1.1什麼是HTML語言（ HTML概述）
英文全稱： Hyper Text Markup Language
中文全稱： 超文字標記語言 (HTML)
HTML 語言是製作網頁的最基礎語言， 並且只能通過web瀏覽器顯示出來。
Hyper（ 超） ：
用HTML製作的網頁可以通過其中的連結從一個網頁“跳轉”至另一個網頁。
Text（ 文本） ：
HTML是一種文本解釋性的程式語言， 即它的原始碼將不經過編譯而直接在瀏覽器中運行時被“翻譯”。
Markup（ 標記） ：
HTML的基本規則就是用“標記語言” ---- 成對角括弧組成的標籤元素來描述網頁內容是如何在瀏覽器中顯示的。
1.2 HTML文檔結構
HTML文檔一般由兩部分組成：
1. 文檔所要表達的內容資訊（ 文字、 圖片等） ；
2. 一系列的HTML標籤；
1.3 HTML標籤
1.3.1 什麼是HTML標籤
1. HTML標籤是用 <> 所括住的指令， 主要分為：
單標籤： <起始標籤/>
雙標籤： <起始標籤></結束標籤>
例如：
<br/>
<div></div>
2. 通常使用的是雙標籤。 有一個起始標籤就對應有一個結束標籤。 標籤內容寫在起始標籤和結束標籤之間。
<div>標籤內容</div>
3. 在元素的起始標籤中， 還可以包含“屬性”來設定元素的其他特性。 一個標籤可以有多個屬性,每個屬性之間用空格隔開。
<div 屬性名稱="屬性值"></div>
例如：
<div class="wrap" id="wrap"></div>
4. 每一對雙標籤之間可以嵌套， 但不能交叉。
正確樣本：
<div>
<p></p>
</div>
錯誤樣本：
<div>
<p>
</div>
</p>
1.4 編碼器
1.4.1 WebStorm源碼主體標籤含義
<!DOCTYPE> ：
是一個聲明不是 HTML 標籤； 它是用來告訴 網頁瀏覽器要使用哪個 HTML 版本來對頁面進行編寫。
<html>：
<html>是文檔標識符， 它是成對出現的， 首標籤<html>和尾標籤</html>分別位於 HTML 文檔的最前面和最後面， 明確地表示文檔是以超文本標識語
言（ html)編寫的。 該標籤不帶有任何的屬性。
<head>：
<head>標籤用於定義文檔的頭部， 它是所有頭部元素的容器。 <head> 中的元素可以引用指令碼、 指示瀏覽器在哪裡找到樣式表、 提供元資訊等等。
<meta>：
<meta>標籤位於文檔的頭部， 用於定義檔案資訊， 對網頁檔案進行說明。 其中name屬性主要用於描述網頁， 與之對應的屬性值為content， content中
的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的。
<body>：
<body>標籤用於定義文檔的主體， 即在瀏覽器上看到的網頁內容。
1.5 HTML標籤的使用
1. HTML注釋
注釋內容可插入文本中任何位置， 其內容不在網頁中顯示， 只在源碼文檔中供開發人員備忘使用。
<!--注釋內容--> 方法適用於文檔主體部分
//注釋內容
/*注釋內容*/ 方法適用於文檔引用標籤部分
2. 特殊字元
在 HTML 程式碼中直接輸入一些特殊字元是沒有效果的， 需要用專有的代碼標記。
<!-- 空格 -->
< <!-- 左角括弧<或小於符號 -->
> <!-- 右角括弧>或大於符號 -->
© <!-- 著作權符號? -->
® <!-- 登入符號? -->
& <!-- 表示and符號& -->
— <!-- 長破折號 -->
3. div塊標籤
<div>這是一個div塊， 通常用於布局</div>
4. 本文標題標籤
<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<h6>heading</h6>
注意： 只有h1~h6 六個標籤， 沒有h7...
5. 文本節標籤
<span>這是一個文本節</span>
6. 強調標籤
<strong>加強語氣</strong>
7. 圖片標籤
<img src="圖片地址"/>
8. 段落標籤
<p>這是一個段落</p>
9. 超級連結標籤
<a href="連結地址">超連結， 開啟新視窗</a>
10. 文本域
<textarea>常值內容</textarea>
11. 無序列表標籤
<ul>
<li>第一個</li>
<li>第二個</li>
<li>第三個</li>
</ul>
12. 有序列表標籤
<ol>
<li>第一個</li>
<li>第二個</li>
<li>第三個</li>
</ol>
13. 自訂欄表
<dl>
<dt>自訂欄表項</dt>
<dd>自訂欄表項的定義</dd>
</dl>
14. table表格
<table>
<tr>
<td>娛樂項目</td>
<td>項目支出</td>
</tr>
<tr>
<td>聚餐</td>
<td>200元</td>
</tr>
</table>
15. form表單
<form>
表單輸入控制項
</form>
16. 控制標籤
<label>控制標籤， 平時無效果， 用作標記使用</label>
17. 表單輸入控制項
<input type="text"> <!-- 文本 -->
<input type="password"> <!-- 密碼 -->
<input type="radio"> <!-- 單選框 -->
<input type="button" value="點擊"> <!-- 普通按鈕 -->
<input type="checkbox"> <!-- 複選框 -->
<input type="submit"> <!-- 提交按鈕 -->
<input type="reset"> <!-- 重設按鈕 -->
<input type="file"> <!-- 檔案上傳 -->
button和submit的區別：
button 就是一個普通按鈕， 沒有任何功能。 而 submit 在使用者點擊後會自動認可 form 表單。
18. 下拉式清單
<select>
<option>川菜</option>
<option>粵菜</option>
<option>北方菜</option>
<option>上海菜</option>
<option>西餐</option>
<option>泰國菜</option>
</select>
19. 內聯架構
<iframe src="需要顯示的網頁連結地址"></iframe>
HTML、 CSS、 JavaScript三者的關係
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
