HTML 3-列表、表單、語義化

gaara 發(fā)布于2019-08-29 15:28 / 1008人閱讀

摘要：有序列表無序列表自定義列表在語義上的區(qū)別有序列表列表有順序編號默認列表前加，，，編號，適用于有邏輯順序的排列項目，而且次序不能亂。另外，在類型中，一致時代表選項為一組。提交是表單的提交按鈕，將表單中的數(shù)據(jù)發(fā)送給后臺服務(wù)器

有序列表、無序列表、自定義列表在語義上的區(qū)別

1.有序列表ol>li；列表有順序編號（默認列表前加1.，2.，3.，...編號），適用于有邏輯順序的排列項目，而且次序不能亂。
2.無序列表ul>li；列表無順序（默認列表前加"."），適用于并列顯示的項目，項目無先后順序
3.自定義列表dl>dt表頭>dd表內(nèi)容,dt為項目名稱，dd項目名稱的描述，一個項目名稱可以有多個項目描述。自定義列表更簡單，精準
如何嵌套：把一個元素放在另外一個元素中稱為"嵌套"，在列表中，可以把一個ol或者ul作為某個li的內(nèi)容，這樣就在列表中嵌套了另一個列表。
示例：




  
  html4-001

  
    
      有序列表0001
      有序列表002
        
          嵌套無序列表001
          嵌套無序列表002
        
      
      有序列表0003
      有序列表004
        
          
            自定義列表001
自定義列表項目描述

去除列表前面默認樣式
ul{list-style:none;}

CSS 標簽中 class 和 id 的區(qū)別

id在頁面上是唯一標識，class在頁面上標識某一類型的樣式，具有普遍性，可以重復(fù)使用。某元素的class名可以寫成class="intro other"，即可以有多個class名，代表疊加兩個類名稱對應(yīng)的樣式。id名不能這樣寫。ID名常用在頁面布局（標記大框架），class一般在局部頁面布局中使用，用于樣式定義，因為class可以重復(fù)，所以為多個元素賦予同一class簡化代碼量。

塊級元素、行內(nèi)元素的區(qū)別

塊級元素：獨占一行可設(shè)置寬,高,margin,padding。塊級元素是其他元素的容器元素，可以容納其他塊元素或者行內(nèi)元素;行內(nèi)元素只能夠容納文本內(nèi)容或者其他的行內(nèi)元素。常見塊級元素：div,p,h1..h6,table,tr,ul,li,dl,dt,form
行內(nèi)元素：占用空間是他自身的寬度。對于行內(nèi)元素，手動設(shè)置寬高是無效的，它本身的高度是由自身決定的。行內(nèi)元素可以通過line-height來設(shè)置高度。常見行內(nèi)元素：a,span,img,input,button,em,textarea
塊級元素中寬高和內(nèi)外邊距都可以設(shè)置的；行內(nèi)元素設(shè)置寬高是無效的，它本身內(nèi)容的寬度就決定了它的寬高，不能手動設(shè)置，行內(nèi)元素的左右margin和padding是有效的，上下的margin和padding是不占據(jù)空間的，但是加邊框后能看見其范圍。注意上下方向設(shè)置margin，padding元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。a元素為行內(nèi)元素，改變上下padding時元素范圍增大（邊框可看出），但對周圍元素無影響。

display: block、display: inline、display: inline-block的區(qū)別

display:none;將元素設(shè)置成不顯示，脫離文檔流，但在dom樹中還存在
display:table-cell;將元素設(shè)置成表格單元格，可通過vertical-align=middle設(shè)置垂直居中（vertical-align僅對行內(nèi)元素和表格單元格元素生效）
display:block; 將元素設(shè)置成塊級元素
display:in-line;將元素設(shè)置成成行內(nèi)元素
display:inline-block;將元素設(shè)置成行內(nèi)塊元素，既像行內(nèi)元素水平排列，又能像塊級元素設(shè)置寬高，設(shè)置上下左右padding，margin。inline-block:IE8以下瀏覽器不支持

HTML CSS 語義化

選擇正確合適的標簽，合理的標簽命名，使用合理的代碼結(jié)構(gòu)，語義化使頁面結(jié)構(gòu)更清晰，代碼更加便于閱讀和維護，同時便于爬蟲和瀏覽器更好的解析。標簽語義化明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網(wǎng)頁上的文章的標題就可以用標題標簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內(nèi)容的段落就得放在段落標簽中，在文章中有想強調(diào)的文本，就可以使用 em 標簽表示強調(diào)等等。書寫代碼時注意的細節(jié)：命名要有含義，單詞組用中橫線連接，大小寫規(guī)則統(tǒng)一。在網(wǎng)頁上要展示出來的頁面內(nèi)容一定要放在body標簽中。

