CSS列表及表單

有序列表、無序列表、自定義列表的使用及語義上的區別

  • 三種列表按其字面意思理解使用即可;當制作的列表需要體現順序時就使用有序列表,反之就可使用無序列表,針對較復雜或嵌套較多的則可以使用自定義列表結構更清晰明了。三者都可以嵌套,例子見下圖:
    0_1459696621997_表格.png

列表前面的點或者數字的去除

  • 對列表元素li使用樣式{list-style:none}去除

class 和 id 的區別

  • 不同元素可標記為同一個類,但id是唯一的;id更有針對性,優先級比class高。

  • 開發者認為特殊的元素或其他獨特功能的元素可使用id來標記;對于一些具有相同屬性或共同特性的元素可使用class類標記。

塊級元素、行內元素簡介

  • 塊級元素,即單獨占據頁面的一行,瀏覽器會另起一行來放置一個塊級元素,它可以容納其他塊級元素和行內元素,可以設置自身寬高,內外邊距的設置有效,<p><div><h1><table><form>都是常見的塊級元素。
  • 行內元素,即只占據它本身內容大小的寬度,高度line-height控制(不能設置自身寬度和高度,設置內外邊距后僅水平方向有效),可以和其他行內元素放在同一行內,一般它的內部只能放置其他行內元素,常見的行內元素有<a><img><q><input>

display: block、display: inline、display: inline-block的作用

  • display: block讓行內元素轉變為塊級元素,具有塊級元素特性;設置寬高、內外邊距等。
  • display: inline可以讓快級元轉變為行內元素,具有行內元素的特性;讓其可以與行內元素放在一起。
  • display: inline-block可以讓元素同時具有行內和塊級元素的特性;可以與其他行內元素放在同一行,又是呈塊狀顯示,進行塊級元素的設置。

HTML CSS 語義化的理解

  • HTML和CSS是指頁面的結構和樣式,同樣的頁面其背后的代碼可能并不相同,同一個效果我有多種實現方法;語義化是指按照大眾通俗的做法來劃分結構,命名類或id名稱,想呈現什么效果就使用對應的元素,同樣的當看到對應元素就可以知道這邊的代碼是屬于哪個結構要呈現什么效果;語義化會方便頁面的團隊開發和合作,對搜素引擎和屏幕閱讀器使用者也更加友好。

form表單的作用及常用input 標簽

  • form表單是用于頁面內容的輸入,與后臺服務器交互傳輸數據的。常用的input標簽有radio、checkbox、text、password、submit和reset,作用分別是單選框確定相關信息、多選框選擇相關信息、文本一般用于輸入用戶名等少量文本、密碼框用于輸入密碼、生成提交按鈕點擊后往后臺傳輸form信息、生成重置按鈕重置輸入的信息。

post 和 get 方式的區別

  • post一般用于數據量較大的數據傳輸,數據大小看服務器承受能力,是秘密傳輸,安全。
  • get一般用于數據量較小的數據傳輸,數據大小受瀏覽器輸入框限制,在URL中可以看到提交內容,不安全。

在input中name的作用

  • 告訴后臺服務器,我給你的是什么數據。

三種提交按鈕的區別<button>提交</button><a class="btn" href="#">提交</a><input type="submit" value="提交">

  • <button>提交</button>從顯示效果上看只是一個寫著提交的按鈕,沒有其他效果。
  • <a class="btn" href="#">提交</a>則是一個a鏈接,提交是它的鏈接點,點擊后會留在原頁面,其類是btn。
  • <input type="submit" value="提交">是一個form表單的提交按鈕,點擊它可以將所填的表單信息傳輸給后臺。

表單中radio 如何 分組

  • 具有相同name的radio就分為同一組

表單中placeholder 屬性及作用

  • 會在輸入框內呈現灰色字,來提醒用戶輸入正確的內容。

type=hidden隱藏域的作用

  • type=hidden此種類型不會在頁面上呈現,可以用來暫存接口的信息或地址,比如標記id快速定位然后獲取存在這的接口地址;也可以用來做安全校驗,比如說設置name="secret" value=“123”,只有當你登錄后才能打開這個頁面,在這個頁面進行提交時才會附帶的傳輸這個隱藏的name和value,服務器可以以此來判斷是否是本人操作從而確定是否接受請求。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,627評論 32 459
  • 一,有序列表、無序列表、自定義列表如何使用?寫個簡單的例子。三者在語義上有什么區別?在哪些情況下使用哪種(重要)?...
    kingBirds閱讀 849評論 0 0
  • 不是不想脫單,每每光棍節總是光榮加入行列,有時候還真想過個情人節七夕節來羨煞旁人。 ...
    瀟瀟吶閱讀 284評論 0 0
  • 懂點交互的人都知道,交互設計的設計對象是行為,不再是物。在需求正確的情況下,目標用戶依然覺得你的產品難用,多半是用...
    鄒志楠閱讀 3,667評論 3 50