HTMLHTML解釋： HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,，他是一種制作萬維網頁面標準語言（標記）,。相當于定義統(tǒng)一的一套規(guī)則,，大家都來遵守他,，這樣就可以讓瀏覽器根據標記語言的規(guī)則去解釋它。 瀏覽器負責將標簽翻譯成用戶“看得懂”的格式,，呈現給用戶,！ #超級文本標記語言是標準通用標記語言下的一個應用，也是一種規(guī)范,，一種標準,，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件,，通過在文本文件中添加標記符,，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排,，圖片如何顯示等）,。 網頁的組成： 一個網頁一般由兩部分組成即：
HTML負責描述網頁的結構和內容（如標題,，導航欄等） CSS則負責網頁的表現（外觀）（如背景顏色,，字體樣式等）。
<head>和</head>之間的內容,，是元信息和網站的標題 元信息一般是不顯示出來的,但是記錄了你這個HTML文件的很多有用的信息 HTML文檔實例如下代碼：  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> 1,、DOCTYPE Doctype告訴瀏覽器使用什么樣的html或xhtml規(guī)范來解析html文檔 HTML語言需要一個標準，當我們在第一行指定了<!DOCTYPE html>的時候,，當瀏覽器去訪問我們的代碼的時候就就按照HTML代碼里指定的標準去讀取和渲染給我們展現的頁面,。
為什么要使用<!DOCTYPE html>這個去告訴瀏覽器呢？,？,？？,？,？？,？： DOCTYPE模式： 我們先了解一下DOCTYPE的模式
問題產生： 當Netscape4（譯注：網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，并沒有遵循W3C提出的標準,。Netscape4 提供了糟糕的支持,，而IE4 雖然接近標準,，但依舊未能完全正確的支持標準,。盡管IE 5 修復了IE4 許多的問題（bugs），但是依然延續(xù)CSS實現中的其它故障（主要是盒模型（box model）問題）,。 為了保證自己的網站在不同的瀏覽器中都能正確展現,，網頁開發(fā)者不得不依據各個瀏覽器的自身的規(guī)范來使用CSS。因此大部分網站的CSS實現并未符合W3C的標準,。 然而隨著標準一致性變得越來越重要,，瀏覽器開發(fā)商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。但是改變現有CSS的實現,，完整去遵循標準,，會使許多網站或多或少受到破壞。如果瀏覽器突然以正確的方式解析現存的CSS,，陳舊的網站顯示必然受到影響,。 因此立即遵循標準會產生問題，然而忽略標準則又會維持瀏覽器大戰(zhàn)時（譯注：微軟和網景之間的一段競爭）所產生的混亂,。 解決方案：
換句話說，所有的瀏覽器需要提供兩種模式：怪異模式（即兼容模式）服務于舊式規(guī)則,，嚴格模式服務于標準規(guī)則,。Mac平臺的IE瀏覽器最先實現這兩種模式，Mozilla,， Safari,、Opera和Windows平臺的IE6也相繼實現了這兩種模式。WIndows平臺的IE5和Netscape4則只提供了怪異模式,。 選擇使用哪種模式需要一個觸發(fā)器,，而 “DOCTYP切換” 則用于此目的。依照標準：任何一個(X)HTML文檔必須擁有一個DOCTYPE（譯注：DTD（文檔類型定義）是一組機器可讀的規(guī)則,，它們指示 (X)HTML文檔中允許有什么,，不允許有什么，DOCTYPE正是用來告訴瀏覽器使用哪種DTD,一般放在(X)HTML文檔開頭聲明）用以告訴其他人 這個文檔的類型風格
head部分1、Meta(metadata information) 提供有關頁面的元信息,，例：頁面編碼,、刷新、跳轉,、針對搜索引擎和更新頻度的描述和關鍵詞 1,、頁面編碼 <meta charset="UTF-8"> #指定編碼類型為UTF-8 2、刷新和跳轉 <meta http-equiv="refresh" content="5"> #指定每5秒刷新一次 3,、關鍵字 關鍵字的作用：一般是讓爬蟲之類的收錄程序,，當他們在爬你的網站的時候，如果你有關鍵字,，那么他們會優(yōu)先把關鍵字收錄到他們的記錄中,，比如百度：如果他們收錄之后，他們搜索你的關鍵字的時候,，就能找到咱們的網站,。 <meta name="keywords" content="博客,Mr,、心弦,帥哥,羅天帥"> 4、描述 例如cnblog里的就是一個描述： <meta name="description" content="博客園是一個面向開發(fā)者的知識分享社區(qū),。自創(chuàng)建以來,，博客園一直致力并專注于為開發(fā)者打造一個純凈的技術交流社區(qū)，推動并幫助開發(fā)者通過互聯(lián)網分享知識,，從而讓更多開發(fā)者從中受益,。博客園的使命是幫助開發(fā)者用代碼改變世界。"> 5,、X-UA-Compatible X-UA-Compatible 這個是IE8特有的,，知道即可,，因為做前端的同學都很害怕IE因為他們問題比較多各個版本問題很詭異,，當IE8的時候微軟想把各個版本的統(tǒng)一，那么這個參數就出現了,，他為了向下兼容,，如下的代碼如果使用IE8的時候他會以IE7的模式運行。
2,、title 網頁頭部信息,，如下圖所示：
3、Link 網頁頭部的圖標 <link rel="shortcut icon" href="favicon.ico"> 效果圖如下：
導入CSS類似python中導入模塊類似 <link rel="stylesheet" href="css/css_model.css"> 4,、Style 1、在當前文件中寫Css樣式 2,、在其他文件中寫Css樣式類似python的模塊導入的方式把Css樣式導入到當前文件中使用 5、Script 1,、在當前文件中寫JS 2,、在其他文件中寫JS類似python的模塊導入的方式把JS導入到當前文件中使用 body部分基礎知識 1,、body里面分為兩類標簽：塊級標簽和內聯(lián)標簽，塊級標簽占用的是整行,，內聯(lián)標簽占用的他所使用的實際大小如下圖： 塊級別標簽&內聯(lián)標簽：
2,、特殊符號特殊處理 舉例來說<h1>是標題標簽,，如果我想輸出<h1>這個字符串,，而不是想獲取<h1>的樣式怎么辦呢,？
正常情況下如果直接在html文件里輸入<h1>當有瀏覽器在讀取的時候就會講<h1>解釋,頁面將無法顯示，所以特殊的標簽需要特殊處理 所以特殊符號有自己的定義更多請看連接：更多 常用標簽： 1,、<p></p>標簽和<br/>標簽 <p></p>標簽：段落標簽,，每一對p標簽為一段,代碼如下 <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> 顯示效果如下：
<br/>標簽：換行標簽；有一個<br/>為一個換行,，看下面的代碼 <p>帥哥帥帥哥帥帥哥帥<br/>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> 顯示效果如下，我加了一個<br/>標簽之后段落就被換行了：
2,、<a></a>標簽 <a></a>標簽用來跳轉和錨 <a>標簽之：跳轉 默認如果在<a><a/>標簽中不設置那么他僅僅在瀏覽器中顯示文本，如下面代碼 <a>帥哥博客</a> 顯示效果：（這里僅僅顯示的文字沒有任何功能）
指定跳轉后,，代碼如下 <a >帥哥博客</a> 效果如下：
點擊后將跳轉到指定的連接地址~,，在自身的頁面打開的！ 如果讓他用一個新的標簽中打開連接地址代碼如下： <a target="_blank" >帥哥博客</a>
<a>標簽之：錨 錨的作用是類似于讀書時候的書簽,，當你你點擊這個“錨”=“書簽”,，的時候就跳轉到指定的位置  <a href="#a2"> 書簽 </a> <!--在標簽里，ID是這個標簽的唯一的值,，我們在做錨的時候指定他的ID即可--> <!--<a href="#a2"> 上面的代碼href="#要跳轉的標簽"--> <div id="a1" style="height:700px;"> mark_1 </div> <div id="a2" style="height:700px;"> mark_2 </div> 上面的代碼中，如果點擊了書簽之后,，那么就會跳轉到id=a2的書簽的位置,！ 3、H標簽 即標題標簽,代碼如下 <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6> 顯示效果如下：
4、Select標簽 第一種select標簽 <select> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">廣州</option> <!--這里默認是廣州因為selected="selected" 這里設置了默認的,！--> </select> 顯示效果如下圖：
第二種select標簽 <select size="2"> <option>上海</option> <option>北京</option> <option>廣州</option> <option>山東</option> </select> 顯示效果如下圖： 第三種select標簽,可以進行多選 <select multiple="multiple" size="2"> <option>上海</option> <option>北京</option> <option>廣州</option> <option>山東</option> </select> 第4中select標簽，可以進行分組 <select> <optgroup label="河北省"> <option>石家莊</option> <option>邯鄲</option> </optgroup> <optgroup label="山西省"> <option>太原</option> <option>平遙</option> </optgroup> </select> 效果圖如下： 5、input系列標簽 input:checkbox標簽-復選框 <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox" checked="checked"/> <!--這里加一個標識checked="checked，為默認選擇"--> 效果如下圖：
input:radio標簽-單選框 <!--第一中情況不互斥 --> <input type="radio"/> <input type="radio"/> <input type="radio"/> <hr/> <!--對于input標簽來說只要，radio的name值相同，那么他們就會互斥--> <input type="radio" name="gender"/> <input type="radio" name="gender"/> <input type="radio" name="gender"/> 效果圖如下：
input:text & password 輸入框 <!--標準的輸入框--> <input type="text"/> <!--密碼的輸入框（輸入的內容是保密的）--> <input type="password"/> 效果圖如下：
input:button & submit 提交按鈕 <input type="button" value="提交"/> <input type="submit" value="提交"/> 效果圖如下：
file標簽-用來提交文件時使用 <input type="file"/> 效果圖如下:
6、多行文本框 <textarea style="height: 100px;width: 100px;"></textarea> 效果圖如下：
7、form表單 <form> <p>用戶名:<input type="text"/></p> <p>密碼:<input type="password"/></p> <input type="submit" value="提交"/> <input type="button" value="按鈕"/> <!--這里按提交才有反映,，submit是用來提交當前的表單的,，當然可以有多個表單--> <!--但是，這個submit需要寫入表單內,，那么提交的時候是提交的當前表單--> </form> 效果圖如下：
<form action="www.baidu.com" method="get"> <!--這里action是告訴html提交到那里--> <!--method是通過什么方法去action指定的地址--> <p> 用戶名:<input type="text" name="username"/> <!--這里的name="username" 這里當咱們指定的action接收到的數據之后縣會找到是否有這個name標簽--> <!--然后把這里的用戶的輸入復制給name為一個字典key:value模式--> </p> <p> 密碼:<input type="password" name="password"/> <!--這里的name="username" 這里當咱們指定的action接收到的數據之后縣會找到是否有這個name標簽--> <!--然后把這里的用戶的輸入復制給name為一個字典key:value模式--> </p> <p> 部門:<select name="department"> <option value="1">CTO</option> <option value="2">DBA</option> <!--這里在選擇之后,，會把選擇的value值賦予給name,，當用戶點擊提交后就會提交到后臺--> </select> </p> <input type="submit" value="提交"/> </form> 8、label標簽 有一種情況,，看下圖,，在不使用label標簽的時候，我們只能點進框體里去,，否則就不能輸入或選擇，這樣用戶體驗不是很好： 代碼如下： <div> <h1>Label標簽</h1> 姓名:<input type="text"/> 婚否:<input type="checkbox"/> </div>
使用label標簽,，代碼如下： <div> <label for="name_1"> 姓名: <input id="name_1" type="text"/> </label> <label for="name_2"> 婚否:<input id="name_2" type="checkbox"/> </label> </div> 顯示效果,，這里我選擇文字的時候也會進入到相應的框體,，他類似一個跳轉：
9、列表 ul/ol/dl ul列表在前面自動加“點”,，代碼如下： <ul> <li>line1</li> <li>line2</li> <li>line3</li> </ul> 效果如下：
ol列表在前面自動加“數字”,，代碼如下： <ol> <li>line1</li> <li>line2</li> <li>line3</li> </ol> 效果如下：
dl列表自動分組,，代碼如下： <dl> <dt>河北省</dt> <!--dt是標簽，dd是標簽里的內容--> <dd>石家莊</dd> <dd>衡水市</dd> <dt>山東省</dt> <!--dt是標簽,，dd是標簽里的內容--> <dd>濟南市</dd> <dd>煙臺市</dd> </dl> 效果如下圖：
10,、表格 <table border="1"> <!--border這里是加上邊框--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <!--一個tr是1行，一個td是一列,，一行里可能有很多列。--> <!--如果想加多個行就加多個tr即可--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> 效果如下：
<table border="1"> <!--border這里是加上邊框--> <tr> <td colspan="3">1</td> <!--這里colspan,，就告訴html解析的時候占3個格--> </tr> <!--一個tr是1行，一個td是一列,，一行里可能有很多列,。--> <!--如果想加多個行就加多個tr即可--> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table> 效果如下圖：
以上的表格標簽其實還不是很標準,，正常標準的標簽如下： <table border="1"> <thead> <!--表頭--> <tr> <th>表1</th> <th>表2</th> <th>表3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> 效果如下圖：
11、fieldset標簽 代碼如下： <fieldset> <legend>協(xié)議</legend> 請仔細閱讀協(xié)議內容： </fieldset> 效果如下：
更多請看：http://www.cnblogs.com/wupeiqi 參考文檔：http://www.cnblogs.com/lxin/archive/2013/02/18/2915344.html
|
|
|