常用的input 標簽

form表單的作用是把用戶輸入的數(shù)據(jù)提交到后臺。其name屬性為表單提交的名稱，action屬性為提交到的網(wǎng)址（如不寫默認提交到當前頁面），method屬性為提交方式get/post。
常見input標簽


       單行文本區(qū) 

      密碼區(qū)  

       男 

       女 

       汽車 

       游戲 

       旅游 

      請輸入文本 

       

       提交 

       重置

input標簽中 post 和 get 方式的區(qū)別

get（GET用于信息獲?。?把要提交的數(shù)據(jù)拼裝成url，提交的數(shù)據(jù)信息可見。get一般用于提交少量數(shù)據(jù)，瀏覽器限制最多提交1K（瀏覽器地址欄裝不下超過1K的信息?。?。get提交的數(shù)據(jù)會保存在瀏覽器歷史記錄中，不安全。
post（向服務(wù)器傳送數(shù)據(jù)，是可能修改服務(wù)器上的資源的請求）:提交的數(shù)據(jù)不是url，所以數(shù)據(jù)內(nèi)容不可見，可提交大量數(shù)據(jù)，瀏覽器無限制，文件大小受服務(wù)器限制.

如果想在表單之外調(diào)用服務(wù)器端的應(yīng)用程序，而且包括向其傳遞參數(shù)的過程，就要采用 GET 方法，因為該方法允許把表單這樣的參數(shù)包括進來作為URL的一部分。而另一方面，使用POST樣式的應(yīng)用程序卻希望在 URL 后還能有一個來自瀏覽器額外的傳輸過程，其中傳輸?shù)膬?nèi)容不能作為傳統(tǒng) 標簽的內(nèi)容.

在input標簽中的name屬性

input標簽設(shè)置了name屬性，才能在提交表單時傳遞屬性和value值。另外，input在checkbox,radio類型中，name一致時代表選項為一組。

自行車
小車

love[ ]為數(shù)組形式，當可選項太多時，用這種數(shù)組方式便于js獲取數(shù)組對應(yīng)的值

input標簽中radio分組

單選按鈕radio元素，當radio元素的name值一樣時，這些input標簽歸為一組。即同一組的單選按鈕，name 取值一定要一致，比如下面例子輸入性別的時候，name屬性為同一個名稱“sex”，這樣同一組的單選按鈕才可以起到單選的作用。如果name不一致，那么兩個選項就都能選，這樣就失去了單選按鈕的意義。

男；
女；

input標簽中的placeholder 屬性

在輸入框的提示信息
單行文本區(qū)

input標簽中的type=hidden隱藏域的作用

隱藏域（暫存數(shù)據(jù)用戶不可見，可用作后臺預(yù)埋密鑰信息以驗證用戶提交數(shù)據(jù)是否為偽造，只有當服務(wù)器接收到的hidden和服務(wù)器預(yù)埋在頁面的信息一致時，才能成功提交表單數(shù)據(jù)）
示例：type="hidden"的元素用戶不可見，但提交表單時，hid的值test已提交后臺。

按鈕的常見樣式及區(qū)別

普通按鈕，需要綁定js事件后點擊后才有效

提交
應(yīng)用了自定義按鈕樣式的a鏈接，點擊后跳轉(zhuǎn)到某個頁面，讓a鏈接應(yīng)用按鈕的樣式是因為鼠標懸停a鏈接時有手勢，讓用戶覺得是可點的。

是form表單的提交按鈕，將form表單中的數(shù)據(jù)發(fā)送給后臺服務(wù)器
*

云服務(wù)器 GPU云服務(wù)器 html 標簽語義化語義化 html表單列表標簽語義化

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113338.html

發(fā)表評論

登陸后可評論

0條評論

gaara

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow升維

閱讀 2988·2023-04-26 02:25
tensorflow降版本

閱讀 2261·2023-04-25 18:05
AlphaVPS：大硬盤VPS年付15歐元起(或€2/月),AMD EYPC+NV

閱讀 653·2021-09-30 09:57
RackNerd：美國vps,洛杉磯紐約機房,4核/8GB/100G SSD/5TB流量,$89/年

閱讀 2948·2021-09-27 14:10
轉(zhuǎn)：CSS :placeholder-shown偽類實現(xiàn)Material Design占位符交互效果

閱讀 1660·2019-08-30 15:44
HTML 3-列表、表單、語義化

閱讀 1009·2019-08-29 15:28
前端編年史（持續(xù)更新中）

閱讀 2533·2019-08-29 14:10
成長小筆記

閱讀 2267·2019-08-29 13:30

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

HTML 3-列表、表單、語義化

相關(guān)文章