前端HTML介绍
| 一、HTML簡介 |
HTML定義：
超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，
它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果.
特點：
1.簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。
2.可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求， 超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。
3.平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。
4.通用性：HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
簡單理解：正如我們寫的python代碼，解釋器是python，html的代碼解釋器就是瀏覽器，解釋器當然就有相應的解釋“規則”，而這些規則就是html語言。
?
HTML組成：
<!DOCTYPE html> #html文檔類型，這個是html5寫法 <html><head></head><body></body> </html> <!--以html開頭和html結尾，中間包含了head和body，如果把html看作人，那么head就是頭，body就是身體，所以頭部里都東西一般都是看不見的。 <head>和</head>之間的內容，是元信息和網站的標題 元信息一般是不顯示出來的,但是記錄了該HTML文件的很多有用的信息 <body>和</body>之間的內容，是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這里是網頁的主體。也就是body的身體之意。
-->
?
| 二、HTML之標簽 |
所謂HTML標簽是指：諸如<head>、<body>、<table>等被尖括號“<”和“>”包起來的對象，絕大部分的標簽都是成對出現的，如<table></talbe>、<form></form>。當然還有少部分不是成對出現的，如<br>、<hr>等，標簽可以嵌套，比如在body標簽中嵌套form標簽，在form中又可以嵌套其他標簽。
標簽分類：
1.按語法分類：
- 閉合標簽：有開始表示和結束標簽，必須成對出現，比如上面的<html></html>
- 自閉合標簽：單個存在的標簽，自己封閉，如<br/>,這里不加/也不會出錯。
?
head標簽
head頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。頭部中最常用的標記符是標題標記符和meta標記符，其中標題標記符用于定義網頁的標題，它的內容顯示在網頁窗口的標題欄中，網頁標題可被瀏覽器用作書簽和收藏清單。
設置文檔標題和其它在網頁中不顯示的信息，比如direction方向、語言代碼Language Code（實體定義!ENTITY % i18n）、指定字典中的元信息、等等。
title：在head中是為數不多的能在網頁中顯示的標簽，效果是顯示網頁的名字
<title>hello wd</title>效果：
?
mate：?定義了一個文檔和外部資源之間的關系,提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞、頁面編碼。
設置編碼
<meta charset="UTF-8">?自動刷新頁面
<meta http-equiv="Refresh" content="3"> #3秒刷新一次頁面?跳轉
<meta http-equiv="refresh" content="3;Url=http://www.baidu.com">#3秒鐘后跳轉至www.baidu.com關鍵字信息
<meta name="keywords" content="this is wd home">兼容IE：X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=EmulateIE7" />TIPS：
微軟的IE6是通過XP、Win2003等操作系統發布出來，作為占統治地位的桌面操作系統，也使得IE占據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，采用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，很多代碼必須調整后，才能夠正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部自己定義的標準拋棄了，而全面的支持W3C的標準，由于基于對標準徹底的變化了，使得原先在早期IE8版本上能夠訪問的網站，在IE8中無法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各種兼容性錯誤。
與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支持。 因此，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。 為了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而允許您指定站點所支持的 Internet Explorer 版本。 文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。 如果您的站點在 Internet Explorer 8 中無法正確顯示，則可以更新該站點以支持最新的 Web 標準（首選方式），也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。 通過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，可以實現這一點。
當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 指令來確定如何顯示該網頁。 如果該指令丟失或未指定基于標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。
?
Link
<link>css < link rel="stylesheet" type="text/css" href="css/common.css" >icon < link rel="shortcut icon" href="image/favicon.ico">#圖標?
body標簽
分類：
- 塊級標簽：標簽獨占一行，如：a、div、select
- 行內標簽：標簽本身占多少頁面上就占多少，如：p、h、span
特殊符號（常見）：
 :空格
