什么是HTML
英文全稱Hyper Text Markup Language，
中文全稱為超文本標記語言，
超文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分，網頁檔案本身是一種文本檔案，通過在文本檔案中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等），瀏覽器按順序閱讀網頁檔案，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行程序，編制者只能通過顯示效果來分析出錯原因和出錯部位，但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果，（來自百度百科）
如何創建網頁
推薦大家使用的前端工具：
?VSCode
?Hbuilder
?Sublime_text
創建網頁之前，新建一個名為Code的檔案夾，用于存放HTML代碼檔案，在Code檔案夾下新建如下幾個基本的檔案夾：
?css ???存放css檔案
?image??存放影像資源檔案
?js????存放JavaScript腳本檔案
?music??存放音瞥澩檔案
?video?? 存放視瞥澩檔案
打開Sublime_text，此時會默認生成一個空的未定義名稱的檔案untitled，
此時按下快捷鍵Ctrl+S保存（MacOS下為command+s），彈出保存對話框，將網頁名稱更改為想要的網頁名字加后綴.html，然后把創建好的.html檔案保存在剛剛創建的Code檔案夾內，
使用快捷鍵!+TAB（英文感嘆號）即可自動生成HTML檔案模版，
HTML檔案結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
正文
</body>
</html>
<!DOCTYPE html>
定義了檔案型別為html，是一種MIME型別
MIME型別：所有的檔案在網路上無論用于顯示還是用于下載，都存在自己回應的型別，例如gif、jpeg都存在自己的MIME型別， 用于給檔案做一些自己的相關標識，
<html lang="en">
lang屬性規定了元素內容的語言，
<head>
</head>
head元素包含了所有的頭部標簽元素，在head元素中可以插入JavaScript腳本、CSS樣式表，
<meta charset="UTF-8">
meta元素可提供有關頁面的元資訊（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞，標簽位于檔案的頭部，不包含任何內容， 標簽的屬性定義了與檔案相關聯的名稱/值對，
charset為編碼字符集，UTF-8為編碼格式，部分頁面會出現亂碼問題，這是字符集不統一導致的，我們在國內打開的瀏覽器的默認的編碼格式都是GBK，需要把原有的GBK的格式修改成全球統一的格式UTF-8，
<meta charset=“UTF-8”>的作用是把字符集設定為UTF-8，防止可能出現的亂碼問題，
<title>
可定義文章的標題，
<body>
</body>
包含檔案的所有內容，網頁的主題就寫在這里，
HTML屬性
HTML 元素可以設定屬性
屬性可以在元素中添加附加資訊
屬性一般描述于開始標簽
屬性總是以名稱/值對的形式出現
<p name="p1"></p>
其中p標簽中的name就是給p標簽的name屬性，值為p1，
基本常用標簽
基本常用標簽----標題<hn></hn>
表示的是網頁或文章標題，n=1-6，字體從大到小，默認加粗，
<h1>我是標題</h1>
<h2>我是標題</h2>
.
.
.
<h6>我是標題</h6>
基本常用標簽----標尺線<hr>
劃出一條標尺線，
<hr>
基本常用標簽----段落<p></p>
劃分段落，p標簽結束處自動換行，
<p>
我是段落內容
</p>
基本常用標簽----區域劃分<div></div>
使用div標簽可以把檔案劃分為不同的部分，以便可以給不同的區域使用不同的樣式，
<div id="div1">
<p>區域1</p>
</div>
<div id="div2">
<p>區域2</p>
</div>
基本常用標簽----超鏈接<a></a>
定義超鏈接，用于從一張頁面鏈接到另一張頁面（頁面跳轉），
最重要的屬性：
??href??指示鏈接的目標
HTML的頁面跳轉方式：
??使用a標簽跳轉，屬于GET請求方式
??form表單GET請求
??form表單POST請求
使用方式1：外鏈接，進行外部跳轉，href屬性值為需要跳轉到的頁面地址，
<a href="http://www.baidu.com">百度</a>
使用方式2:：錨點，進行頁面的內部跳轉，添加id屬性，href屬性值為#+需要跳轉到的a標簽的id屬性值，
<a href="#anchor">點我跳轉</a>
<a id="anchor"></a>
基本常用標簽----影像<img>
用于在頁面引入圖片，它有兩個必須屬性：
??src??參考影像的路徑
??alt?? 影像無法顯示時的替代文本
<img src="./image/sky.jpg" alt="天空"/>
關于HTML影像的位圖
<img>的位圖屬性：
??usemap??屬性將影像定義為客戶端影像映射
該屬性需要與<map>標簽和<area>標簽搭配使用，屬性值為#+位圖map的id值，
<map>
定義一個影像映射，常用屬性：
??id??? 唯一的名稱
??name??唯一的名稱
<area>
定義影像映射中的區域，總是嵌套在<map>標簽中，必須屬性：
??alt??影像無法顯示時的替換文本
常用屬性：
??coords?? 定義可點擊的坐標
??href????此區域跳轉的目標地址
??shape???定義可點擊區域的形狀
<img src="./image/sky.jpg" alt="天空" usemap="#first"/>
<map id="first" name="first">
<area
shape="circle"
coords="230,280,50"
href="http://www.baidu.com/">
</area>
</map>
基本常用標簽----表格<table></table>
表格布局，生成一個表格，擁有三個子標簽：
<tr></tr>???表示表行
<td></td>?? 表示表元（單元格）
<th></th>?? 表示表頭（默認加粗）
<table id="nav">
<tr>
<td>Phones</td>
<td\>Mi Pad</td>
<td>Mi TV</td>
<td>Mi Band</td>
<td>Mi PowerBank</td>
<td>Headphones</td>
<td>Store</td>
</tr>
</table>
基本常用標簽----視頻<video>和音頻<audio>
<video>可以為頁面添加視瞥澩，
<audio>可以為頁面添加音瞥澩，
基本屬性：
??src???? 引入的資源的路徑
??controls??顯示控制器
<video src="./video/陳奕迅 - 浮夸 2014MAMA.mp4" controls="controls">
</video>
<audio src="./music/陳奕迅 - 浮城.mp3" controls="controls">
</audio>
串列
一般指一個專案的串列，HTML中的串列分為無序串列<ul>、有序串列<ol>、定義串列<dl>三種，
無序串列和有序串列的共同子標簽都為<li>，表示串列項，
串列----無序串列<ul>
無序串列專案默認使用粗體圓點（典型的小黑圓圈）進行標記，
無序串列<ul>用于定義一個無序串列，應用場景有導航、側邊欄、商品欄等，
<ul>
<li>無人之境</li>
<li>與我常在</li>
<li>七百年后</li>
<li>黃金時代</li>
</ul>
串列----有序串列<ol>
有序串列專案使用數字進行標記，有排序方式，有序串列<ol>用于定義一個無序串列，應用場景有微博熱搜等，
<ol>
<li>黑暗中漫舞</li>
<li>天使的禮物</li>
<li>遺失的國度</li>
<li>不來也不去</li>
</ol>
串列----定義串列<dl>
自定義串列<dl>不僅僅是一列專案，而是專案及其注釋的組合，擁有兩個子標簽：
??<dt>??定義的專案
??<dd>??定義專案的描述
<dl>
<dt>一</dt>
<dd>陳奕迅的歌</dd>
<dt>沙龍</dt>
<dd>陳奕迅的歌</dd>
<dt>黑擇明</dt>
<dd>陳奕迅的歌</dd>
<dt>告別娑婆</dt>
<dd>陳奕迅的歌</dd>
</dl>
多視窗框架
通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面，每份HTML檔案稱為一個框架，并且每個框架都獨立于其他的框架，
多視窗框架----框架<frameset>
用于定義多視窗框架，與子標簽<frame>搭配使用，里面的每一個視窗都是一個frame，
<frameset>不能和標簽<body>連用，
<frameset rows="10%,80%,10%">
<frame src="1.html" name="header" />
<frameset cols="10%,90%">
<frame name="menu" />
<frame name="center" />
</frameset>
<frame name="footer" />
</frameset>
關于多視窗框架的頁面間跳轉
為<frame>標簽的name屬性設定一個值，在<a>標簽的屬性target中設定等同的值，通過<a>標簽即可實作頁面頁面間跳轉，
<frameset rows="10%,80%,10%">
<frame src="1.html" name="header" />
<frameset cols="10%,90%">
<frame name="menu" />
<frame name="center" />
</frameset>
<frame name="footer" />
</frameset>
<body>
<a href="B.html" target="menu">A</a>
</body>
關于HTML中顏色的表示方式
1.以函式的方式表示
?rgb(255,255,255)
?取值范圍是0-255，
2.以十六進制的方式去表示
?#000000-#FFFFFF，
3.使用顏色的英文單詞，如pink orange yellow black ?white gold等，
關于絕對路徑和相對路徑
絕對路徑：是從盤符開始的路徑，如：
C:\windows\system32\cmd.exe
相對路徑：是從當前路徑開始的路徑，
./ 表示當前位置，
. ./ 表示當前位置的上一級，如：
…/windows/system32/cmd.exe
表單
表單用于搜集用戶資料，在登陸、注冊等需要提交的場景都需要用到表單，
表單----表單<form></form>
用于為用戶輸入創建 HTML 表單，其中有兩個基本屬性：
?action??規定表單的提交路徑（跳轉的方式）
?method? 規定表單提交的方式
<form action="../1.html" method="post">
用戶名：<input type="text">
</form>
關于HTML的請求方法
有7種請求方法，其中最常用的是GET和POST，
?GET
?POST
?PUT
?HEAD
?DELETE
?PATCH
?OPTIONS
關于POST和GET之間的區別
表單提交時，什么情況下是GET請求，什么情況下是POST請求？
表單提交時，默認情況是GET請求，當method屬性值為post時為POST請求，
GET請求和POST請求有什么區別？
POST請求提交時路徑上沒有屬性的資訊，相對安全；
GET請求提交路徑上存在屬性的資訊，不安全；
GET請求在路徑的地址上存在屬性值，url的地址是有限制的，最大為64kb，
什么時候使用這兩種請求：
要根據資料性質，如果是熱資料、安全度不重要的資料則使用get和post都可以；
如果資料的性質需要安全性比較高時，一定要使用post請求；
在寫檔案上傳的功能時，請求必須是post的提交方式，
表單----輸入<input>
用于搜集用戶資訊，根據不同的 type 屬性值，輸入欄位擁有很多種形式，輸入欄位可以是文本欄位、復選框、掩碼后的文本控制元件、單選按鈕、按鈕等等，
<form action="1.html" method="post">
請輸入用戶名：<input type="text">
</form>
表單----文本text
把<input>的屬性type的值設定為text，顯示一個輸入文本框，
<form action="1.html" method="post">
請輸入用戶名：<input type="text"/>
</form>
表單----密碼password
把<input>的屬性type的值設定為password，顯示一個輸入文本密碼框，
<form action="1.html" method="post">
請輸入用戶名：<input type="password"/>
</form>
表單----多選checkbox
把<input>的屬性type的值設定為checkbox，設定一個復選框，多個分為一組的復選框需要在<input>標簽中設定一個值相同的name屬性，
<form action="1.html" method="post">
愛好：<br>
吃飯
<input type="checkbox" name="hobby"/>
睡覺
<input type="checkbox" name="hobby"/>
游戲
<input type="checkbox" name="hobby"/>
</form>
表單----單選radio
把<input>的屬性type的值設定為radio，設定一個單選框，多個分為一組的單選框需要在<input>標簽中設定一個值相同的name屬性才會有單選的效果，
<form action="1.html" method="post">
性別：<br>
男
<input type="radio" name="sex"/>
女
<input type="radio" name="sex"/>
</form>
表單----提交submit
把<input>的屬性type的值設定為submit，定義提交按鈕，提交按鈕會把表單資料發送到服務器，
<form action="1.html" method="post">
<input type="submit" value="提交"/>
</fomr>
表單----重置reset
把<input>的屬性type的值設定為reset，定義重置按鈕，重置按鈕會清除表單中的所有資料，
<form action="1.html" method="post">
<input type="reset" value="重置"/>
</fomr>
表單----檔案上傳file
把<input>的屬性type的值設定為file，用于檔案上傳，
<form action="1.html" method="post">
<input type="file"/>
</fomr>
表單----下拉選擇框<select></select>
用于建立下拉選擇框，需與<option>搭配使用，
<form action="1.html" method="post">
請選擇你的城市：
<select name="city">
<option>---請選擇---</option>
<option>北京</option>
<option>廣西</option>
<option>上海</option>
</select>
</form>
表單----文本域<textarea></textarea>
用于建立一個可以輸入多行文本的文本域，其中常用兩個屬性：
?cols?? 規定文本區內的可見寬度，
?rows??規定文本區內的可見行數，
<form action="1.html" method="post">
更多：
<textarea rows="5" cols="20" name="more">
這家伙很懶，什么都沒有留下，，，
</textarea>
</form>
表單綜合應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center" style="border: 2px solid; width:500px;height: 400px;margin: auto;">
<form action="" method="post">
<p>用戶名：
<input type="text" name="username"/>
</p>
<p>
密 碼：
<input type="password" name="password"/>
</p>
<p>
男
<input type="radio" name="sex"/>
女
<input type="radio" name="sex"/>
</p>
<p>
愛好：
吃飯
<input type="checkbox" name="hobby"/>
睡覺
<input type="checkbox" name="hobby"/>
游戲
<input type="checkbox" name="hobby"/>
</p>
<p>
請選擇你的城市：
<select name="city">
<option>---請選擇---</option>
<option>北京</option>
<option>廣西</option>
<option>上海</option>
</select>
</p>
<p>
更多：
<textarea rows="5" cols="20" name="more">
這家伙很懶，什么都沒有留下，，，
</textarea>
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</p>
</form>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280376.html
標籤：其他
上一篇：C語言零基礎從入門到精通之—遞回