一、表格元素
在網頁中,我們通常用表格來顯示數據,例如下面的學生列表。
姓名年齡小紅3歲小明2歲
本節我們介紹如何在網頁中製作表格,先來看一下表格元素涉及到的標籤有哪些,示例代碼如下所示:
這裏需要注意的是,表格默認是沒有樣式的,我們添加了border屬性來設置邊框,width屬性設置表格的寬度。在實際開發中,我們用css來設置表格的樣式,而不是用表格的屬性。
關於表格我們先了解這些基本概念,後續的課程中我們會學到一些UI框架可以讓表格元素變得更加美觀。
在網頁中,我們通常用表單向服務器發送數據,例如下面一個最簡單的登錄功能。
關於與服務器交互數據的內容,我們會在第八章詳細講解,本節內容,我們只要簡單瞭解一下常用的表單元素即可。
我們先來看一個完整的表單,然後再來分別介紹表單涉及到的標籤。
input標籤通過type屬性可以分為多個類別,常用的input上面的代碼已經列出:
通過label標籤,可以指定文字相對應的表單空間,例如下面的示例,使用for屬性對應input的id,這樣當鼠標點擊label標籤的文字時,光標就會聚焦到相對的input標籤之上。
placeholder可以設置文本框默認的提示信息,示例效果和代碼如下所示:
用户名:
示例代碼如下:
select標籤定義了網頁中的下拉菜單,下拉菜單的選項用option標籤。
【融職教育】在工作中學習,在學習中工作