列表標(biāo)簽：

無序列表：ul

語法：（下圖）

注：<ul>…</ul>標(biāo)記表示這一個無序列表的開始與結(jié)束谨胞，而<li>則表示這是一個列表項的開始（在一個無序列表中可以包含多個列表項议慰。）

<ul>與<li>之間不要嵌套其他標(biāo)簽了鸟妙，但是<li>可以扬绪。

有序列表：ol

語法：（下圖）

注：<ol>…</ol>標(biāo)記表示這一個無序列表的開始與結(jié)束荠呐，而<li>則表示這是一個列表項的開始（默認(rèn)情況下赛蔫，采用數(shù)字序號進(jìn)行排列）

有序列表或無序列表，都獨占一行的（塊級標(biāo)簽）

定義列表：dl

定義列表不同于上兩個有序/無序列表泥张，它主要用于對術(shù)語或名詞進(jìn)行解析和描述呵恢，包含兩個層次的列表，第一層是需要解釋的名詞媚创，第二層是具體的解釋瑰剃。定義列表的列表項前沒有任何項目符號。

語法：（下圖）

<dl>…</dl>可以有多個名詞及解釋

演示

創(chuàng)建表格：

表格的基本構(gòu)成——table筝野、tr晌姚、td

表格標(biāo)記：table? ? ? ? ? 行標(biāo)記：tr? ? ? ? ? 單元格標(biāo)記：td

表格標(biāo)記<table>…</table>，表格的其他各種屬性都要在表格的開頭標(biāo)記<table>和表格的結(jié)束標(biāo)記</table>之間才有效歇竟。

表格是用于排列內(nèi)容的最佳手段挥唠，在HTML頁面中，絕大多數(shù)頁面都是使用表格進(jìn)行排版的焕议。

語法：

效果看下面的

這個是效果

補充快捷鍵：ctrl+{進(jìn)行左縮進(jìn) ?; ?ctrl+}進(jìn)行右縮進(jìn)（這個好像按Tab鍵效果差不多宝磨，都是往右邊縮進(jìn)）

咦~看上圖效果，怎么沒有邊框盅安？ ? 看下面（加了屬性：border="1"）

注意注意：邊框以后可以用樣式控制唤锉，此處不必認(rèn)真！

【解析一下：border="1"别瞭，1是邊框得到寬度窿祥，2的寬度比1大，3的比2大……以此類推】蝙寨。注意晒衩，這個是自己的驗證，未得到老師的驗證墙歪！

表格的表頭——th

表格中還有一種特殊的單元格听系，稱為表頭。一般位于表格第一行虹菲，用來表明該列的內(nèi)容類別靠胜，用<th>和</th>標(biāo)記來表示。與<td>標(biāo)記的使用方法相同，但是<th>標(biāo)記中的內(nèi)容是加粗顯示的浪漠。

語法：

效果看下面的

這個是效果

單元格合并：

增加第一行第一格屬性rowspan="2" ?(數(shù)字2可以變動的哈)

rowspan的意思：一個單元格占用兩行進(jìn)行顯示菠赚。（這句話感覺有問題）

先看一個錯誤的：

增加第一行第一格屬性rowspan="2"，表示合并第一行第一格及第二行第一格郑藏，但是第二行第一格單元內(nèi)容4應(yīng)該消失才對衡查，但上面并沒有，還把單元格內(nèi)容6擠外面去了必盖。

正確的方法應(yīng)該把單元格內(nèi)容4隱藏解析起來拌牲，看下面

正確的方法：

把單元格內(nèi)容4隱藏解析起來，單元格1和單元格4合并了

在演示一個：

增加屬性：colspan="2" (數(shù)字2可以變動的哈)

colspan的意思：將一行中的一個單元格占用兩個列進(jìn)行顯示歌粥。（這句話感覺有問題塌忽，同上一個）

把單元格內(nèi)容2隱藏解析起來，單元格2和單元格3合并了

節(jié)標(biāo)簽：

div標(biāo)簽

div是塊級標(biāo)簽（塊級標(biāo)簽獨占行）{塊級標(biāo)簽還有：p,ul,ol.dl,li,dt,h1~h6,}

鼠標(biāo)移到一行代碼上失驶，頁面上一行內(nèi)容是占了一行（通欄的）

還可以獨占N行的土居，下面是獨占2行：

