HTML+CSS基礎(chǔ)學(xué)習(xí)-認(rèn)識標(biāo)簽

div

<div> 可定義文檔中的分區(qū)或節(jié)(division/section)。
<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具,并且不使用任何格式與其關(guān)聯(lián)。
如果用 id 或 class 來標(biāo)記 <div>,那么該標(biāo)簽的作用會變得更加有效。

div標(biāo)簽中內(nèi)容相當(dāng)于一個(gè)獨(dú)立的邏輯部分,屬于塊級元素。

table

<table> 標(biāo)簽定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個(gè)或多個(gè) tr、th 或 td 元素組成。
tr 元素定義表格行,th 元素定義表頭,td 元素定義表格單元。
更復(fù)雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

  • <table> 相當(dāng)于整個(gè)表格的根標(biāo)簽
  • <caption> 表格標(biāo)題,必須緊跟table開始標(biāo)簽之后
  • <thead> 表頭內(nèi)容
  • <tbody> 表格主體,用于組合HTML表格的主體內(nèi)容,應(yīng)與<thead><tfoot>結(jié)合起來使用
  • <tfoot> 表注(頁腳)內(nèi)容
  • <tr> 表格的一行
  • <td> 標(biāo)準(zhǔn)單元格
  • <th> 表頭單元格

thead、tbody、tfoot標(biāo)簽使用的話必須全部使用,并且出現(xiàn)的次序是:thead、tbody、tfoot,在table內(nèi)部使用。

a

<a href="鏈接" title="標(biāo)題" target="方式" ></a>

<a>標(biāo)簽定義超鏈接,用于從一個(gè)頁面跳到另一個(gè)頁面,跳到的頁面由屬性href設(shè)定,重要屬性還有target設(shè)置何處打開鏈接文檔,如_self當(dāng)前頁面打開,_blank新頁面打開,title文本內(nèi)容,用于描述鏈接地址的內(nèi)容,鼠標(biāo)停留在鏈接文字上時(shí),會顯示該文本內(nèi)容,實(shí)際網(wǎng)頁開發(fā)中作用很大,方便搜索引擎了解所鏈接地址的內(nèi)容,語義化更友好。另外還可以鏈接Email地址,使用mailto,詳細(xì)如圖:

`<a>`標(biāo)簽mailto詳細(xì)用法<br>圖片來源:慕課網(wǎng)
`<a>`標(biāo)簽mailto詳細(xì)用法<br>圖片來源:慕課網(wǎng)

img

<img src="圖像地址" alt="替代描述文字" title="圖像描述文字" />

圖片標(biāo)簽,使用<img>向網(wǎng)頁中插入圖片。主要屬性有:

  • src 標(biāo)識圖像的位置
  • alt 圖像的描述性文本,當(dāng)圖片不可見時(shí),將顯示該文本
  • title 圖像的描述,當(dāng)鼠標(biāo)停留圖像上是顯示

form

<form action="提交的地址" method="提交方式">
...
</form>

<form>標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單,用于向服務(wù)器傳輸數(shù)據(jù)。主要屬性:

  • action 數(shù)據(jù)將被傳送的地方,一個(gè)服務(wù)端地址。
  • method 數(shù)據(jù)傳輸?shù)姆绞?,分GET和POST。

表單的所有控件必須放在<form></form>標(biāo)簽之間,常用控件有文本框、文本域、單選框、復(fù)選框等。

input

主要屬性:

  • type 指定input框類型。
    type="text" --> 文本輸入框
    type="password" --> 密碼輸入框
    type="radio" --> 單選框
    type="checkbox" --> 復(fù)選框
    type="submit" --> 提交按鈕,提交表單信息
    type="reset" --> 重置按鈕,重置表單信息到初始時(shí)的狀態(tài)

  • name 為文本框命名,備后臺程序使用。

  • value 設(shè)置默認(rèn)值

當(dāng)type為radio/checkbox時(shí),可設(shè)置checked屬性,控制是否默認(rèn)選中。同一組單選按鈕,name取值一定要一致。

textarea

文本域,多行文本輸入。語法:

<textarea name="名稱" row="行數(shù)" cols="列數(shù)">文本...</textarea>

select

<select>
    <option value="提交值">選項(xiàng)</option>
    <option value="提交值2" selected="selected">選項(xiàng)2</option>
    ...
</select>

下拉列表選擇框,selected="selected"設(shè)置默認(rèn)選中。在select標(biāo)簽中設(shè)置multiple="multiple"屬性,可實(shí)現(xiàn)多選功能,但基本上沒人使用。

label

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記).
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過,它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本,就會觸發(fā)此控件。就是說,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器就會自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。

其他

  • <p> 文章的段落,一個(gè)p標(biāo)簽就是一個(gè)段落。
  • <hx> 文章的標(biāo)題,h1~6六個(gè),分別為一到六級標(biāo)題,并且重要性遞減。
  • <em> 表示強(qiáng)調(diào)語氣,瀏覽器中默認(rèn)斜體樣式。
  • <strong> 表示強(qiáng)調(diào)語氣,比em更強(qiáng)烈,瀏覽器默認(rèn)粗體樣式顯示。
  • <span> 沒有語義
  • <q> 短文本引用
  • <blockquote> 長文本引用
  • <br> 換行
  • <hr> 用于分隔的水平橫線
  • <address> 地址信息
  • <code> 行級代碼
  • <pre> 段級代碼
  • <ul>/<li> 無序列表
  • <ol>/<li> 有序列表
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,530評論 1 41
  • img標(biāo)簽: img標(biāo)簽中的img其實(shí)是英文image的縮寫,所以img標(biāo)簽的作用, 就是告訴瀏覽器我們需要顯示一...
    佩佩216閱讀 1,701評論 0 2
  • HTML基礎(chǔ) 本文包括 HTML基本知識與結(jié)構(gòu) HTML常見標(biāo)簽 標(biāo)簽寫法與嵌套的討論 HTML、CSS、java...
    廖少少閱讀 2,211評論 2 21
  • HTML5 標(biāo)簽comment 注釋標(biāo)簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,241評論 1 25
  • 1、HTML介紹 1 2、Html和CSS的關(guān)系 HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶...
    夏沫xx閱讀 1,687評論 0 8

友情鏈接更多精彩內(nèi)容