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

gaara 發布于2019-08-29 15:28 / 1002人閱讀

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

有序列表、無序列表、自定義列表在語義上的區別

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




  
  html4-001

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

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

CSS 標簽中 class 和 id 的區別

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

塊級元素、行內元素的區別

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

display: block、display: inline、display: inline-block的區別

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

HTML CSS 語義化

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

常用的input 標簽

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

input標簽中 post 和 get 方式的區別

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

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

在input標簽中的name屬性

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

自行車
小車

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

input標簽中radio分組

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

男；
女；

input標簽中的placeholder 屬性

在輸入框的提示信息
單行文本區

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

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

按鈕的常見樣式及區別

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

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

是form表單的提交按鈕，將form表單中的數據發送給后臺服務器
*

云服務器 GPU云服務器 html 標簽語義化語義化 html表單列表標簽語義化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113338.html

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

摘要：有序列表無序列表自定義列表在語義上的區別有序列表列表有順序編號默認列表前加，，，編號，適用于有邏輯順序的排列項目，而且次序不能亂。另外，在類型中，一致時代表選項為一組。提交是表單的提交按鈕，將表單中的數據發送給后臺服務器有序列表、無序列表、自定義列表在語義上的區別 1.有序列表ol>li；列表有順序編號（默認列表前加1.，2.，3.，...編號），適用于有邏輯順序的排列項目，而且次序...

Xufc 2019-08-02 10:29 評論0 收藏0
HTML基礎知識

摘要：標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有等標簽。遵循的原則是先確定語義的，再選合適的。并且依據重要性遞減。錨點定位難點通過創建錨點鏈接，用戶能夠快速定位到目標內容。 1 什么是HTML？ HTML 指的是超文本標記語言 (Hyper Text Markup Language)。不是一種編程語言，而是一種標記語言，標記語言是一套標記標簽，HTML 使用標記標簽來描述網頁...

leeon 2019-08-02 15:16 評論0 收藏0
ife 零基礎學院 day 2

摘要：的一些規則新特性應該基于以及。將支持某些特性。作用聲明幫助瀏覽器正確地顯示網頁。標簽位于文檔的頭部，不包含任何內容。標簽的屬性定義了與文檔相關聯的名稱值對。每個列表項始于標簽。第二天：給自己做一個在線簡歷吧最后的驗證，提出了幾個問題，嘗試解答一下 HTML是什么，HTML5是什么 HTML的定義摘抄自w3school的HTML 簡介 HTML 是用來描述網頁的一種語言。 HTML 指...

qpal 2019-04-23 13:46 評論0 收藏0
標簽語義化

摘要：主要總結標簽語義化方面的內容。的標簽都是有語義的。為什么要使用語義化標簽由于很強大，無論有沒有按照語義選擇標簽，都可以實現需要的設計。如何確定你的標簽是否語義良好去掉樣式，看網頁結構是否組織良好有序，是否仍然有良好的可讀性。主要總結標簽語義化方面的內容。 HTML的標簽都是有語義的。下面列出一些常見的標簽及其語義： showImg(https://segmentfault.co...

darkbaby123 2019-08-01 16:09 評論0 收藏0