鼠標(biāo)移到一行代碼上，頁面上獨占2行了（通欄的）

span標(biāo)簽：

span是行級標(biāo)簽（行級標(biāo)簽可以跟其他行內(nèi)標(biāo)簽共用一行）{行級標(biāo)簽還有：span,strong,em,文本相關(guān)的標(biāo)簽都是行級標(biāo)簽嬉探。}

補充： ? //emmet語法：輸入span{內(nèi)容$}*n擦耀，后按Tab鍵，會自動復(fù)制n行涩堤，并自動排列數(shù)字編號眷蜓，看下面例子：

輸入span{我是顯然$}*3? 后按Tab鍵，出現(xiàn)下圖

鼠標(biāo)移到一行代碼上胎围，頁面上一行中只是占了一小塊

表單

表單通常由表單控件（也稱為表單元素）吁系、提示信息和表單域3個部分構(gòu)成。

l表單控件：包含了具體的表單功能項白魂，如單行文本輸入框汽纤、密碼輸入框、復(fù)選框福荸、提交按鈕蕴坪、重置按鈕等。

提示信息：一個表單中通常還需要包含一些說明性的文字逞姿，提示用戶進(jìn)行填寫和操作辞嗡。

表單域：他相當(dāng)于一個容器，用來容納所有的表單控件和提示信息滞造，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法栋烤。如果不定義表單域谒养，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。

表單就是用戶提交數(shù)據(jù)到后臺的一個虛擬單子。

一個簡單的HTML表單界面及其構(gòu)成

Form標(biāo)簽:

form標(biāo)簽（包裹標(biāo)簽）：表單的域標(biāo)簽买窟，用于包裹整個表單的內(nèi)容丰泊。(所有的表單標(biāo)簽必須被包裹在 form 標(biāo)簽中)

action屬性：用于指定當(dāng)前表單 提交的時候指向后臺的地址。

text代表：文本框 ? ? radil代表：單選框

性別一欄始绍，類目相同的時候瞳购，input成一組狀態(tài)。

想要頁面在用戶未選擇之前亏推，顯示默認(rèn)選一項学赛，可以添加屬性：checked="checked" 。（用于單選框）

(注意：屬性和值相同的時候吞杭，可以取消值盏浇，直接寫屬性)

多選框：

input標(biāo)簽：

input標(biāo)簽是文本框、單選按鈕芽狗、多選按鈕绢掰、重置的按鈕、按鈕等童擎。? ? type屬性不同的取值決定了input標(biāo)簽的作用滴劲。

注意：input標(biāo)簽的 checked屬性，屬性值只有一個checked顾复，可以省略屬性值哑芹，在單選按鈕和多選按鈕中表示 此按鈕被選中。

select標(biāo)簽：

select 標(biāo)簽：用于下拉列表捕透，或者列表標(biāo)簽聪姿。

選項用option標(biāo)簽來設(shè)置，value值只有在后臺有用乙嘀。Option包裹的內(nèi)容是顯示的選項的文本末购。（下圖）

選項用option標(biāo)簽來設(shè)置，value值只有在后臺有用虎谢。Option包裹的內(nèi)容是顯示的選項的文本盟榴。

multiple 代表生成一個展開的下拉列表。（下圖可以比較）

沒有添加multiple屬性的婴噩，需要點擊頁面三角形才顯示下拉擎场，添加了multiple屬性，是直接展開顯示下拉列表几莽。（multiple=“multiple”可以直接寫成multiple）

想要頁面在用戶未選擇之前迅办，顯示默認(rèn)選一項，可以添加屬性：selected="true"章蚣。（用于下拉列表）

文本域：

文本域標(biāo)簽：?textarea站欺。（用來輸入大量文本的的標(biāo)簽。文本域標(biāo)簽的cols表示可以容納多少列字符。rows容納多少行數(shù)據(jù)矾策。一般用于輸入大量文本時才用這個磷账，其他情況用input就可以了。）

下面是34表單完整代碼：

QQ注冊演示

代碼看回：14qqdemo.html

組合表單：

語法：<fieldset>表單內(nèi)容</fieldset>

將表單內(nèi)容的一部分打包贾虽，生成一組相關(guān)表單的字段逃糟。

<legend>標(biāo)簽為 fieldset 元素定義標(biāo)題。

