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= "https://www.cnblogs.com/abcd123456/p/跳轉目標" target="目標視窗的彈出方式"> 文本或影像 </a>單詞anchor的縮寫，意為:錨，
兩個屬性的作用如下∶
2、鏈接的分類
a．外部鏈接:例如< a href="http:// www.baidu.com ">百度</a >，
b．內部鏈接:網站內部頁面之間的相互鏈接，同一個目錄下的頁面，直接鏈接內部頁面名稱即可，例如< a href="https://www.cnblogs.com/abcd123456/p/index.html">首頁</a>，
以上兩種鏈接都可以使用target（_self和_blank）
c．空鏈接:如果當時沒有確定鏈接目標時，<a href="https://www.cnblogs.com/abcd123456/p/#">首頁</a > ，
d．下載鏈接:如果href 里面地址是一個檔案或者壓縮包，會下載這個檔案，
e．網頁元素鏈接:在網頁中的各種網頁元素，如文本、影像、表格、音頻、視頻等都可以添加超鏈接（點擊多媒體就會跳轉另一個目標頁面），
f. 錨點鏈接:點我們點擊鏈接,可以快速定位到當前頁面中的某個位置，
①在鏈接文本的href屬性中，設定屬性值為#名字的形式，如<a href="https://www.cnblogs.com/abcd123456/p/#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>標簽是用于定義多行文本輸入的控制元件，
使用多行文本輸入控制元件，可以輸入更多的文字，該控制元件常見于留言板，評論，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/323017.html
標籤：Html/Css
上一篇：ARP欺騙與中間人攻擊