一. HTML-列表元素
列表元素
-
有序列表：ol泻云、li
- ol（ordered list）有序列表荤胁，直接子元素只能是li
- li（list item）列表中的每一項(xiàng)
-
無序列表：ul凡橱、li
- ul（unordered list）無序列表荧琼，直接子元素只能是li
- li（list item）列表中的每一項(xiàng)
li一定要是ul或者ol的直接子元素
-
定義列表：dl讨便、dt育谬、dd
- dl（definition list）定義列表含蓉，直接子元素只能是dt频敛、dd
- dt（definition term）列表中每一項(xiàng)的項(xiàng)目名
- dd（definition description）列表中每一項(xiàng)的具體描述，是對(duì) dt 的描述馅扣、解釋姻政、補(bǔ)充
dt和dd是兄弟元素
- 一個(gè)dt后面一般緊跟著1個(gè)或者多個(gè)dd
- dt、dd常見的組合
事物的名稱岂嗓、事物的描述
問題汁展、答案
類別名、歸屬于這類的各種事物
元素CSS屬性
列表相關(guān)的常見CSS屬性有4個(gè)：list-style-type厌殉、list-style-image食绿、list-style-position、list-style公罕，它們都可以繼承器紧，所以設(shè)置給ol、ul元素楼眷，默認(rèn)也會(huì)應(yīng)用到li元素
- list-style-type：設(shè)置li元素前面標(biāo)記的樣式（很少用到）
- disc：實(shí)心圓铲汪、circle：空心圓、square：實(shí)心方塊
- none：什么也沒有（用得最多）
- list-style-image：設(shè)置某張圖片為li元素前面的標(biāo)記罐柳，會(huì)覆蓋list-style-type的設(shè)置（很少用到）
- list-style-position：設(shè)置li元素前面標(biāo)記的位置掌腰，可以取outside、inside2個(gè)值
- 前面標(biāo)記的樣式是算在內(nèi)容內(nèi)還是內(nèi)容外
- list-style: none（用得最多）縮寫屬性
二. HTML-表格元素
table常見的元素
- table
- 屬性（很少用到）
- tr 表格中的行 -> table row
- 屬性
- td 行中的單元格 -> table description
- 屬性
單元格邊框的合并：細(xì)線表格（很常用）
- 合并單元格的邊框
table{ border-collapse: collapse } - 表格居中：margin auto
其他元素（很少用到）
- caption
- tbody
- thead
- th
- tfoot
單元格的合并
- 合并要領(lǐng)
- 合并方向是向右张吉、向下
- 刪掉被覆蓋掉的td元素
- colspan
- rowspan
border-spacing
- border-spacing用于設(shè)置單元格之間的水平齿梁、垂直間距，比如
table {border-spacing: 10px 20px }- 2個(gè)值分別是cell之間的水平、垂直間距
如果只設(shè)置1個(gè)值勺择，同時(shí)代表水平创南、垂直間距
三. HTML-表單元素
form表單常用元素
- form表單 一般情況下，其他表單相關(guān)元素都是它的后代元素
- input 單行文本輸入框省核、單選框稿辙、復(fù)選框、按鈕等元素
- textarea 多行文本框
- select气忠、option 下拉選擇框
- button 按鈕
- label 表單元素的標(biāo)題
- fieldset 表單元素組
- legend fieldset的標(biāo)題
input的常用屬性
input是一個(gè)行內(nèi)替換元素（和img一樣）邻储，基本上所有替換元素都是行內(nèi)元素
input是一個(gè)單標(biāo)簽
input的type屬性：
-
1 單行文本輸入框
- text：文本輸入框（明文輸入）
- password：文本輸入框（密文輸入）
-
2 單選復(fù)選框
- radio：?jiǎn)芜x框
男<input type="radio" name="sex" value="1" title="男" checked> 女<input type="radio" name="sex" value="2" title="女"> <!-- 具有相同name值的radio input會(huì)實(shí)現(xiàn)互斥效果 -->- checkbox：復(fù)選框
-
3 button 按鈕 重置 提交
-
- 普通按鈕（type=button）：使用value屬性設(shè)置按鈕文字
按鈕的兩種實(shí)現(xiàn)方法：
用
<button>標(biāo)簽（比較少用）-
用
<input>標(biāo)簽，type為button（常用）<input type="button" value="獲取驗(yàn)證碼" tabindex="-1">
-
- 重置按鈕（type=reset）：重置它所屬form的所有表單元素（包括input笔刹、textarea芥备、select）
<form> <fieldset> <legend>必填信息</legend> </fieldset> <fieldset> <legend>選填信息</legend> </fieldset> <div> <input type="reset" value="重置" tabindex="-1"> <input type="submit" value="注冊(cè)" tabindex="-1"> </div> </form>- 前提1：type必須是reset類型 （value值可以不寫，默認(rèn)是“重置”）
- 前提2：所有的內(nèi)容都必須在同一個(gè)表單中
<form>
-
- 提交按鈕（type=submit）：提交它所屬form的表單數(shù)據(jù)給服務(wù)器（包括input舌菜、textarea萌壳、select）
-
4 file：文件上傳
input的其他屬性
- 注意：【當(dāng)屬性名和值相等的時(shí)候可以只寫屬性名】，例：
<input type="text" readonly="readonly">日月，可以簡(jiǎn)寫為：<input type="text" readonly>
- maxlength：允許輸入的最大字?jǐn)?shù)
- placeholder：占位文字
<input id="pwd" type="password" name="pwd" placeholder="請(qǐng)輸入密碼">
- readonly：只讀（很少用到）
- disabled：禁用
- 例如禁用獲取驗(yàn)證碼
<input type="button" value="獲取驗(yàn)證碼" disabled>
- checked：默認(rèn)被選中
- 只有當(dāng)type為radio或checkbox時(shí)可用
男<input type="radio" name="sex" value="1" title="男" checked tabindex="-1">
- autofocus：當(dāng)頁面加載時(shí)袱瓮，自動(dòng)聚焦
- 通常給第一個(gè)輸入框添加autofocus
- name：名字
- 在提交數(shù)據(jù)給服務(wù)器時(shí)，可用于區(qū)分?jǐn)?shù)據(jù)類型（作為key）
- 單選框互斥必須設(shè)置name
- value：取值
- button不設(shè)置name爱咬，不會(huì)上傳value
- form：設(shè)置所屬的form元素（填寫form元素的id）（很少用到）
- 一旦使用了此屬性尺借，input元素即使不寫在form元素內(nèi)部，它的數(shù)據(jù)也能夠提交給服務(wù)器
textarea 多行文本輸入框
- textarea的常用屬性
- cols：列數(shù)
- rows：（顯示的）行數(shù)
- 縮放的CSS設(shè)置
- 禁止縮放：resize: none;
- 水平縮放：resize: horizontal;
- 垂直縮放：resize: vertical;
- 水平垂直縮放：resize: both;
select精拟、option 下拉選擇框
- option是select的子元素燎斩，一個(gè)option代表一個(gè)選項(xiàng)
<select name="edu" title="學(xué)歷">
<option value="1">小學(xué)</option>
<option value="2">初中</option>
<option value="3" selected>高中</option>
</select>
- select常用屬性
- multiple：可以多選
- size：顯示多少項(xiàng)
- option常用屬性
- selected：默認(rèn)被選中
- value：上傳到服務(wù)器的鍵
fieldset和legend 域方框和域標(biāo)題
- fieldset：表單元素組（一個(gè)專門的div，把表單包裹起來）
- legend：fieldset的標(biāo)題
四. 補(bǔ)充要點(diǎn)
布爾屬性（boolean attributes）
布爾屬性可以沒有屬性值蜂绎，寫上屬性名就代表使用這個(gè)屬性
常見的布爾屬性有disabled栅表、checked、readonly师枣、multiple怪瓶、autofocus、selected
如果要給布爾屬性設(shè)值践美，值就是屬性名本身
按鈕的兩種標(biāo)簽的實(shí)現(xiàn)
-
用input元素實(shí)現(xiàn)：
普通按鈕（type=button）：使用value屬性設(shè)置按鈕文字
重置按鈕（type=reset）：重置它所屬form的所有表單元素（包括input洗贰、textarea、select）
提交按鈕（type=submit）：提交它所屬form的表單數(shù)據(jù)給服務(wù)器（包括input陨倡、textarea敛滋、select）
-
button元素：使用button元素也能實(shí)現(xiàn)按鈕，功能效果跟input一樣
- button默認(rèn)的type是submit
input和label
label元素一般跟input配合使用玫膀，用來表示input的標(biāo)題
labe可以跟某個(gè)input綁定矛缨，點(diǎn)擊label就可以激活對(duì)應(yīng)的input
input的外邊框outline
通常會(huì)設(shè)置為none，然后自定義border
input :focus { 1px solid blue }
五. 表單提交：form常用屬性
- 傳統(tǒng)的表單提交
- 1 將所有的input包裹到一個(gè)form中帖旨，要上傳的input需要有name和value
- 2 form設(shè)置action
- input/button類型是submit
- action：用于提交表單數(shù)據(jù)的請(qǐng)求URL
- method：請(qǐng)求方法（get和post）箕昭，默認(rèn)是get
- target：在什么地方打開URL（參考a元素的target）
- enctype：規(guī)定了在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對(duì)數(shù)據(jù)進(jìn)行編碼，取值有3種：
- application/x-www-form-urlencoded：默認(rèn)的編碼方式
- multipart/form-data：文件上傳時(shí)必須為這個(gè)值解阅，并且method必須是post
- text/plain：普通文本傳輸
- accept-charset：規(guī)定表單提交時(shí)使用的字符編碼
get和post
提交表單數(shù)據(jù)時(shí)落竹，瀏覽器發(fā)送的是http請(qǐng)求，有2種請(qǐng)求方法可以選擇
-
get
- 在請(qǐng)求URL后面以?的形式跟上發(fā)給服務(wù)器的參數(shù)货抄，多個(gè)參數(shù)之間用&隔開述召，比如
http://ww.test.com/login?phone=123&password=234&sex=1 - 由于瀏覽器和服務(wù)器對(duì)URL長(zhǎng)度有限制，因此在URL后面附帶的參數(shù)是有限制的蟹地，通常不能超過1KB
- 在請(qǐng)求URL后面以?的形式跟上發(fā)給服務(wù)器的參數(shù)货抄，多個(gè)參數(shù)之間用&隔開述召，比如
-
post
- 發(fā)給服務(wù)器的參數(shù)全部放在請(qǐng)求體中
- 理論上积暖，post傳遞的數(shù)據(jù)量沒有限制（具體還得看服務(wù)器的處理能力）