>：>（大于）
<：<（小于）
<br/>:換行
?
1.標題：H標簽
標題（heading）通過h1-h6,來定義，大小分別遞增。
<h1>wd</h1> <h6>wd</h6>效果：
2.段落：p標簽
p段落標簽是塊級標簽，段落與段落之間有間距，并可以嵌套<br/>換行標簽。
?
<p>段落1</p> <p>段落2</p> <p>段落3<br/>這里換行了</p>效果：
3.div
div可理解為“白板”，本身不對內容做任何渲染，后續會提及使用style來渲染，屬于塊級標簽。
<div>my name is wd</div>4.span
通div一樣，span也是空白，本身不對內容做渲染，但是屬于行內標簽。
<span>haha</span><span>yes yes</span>?5.a標簽
a標簽是應用網站鏈接使用的標簽，并且a標簽可以是圖片或者其他html元素
<a href="http://www.baidu.com">百度搜索</a>效果：
target屬性：定義超鏈接是在當前窗口顯示還是新窗口顯示。
<a href="http://www.baidu.com" target="_blank">百度搜索</a> #超鏈接在新窗口打開a標簽做錨點
href中通過設置#+標簽id關聯跳轉，實質也是跳轉。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>hell wd</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <!--關聯關系必須使用id，并且href中必須使用#+id形式--> <div id="i1" style="height: 300px;">第一章內容</div> <div id="i2" style="height: 300px;">第二章內容</div> <div id="i3" style="height: 300px;">第三章內容</div> <div id="i4" style="height: 300px;">第四章內容</div> </body> </html>效果：
6.input系列?
input是我們我們用的最為多的標簽之一，并且其屬性有多種，不同的屬性對應著不同樣式。
type屬性：
1)text：文本
輸入的字符串為文本
2)password：密碼
輸入的字符串為密文
3)button:按鈕
默認并無實際作用，后續會在js中提及其作用。
4)submit:提交
提交form表單使用
5)value:屬性值
6)name：為傳輸的內容設置key，方便后臺取數據。
demo:
<body> <input type="text"/> <input type="password"> <input type="button" value="登錄" > <input type="submit" value="登錄1"> </body>效果：
?form表單：用于提交數據。
上面的input的標簽提交數據是需要配合form標簽才能進行提交。
1)atcion
設置提交數據的url
2)method
提交數據的方法，分為post和get，區別，get提交數據顯示在url中，post提交數據在body中
demo:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>hello wd</title> </head> <body> <form action="http://www.baidu.com" method="get"><!-- action屬性設置提交數據的url--><div>用戶名：<input type="text" name="username"/><input type="button" value="登錄" ><!-- name屬性為輸入的內容設置key，為了后續去數據方便--></div><div>密碼：<input type="password" name="password"><input type="submit" value="登錄1"></div> </form> </body> </html>效果：
?選擇標簽：raido
name屬性不同，代表多選，name屬性相同表示互斥(也就是單選)，value代表為選擇設置key,checked設置默認值。
demo：
<div><p>請選擇性別：</p><span>男：<input type="radio" name="sex" value="man">女：<input type="radio" name="sex" value="woman"><!--name屬性相同表示單選,value表示選擇對應的key--></span><p><input type="submit" value="提交"></p></div>效果：
復選框：checkbox
使用的時候通常將name設置為相同，name此時的作用相當于區別是復選框的種類，因為可能有多種復選框，用value設置key，checked，設置默認值。
demo:
<div><p>請選擇性別：</p><span>男：<input type="radio" name="sex" value="man" checked="checked">女：<input type="radio" name="sex" value="woman"><!--name屬性相同表示單選,value表示選擇對應的key--></span><p>愛好：</p>上網<input type="checkbox" name="favor" value="1" checked="checked">音樂<input type="checkbox" name="favor" value="2">打球<input type="checkbox" name="favor" value="3">p>技能：</p>python<input type="checkbox" name="skill" value="1">shell<input type="checkbox" name="skill" value="2">nginx<input type="checkbox" name="skill" value="3"><div><input type="submit" value="提交"></div></div>?
效果：
上傳文件：file
name屬性設置文件名字，特別注意上傳文件依賴form表單中的屬性(enctype="multipart/form-data"),該屬性表示將文件一點點發給服務器。
demo：
<div><p>上傳文件：</p><input type="file" name="filename"><input type="submit" value="提交"><input type="reset" value="重置" ></div>效果：
重置：reset
將輸入的數據重新清空
7.textarea
多行文本輸入，name表示為提交內容設置key，默認值被包裹在標簽中。
demo：
<textarea name="usermsg">wd</textarea><input type="submit" value="提交">效果：
8.select標簽
下拉框
option：設置選項
optgroup：設置分組
name：設置select的key
value：設置值option的值，提交數據時候使用
multiple="multiple"：設置多選
selected="selected"：設置默認選項，
size：設置顯示多少個，默認顯示一個。
demo:
<select name="city" multiple="multiple" size="1"><optgroup label="四川"><!--optgroup 設置組，是不能被選中的--><option value="3">成都</option><option value="3">達州</option></optgroup><option value="1">北京</option><option value="2">上海</option><option value="4">杭州</option><option value="5" selected="selected">廣州</option></select>?9.img標簽
圖片標簽
src：標識圖片來源
title：設置圖片標題，鼠標放在圖片上可看見
alt：設置圖片背后顯示內容（當圖片不存在時候顯示）
demo：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>hello wd</title> </head> <body> <a href="http://www.baidu.com"><img src="timg.jpeg" style="height: 200px ;width: 200px" alt="小清新" title="圖片小清新"> </a> </body> </html>?10.列表
- 有序列表ol
- 無需列表ul
- 自定義列表dl
有序列表：
<ol><li>python</li><li>linux</li><li>go</li> </ol>無序列表：
<ul><li>linux</li><li>pyhton</li> </ul>自定義列表：dt設置標題，dd設置條目：
<dl><dt>技能</dt><dd>go</dd><dd>python</dd><dd>linux</dd><dt>愛好</dt><dd>電影</dd><dd>音樂</dd> </dl>各類效果：
11.table標簽
表格
thead：設置表頭
th：設置表頭中的列
tbody：設置表內容
border：設置表格邊框
tr：設置表格行
td：設置每行中的數據(列數據)
colspan：設置行單元格所占大小
rowspan：設置列單元格所占大小
demo：
<table border="1"><thead><th>ip</th><th>主機名</th><th>端口</th></thead><tbody><tr><td>10.0.0.11</td><td>mysql</td><td>3306</td></tr><tr><td>10.0.0.21</td><td>nginx</td><td>80</td></tr></tbody> </table>效果：
合并單元格：
思路：取消一個單元格，通過colspan、rowspan設置其他單元格所占大小。
demo：合并同行
<table border="1"><thead><th>表頭一</th><th>表頭二</th><th>表頭三</th><th>表頭四</th></thead><tbody><tr><td colspan="2">1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody> </table>demo：合并同一列
</table><table border="1"><thead><th>表頭一</th><th>表頭二</th><th>表頭三</th><th>表頭四</th></thead><tbody><tr><td rowspan="2">1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody> </table>?12.label標簽
label一般和input配合使用，用于關聯標簽，通過使用id關聯的標簽，使得點擊label標簽也能在input中中獲取光標進行內容輸入。
for：設置關聯名字(關聯標簽使用id)
demo：
<label for="username">用戶名</label> #點擊用戶名也能就能進行輸入<input id="username" type="text" name="user"><label for="1">密碼</label><input id="1" type="password" name="1" >?13.fieldset
設置帶字段的邊框
legend：設置邊框包裹的內容
demo：
<fieldset><legend>登錄</legend><label for="username">用戶名</label><input id="username" type="text" name="user"><label for="1">密碼</label><input id="1" type="password" name="1" > </fieldset>效果：
14.cursor屬性
用來顯示一些不同的光標
常用值pointer：鼠標放上變成小手。
轉載于:https://www.cnblogs.com/wdliu/p/7119260.html
總結
- 上一篇： 汇编学习笔记(3)-80x86指令集
- 下一篇： HTML个人笔记