今日主要內容:javascript
web標準php
瀏覽器內核css
HTML介紹,規範,結構詳解html
字體標籤java
排版標籤linux
超連接web
圖片標籤面試
列表標籤 <ul>、<ol>、<dl>chrome
表格標籤 <table>編程
表單標籤 <fom>
1.web標準
web準備介紹：
- w3c：萬維網聯盟組織，用來制定web標準的機構（組織）
- web標準：製做網頁遵循的規範
- web準備規範的分類：結構標準、表現標準、行爲標準。
- 結構：html。表示：css。行爲：Javascript。
web準備總結：
- 結構標準：至關於人的身體。html就是用來製做網頁的。
- 表現標準： 至關於人的衣服。css就是對網頁進行美化的。
- 行爲標準： 至關於人的動做。JS就是讓網頁動起來，具備生命力的
返回頂部
2.瀏覽器內核
| 瀏覽器 |
內核 |
| IE |
trident |
| chrome |
blink |
| 火狐 |
gecko |
| Safari |
webkit
|
PS：「瀏覽器內核」也就是瀏覽器所採用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。渲染引擎是兼容性問題出現的根本緣由
3.HTML介紹,規範,結構詳解
一、HTML的概述
html全稱HyperText Mackeup Language，翻譯爲超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。好比字體、顏色、大小等。
- 超文本：音頻，視頻，圖片稱爲超文本。
- 標記 ：<英文單詞或者字母>稱爲標記，一個HTML頁面都是由各類標記組成。
做用：HTML是負責描述文檔語義的語言。
注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。
HTML是負責描述文檔語義的語言
html中，除了語義，其餘什麼都沒有。
html是一個純本文文件（就是用txt文件更名而成），用一些標籤來描述文字的語義，這些標籤在瀏覽器裏面是看不到的，因此稱爲「超文本」，因此就是「超文本標記語言」了。
因此，接下來，咱們確定要學習一堆html中的標籤對兒，這些標籤對兒可以給文本不一樣的語義。
好比，面試的時候問你，h1標籤有什麼做用？
- 正確答案：給文本增長主標題的語義。
- 錯誤答案：給文字加粗、加黑、變大。
二、HTML的網絡術語
- 網頁 ：由各類標記組成的一個頁面就叫網頁。
- 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
- 標記：
<p>稱爲開始標記 ，</p>稱爲結束標記，也叫標籤。每一個標籤都規定好了特殊的含義。
- 元素：
<p>內容</p>稱爲元素.
- 屬性：給每個標籤所作的輔助信息。
HTML的規範
- HTML是一個弱勢語言
- HTML不區分大小寫
- HTML頁面的後綴名是html或者htm(有一些系統不支持後綴名長度超過3個字符，好比dos系統)
- HTML的結構：
- 聲明部分：主要做用是用來告訴瀏覽器這個頁面使用的是哪一個標準。是HTML5標準。
- head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
- body部分：咱們所寫的代碼必須放在此標籤內。
一、編寫HTML的規範
1）全部標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>
（2）全部的標記都必須小寫。
（3）全部的標記都必須關閉。
- 雙邊標記：
<span></span>
- 單邊標記：
<br> 轉成 <br /> <hr> 轉成 <hr />，還有<img src=「URL」 />
（4）全部的屬性值必須加引號。<h1 id="head"></h1>
（5）全部的屬性必須有值。<input type="radio" checked="checked" />
二、HTML的基本語法特徵
（1）HTML對換行不敏感，對tab不敏感
HTML只在意標籤的嵌套結構，嵌套的關係。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。
也就是說，HTML不是依靠縮進來表示嵌套的，就是看標籤的包裹關係。可是，咱們發現有良好的縮進，代碼更易讀。要求你們都正確縮進標籤。
(2) 空白摺疊現象
HTML中全部的文字之間，若是有空格、換行、tab都將被摺疊爲一個空格顯示。
（3）標籤要嚴格封閉
HTML結構詳解
新建HTML文件，輸入 html:5,按tab鍵後，自動生成的代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
一、文檔聲明頭
任何一個標準的HTML頁面，第一行必定是一個以
開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。
PS:
XHTML：Extensible Hypertext Markup Language，可擴展超文本標註語言。
XHTML的主要目的是爲了取代HTML，也能夠理解爲HTML的升級版。
HTML的標記書寫很不規範，會形成其它的設備(ipad、手機、電視等)沒法正常顯示。
XHTML與HTML4.0的標記基本上同樣。
XHTML是嚴格的、純淨的HTML
如下內容僅作了解：
HTML4.01有哪些規範呢？
首先咱們先肯定一件事兒，咱們如今學習的是HTML4.01這個版本，這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。可是IE六、七、8這些瀏覽器還不能過早的淘汰，因此這幾年網頁仍是應該用HTML4.01來製做。現在，手機、移動端的網頁，就可使用HTML5了，由於其兼容性更高。
說個題外話，html1 至 html3 是美國軍方以及高等研究所用的，並未對外公開。
HTML4.01裏面有兩大種規範，每大種規範裏面又各有3種小規範。因此一共6種規範（見下面）：
HTML4.01裏面規定了普通和XHTML兩大種規範。
HTML以爲本身有一些規定不嚴謹，好比，標籤是否能夠用大寫字母呢？<H1></H1>
因此，HTML就以爲，把一些規範嚴格的標準，又制定了一個XHTML1.0。在XHTML中的字母X，表示「嚴格的」。
總結一下，HTML4.01一共有6種DTD，說白了，HTML第一行語句一共有6種：
下面對上圖中的三種小規範進行解釋：
-
strict：表示「嚴格的」，這種模式裏面的要求更爲嚴格。這種嚴格體如今哪裏？有一些標籤不能使用。
好比，u標籤，就是給一個本文加下劃線，可是這和HTML的本質有衝突，由於HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。因此，在strict中是不能使用u標籤的。
那怎麼給文本增長下劃線呢？從此的css將使用css屬性來解決。
那麼，XHTML1.0更爲嚴格，由於這個體系自己規定好比標籤必須是小寫字母、必須嚴格閉合標籤、必須使用引號引發屬性等等。
-
Transitional：表示「普通的」，這種模式就是沒有一些別的規範。
-
Frameset：表示「框架」，在框架的頁面使用。
在sublime輸入的html:xt，x表示XHTML，t表示transitional。
HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了（W3C本身打臉了）：
ok，下面重點的來了。
二、頭標籤（head）
head標籤都放在頭部分之間。這裏麪包含了：<title>、<meta>、<link>，<style>
<title>：指定整個網頁的標題，在瀏覽器最上方顯示。<meta>：提供有關頁面的基本信息<link>：定義文檔與外部資源的關係。- <style>:定義內部樣式表與網頁的關係
2.1 Meta標籤介紹：
元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標籤位於文檔的頭部，不包含任何內容。
提供的信息是用戶不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。
經常使用的meta標籤：
（1）http-equiv屬性
它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。
<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
（2）name屬性
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。讓別人可以找到你，搜索到。
<meta name="Description" content="網易是中國領先的互聯網技術公司，爲用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，這個技術叫作SEO（search engine optimization，搜索引擎優化）。
效果以下：
<meta name=viewport content="width=device-width, initial-scale=1">
上面這個標籤，是讓咱們網頁支持移動端，移動設備優先（瞭解便可）
2.2 title標籤
主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。
效果以下：
4.HTML標籤中有兩類標籤:
1.字體標籤
2.排版標籤
1、字體標籤
字體標籤包含：h1~h六、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
標題
標題使用<h1>至<h6>標籤進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具備align屬性，屬性值能夠是：left、center、right。
<h1>路飛學城</h1>
<h2>路飛學城</h2>
<h3>路飛學城</h3>
<h4>路飛學城</h4>
<h5>路飛學城</h5>
<h6>路飛學城</h6>
字體標籤<font>(已廢棄)
color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設置字體顏色。設置方式：單詞 #ff00cc rgb(0,0,255)
實例：
<font face="微軟雅黑" color="green" size="8">字體</font>
粗體標籤<b>或<strong>(已放棄)
示例：
小馬哥
<b>小馬哥</b>
<strong>小馬哥</strong>
效果：
下劃線標記 <u> 中劃線標記<s>（已廢棄）
示例：
效果：
斜體標記 <i>或<em>（已廢棄）
示例：
小馬哥
<i>小馬哥</i>
<em>小馬哥</em>
效果：
上標<sup> 下標<sub>
上小標這兩個標籤容易混淆，怎麼記呢？這樣記：b的意思是bottom：底部
例子：
5<sup>2</sup>
8<sub>2</sub>
效果：
特殊字符
：空格 （non-breaking spacing，不斷打空格）<：小於號（less than）>：大於號（greater than）&：符號&"：雙引號'：單引號©：版權©™：商標™
要求你們背過的特殊字符： 、<、>、©
好比說，你想把<p>做爲一個文本在頁面上顯示，直接寫<p>是確定不行的，由於這表明的是一個段落標籤，因此這裏須要用到轉義字符。應該這麼寫：
效果顯示：
若是還想知道其它的HTML特殊字符：HTML特殊字符參考表
返回上一級
2、排版標籤
段落標籤<p>
段落：是英文paragraph的縮寫。
屬性：
- align='屬性值'：對齊方式。屬性值包括：left、center、right
示例：
<p>這是一個段落</p>
<p align="center">這是另外一個段落</p>
效果：
ok,下面這幾句話，你們必定緊緊記住。HTML標籤是分等級的。HTML將全部的標籤分爲兩種：
- 文本級標籤：p、span、a、b、i、u、em。文本標籤裏只能放文字、圖片、表單元素。
- 容器級標籤：div、h系列、li、dt、dd。容器級標籤裏能夠聽任何東西。
從學習p的第一天開始，就要死死記住：p標籤是一個文本級標籤，p裏面只能放文字、圖片、表單元素。其餘的一概不能放。
錯誤寫法：（把h系列的標籤放到p裏）
<p>
我是個段落
<h2>我是二級標題</h2>
</p>
效果以下：
上圖顯示，瀏覽器不容許你這麼作。咱們使用Chrome的F12審查元素髮現，瀏覽器本身把p封閉掉了，不讓你去包裹h2。
PS：Chrome瀏覽器是世界上HTML5支持最好的瀏覽器。提供了很是好的開發工具，很是適合咱們開發人員使用。審查元素功能的快捷鍵是F12。
塊級標籤 <div>和<span>
div和span是很是重要的標籤，div的語義是division「分割」； span的語義就是span「範圍、跨度」。CSS課程中你將知道，這兩個東西，都是最最重要的「盒子」。
div：把標籤中的內容做爲一個塊兒來對待(division)。必須單獨佔據一行。
div標籤的屬性：
align="屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center
<span>和<div>惟一的區別在於：<span>是不換行的，而<div>是換行的。
若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。
示例：
<body>
<div>
導航欄
</div>
<div>
中心banner
</div>
<span>路飛</span>
<span>alex</span>
</body>
效果：
div在瀏覽器中，默認是不會增長任何的效果的，可是語義變了，div中的全部元素是一個小區域。
div標籤是一個容器級標籤，裏面什麼都能放，甚至能夠放div本身。
span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。
就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。
span舉例：
<p>
商品簡介:
<span>
<a href="">詳細信息</a>
<a href="">生產日期</a>
</span>
</p>
div舉例：
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="guanggao"></div>
<div class="shop"></div>
</div>
<div class="footer"></div>
因此，咱們親切的稱呼這種模式叫作「div+css」。div標籤負責佈局，負責結構，負責分塊。css負責樣式。
ps:這個class屬性名就與css有很大關聯，講到css模塊會詳細講這塊內容。
換行標籤<br> （已廢棄）
當你打算結束一行，而又不想開始一個新段落時，<br>標籤就派上用場了。不管你將它置於何處，<br>標籤都會產生一個強制的換行。
示例：
This <br> is a para<br>graph with line breaks
效果：
上圖顯示，<p>標籤和<br>標籤的區別在於：<p>標籤會在段落的先後自動插入一個空行，而<br>標籤沒有空行；並且<br>標籤沒有屬性。
注意<br> 沒有結束標籤，把<br>標籤寫爲 <br/> 是經得起將來考驗的作法，XHTML 和 XML 都接受在打開的標籤內部來關閉標籤的作法。
水平線標籤<hr>（已廢棄）
水平分隔線（horizontal rule）能夠在視覺上將文檔分隔成各個部分
示例：
<p>小馬哥</p>
<hr>
<hr>
<p>我是段落</p>
This <br> is a para<br>graph with line breaks
效果以下：
內容居中標籤 <center>
此時center表明是一個標籤，而不是一個屬性值了。只要是在這個標籤裏面的內容，都會居於瀏覽器的中間。
示例：
<center>
<p>小馬哥</p>
</center>
效果以下：
到了H5裏面，center標籤不建議使用。
預約義（預格式化）標籤：<pre>
含義：將保留其中的全部的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）
說明：真正排網頁過程當中，<pre>標籤幾乎用不着。但在PHP中用於打印一個數組時使用。
示例：
<pre>
鵝鵝鵝
做者：李白
曲項向天歌
白毛浮綠水
</pre>
效果以下：
上圖中，好像pre標籤部分的字體變小了，並且還出現了縮進，好吧， 這個實際上是瀏覽器搞的鬼。
爲何要有<pre>這個標籤呢？答案是：
全部的瀏覽器默認狀況下都會忽略空格和空行。
好吧，其實這個標籤也用的比較少。排版標籤就給你們介紹到這裏。
返回上一級
3、超連接
超連接有三種形式：
一、外部連接：連接到外部文件。舉例：
<a href="new.html">點擊進入到新網頁</a>
a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。是一個文本級的標籤。
href是英語hypertext reference超文本地址的縮寫。讀做「喝瑞夫」，不要讀做「喝夫」。
效果：
固然，咱們也能夠直接點進連接，訪問一個網址。舉例以下；
<a href="http://www.baidu.com" target="_blank">進入百度</a>
二、錨連接：
指給超連接起一個名字，做用是在本頁面或者其餘頁面的的不一樣位置進行跳轉。好比說，在網頁底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用到了錨連接。
首先咱們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。效果以下：
上圖中解釋：
11行代碼表示，頂部這個錨的名字叫作top。
而後在底部設置超連接，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top）。注意上圖中紅框部分的#號不要忘記了，表示跳到名爲top的特定位置，這是規定。若是少了#號，點擊以後，就會跳到top這個文件或者top這個文件夾中去。
若是咱們將上圖中的第23行代碼寫成：
<a href="new.hhml#top">回到頂部</a>
就表示，點擊以後，跳轉到new.html頁面的top錨點中去。
說明：name屬性是HTML4.0之前使用的，id屬性是HTML4.0後纔開始使用。爲了向前兼容，所以，name和id這兩個屬性都要寫上，而且值是同樣的。
三、郵件連接：
代碼舉例：
<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
效果：點擊以後，會彈出outlook，做用不大。
前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息
特殊幾個連接：
返回頁面頂部的位置
與js有關：
<a href="javascript:alert(1)">內容</a>
<a href="javascript:;">內容</a>
- javascript:;表示什麼都不執行，這樣點擊
<a>時就沒有任何反應 例如：<a href="javascrip:;">內容</2
- javascript:是表示在觸發
<a>默認動做時，執行一段JavaScript代碼。 例如：<ahref="javascript:alert()">內容</a>
超連接的屬性
href：目標URLtitle：懸停文本。name：主要用於設置一個錨點的名稱。target：告訴瀏覽器用什麼方式來打開目標頁面。target屬性有如下幾個值：
_self：在同一個網頁中顯示（默認值）_blank：在新的窗口中打開。_parent：在父窗口中顯示_top：在頂級窗口中顯示
blank就是「空白」的意思，就表示新建一個空白窗口。爲啥有一個_ ，就是規定，沒啥好解釋的。
也就是說，若是不寫target=」_blank」那麼就是在相同的標籤頁打開，若是寫了target=」_blank」，就是在新的空白標籤頁中打開。
ps:a是一個文本級的標籤
好比一個段落中的全部文字都可以被點擊，那麼應該是p包含a；
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
而不是a包裹p：
<a href="">
<p>
段落段落段落段落段落段落
</p>
</a>
a的語義要小於p，a就是能夠當作文原本處理，因此p裏面至關於放的就是純文字。
返回上一級
4、圖片標籤 <img />
img: 表明的就是一張圖片。是單邊標記。
img是自封閉標籤，也稱爲單標籤。
能插入的圖片類型：
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，因此也要把圖片上傳到服務器上。
src屬性：圖片的相對路徑和絕對路徑
這裏涉及到圖片的一個屬性：
在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑
一、寫法一：相對路徑
相對當前頁面所在的路徑。兩個標記 . 和 .. 分表表明當前目錄和父路徑。
舉例1：
<!-- 當前目錄中的圖片 -->
<img src="2.jpg">
<img src=".\2.jpg">
<!-- 上一級目錄中的圖片 -->
<img src="..\2.jpg">
img 是image「圖片」的簡寫，src 是英語source「資源」的縮寫。
舉例2：
上方代碼的意思是說，當前頁面有一個並列的文件夾images，在文件夾images中存放了一張圖片1.jpg
二、寫法二：絕對路徑
（1）以盤符開始的絕對路徑。舉例：
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
（2）網絡路徑。舉例：
<img src="http://www.baidu.com/2016040102.jpg">
相對路徑和絕對路徑的總結
相對路徑的好處：站點無論拷貝到哪裏，文件和圖片的相對路徑關係都是不變的。
相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。
問題：個人網頁在C盤，圖片卻在D盤，能不能插入呢？
答案： 用相對路徑不能，用絕對路徑也不能。
注意：可使用file://來插入，可是這種方法，沒有任何意義！由於服務器上沒有所謂c盤、d盤。
下面的方法是行的，可是沒有任何工程上的意義，這是由於服務器沒有盤符，linux系統沒有盤符：
<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />
總結一下：
-
咱們如今不管是在a標籤、img標籤，若是要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。
-
相對路徑，就是../ image/ 這種路徑。從本身出發，找到別人；
-
絕對路徑，就是http://開頭的路徑。
-
絕對不容許使用file://開頭的東西，這個是徹底錯誤的！
img標籤的經常使用其它屬性
舉例：
示例：
嘿嘿<img src="images/bojie.jpeg" alt="波姐" title='波多野結衣' width="400" height="400">幺幺
文本級的標籤顯示在瀏覽器上時，無論你的圖片多高，它總會底邊對齊，這是一種現象，「高矮不齊，底邊對齊」。
此時你們能夠給圖片設置align屬性，來查看效果吧！
注意事項：
（1）若是要想保證圖片等比例縮放，請只設置width和height中其中一個。
（2）若是想實現圖文混排的效果，請使用align屬性，取值爲left或right
若是想點擊圖片的時候跳轉到某個連接，應該是：
<a>
<img src="images/bojie.jpeg" alt="波姐" title='波多野結衣'>
</a>
返回上一級
列表標籤分爲三種。
一、無序列表<ul>，無序列表中的每一項是<li>
英文單詞解釋以下：
- ul：unordered list，「無序列表」的意思。
- li：list item，「列表項」的意思。
示例：
<ul>
<li>張三</li>
<li>李四</li>
<li>王五</li>
</ul>
效果：
注意：
- li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能有li。
- 咱們這裏再次強調，ul的做用，並非給文字增長小圓點的，而是增長無序列表的「語義」的。
屬性：
type="屬性值"。屬性值能夠選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。
效果以下：
列表之間是能夠嵌套的。咱們來舉個例子：
代碼：
<ul>
<li><b>北京市</b>
<ul>
<li>海淀區</li>
<li>朝陽區</li>
<li>東城區</li>
</ul>
</li>
<li><b>廣州市</b>
<ul>
<li>天河區</li>
<li>越秀區</li>
</ul>
</li>
</ul>
效果:
聲明：ul的兒子，只能是li。可是li是一個容器級標籤，li裏面什麼都能放。甚至能夠再放一個ul。
二、有序列表<OL>，裏面的每一項是<li>
英文單詞：Ordered List。
例如：
<ol>
<li>嘿哈</li>
<li>哼哈</li>
<li>呵呵</li>
</ol>
效果：
屬性：
type="屬性值"。屬性值能夠是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始。
效果：
和無序列表同樣，有序列表也是能夠嵌套的哦，這裏就不舉相似的例子了。
ol和ul就是語義不同，怎麼使用都是同樣的。
ol裏面只能有li，li必須被ol包裹。li是容器級。
ol這個東西用的很少，若是想表達順序，你們通常也用ul。舉例以下：
<ul>
<li>1. 嘿哈</li>
<li>2. 哼哈</li>
<li>3. 呵呵</li>
</ul>
三、定義列表<dl>
定義列表的做用很是大。
<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。
<dt>：definition title 列表的標題，這個標籤是必須的<dd>：definition description 列表的列表項，若是不須要它，能夠不加
備註：dt、dd只能在dl裏面；dl裏面只能有dt、dd。
代碼：
<dl>
<dt>第一條規則</dt>
<dd>不許睡覺</dd>
<dd>不許交頭接耳</dd>
<dd>不許下神</dd>
<dt>第二條規則</dt>
<dd>能夠泡妞</dd>
<dd>能夠找妹子</dd>
<dd>能夠看mv</dd>
</dl>
效果：
上圖能夠看出，定義列表表達的語義是兩層：
- （1）是一個列表，列出了幾個dd項目
- （2）每個詞兒都有本身的描述項。
備註：dd是描述dt的。
定義列表用法很是靈活，能夠一個dt配不少dd：
<dl>
<dt>北京</dt>
<dd>國家首都，政治文化中心</dd>
<dd>污染很嚴重，PM2.0每天報表</dd>
<dt>上海</dt>
<dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
<dt>廣州</dt>
<dd>中國南大門，有珠江、小蠻腰</dd>
</dl>
還能夠拆開，讓每個dl裏面只有一個dt和dd，這樣子感受清晰一些：
<dl>
<dt>北京</dt>
<dd>國家首都，政治文化中心</dd>
<dd>污染很嚴重，PM2.0每天報表</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
</dl>
<dl>
<dt>廣州</dt>
<dd>中國南大門，有珠江、小蠻腰</dd>
</dl>
京東案例（京東首頁最下方）
dt、dd都是容器級標籤，想放什麼均可以。因此，如今就應該更加清晰的知道：用什麼標籤，不是根據樣子來決定，而是語義（語義本質上是結構）。
2、表格標籤
表格標籤用<table>表示。
一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。
因此咱們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。
在之前，要想固定標籤的位置，惟一的方法就是表格。如今能夠經過CSS定位的功能來實現。可是如今在作頁面的時候，表格做用仍是有一些的。
例如，一行的單元格：
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
上面的表格中沒有加文字，因此在生成的網頁中什麼都看不到。
例如，3行4列的單元格：
<table>
<tr>
<td>小馬哥</td>
<td>18</td>
<td>男</td>
<td>山東</td>
</tr>
<tr>
<td>小嶽嶽</td>
<td>45</td>
<td>男</td>
<td>河南</td>
</tr>
<tr>
<td>鄧紫棋</td>
<td>23</td>
<td>女</td>
<td>香港</td>
</tr>
</table>
效果：
上圖中的表格好像沒看到邊框呀，不急，接下來看看<table>標籤的屬性。
<table>的屬性：
border：邊框。像素爲單位。style="border-collapse:collapse;"：單元格的線和表格的邊框線合併width：寬度。像素爲單位。height：高度。像素爲單位。bordercolor：表格的邊框顏色。align：表格的水平對齊方式。屬性值能夠填：left right center。
注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）cellpadding：單元格內容到邊的距離，像素爲單位。默認狀況下，文字是緊挨着左邊那條線的，即默認狀況下的值爲0。
注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。若是設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0bgcolor="#99cc66"：表格的背景顏色。background="路徑src/..."：背景圖片。
背景圖片的優先級大於背景顏色。
單元格帶邊框的效果：
備註：表格中很細表格邊線的製做：
CSS的寫法：
style="border-collapse:collapse;"
<tr>：行
一個表格就是一行一行組成的嘛。
屬性：
dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）bgcolor：設置這一行的單元格的背景色。
注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。height：一行的高度align="center"：一行的內容水平居中顯示，取值：left、center、rightvalign="center"：一行的內容垂直居中，取值：top、middle、bottom
<td>：單元格
屬性：
align：內容的橫向對齊方式。屬性值能夠填：left right center。
若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。valign：內容的縱向對齊方式。屬性值能夠填：top middle bottomwidth：絕對值或者相對值(%)height：單元格的高度bgcolor：設置這個單元格的背景色。background：設置這個單元格的背景圖片。
單元格的合併
若是要將兩個單元格合併，那確定就要刪掉一個單元格。
單元格的屬性：
colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上
效果：（橫向合併）
效果舉例：（縱向合併）
<th>：加粗的單元格。至關於<td> + <b>
<caption>：表格的標題。使用時和tr標籤並列
效果：
表格的<thead>標籤、<tbody>標籤、<tfoot>標籤
這三個標籤有與沒有的區別：
- 一、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。
- 二、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來。
例子：
<table border="1">
<caption>人物介紹</caption>
<tbody>
<tr>
<td>小馬哥</td>
<th>18</th>
<td>男</td>
<td rowspan="3">中國</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>小嶽嶽</td>
<td>45</td>
<td>男</td>
</tr>
</tfoot>
<thead>
<tr>
<td>鄧紫棋</td>
<td>23</td>
<td>女</td>
</tr>
</thead>
</table>
效果：
3、表單標籤
表單標籤用<form>表示，用於與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
屬性：
name：表單的名稱，用於JS來操做或控制表單時使用；id：表單的名稱，用於JS來操做或控制表單時使用；action：指定表單數據的處理程序，通常是PHP，如：action=「login.php」method：表單數據的提交方式，通常取值：get(默認)和post
form標籤裏面的action屬性和method屬性，在後面課程給你們講解。稍微說一下：action屬性就是表示，表單將提交到哪裏。 method屬性表示用什麼HTTP方法提交，有get、post兩種。
get提交和post提交的區別：
GET方式：
將表單數據，以"name=value"形式追加到action指定的處理程序的後面，二者間用"?"隔開，每個表單的"name=value"間用"&"號隔開。
特色：只適合提交少許信息，而且不太安全(不要提交敏感數據)、提交的數據類型只限於ASCII字符。
POST方式：
將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序能夠獲取到表單數據。
特色：能夠提交海量信息，相對來講安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。
Enctype：
表單數據的編碼方式(加密方式)，取值能夠是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
- Application/x-www-form-urlencoded：默認加密方式，除了上傳文件以外的數據均可以
- Multipart/form-data：上傳附件時，必須使用這種編碼方式。
用於接收用戶輸入。
屬性：
type="屬性值"：文本類型。屬性值能夠是：
text（默認）password：密碼類型radio：單選按鈕，名字相同的按鈕做爲一組進行單選（單選按鈕，天生是不能互斥的，若是想互斥，必需要有相同的name屬性。name就是「名字」。
）。很是像之前的收音機，按下去一個按鈕，其餘的就擡起來了。因此叫作radio。checkbox：多選按鈕，名字相同的按鈕做爲一組進行選擇。checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標籤的type="radio"時，能夠用這個屬性。屬性值也是checked，能夠省略。hidden：隱藏框，在表單中包含不但願用戶看見的信息button：普通按鈕，結合js代碼進行使用。submit：提交按鈕，傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。reset：重置按鈕，清空當前表單的內容，並設置爲最初的默認值image：圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片。file：文件選擇框。
提示：若是要限制上傳文件的類型，須要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
value="內容"：文本框裏的默認內容（已經被填好了的）size="50"：表示文本框內能夠顯示五十個字符。一個英文或一箇中文都算一個字符。
注意size屬性值的單位不是像素哦。readonly：文本框只讀，不能編輯。由於它的屬性值也是readonly，因此屬性值能夠不寫。
用了這個屬性以後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標能夠點進去，可是文字不能編輯。disabled：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫。
例子：
<form>
姓名：<input value="呵呵" >逗比<br>
暱稱：<input value="哈哈" readonly=""><br>
名字：<input type="text" value="name" disabled=""><br>
密碼：<input type="password" value="pwd" size="50"><br>
性別：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
愛好：<input type="checkbox" name="love" value="eat">吃飯
<input type="checkbox" name="love" value="sleep">睡覺
<input type="checkbox" name="love" value="bat">打豆豆
</form>
效果：
四種按鈕的舉例：
<form>
<input type="button" value="普通按鈕"><br>
<input type="submit" value="提交按鈕"><br>
<input type="reset" value="重置按鈕"><br>
<input type="image" src="images/bojie.jpeg" width="400" value="圖片按鈕2"><br>
<input type="file" value="文件選擇框">
</form>
效果：
<select>：下拉列表標籤
<select>標籤裏面的每一項用<option>表示。select就是「選擇」，option「選項」。
select標籤和ul、ol、dl同樣，都是組標籤。
<select>標籤的屬性：
multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。size="3"：若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖。
<option>標籤的屬性：
例子：
<form>
<select>
<option>小學</option>
<option>初中</option>
<option>高中</option>
<option>大學</option>
<option selected="">研究生</option>
</select>
<br><br><br>
<select size="3">
<option>小學</option>
<option>初中</option>
<option>高中</option>
<option>大學</option>
<option>研究生</option>
</select>
<br><br><br>
<select multiple="">
<option>小學</option>
<option>初中</option>
<option selected="">高中</option>
<option selected="">大學</option>
<option>研究生</option>
</select>
<br><br><br>
</form>
效果:
<textare>標籤：多行文本輸入框
text就是「文本」，area就是「區域」。
屬性：
value：提交給服務器的值。rows="4"：指定文本區域的行數。cols="20"：指定文本區域的列數。readonly：只讀。
<form>
<textarea name="txtInfo" rows="4" cols="20">路飛學城</textarea>
</form>
效果：
表單的語義化
好比，咱們在註冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候能夠利用表單的語義化。
<form>
<fieldset>
<legend>帳號信息</legend>
姓名：<input value="呵呵" >逗比<br>
密碼：<input type="password" value="pwd" size="50"><br>
</fieldset>
<fieldset>
<legend>其餘信息</legend>
性別：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
愛好：<input type="checkbox" name="love" value="eat">吃飯
<input type="checkbox" name="love" value="sleep">睡覺
<input type="checkbox" name="love" value="bat">打豆豆
</fieldset>
</form>
效果：
<label>標籤
咱們先來看下面一段代碼：
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
對於上面這樣的單選框，咱們只有點擊那個單選框（小圓圈）才能夠選中，點擊「男」、「女」這兩個文字時是沒法選中的；因而，label標籤派上了用場。
本質上來說，「男」、「女」這兩個文字和input標籤時沒有關係的，而label就是解決這個問題的。咱們能夠經過label把input和漢字包裹起來做爲總體。
解決方法以下：
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
上方代碼中，input元素要有一個id，而後label標籤有一個for屬性，和id相同，那麼這個label和input就有綁定關係了。
固然了，複選框也有label：（任何表單元素都有label）
<input type="checkbox" id="kk" />
<label for="kk">10天內免登錄</label>
ok,基本上HTML標籤就給你們介紹到這裏，基本上呢，標準的div+css佈局，咱們經常使用的的標籤以下：
div p h1 span a img ul ol dl input
看到的朋友，加個關注，有什麼問題及時留言，及時改正！