HTML、 CSS、 JavaScript三者的關系
網頁主要由三部分組成： 結構（ Structure） 、 表現（ Presentation） 和行為（ Behavior）
HTML —— 結構， 決定網頁的結構和內容（ “是什么”）
CSS —— 表現（ 樣式） ， 設定網頁的表現樣式（ “什么樣子”）
JavaScript（ JS） —— 行為， 控制網頁的行為（ “做什么”）
一、 HTML語言
1.1什么是HTML語言（ HTML概述）
英文全稱： Hyper Text Markup Language
中文全稱： 超文本標記語言
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 標簽； 它是用來告訴 web 瀏覽器要使用哪個 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三者的關系
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。