此處學習略過HTML的人文歷史環節HTML的歷史
學習HTML是多么快樂的一件事
- HTML學習框架
- HTML的結構和層面
- HTML的拓展知識
- 創建第一個HTML
- 常用的標簽及屬性
- 軟體的選用
- 創建工程的注意事項
- HTML里的表單元素
- 表單里的屬性介紹
- 細談method的兩種方式
- 表單練習
- HTML表格介紹
- 表格練習
- HTML框架介紹
- 框架練習
- 串列
- 串列練習
- HTML拓展知識點
- 總結
HTML學習框架
HTML的結構和層面
html結構
html結構類似于資料結構中的二叉樹，<html>元素作為根結點，
<head>和<body>分別作為子結點，<head>的子結點又包含了
<title>和<mate>,<body>里面包含了各種標簽元素，
--------------------------------------------------
<!DOCTYPE html>檔案型別 html----MIME型別
<html lang="en">language=“en” zh-cn屬性節點
<head>
<meta charset="UTF-8">源 編碼字符集----utf-8
<title>Document</title>標題
</head>
<body>
正文
</body>
</html>
html層面
網站的主要組成部分有結構層、表現層和行為層，分別有以下的作用；
結構層：用來規劃網站的結構，什么地方放置導航，輪播，側欄等等，一般在寫結構都用html來寫，最流行的是html5往后有xhtml html4.0 都稱為超文本語言，現在的html5很穩定，描述整個網站的結構，
表現層：表現層可以理解為結構層的衣服，可以隨意更換 目前使用到的css3.0 --css2.0 全稱叫做層疊樣式表，
行為層：主要使用到Javascript的腳本語言，實作與用戶的一個事件互動，定義整個網站的行為，
HTML的拓展知識
W3C 萬維網聯盟
標準不是某一個標準，而是一系列標準的集合，在瀏覽器中的www就是w3c的意思，輸入域名的可以省略www.就可以去訪問網站，
符合HTTP協議，面向連接 ，符合web通信的標準
我們所有的web專案(包括前端和后端)都要遵從w3c所提供的標準和http協議，
推薦一個html學習網站W3school
HTML的請求方法
根據 HTTP 標準，HTTP 請求可以使用多種請求方法，
HTTP1.0 定義了三種請求方法： GET, POST 和 HEAD方法，
HTTP1.1 新增了六種請求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法，
- [ 1] GET請求指定的頁面資訊，并回傳物體主體，
- [ 2] HEAD 類似于 GET 請求，只不過回傳的回應中沒有具體的內容，用于獲取報頭
- [ 3] POST 向指定資源提交資料進行處理請求（例如提交表單或者上傳檔案），資料被包含在請求體中，POST 請求可能會導致新的資源的建立和/或已有資源的修改，
- [ 4] PUT 從客戶端向服務器傳送的資料取代指定的檔案的內容，
- [ 5] DELETE 請求服務器洗掉指定的頁面，
- [ 6] CONNECT HTTP/1.1 協議中預留給能夠將連接改為管道方式的代理服務器，
- [ 7] OPTIONS 允許客戶端查看服務器的性能，
- [ 8] TRACE 回顯服務器收到的請求，主要用于測驗或診斷，
- [ 9] PATCH 是對 PUT 方法的補充，用來對已知資源進行區域更新 ，
MIME型別
MIME(Multipurpose Internet Mail Extensions)多用途互聯網郵件擴展型別，是設定某種擴展名的檔案用一種應用程式來打開的方式型別，當該擴展名檔案被訪問的時候，瀏覽器會自動使用指定應用程式來打開，多用于指定一些客戶端自定義的檔案名，以及一些媒體檔案打開方式，
所有的檔案在網路上 用于顯示還是用于下載都存在自己回應的型別例如 gifjpeg存在自己的MIME型別 用于給檔案做一些自己的相關標識，
meta源–編碼字符集
meta 元素可提供有關頁面的元資訊（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞，
meta標簽位于檔案的頭部，不包含任何內容，meta標簽的屬性定義了與檔案相關聯的名稱/值對，
創建第一個HTML
新建檔案 ctrl+s 保存在自己創建的code目錄下
使用 ！+Tab 按鍵 那么就可以自動生成HTML檔案模板 如圖所示
常用的標簽及屬性
標簽及元素
HTML 元素以開始標簽起始
HTML 元素以結束標簽終止
元素的內容是開始標簽與結束標簽之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
大多數 HTML 元素可擁有屬性
p標簽
p標簽實作了對行的控制哦
<p>This is my first paragraph.</p>
這個 p元素定義了 HTML 檔案中的一個段落，這個元素擁有一個開始標簽 p，以及一個結束標簽 /p，元素內容是：This is my first paragraph，
a標簽
HTML使用標簽 a來設定超文本鏈接，
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅影像，您可以點擊這些內容來跳轉到新的檔案或者當前檔案中的某個部分，
當您把滑鼠指標移動到網頁中的某個鏈接上時，箭頭會變為一只小手，
在標簽a中使用了href屬性來描述鏈接的地址，
a標簽的使用：
- 使用a標簽進行外部跳轉----外鏈接
<a href="3.html">主頁</a>
<a href="2.html?username=zhangsanfeng&pwd=123">我的相冊</a>
<a href="1.html">我的日志</a>
<a href="http://www.baidu.com/">百度</a>
<a href="http://www.taobao.com/">淘寶</a><br/>
- 使用a標簽跳轉到網頁的內部 ----錨點
<p><a href="#R1">第一章</a></p>
<p><a href="#R2">第二章</a></p>
<p><a href="#R3">第三章</a></p>
<p><a href="#R4">第四章</a></p>
<p><a href="#R5">第五章</a></p>
<h2><a name="R1">第一章</a></h2>
<!-- 內容 -->
<h2><a name="R2">第一章</a></h2>
<!-- 內容 -->
<h2><a name="R3">第一章</a></h2>
<!-- 內容 -->
<h2><a name="R4">第一章</a></h2>
<!-- 內容 -->
<h2><a name="R5">第一章</a></h2>
<!-- 內容 -->
hn
n = 1-6表示的是網頁或者文章的標題字體大小從大到小 默認加粗
Body元素
body 標簽定義檔案的主體，
body元素包含檔案的所有內容（比如文本、超鏈接、影像、表格和串列等等），
Body中的屬性值
bgcolor 屬性規定檔案的背景顏色，
background 屬性規定規定檔案的背景影像，
alink 屬性規定檔案中活動鏈接（active link）的的顏色，licked).
link屬性規定檔案中未訪問鏈接的默認顏色
vlink 屬性檔案中已被訪問鏈接的顏色，
img標簽
img 標簽定義 HTML 頁面中的影像，
img 標簽有兩個必需的屬性：src 和 alt，
從技術上講，影像并不會插入 HTML 頁面中，而是鏈接到 HTML 頁面上，img>標簽的作用是為被參考的影像創建占位符，通過在 a 標簽中嵌套 img 標簽，給影像添加到另一個檔案的鏈接，
src----source源代碼，src 標簽的 src 屬性是必需的，它規定影像的 URL，
alt 屬性是一個必需的屬性，它規定在影像無法顯示時的替代文本，
假設由于一些原因（比如網速太慢、src 屬性中的錯誤、瀏覽器禁用影像、用戶使用的是螢屏閱讀器）用戶無法查看影像，alt 屬性可以為影像提供替代的資訊，
border----邊框 單位像素值
width寬度 height高度 像素值 ----百分比
usemap用于做位圖map----映射
area規定位圖區域
map位圖
<img src="./image/2.jpeg" alt="大頭兒子" usemap="#first" border="1px">
<map id="first" name="first">
<area
shape="circle"
coords="230,280,50"
href="http://www.baidu.com/">
</area>
</map>
span元素
span 用于對檔案中的行內元素進行組合，
span 標簽沒有固定的格式表現，當對它應用樣式時，它才會產生視覺上的變化，如果不對 span 應用樣式，那么 span元素中的文本與其他文本不會任何視覺上的差異，
span標簽提供了一種將文本的一部分或者檔案的一部分獨立出來的方式，
div標簽
div 標簽定義 HTML 檔案中的一個分隔區塊或者一個區域部分，div標簽常用于組合塊級元素，以便通過，CSS 來對這些元素進行格式化，
總結
id屬性和name屬性的區別？
ID就像是一個人的身份證號碼，而Name就像是他的名字，ID顯然是唯一的，而Name是可以重復的，id用于DHTML,即客戶端腳本，而name則通常用在服務器端，
id的主要用途:
在客戶端頁面作為物件的唯一表示,同一個頁面中不允許出現多個相同的id.可以使用JavaScript的document.getElementById(‘id’)來獲取物件，
name的具體用途有：
用途1:
作為可與服務器互動資料的HTML元素的服務器端的標示，比如input、select、textarea、和button等，我們可以在服務器端根據其name通過Request[“name”]取得元素提交的值，
用途2:
HTML元素input type='radio’分組，我們知道radio button控制元件在同一個分組類，check操作是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的name屬性來實作的，
用途3:
建立頁面中的錨點，我們知道<a href="url">link</a>是獲得一個頁面超級鏈接，如果不用href屬性，而改用name，如：<a name="PageBottom"></a>，我們就獲得了一個頁面錨點，
用途4:
作為物件的identity，如Applet、Object、Embed等元素，比如在Applet物件實體中，我們將使用其name來參考該物件，
用途5:
在img元素和map元素之間關聯的時候，如果要定義img的熱點區域，需要使用其屬性usemap，使usemap="#name"(被關聯的map元素的name)，
用途6:
某些特定元素的屬性，如attribute，和param，例如為Object定義引數<param name = "appletParameter" value= "value">，
用途7:
name屬性也可以作為客戶端物件的標識,可以使用javascript的document.getElementByName(‘name’)來獲取物件
標簽 都分為兩種，一種雙標簽<html></html>，另一種是單標簽<meta charset=”utf-8”><br/>換行，雙標簽一定有結束的標示符，一定不能寫掉，否則整個頁面會出現問題，而單標簽最好在>前加上/，
亂碼一般出現原因：字符集不統一，當我們在國內打開的瀏覽器的默認的編碼格式都是GBK 需要把原有的GBK的格式修改成全球統一的格式 —UTF-8，
color顏色表示方法：
rgb(255,255,255) 0-255 r-red g-green b- blue
#000000~#ffffff 以十六進制的方式去表示顏色
使用顏色的單詞 英文 pinkorangeyellowblackwhitegold
軟體的選用
編輯html網頁的軟體各種各樣，這里為大家介紹10種：
Hbuilde
hbuilder是DCloud推出的一款支持HTML5的Web開發IDE，快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率，同時，它還包括最全面的語法庫和瀏覽器兼容性資料，
Notepad++
Notepad++ 程式員必備的文本編輯器，軟體小巧高效，支持27種編程語言，通吃C,C++ ,Java ,C#, XML, HTML, PHP,JS 等，推薦各位下載使用，Notepad++ 可完美地取代微軟的記事本，
Dreamweaver
Dreamweaver “夢想編織者”，是世界頂級軟體廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程式的網頁設計軟體，
由于它支持代碼、拆分、設計、實時視圖等多種方式來創作、撰寫和修改網頁，對于初級人員，你可以無需撰寫任何代碼就能快速創建Web頁面，其成熟的代碼編輯工具更適用于Web開發高級人員的創作！
Sublime Text
Sublime Text 很贊的代碼編輯器，界面設定非常人性化，左邊是代碼縮略圖，右邊是代碼區域，你可以在左邊的代碼縮略圖區域輕松定位程式代碼的位置，高亮色彩功能非常方便編程作業，
Eclipse
Eclipse的本身只是一個框架平臺，但是眾多插件的支持使得Eclipse擁有其他功能相對固定的IDE軟體很難具有的靈活性，許多軟體開發商以Eclipse為框架開發自己的IDE，Eclipse最初是由IBM公司開發的替代商業軟體Visual Age for Java的下一代ide開發環境，2001年11月貢獻給開源社區，現在它由非營利軟體供應商聯盟Eclipse基金會（Eclipse Foundation）管理，
EditPlus
EditPlus是一款為Internet準備的、運行于Windows 下的32位文本、html編輯器, 同時也是程式員們非常喜愛的編輯器，你完全可以用它代替Windows筆記本, 它也為許多網頁高手和程式員提供便利！
WebStorm
WebStorm是一款強大的HTML5/JavaScript Web前端開發工具，被廣大JS開發者譽為“Web前端開發神器”，WebStorm 8全新特性中包括對AngularJS的支持，能夠高效準確地智能感知Angular語法、指令，WebStorm還完美支持Spy-js，合并了這款JavaScript除錯利器，大大提高了開發者們的作業效率，
FirHtml
FirHtml網頁編輯器一個簡潔，小巧的網頁編輯器， 我們通過上一代，開發出全新的網頁編輯器，幫助您高效地設計出精美的網頁！新版增加了添加檔案域功能，
Vim
Vim是Linux上的著名的文本編輯器，他是早年的Vi編輯器的加強版，這個gVim是windows版的，并且有了標準的windows風格的圖形界面，所以叫g(graphical)Vim，這是一個國際版本，會根據安裝的平臺自動選擇相應語言包，支持中文及其各種編碼，連界面也是中文的，請放心使用，這個極具Unix特色和風格(simple is the best)的編輯器相信會給您帶來不同的感受，
創建工程的注意事項
在創建html專案的時候，盡量去避免路徑中包含了中文，平時在測驗的時候可能不會出現什么問題，但是一旦接入服務器的時候，就會出現頁面不顯示的情況，有可能的問題就是路徑中包含了中文，在建立工程時工程名一定要望文生義，通俗易懂，避免后期作業量大導致自己并不清楚每個頁面顯示的內容，在創建檔案夾時也要注意這個問題，html的檔案后綴名必須是.html，才會被瀏覽器決議，
檔案命名：
專案命名規范：
HTML里的表單元素
input 元素
最重要的表單元素是 input 元素，
input元素根據不同的 type 屬性，可以變化為多種形態，
input輸入型別有text password submit radio checkbox button number date等等.
text
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
password
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
submit
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
radio
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
checkbox
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
select元素通常和option元素連用
select元素定義下拉串列，option 元素定義待選擇的選項，串列通常會把首個選項顯示為被選選項，您能夠通過添加 selected 屬性來定義預定義選項，例子如下：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
textarea文本域
textarea表示可以輸入多行欄位;
里面clos屬性和rows屬性定義的是文本域的大小,clos表示列,rows代表行.
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
button按鍵
button元素定義可點擊的按鈕：
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
表單里的屬性介紹
form表單的屬性有以下幾種：
accept-charset 規定用于表單提交的字符編碼，
action 規定提交表單時將表單資料發送到何處，
autocomplete 規定表單是否應打開自動完成（填寫）功能，
enctype 規定將表單資料提交到服務器時應如何編碼（僅供 method=“post”），
method 規定發送表單資料時要使用的 HTTP 方法，
name 規定表單名稱，
novalidate 規定提交時不應驗證表單，
rel 規定鏈接資源和當前檔案之間的關系，
target 規定提交表單后在何處顯示接收到的回應，
最常用的是action和methon
細談method的兩種方式
post與get的區別：
安全：從安全上來看，post的請求方式更安全不會將用戶選擇或設定的資訊暴露在請求路徑上，然而get的請求方式會將其資訊暴露在請求路徑中，
get請求在路徑的地址上存在屬性值 url的地址是有限制的
最大為64kb
何時使用 POST？
針對表單里填寫的資訊為熱資料時post和get均可，
您應該使用 POST：
如果表單正在更新資料，或者包含敏感資訊（例如密碼），
POST 的安全性更加，因為在頁面地址欄中被提交的資料是不可見的，
何時使用 GET？
您能夠使用 GET（默認方法）：
如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感資訊，
當您使用 GET 時，表單資料在頁面地址欄中是可見的，
表單練習
一個簡單的表單樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div align="center">
<form action="" method="get">
姓名：<input type="text" name="username"/><br/><br/>
密碼：<input type="password" name="mima"/><br/><br/>
性別：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br/><br/>
愛好：
<input type="checkbox" name="hobby" value="吃飯">吃飯
<input type="checkbox" name="hobby" value="睡覺">睡覺<br/>
<input type="checkbox" name="hobby" value="懶蟲">懶蟲
<input type="checkbox" name="hobby" value="打游戲">打游戲
<input type="checkbox" name="hobby" value="開車">開車<br/><br/>
請選擇地址：
<select name="address">
<option value="">請選擇城市</option>
<option value="重慶">重慶</option>
<option value="四川">四級</option>
<option value="四川">川菜</option>
<option value="四川">黑龍江</option>
<option value="四川">北京</option>
</select><br/>
<p>
請選擇型別
<select name="type" multiple="multiple">
<option value="重慶">都市u安全</option>
<option value="四川">古代穿越</option>
<option value="四川">先嗲科技</option>
<option value="四川">歷史人文</option>
<option value="四川">懸疑推理</option>
</select>
</p>
<input type="submit" value="提交" />
</form></div>
<map id="first" name="first">
<area shape="circle" coords="100,223,50" href="https://www.w3school.com.cn/"></area>
</map>
</body>
</html>
表單總結
表單在日常生活中是十分常見,例如現在的每一個網頁幾乎都存在登錄注冊的功能,然而實作它們都需要利用到表單元素，在表單里特別注意的是methon里的兩種請求方式,根據應用場景就行選用，表單里的submit和button,從形式看它倆都是按鍵的形式.然而button在還未添加事件之前它是毫無作用的,而submit默認的功能是將用戶填寫的表單進行提交并跳轉到指定到URl，所以submit默認就是代有功能的不需要自己定義其功能，
在提交表單路徑中通常會有 ?和 &，路徑的規則 ?和 &，?號表示的是 路徑的跳轉地址結束，&號表示的是 屬性之間的間隔，
HTML表格介紹
<table> 標簽定義 HTML 表格
一個 HTML 表格包括 <table> 元素，一個或多個<tr>、<th> 以及<td> 元素，
<tr> 元素定義表格行， <th>元素定義表頭，<td> 元素定義表格單元，
更復雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素，
表格練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./image/2.jpeg" alt="大頭兒子" usemap="#first" border="1px">
> <
<map id="first" name="first">
<area
shape="circle"
coords="230,280,50"
href="http://www.baidu.com/">
</area>
</map>
<table border="1px">
<tr>
<th>早餐</th><th>午餐</th><th>晚餐</th>
</tr>
<tr>
<td>包子</td><td>米粉</td><td>大盤雞</td>
</tr>
<tr>
<td>豆漿</td><td>肉夾饃</td><td>烤馕</td>
</tr>
</table>
</body>
</html>
表格布局·：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>熱門電影導航</title>
<style type="text/css">
</style>
</head>
<body>
<h1>熱門電影板塊</h1>
<hr/>
最近熱門電影 熱門 最新 豆瓣評分 冷門佳片 華語 歐美 日本
<a href="">更多>></a>
<br/>
<hr/>
<table>
<tr>
<td>
<img src="../image/3.png" alt="致命ID">
</td>
<td>
<img src="../image/2.png" alt="萬能鑰匙">
</td>
<td>
<img src="../image/3.png" alt="禁閉島">
</td>
<td>
<img src="../image/2.png" alt="恐怖郵輪">
</td>
</tr>
<tr align="center">
<td>致命ID</td>
<td>萬能鑰匙</td>
<td>禁閉島</td>
<td>恐怖郵輪</td>
</tr>
<tr>
<td>
<img src="../image/2.png" alt="致命ID">
</td>
<td>
<img src="../image/3.png" alt="萬能鑰匙">
</td>
<td>
<img src="../image/2.png" alt="禁閉島">
</td>
<td>
<img src="../image/3.png" alt="恐怖郵輪">
</td>
</tr>
<tr align="center">
<td>致命ID</td>
<td>萬能鑰匙</td>
<td>禁閉島</td>
<td>恐怖郵輪</td>
</tr>
</table>
</body>
</html>
HTML框架介紹
通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面，使用框架的壞處：開發人員必須同時跟蹤更多的HTML檔案，很難列印整張頁面，
frameset框架
框架結構標簽frameset定義如何將視窗分割為框架，每個 frameset 定義了一系列行或列，rows/columns 的值規定了每行或每列占據螢屏的面積，
frame框架標簽
Frame 標簽定義了放置在每個框架中的 HTML 檔案，假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小，為了避免這種情況發生，可以在 frame標簽中加入：noresize=“noresize”，為不支持框架的瀏覽器添加 noframes標簽，重要提示：不能將 body 標簽與 frameset標簽同時使用！不過，假如你添加包含一段文本的noframes 標簽，就必須將這段文字嵌套于 body 標簽內，
框架練習
框架嵌套分塊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<frameset rows="20%,60%,*">
<frame src="" name="" />
<frameset cols="10%,*">
<frame src="" name="" />
<frame src="" name="" />
</frameset>
<frame src="" name="" />
</frameset>
</html>
頁面跳轉：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="10%,80%,10%">
<frame src="A.html" name="header" />
<frameset cols="10%,90%">
<frame name="menu" />
<frame name="center" />
</frameset>
<frame name="footer" />
</frameset>
</html>
<!--A頁面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A</title>
</head>
<body>
<a href="B.html" target="menu">A</a>
</body>
</html>
<!--B頁面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
</head>
<body>
<a href="C.html" target="center">B</a>
</body>
</html>
<!--C頁面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>C</title>
</head>
<body>
<a href="D.html" target="footer">C</a>
</body>
</html>
<!--D頁面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D</title>
</head>
<body>
<a href="A.html" target="header">D</a>
</body>
</html>
串列
無序串列
ul li
無序串列是一個專案的串列，此列專案使用粗體圓點（典型的小黑圓圈）進行標記，無序串列始于 ul標簽，每個串列項始于 li，
type的屬性值可以填寫disc 默認值，實心圓，circle 空心圓，square 實心方塊，
有序串列
ol li
type屬性可填寫1 A a I i，有序串列始于 ol 標簽，每個串列項始于 li 標簽，
自定義串列
dl dt dd
自定義串列不僅僅是一列專案，而是專案及其注釋的組合，自定義串列以 dl 標簽開始，每個自定義串列項以 dt 開始，每個自定義串列項的定義以 dd 開始，定義串列的串列項內部可以使用段落、換行符、圖片、鏈接以及其他串列等等，
串列的應用場景： 導航 nav側欄 sidebar商品欄 貼吧知道 ----其他貼子的鏈接，
串列練習
無序串列
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序串列
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
自定義串列
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
HTML拓展知識點
XHTML
XHTML 是以 XML 格式撰寫的 HTML
- XHTML 指的是可擴展超文本標記語言
- XHTML 與 HTML 4.01 幾乎是相同的
- XHTML 是更嚴格更純凈的 HTML 版本
- XHTML 是以 XML 應用的方式定義的 HTML
- XHTML 是 2001 年 1 月發布的 W3C 推薦標準
- XHTML 得到所有主流瀏覽器的支持
XHTML 它是html4.01版本后出現的一個更嚴謹語法更純粹的一個版本
從語法上對html進行更嚴謹的規范，
HTML5
HTML5 是最新的 HTML 標準，
HTML5 是專門為承載豐富的 web 內容而設計的，并且無需額外插件，
HTML5 擁有新的語意、圖形以及多媒體元素，
HTML5 提供的新元素和新的 API 簡化了 web 應用程式的搭建，
HTML5 是跨平臺的，被設計為在不同型別的硬體（PC、平板、手機、電視機等等）之上運行，
新增加了video和audio，分別表示視頻音頻的匯入標簽，
<video src="./video/final.mp4" controls="controls"></video>
<audio src="./music/Pianoboy高至豪 - The truth that you leave.mp3"
controls="controls"></audio>
總結
在學習HTML的程序中會遇到很多的標簽和屬性，我們不需要每一個屬性都要記得很清楚，有時候只需要明白標簽有一個這樣的功能，就好比在網頁設計程序中你有一個好的設計想法如何來實作它，此時你便會想起標簽的某一個屬性就行，前端的學習相對后端來講可能相對會簡單一點，實時互動性可能給自己帶來不一樣的體驗，存在的bug會相對后端來講更好處理一點，凡是都要自己感興趣才會學得更深入，學得精通，在學習的路上不能半途而廢，
復雜的事情要簡單做，簡單的事情要認真做，認真的事情要重復做，重復的事情要創造性地做，腳踏實力地干，認真努力地學便會有結果，加油！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280711.html
標籤：其他
上一篇：關于如何解決img標簽中圖片超出盒子div范圍的討論
下一篇：HTML匯總_奮斗小新