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

時間 2019-12-06

標籤 html 列表表單語義欄目 HTML 简体版

原文原文鏈接

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

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>html4-001</title>
</head>
  <body>
    <ol class='order'>
      <li>有序列表0001</li>
      <li>有序列表002
        <ul class='unordered'>
          <li>嵌套無序列表001</li>
          <li>嵌套無序列表002</li>
        </ul>
      </li>
      <li>有序列表0003</li>
      <li>有序列表004
        <dl>
          <dt>
            自定義列表001<dd>自定義列表項目描述</dd>
          </dt>
        </dl>
      </li>
    </ol>
  </body>
</html>

去除列表前面默認樣式
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標籤中。app

經常使用的input 標籤

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

<form action="">
      <input type="text" name="username"> 單行文本區 <br />
      <input type="password" name='pwd'>密碼區  <br />
      <input type="radio" name="sex" value="male"> 男 <br />
      <input type="radio" name="sex" value="female"> 女 <br />
      <input type="checkbox" name="lov[]"> 汽車 <br />
      <input type="checkbox" name="lov[]"> 遊戲 <br />
      <input type="checkbox" name="lov[]"> 旅遊 <br />
      <textarea>請輸入文本</textarea> <br />
      <select multiple="multiple">
      <option value="apple">蘋果</option>
      <option value="banana">香蕉</option>
      <option value="apple">蘋果</option>
      <option value="banana">香蕉</option>
      </select> <br />
      <input type="submit" name="submit"> 提交 <br />
      <input type="reset" name="reset"> 重置 <br />
      <input type="hidden" name="hidden"><br />
    </form>

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

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

若是想在表單以外調用服務器端的應用程序，並且包括向其傳遞參數的過程，就要採用 GET 方法，由於該方法容許把表單這樣的參數包括進來做爲URL的一部分。而另外一方面，使用POST樣式的應用程序卻但願在 URL 後還能有一個來自瀏覽器額外的傳輸過程，其中傳輸的內容不能做爲傳統 <a> 標籤的內容.佈局

在input標籤中的name屬性

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

<input type="checkbox" name="love[ ]" value="bike" checked/>自行車
<input type="checkbox" name="love[ ]" value="car" />小車

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

input標籤中radio分組

單選按鈕radio元素，當radio元素的name值同樣時，這些input標籤歸爲一組。即同一組的單選按鈕，name 取值必定要一致，好比下面例子輸入性別的時候，name屬性爲同一個名稱「sex」，這樣同一組的單選按鈕才能夠起到單選的做用。若是name不一致，那麼兩個選項就都能選，這樣就失去了單選按鈕的意義。

<input type="radio" name="sex" value="男">男</input>；
<input type="radio" name="sex" value="女">女</input>；

input標籤中的placeholder 屬性

在輸入框的提示信息
<input type="text" name="username" placeholder="默認信息"> 單行文本區

input標籤中的type=hidden隱藏域的做用

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