行內(nèi)元素與塊級元素,表格與表單

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 - 非排序列表
  1. 塊級元素與行內(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;
  1. 學(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)記表格的頁腳

  1. 表單的類型有:
  • 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)容的功能。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容