HTML基礎介紹2
上一篇部落格中小編介紹到了標籤以及一些原理,此篇是對標籤的補充同樣是只有HTML。
重點概念:用什麼標籤不是看是什麼格式而是看語義。
上一篇到了超連結以及錨點現在繼續介紹:
一、HTML表格
1.無序列表(同樣也是組標籤)
<ul></ul>包裹,每一項為<li><li>。
ul表格預設小圓點開頭,當然也可以用CSS操作當然這裡不做介紹,重點是<li>標籤是一個容器級標籤可以放入很多標籤甚至是在一個<li>。(非常常用的一個表格)
2.有序列表(不常用)
<ol>包裹,每一項同樣是<li>,與無序列表屬性一樣只是語義不同。
3.定義列表
由三部分組成:
·定義列表由<dl>包裹。
·<dt>列表中的元素。
·<dd>解釋最近的<dt>項,一個<dt>可以有多個<dd>。
二、兩種“盒子”
1.div標籤(容器級標籤)
該標籤主要將劃定內容分割。
2.span標籤(純文字標籤)
可以單獨包裹某一個部分
·這樣講這兩個盒子可能比較抽象,打個簡單的比方來說假如我設定了兩個欄目想將他們分割開來做樣式這時候就將HTML中這兩部分分別用div標籤包裹。對於span在舉一個例項,123456,這是一串數字這時候想講56兩個數字給一個底色就可以用span包裹然後通過CSS找到這邊內容進行底色修改,當然具體是一個怎樣的操作之後會說到,現在主要是理解流程。通俗來講div包裹大元素,span包裹小元素。
div中有一個class屬性CSS可以通過div屬性名對不同的div進行樣式修改——div負責分塊,CSS負責樣式。
三、表單
所有的表單內容都要寫到<form></form>標籤之中,該標籤中有兩個屬性,在後面在往前提,action和method。
1.文字框的構建:<input type="text"/>,若在type後在新增一個value屬性的話其內容就是文字框中預設文字,在文字框顯示時框內就有。
2.密碼框:<input type="password"/>,同樣也有value屬性。
3.單選框:<input type="radio"name="相同選項要在name屬性中輸入一樣的值這樣才會互斥"/>選項名稱
例:<input type="radio"name="sex"/>男
<input type="radio"name="sex"/>女 //這樣就實現了一個男女單選。
預設被選擇,就應該新增元素checked="checked"。
4.複選框:同上格式type元素改為"checkbox"。
例:
<p>
請選擇你的愛好:
<input type="checkbox" name="aihao"/> 睡覺
<input type="checkbox" name="aihao"/> 吃飯
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 籃球
</p>
當然我們為了程式碼的規範還是加上了name屬性,可無。
5.下拉列表
<select>包裹的組標籤
每一項用<option>包裹
6.大框文字框
<textarea cols="30" rows="10"></textarea>
這樣的一個格式,cols代表列,row代表行,兩項屬性控制文字框大小。
7.三種按鈕
7.1普通按鈕
<input type="button" value="我是一個普通按鈕" />
value屬性就是按鈕上的文字。
7.2提交按鈕
<input type="submit" />
不需要寫value
提交位置是form中action屬性所對應的位置(後端處理)
這邊附上一個最常見的
那麼這裡在提及一下form中另外一個屬性method,表示用什麼HTTP方法提交(現在無需理解,當然是因為小編也不懂啦所以不說)後面會學到的。
7.3重置按鈕
<input type="reset" />
點選會重置所輸入內容。
小編在努力學習web中,之後的學習總結也會在部落格上一 一陳述希望對大家有所幫助。