HTML基礎

一、列表

1.創建一個無序列表
無序列表以<ul>開始，中間包含一個或多個<li>元素，最后以</ul>結尾。

<ul><li>牛奶</li><li>奶酪</li> </ul>

2.創建一個有序列表
有序列表以<ol>開始，中間包含一個或多個<li>元素，最后以</ol>結尾。

<ol><li>加菲貓</li><li>哆啦A夢</li> </ol>

二、form表單

1.input輸入框

<input type="text">

注意：input輸入框是沒有結束標記的。
2.Placeholder占位符
Placeholder占位符是用戶在input輸入框中輸入任何東西前的預定義文本。（沒輸入之前的默認文本）

<input type="text" placeholder="this is placeholder text">

3.創建一個表單
通過給form表單添加一個action屬性，你可以使用純 HTML 來構建向服務器提交數據的 Web 表單。

<form action="/url-where-you-want-to-submit-form-data"></form>

4.給表單添加提交按鈕
添加一個submit提交按鈕，當點擊提交按鈕時，表單中的數據將會被發送到action屬性指定的地址上。

<button type="submit">this button submits the form</button>

5.給表單添加一個必填字段
如果你想把文本輸入框設置為必填項，在input元素中加上required屬性就可以了。

<input type="text" required>

確保input元素中有required屬性，否則無法提交表單。
6.創建一組單選按鈕
單選按鈕只是input輸入框的一種類型。
每一個單選按鈕都應該嵌套在它自己的label元素中。
所有關聯的單選按鈕應該擁有相同的name屬性。
最佳實踐是在label元素上設置for屬性，讓其值與單選按鈕的id屬性值相等，這樣就在label元素和它的子元素單選按鈕之間創建了一種鏈接關系。

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor">Indoor </label> <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor">Outdoor </label>

7.創建一組復選框
復選框是input輸入框的另一種類型。
每一個復選框都應該嵌套在它自己的label元素中。
所有關聯的復選框應該擁有相同的name屬性。
最佳實踐是在label元素上設置for屬性，讓其值與復選框的id屬性值相等，這樣就在label元素和它的子元素復選框之間創建了一種鏈接關系。

<label for="1"><input id="1" type="checkbox" name="check">足球 </label> <label for="2"><input id="2" type="checkbox" name="check">籃球 </label> <label for="3"><input id="3" type="checkbox" name="check">網球 </label>

8.給單選按鈕和復選框添加默認選中項
通過給input元素添加checked屬性，可以設置某個單選按鈕或多選按鈕被默認選中。

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" checked>Indoor </label> //單選 <label for="1"><input id="1" type="checkbox" name="check" checked>足球 </label> //復選

你堅持看到了這兒，謝謝你的閱讀！

總結

以上是生活随笔為你收集整理的HTML基础_Day02的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。