表單總結(jié)：

checked屬性：定義選擇控件默認(rèn)被選中的項蓬豁。（標(biāo)識單選或多選按鈕是否被選中绰咽，單屬性。）

lable標(biāo)簽：for 屬性指向要提供服務(wù)的 標(biāo)簽的 id 值庆尘。

Lable：直接包裹標(biāo)簽剃诅，可以實現(xiàn)點擊標(biāo)簽的文字內(nèi)容，讓包裹的表單標(biāo)簽標(biāo)簽獲得焦點驶忌。

select:下拉列表矛辕，列表； ? ? ? multiple：單屬性付魔。

option設(shè)置我們的列表的選項聊品。

textarea文本域標(biāo)簽：當(dāng)輸入大量的文本的時候需要使用文本域標(biāo)簽。

cols設(shè)置文本域可以輸入多少列字符几苍。寬度翻屈。

rows設(shè)置文本域的可以輸入的行字符數(shù)，高度妻坝。

Fildset標(biāo)簽：

Legend：組合標(biāo)簽的標(biāo)題伸眶。

內(nèi)聯(lián)框架：

iframe標(biāo)簽，元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）刽宪。

src="demo_iframe.htm" width="200"

height="200">

可以設(shè)置高度和寬度（height厘贼，width）

去掉邊框：frameborder設(shè)置為0；

這個不建議使用了圣拄。（了解即可）

好像我這個是有問題的一個代碼

其他標(biāo)簽的補充：

meta標(biāo)簽：網(wǎng)站SEO關(guān)鍵詞和描述嘴秸。

code定義計算機代碼

var定義變量

<pre> 定義預(yù)格式文本

<abbr> 定義縮寫

<address>?定義地址

<blockquote> 定義長的引用

<cite> 定義引用、引證

<dfn> 定義一個定義項目

特殊字符標(biāo)記:

HTML為這些特殊字符準(zhǔn)備了專門的替代代碼庇谆。

比如我要在頁面顯示 ?<舉例> ?岳掐，可以寫成：

html語義化：

Web語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁面有良好的結(jié)構(gòu)饭耳，頁面元素有含義串述，能夠讓人和搜索引擎都容易理解。

標(biāo)簽與語義相結(jié)合哥攘，盡量不要使用沒有語義的標(biāo)簽比如：div剖煌、span材鹦，盡量使用p逝淹、ul耕姊、ol、table等標(biāo)簽栅葡。

充分利用標(biāo)簽?zāi)J(rèn)的含義

標(biāo)題標(biāo)簽的選擇

h1-h6,

th,td,ul,ol,dl,dd,dt,p,em,strong

HTML5的標(biāo)簽語義化更徹底（后面）

標(biāo)簽的類型（顯示模式）

HTML標(biāo)記一般分為塊標(biāo)記和行內(nèi)標(biāo)記兩種類型茉兰，它們也稱塊元素和行內(nèi)元素。

塊元素：

每個塊元素通常都會獨自占據(jù)一整行或多整行欣簇，可以對其設(shè)置寬度规脸、高度、對齊等屬性熊咽，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建莫鸭。

常見的塊元素有：<h1~h6>、<p>横殴、<div>被因、<ul>、<ol>衫仑、<li>等梨与，<div>標(biāo)記是最典型的塊元素。

行內(nèi)元素：

行內(nèi)元素不占有獨立的區(qū)域文狱，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)粥鞋，一般不可以設(shè)置寬度、高度瞄崇、對齊等屬性呻粹，常用于控制頁面中文本的樣式。

常見的行內(nèi)元素有：<strong>苏研、<b>等浊、<em>、<i>楣富、<del>凿掂、<s>、<ins>纹蝴、<u>庄萎、<a>、<span>塘安。<span>等糠涛，<span>標(biāo)記是最典型的行內(nèi)元素。

結(jié)尾：

1兼犯、網(wǎng)頁結(jié)構(gòu)：HTML

常見的標(biāo)簽：Div忍捡、span集漾、strong、em砸脊、table具篇、tr、td

Ul凌埂、li驱显、ol、dl瞳抓、dt埃疫、dd

Input、select孩哑、textarea栓霜、lable、form横蜒、fielset

2胳蛮、CSS，描述樣式

3愁铺、JavaScript鹰霍，實現(xiàn)頁面交互的效果。