1.行內(nèi)元素(內(nèi)聯(lián)元素)具有以下特點(diǎn):
- 和其他元素都在一行上,直到一行排不下才會(huì)換行,寬度隨元素內(nèi)容變化;
- 高,行高及外邊距和內(nèi)邊距不可改變;(設(shè)置寬度width無效,高度height無效,但可以設(shè)置line-height,設(shè)置margin只有左右有效,上下無效,設(shè)置padding左右有效,上下無效)
- 寬度就是他的文字或圖片的寬度,不可改變;
- 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素;
- 行內(nèi)元素大多為描述性標(biāo)記;
行內(nèi)元素有:
- a - 錨點(diǎn)
- abbr - 縮寫
- acronym - 首字
- b - 粗體 ( 不推薦 )
- bdo - bidi override
- big - 大字體
- br - 換行
- cite - 引用
- code - 計(jì)算機(jī)代碼 ( 在引用源碼的時(shí)候需要 )
- dfn - 定義字段
- em - 強(qiáng)調(diào)
- font - 字體設(shè)定 ( 不推薦 )
- i - 斜體
- img - 圖片
- input - 輸入框
- kbd - 定義鍵盤文本
- label - 表格標(biāo)簽
- q - 短引用
- s - 中劃線 ( 不推薦 )
- samp - 定義范例計(jì)算機(jī)代碼
- select - 項(xiàng)目選擇
- small - 小字體文本
- span - 常用內(nèi)聯(lián)容器,定義文本內(nèi)區(qū)塊
- strike - 中劃線
- strong - 粗體強(qiáng)調(diào)
- sub - 下標(biāo)
- sup - 上標(biāo)
- textarea - 多行文本輸入框
- tt - 電傳文本
- u - 下劃線
- var - 定義變量
2.塊級元素具有以下特點(diǎn):
- 獨(dú)占一行,所以總是在新行上開始;
- 高度,行高及內(nèi)外邊距都可以改變;(即使設(shè)置了寬度width仍然是獨(dú)占一行)
- 除非設(shè)定一個(gè)寬度,否則寬度缺省是它的容器的100%;
- 它可以容納內(nèi)聯(lián)元素和其他塊元素;
- 塊級元素大多為結(jié)構(gòu)性標(biāo)記;
塊級元素有:
- address - 地址
- blockquote - 塊引用
- center - 舉中對齊塊
- dir - 目錄列表
- div - 常用塊級容易,也是 css layout 的主要標(biāo)簽
- dl - 定義列表
- fieldset - form控制組
- form - 交互表單
- h1-大標(biāo)題
- h4 - 副標(biāo)題
- h3 - 3級標(biāo)題
- h4 - 4級標(biāo)題
- h5 - 5級標(biāo)題
- h6 - 6級標(biāo)題
- hr - 水平分隔線
- isindex - input prompt
- menu - 菜單列表
- noframes - frames可選內(nèi)容,(對于不支持 frame 的瀏覽器顯示此區(qū)塊內(nèi)容
- noscript - )可選腳本內(nèi)容(對于不支持 script 的瀏覽器顯示此內(nèi)容)
- ol - 排序表單
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 非排序列表
- 塊級元素與行內(nèi)元素的區(qū)別
- 塊級元素會(huì)獨(dú)占一行,行內(nèi)元素不會(huì),相鄰行內(nèi)元素會(huì)排在同一行,排不下后換行;
- 塊級元素可以包含行內(nèi)元素和塊級元素;行內(nèi)元素不能包含塊級元素;
- 行內(nèi)元素設(shè)置width,height,margin-top,margin-bottom,padding-up,padding-bottom無效。
轉(zhuǎn)化為行內(nèi)元素:
display:inline;
轉(zhuǎn)化為塊級元素:
display:block;
轉(zhuǎn)化為行內(nèi)塊元素:
display:inline-block;
- 學(xué)習(xí)目標(biāo)中,常見的:鏈接對應(yīng)--->a,文本對應(yīng)--->p,b,i,em,center等;標(biāo)題對應(yīng) ---> h1~h6;段落對應(yīng)--->p;圖片對應(yīng)--->img等;可嵌入元素對應(yīng)--->img,video,audio等;列表元素對應(yīng)--->ul,ol,li;表格元素對應(yīng)--->table,th,tr,td等;表單元素對應(yīng)--->form,action,method,name,target,novalidate等。
表格有哪些重要屬性,分別的值和作用是什么?
5.表格具有以下屬性:
HTML table屬性<table>
table元素可以有tr,th,td,thead,tbody,tfoot,colgroup元素
table標(biāo)簽的基本屬性如下:
border:可以的取值為1和0,1代表有邊框,0代表沒有邊框。
bordercolor:可以設(shè)置邊框的顏色,值為顏色值。
bgcolor:設(shè)置表格的背景顏色
background:設(shè)置背景圖片tr屬性<tr>
用來定義表格的一行。由于HTML表格是面向行的,所以必須分別表示每一行
tr元素可以在table,thead,tbody和tfoot元素內(nèi)使用
tr元素內(nèi)可以包含一個(gè)或者多個(gè)td或th元素
它的align,bgcolor等屬性已過時(shí),如果要設(shè)置屬性,請使用CSS設(shè)置td屬性<td>
用來定義表格單元格,可以同colspan,rowspan,headers局部屬性使用
(1)colspan: 列跨度,該屬性規(guī)定了單元格可橫跨的列數(shù),該屬性的值必須是整數(shù)
(2)rowspan:行跨度,該屬性規(guī)定了單元格可橫跨的行數(shù),該屬性的值必須是整數(shù)
(3)headers:該屬性的值是一個(gè)或多個(gè)單元的ID屬性值,將單元格與列標(biāo)題相關(guān)聯(lián),可用于使用屏幕閱讀器
每個(gè)表格必須包含以上三個(gè)元素th屬性<th>
用來定義標(biāo)題單元格,使我們有效區(qū)分?jǐn)?shù)據(jù)及其描述
它同 <td> 元素具有相同的局部屬性,兩者有如下區(qū)別:
<th>是表示頭標(biāo)記,通常位于首行或者首列。而且<th>中的文字默認(rèn)會(huì)被加粗,而<td>是不會(huì)的
<td>是數(shù)據(jù)標(biāo)記,表示單元格的具體的數(shù)據(jù)
valign屬性可以設(shè)置th和td,可以取值Top或者Bottom。
callpadding:內(nèi)容與單元格邊框的間距
cellspacing:防止文本超出邊框
如果要使單元格實(shí)現(xiàn)跨行或者跨列功能,使用屬性colspan和rowspan.thead屬性<thead>
用來定義表格的頁眉,表頭的包裝器??梢远x一行或多行,這些行是 table 元素的列標(biāo)簽
沒有thead元素,所有的tr被假定為屬于表的主體tbody屬性<tbody>
用來定義表格的主體tfoot屬性<tfoot>
用來定義標(biāo)記表格的頁腳
- 表單的類型有:
type=text
輸入類型是text,這是我們見的最多也是使用最多的,比如登陸輸入用戶名,注冊輸入電話號(hào)碼,電子郵件,住址等等。當(dāng)然這也是Input的默認(rèn)類型。
參數(shù)name:同樣是表示的該文本輸入框名稱。
參數(shù)size:輸入框的長度大小。
參數(shù)maxlength:輸入框中允許輸入字符的最大數(shù)。
參數(shù)value:輸入框中的默認(rèn)值。
特殊參數(shù)readonly:表示該框中只能顯示,不能添加修改。type=password
輸入類型是password,在此輸入框輸入信息時(shí)顯示為保密字符。參數(shù)和“type=text”相類似。type=file
提供了一個(gè)文件目錄輸入的平臺(tái),選擇上傳文件,參數(shù)有name,size。type=hidden
通常稱為隱藏域。如果一個(gè)非常重要的信息需要被提交到下一頁,但又不能或者無法明示的時(shí)候。在頁面中看不到hidden在哪里。最有用的是hidden的值。type=button
讓按鈕跳轉(zhuǎn)到某個(gè)頁面上還需要加入寫JavaScript代碼。type=checkbox
多選框,參數(shù)有name,value及特別參數(shù)checked(表示默認(rèn)選擇) 提交到處理頁的也就是value,name值可以不一樣。type=radio
單選框,出現(xiàn)在多選一的頁面設(shè)定中。參數(shù)同樣有name,value及特別參數(shù)checked。不同于checkbox的是,name值一定要相同,否則就不能多選一。提交到處理頁的也是value值。type=image
可以作為提交式圖片按鈕,通常采用這種按鈕效果更美觀。type=submit and type=reset
分別是“提交”和“重置”兩按鈕,submit主要功能是將Form中所有內(nèi)容進(jìn)行提交action頁處理,reset是快速清空所有填寫內(nèi)容的功能。