1、HTML簡介
什么是網頁？
- 網站是指在因特網上根據一定的規則，使用HTML等制作的用於展示特定內容相關的網頁集合。網頁是網站中的一“頁”，通常是HTML格式的文件，它要通過瀏覽器來閱讀。
- 網頁是構成網站的基本元素，它通常由圖片、鏈接、文字、聲音、視頻等元素組成。通常我們看到的網頁，常見以.htm 或.html后綴結尾的文件，因此將其俗稱為HTML文件。
什么是HTML？
- HTML指的是超文本標記語言(Hyper Text Markup Language)，它是用來描述網頁的一種語言。HTML不是一種編程語言，而是一種標記語言(markup language)。標記語言是一套標記標簽(markup tag)。
- 所謂超文本，有2層含義∶
- 它可以加入圖片、聲音、動畫、多媒體等內容(超越了文本限制)。
- 它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超級鏈接文本)。
網頁的形成
- 網頁是由網頁元素組成的，這些元素是利用html標簽描述出來，然后通過瀏覽器解析來顯示給用戶的。
- 前端人員開發代碼---->瀏覽器顯示代碼（解析、渲染）----->生成最后的Web頁面
為什么需要web標准？
- 瀏覽器不同，它們顯示頁面或者排版就有些許差異，所以需要標准去約束他們。
Web標准的組成
- 主要包括結構( Structure )、表現( Presentation )和行為( Behavior )三個方面。
簡單理解∶結構寫到HTML文件中，表現寫到CSS文件中，行為寫到JavaScript文件中。
2、HTML語法規范
基本語法概述
- HTML標簽是由尖括號包圍的關鍵詞，例如
<html>。 - HTML標簽通常是成對出現的，例如
<html>和</html>，我們稱為雙標簽。標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。 - 有些特殊的標簽必須是單個標簽(極少情況），例
<br/>我們稱為單標簽。
標簽的關系
- 包含和並列關系
第一個 HTML
- 每個網頁都會有一個基本的結構標簽(也稱為骨架標簽），頁面內容也是在這些基本標簽上書寫。
總結：
文檔類型聲明標簽
<!DOCTYPE>文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。
<! DOCTYPE html>這句代碼的意思是:當前頁面采取的是HTML5版本來顯示網頁。
注意：
1.<!DOCTYPE>聲明位於文檔中的最前面的位置，處於<html>標簽之前.
2.<!DOCTYPE>不是一個HTML標簽，它就是文檔類型聲明標簽。
lang語言種類：用來定義當前文檔顯示的語言
- en定義語言為英語
- zh-CN定義語言為中文
簡單來說,定義為en就是英文網頁,定義為zh-CN就是中文網頁。其實對於文檔顯示來說，定義成en的文檔也可以顯示中文，定義成zh-CN的文檔也可以顯示英文。
Character set字符集
- 字符集(Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。
- 在標簽內，可以通過
<meta>標簽的charset屬性來規定HTML文檔應該使用哪種字符編碼。 <meta charset=" UTF-8">charset常用的值有:GB2312、BlG5、GBK和UTF-8，其中UTF-8也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符。
注意:上面語法是必須要寫的代碼，否則可能引起亂碼的情況。一般情況下，統一使用“UTF-8”編碼，盡量統一寫成標准的"UTF-8”，不要寫成"utf8"或"UTF8"。
HTML標簽（上）
根據標簽的語義，在合適的地方給一個最為合理的標簽，可以讓頁面結構更清晰。
標題標簽（雙標簽）
段落標簽（雙標簽）
- 在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示。在HTML標簽中，
<p>標簽用於定義段落，它可以將整個網頁分為若干個段落。 <p>我是一個段落標簽</p>。單詞paragraph [ ' paerograef]的縮寫，意為段落。- 標簽語義:可以把HTML文檔分割為若干段落。特點∶
1.文本在一個段落中會根據瀏覽器窗口的大小自動換行。
2.段落和段落之間保有空隙。
換行標簽（單標簽）
- br：單詞break的縮寫，意為打斷、換行
文本格式化標簽（雙標簽）
粗體、斜體、下划線、刪除線
<div>和<span>標簽（雙標簽）
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容的。<div>這是頭部</div>、<span>今日價格</span>- div是division的縮寫，表示分割、分區。span意為跨度、跨距。
特點∶
1.<div>標簽用來布局，但是現在一行只能放一個。大盒子
2.標簽用來布局，一行上可以多個。小盒子
圖像標簽（單標簽）和路徑
- 圖像標簽：單詞image的縮寫，意為圖像
<img scr=”圖像URL”>其中，scr是該標簽的必須屬性，他用來指定圖片的路徑和文件名。
其中寬度和高度我們修改一個就行了，另一個自動改變。
舉例：
圖像標簽屬性注意點：
①圖像標簽可以擁有多個屬性，必須寫在標簽名的后面。
②屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
③屬性采取“鍵值對”的格式，即key= “value"的格式，屬性=“屬性值”。
路徑：
-
絕對路徑：准確的位置，從盤符開始
-
相對路徑：相對的位置
-
區別目錄文件夾和根目錄
- 目錄文件夾：新建一個文件夾就是一個目錄文件夾
- 根目錄：點開一個文件夾所顯示的就是一個根目錄
超鏈接標簽
- 在HTML標簽中，
<a>標簽用於定義超鏈接，作用是從一個頁面鏈接到另一個頁面。
1．鏈接的語法格式
<a href= "跳轉目標" target="目標窗口的彈出方式"> 文本或圖像 </a>單詞anchor的縮寫，意為:錨。
兩個屬性的作用如下∶
2、鏈接的分類
a．外部鏈接:例如< a href="http:// www.baidu.com ">百度</a >。
b．內部鏈接:網站內部頁面之間的相互鏈接。同一個目錄下的頁面，直接鏈接內部頁面名稱即可，例如< a href=" index.html">首頁</a>。
以上兩種鏈接都可以使用target（_self和_blank）
c．空鏈接:如果當時沒有確定鏈接目標時，<a href="#">首頁</a > 。
d．下載鏈接:如果href 里面地址是一個文件或者壓縮包，會下載這個文件。
e．網頁元素鏈接:在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接（點擊多媒體就會跳轉另一個目標頁面）。
f. 錨點鏈接:點我們點擊鏈接,可以快速定位到當前頁面中的某個位置。
①在鏈接文本的href屬性中，設置屬性值為#名字的形式，如<a href="#two">第2集</a>
②找到目標位置標簽，里面添加一個id屬性=剛才的名字，如:<h3 id="two">第2集的介紹</h3>
③返回到頁面首部。<a href="javascript:scroll(0,0)">返回頂部</a>
注釋標簽
<!-- 注釋文檔 --> 快捷鍵 Ctrl+/ 可以開始注釋也可以解除
特殊字符
Sub下標 sup上標
HTML標簽（下）
表格標簽
表格的主要作用：
- 表格主要用於顯示、展示數據，因為它可以讓數據顯示的非常的規整，可讀性非常好。
- 注意：表格不是用來布局頁面的,而是用來展示數據的.
表格屬性：
表格結構標簽
<thead> </thead>:用於定義表格的頭部。內部必須擁有標簽。一般是位於第一行。<tbody> </tbody>:用於定義表格的主體，主要用於放數據本體。- 以上標簽都是放在
<table> </table>標簽中。
合並單元格
- 跨行合並：rowspan=”合並單元格個數”
- 跨列合並：colspan=”合並單元格個數”
合並單元格三步曲:
1.先確定是跨行還是跨列合並。
2.找到目標單元格.寫上合並方式=合並的單元格數量。比如: <td colspan= “2”> </td>.
3.刪除多余的單元格。
列表標簽
- 列表作用：用來布局的。
- 列表最大的特點就是整齊、整潔、有序，它作為布局會更加自由和方便。
- 根據使用情景不同，列表可以分為三大類︰無序列表、有序列表和自定義列表。
1.無序列表：<ul>標簽表示HTML頁面中項目的無序列表，一般會以項目符號呈現列表項，而列表項使用<li>標簽定義。
無序列表的基本語法格式如下∶
2.有序列表：即為有排列順序的列表，其各個列表項會按照一定的順序排列定義。
在HTML標簽中，<ol>標簽用於定義有序列表，列表排序以數字來顯示，並且使用<li>標簽來定義列表項。
有序列表的基本語法格式如下∶
3.自定義列表：自定義列表的使用場景：自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。
在HTML標簽中，<dl>標簽用於定義描述列表(或定義列表），該標簽會與<dt>(定義項目/名字)和<dd>（描述每一個項目/名字)一起使用。
總結：
注意∶
1.學會什么時候用無序列表，什么時候用自定義列表。
2.無序列表和自定義列表代碼怎么寫?
3.列表布局在學習完CSS后再來完成。
表單標簽：
在HTML中，一個完整的表單通常由表單域、表單控件（也稱為表單元素)和提示信息3個部分構成。
①表單域：表單域是一個包含表單元素的區域。在HTML標簽中，<form>標簽用於定義表單域，以實現用戶信息的收集和傳遞。<form>會把它范圍內的表單元素信息提交給服務器。
②表單控件：在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控件。
Input 輸入表單元素
- 在英文單詞中，input是輸入的意思，而在表單元素中
<input>標簽用於收集用戶信息。在<input>標簽中，包含一個type屬性，根據不同的type屬性值，輸入字段擁有很多種形式(可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等)。
1.<input>標簽為單標簽
2.type屬性設置不同的屬性值用來指定不同的控件類型
例如：
除type屬性外，<input>標簽還有其他很多屬性，其常用屬性如下:
注意：1. name和value是每個表單元素都有的屬性值,主要給后台人員使用。
2. name表單元素的名字,要求單選按鈕和復選框要有相同的name值
3. value在輸入框里會顯示出來，而在單復選框中不會，是給后台人員核對的
4. 在控件元素后面加上checked=”checked”，checked屬性主要針對於單選按鈕和復選框,主要作用一打開頁面,就可以默認選中某個表單元素。
Label標簽
<label>標簽為input元素定義標注(標簽)。<label>標簽用於綁定一個表單元素,當點擊<label>標簽內的文本時，瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增加用戶體驗。
核心：<label>標簽的for屬性應當與相關元素的id屬性相同。
select 下拉表單元素
在頁面中，如果有多個選項讓用戶選擇，並且想要節約頁面空間時，我們可以使用<select>標簽控件定義下拉列表。
textarea 文本域元素
使用場景:當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用<textarea>標簽。在表單元素中，<textarea>標簽是用於定義多行文本輸入的控件。
使用多行文本輸入控件，可以輸入更多的文字，該控件常見於留言板，評論。
