web前端基礎(chǔ)知識之常用標(biāo)簽

  1. Div:塊級標(biāo)簽姨伟,獨(dú)占一行
  2. span: 行級標(biāo)簽惩琉,不獨(dú)占一行,只是可以用來標(biāo)記這段文字以用來單獨(dú)處理
  3. strong:可以加粗文字夺荒,用來加強(qiáng)語氣
  4. em:可以是文字變成斜體瞒渠,同樣是用來加強(qiáng)語氣
span、strong技扼、em的區(qū)別:strong在孝、em標(biāo)簽都表示加強(qiáng)語氣,但strong表現(xiàn)為加粗淮摔,em表示為斜體,
                    span標(biāo)簽沒有語義始赎,它的作用是為了設(shè)置單獨(dú)的樣式用的
  1. table:表格標(biāo)簽和橙,常與th、tr造垛、td標(biāo)簽嵌套使用魔招,table內(nèi)的border屬性可以使表格建立邊框
thead:用來設(shè)置表格的表頭屬性
tr:指行數(shù)
td:指列數(shù)
<table border="1">
        <th>這是表頭</th>
        <tr>
            <td>這是第一行第一列</td>
            <td>這是第一行第二列</td>
        </tr>
        <tr>
            <td>這是第二行第一列</td>
            <td>這是第二行第二列</td>
        </tr>
    </table>
在瀏覽器顯示為:
這是表頭
這是第一行第一列    這是第一行第二列
這是第二行第一列    這是第二行第二列
  1. ol、ul五辽、li:ol(order list)為有序標(biāo)簽和ul(unorder list)為無序標(biāo)簽办斑,常與li標(biāo)簽嵌套使用
<ol>
        <li>這是有序列表1</li>
        <li>這是有序列表2</li>
        <li>這是有序列表3</li>
        <li>這是有序列表4</li>
        <li>這是有序列表5</li>
    </ol>
    <ul>
        <li>這是無序列表1</li>
        <li>這是無序列表2</li>
        <li>這是無序列表3</li>
        <li>這是無序列表4</li>
        <li>這是無序列表5</li>
    </ul>
在瀏覽器顯示為:
![***show effects***](http://upload-images.jianshu.io/upload_images/1183639-dce4f2089df074ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

7. dl:自定義列表,常與dt杆逗、dd標(biāo)簽嵌套使用

<dl>
<dt>名詞</dt>
<dd>名詞解釋1</dd>
<dd>名詞解釋2</dd>
<dd>名詞解釋3</dd>
</dl>

8. from:表單標(biāo)簽乡翅,常用與注冊等需要填寫多項信息的場景中,form標(biāo)簽內(nèi)可以使用input罪郊、select蠕蚜、textarea、label悔橄、fieldset等標(biāo)簽

<fieldset>

<legend>How Are You</legend>
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>

<p>gender: <label><input type="radio" name="gender">男</label>
<input type="radio" name="gender" id="123">
<label for="123">女</label>
</p>
<p>favored: <label><input type="checkbox">ride</label>
<input type="checkbox" id="456">
<label for="456">basktball</label>
<label><input type="checkbox">football</label>
<label><input type="checkbox">music</label>
</p>
<p>Birthday:

<select name="" id="">
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
<option value="">2010</option>
<option value="">2011</option>
<option value="">2012</option>
<option value="">2013</option>
<option value="">2014</option>
<option value="">2015</option>
</select>年
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option selected="" value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>月
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option selected="" value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>日
</p>

<p><textarea name="" id="" cols="30" rows="10">remark</textarea>
</p>

<p><input type="reset" value="reset"></p>

<input type="submit" value="Submit" />
</fieldset>
</form>

<p>請單擊確認(rèn)按鈕靶累,會跳轉(zhuǎn)到Y(jié)AN7的簡書個人頁面。</p>

![***show effects***](http://upload-images.jianshu.io/upload_images/1183639-1d3754b61e8e2c95.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末癣疟,一起剝皮案震驚了整個濱河市挣柬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌睛挚,老刑警劉巖邪蛔,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異竞川,居然都是意外死亡店溢,警方通過查閱死者的電腦和手機(jī)叁熔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來床牧,“玉大人荣回,你說我怎么就攤上這事「昕龋” “怎么了心软?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長著蛙。 經(jīng)常有香客問我删铃,道長,這世上最難降的妖魔是什么踏堡? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任猎唁,我火速辦了婚禮,結(jié)果婚禮上顷蟆,老公的妹妹穿的比我還像新娘诫隅。我一直安慰自己,他們只是感情好帐偎,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布逐纬。 她就那樣靜靜地躺著,像睡著了一般削樊。 火紅的嫁衣襯著肌膚如雪豁生。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天漫贞,我揣著相機(jī)與錄音甸箱,去河邊找鬼。 笑死迅脐,一個胖子當(dāng)著我的面吹牛摇肌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仪际,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼围小,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了树碱?” 一聲冷哼從身側(cè)響起肯适,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎成榜,沒想到半個月后框舔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年刘绣,在試婚紗的時候發(fā)現(xiàn)自己被綠了樱溉。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡纬凤,死狀恐怖福贞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情停士,我是刑警寧澤挖帘,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站恋技,受9級特大地震影響拇舀,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蜻底,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一骄崩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧薄辅,春花似錦刁赖、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鸡典。三九已至源请,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間彻况,已是汗流浹背谁尸。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留纽甘,地道東北人良蛮。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像悍赢,于是被迫代替她去往敵國和親决瞳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • HTML5 標(biāo)簽comment 注釋標(biāo)簽用于在源文檔中插入注釋左权。注釋內(nèi)容不會被瀏覽器顯示皮胡。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,067評論 1 25
  • 一、h1到h6標(biāo)題標(biāo)簽 H1到h6標(biāo)簽赏迟,相對于當(dāng)前文檔的重要性依次降低屡贺。注意h1標(biāo)簽在整個頁面中最多一次(當(dāng)然可以...
    南南121閱讀 472評論 0 0
  • 列表標(biāo)簽: 無序列表:ul 語法:(下圖) 注: … 標(biāo)記表示這一個無序列表的開始與結(jié)束,而 則表示這是一個列表項...
    顯然2017閱讀 716評論 1 2
  • 一,有序列表甩栈、無序列表泻仙、自定義列表如何使用?寫個簡單的例子量没。三者在語義上有什么區(qū)別玉转?在哪些情況下使用哪種(重要)?...
    kingBirds閱讀 827評論 0 0
  • HTML標(biāo)簽解釋大全 一允蜈、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,263評論 1 41