HTML標(biāo)簽學(xué)習(xí)

HTML基礎(chǔ)學(xué)習(xí)(新收獲)

通過(guò)再一次學(xué)習(xí)HTML的知識(shí)曲饱,有了更多的收獲即彪,發(fā)現(xiàn)了更多之前沒(méi)有注意到的知識(shí)點(diǎn)街州,在學(xué)習(xí)HTML5中通過(guò)使用標(biāo)簽將代碼封裝起來(lái)使結(jié)構(gòu)更加清晰

  • HTML Section學(xué)習(xí)

- <hgroup></hgroup> 封裝h標(biāo)簽
? - <header></header> 包含任何內(nèi)容晴音,通常修飾文檔或文章的標(biāo)題
? - <footer> 標(biāo)簽通常包含文檔的摘要信息部分或者作者,版權(quán)信息
? - <section></section> 適用于對(duì)文檔進(jìn)行分塊,將文檔劃分為章節(jié)饲常,或者對(duì)文章分內(nèi)容塊(包含h1~h6中的標(biāo)題元素蹲堂,一般不用包含header和footer標(biāo)簽)
? - <article></article> 特殊的section標(biāo)簽,將文檔或文章中的內(nèi)容劃分為相對(duì)獨(dú)立的模塊(一般包含header標(biāo)簽和footer標(biāo)簽)
? - <nav></nav> 代表一個(gè)部分包含鏈接
? - <detail></detail> 描述某個(gè)文檔或者部分模塊的細(xì)節(jié),配合使用<summary> 標(biāo)簽可為details 定義標(biāo)題贝淤,點(diǎn)擊標(biāo)題則顯示detail內(nèi)容
? - <aside></aside> 設(shè)置將與文本相關(guān)的顯示在內(nèi)容外
? - <figure> 表示網(wǎng)頁(yè)上一塊獨(dú)立的內(nèi)容柒竞,其中可用figuretion修飾標(biāo)題,且只能包含一個(gè)

  • TEXT 相關(guān)標(biāo)簽

- <blockquote></blockquote> 縮進(jìn)
? - <pre></pre> 按照pre中顯示內(nèi)容播聪,保留空格及換行
? - <abbr></abbr> 包含一段文本的縮寫,使用title屬性擴(kuò)展縮寫的文本
? - <bdi></bdi> 把包含的內(nèi)容從周圍的文檔中隔離出來(lái)
? - <bdo></bdo> 覆蓋當(dāng)前文本的方向 以相反的方向展示文本
? - ````<cite></cite>引用的標(biāo)題朽基,像書、文章或電影离陶,并以斜體的形式展現(xiàn) ? -<code></code>定義計(jì)算機(jī)代碼 ? - <del></del> 將其包含的內(nèi)容標(biāo)記為刪除稼虎,使用cite屬性指向另一個(gè)文檔解釋刪除原因,datetime屬性顯示刪除時(shí)間 ? - <dfn></dfn> 定義一個(gè)詞或者短語(yǔ)招刨,并解釋意義 ? -<em></em>強(qiáng)調(diào) ? - <kdd></kdd> 文本從鍵盤鍵入霎俩,經(jīng)常用在與計(jì)算機(jī)相關(guān)的文檔或手冊(cè)中 ? - <mark> 表示包含的文本被高亮標(biāo)記 ? -<q>``` 內(nèi)容從其他來(lái)源,cite屬性表明內(nèi)容來(lái)源
? - <ruby> </ruby>包含ruby注釋其中rt 標(biāo)記ruby標(biāo)簽里面內(nèi)容的注釋沉眶、rp 定義不支持ruby元素的瀏覽器所顯示的內(nèi)容
? - <s></s> 標(biāo)記不再使用或者不再正確的內(nèi)容
? - <sample></sample> 定義樣本文本
? - 定義上標(biāo) / 定義下標(biāo)
? - <time></time> 定義時(shí)間

  • 列表

- 普通列表

<dl>
     <dt>
        <dd></dd>
     </dt>
</dl>

- 無(wú)序列表

<ul>
        <li></li>
</ul>

- 有序列表

<ol>
        <li></li>
</ol>
  • 表格

<table>
    <theader>定義表格的頁(yè)頭
        <tr>
            <th></th>
        </tr>
    </theader>
    <tbody>定義表格的主體
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>定義表格的頁(yè)腳
        <td></td>
    </tfoot>
</table>
  • td標(biāo)簽中通過(guò)header屬性的設(shè)置可將單元格與標(biāo)題關(guān)聯(lián)起來(lái)
  • <colgroup> 將列進(jìn)行組合打却,在<head></head> 中設(shè)置樣式
  • <caption> 設(shè)置表格的標(biāo)題
  • 表單

<form method="" action="URL" accept-charset=“ ” autocoplete=“ ” targe = " ">
    name:<input name="name"  type =" "/>
    <button>submit</button>
</form>
  • method:設(shè)置如何發(fā)送表單數(shù)據(jù),分為兩種方式"post"(分段傳輸谎倔,安全)和"get"(一次性傳輸柳击,不安全),默認(rèn)為"get"方法
  • accept-charset :設(shè)置服務(wù)器用哪種字符集處理表單數(shù)據(jù)。常用的字符集為:(UTF-8:Unicode字符編碼)片习、 (ISO-8859-1:拉丁字母表的字符編碼)捌肴、(gb2312:簡(jiǎn)體中文字符集)
  • autocomplete :設(shè)置是否開(kāi)啟表單自動(dòng)填寫補(bǔ)全功能,默認(rèn)為"on"
  • target : 設(shè)置在何處打開(kāi)action屬性的URL藕咏。
    ????_blank 在新的窗口中打開(kāi)
    ????_self 默認(rèn)哭靖。在相同的框架中打開(kāi)
    ????_parent 在父框架集中打開(kāi)
    ????_top 在整個(gè)窗口中打開(kāi)
    ????framename 在指定的框架中打開(kāi)
  • <label> 給表單或者其他元素添加文本屬性
  • <FieldSet> 將表單中的相關(guān)內(nèi)容分組,添加disabled屬性 設(shè)置禁用一組表單,使其不可點(diǎn)擊
  • <legend> 給表單中的每個(gè)組添加描述信息
  • input屬性
  • placeholder: 文字占位符
  • value: 輸入框中顯示的文字
  • size: 表示輸入框可以展示字符的長(zhǎng)度
  • maxlength: 表示輸入框最大長(zhǎng)度
  • disabled侈离、readonly :表示不可編輯的文本輸入框
  • autofocus : 自動(dòng)將光標(biāo)聚焦在已設(shè)置的輸入框中
  • password :密碼輸入框
  • button :按鈕類型
  • number:數(shù)字輸入框,min筝蚕、max最小值卦碾、最大值
  • range :范圍輸入框 ,min起宽、max最大值和最小值
  • checkbox (radio):選項(xiàng)輸入框
  • email :郵箱輸入框
  • tel :電話輸入框
  • date :日期輸入框
  • time :時(shí)間輸入框
  • color :顏色輸入框
  • search :搜索輸入框
  • hidden : 隱藏輸入框,隱藏需要上傳的數(shù)據(jù)
  • <datalist> 文本框創(chuàng)建展示列表
    <code>
    <form>
    names: <input list="list" />
    </form>
    <datalist id="list">
    <option value="A" />
    <option value="B"></option>
    <option value="C"/>
    </datalist>
    </code>
  • 選擇輸入框
    <code><select id="char"name="char">
    <option value="A" >A</option>
    <option value="B" >B</option>
    <option value="C" selected >C</option>
    <option value="D" >D</option>
    </select></code>
    <optgroup></optgroup>:把選項(xiàng)相關(guān)的組合在一起
  • <textarea></textarea>:創(chuàng)建可以輸入多行文本的文本框
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末洲胖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子坯沪,更是在濱河造成了極大的恐慌绿映,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異叉弦,居然都是意外死亡丐一,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門淹冰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)库车,“玉大人,你說(shuō)我怎么就攤上這事樱拴∧埽” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵晶乔,是天一觀的道長(zhǎng)珍坊。 經(jīng)常有香客問(wèn)我,道長(zhǎng)正罢,這世上最難降的妖魔是什么阵漏? 我笑而不...
    開(kāi)封第一講書人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮腺怯,結(jié)果婚禮上袱饭,老公的妹妹穿的比我還像新娘。我一直安慰自己呛占,他們只是感情好虑乖,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著晾虑,像睡著了一般疹味。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上帜篇,一...
    開(kāi)封第一講書人閱讀 51,562評(píng)論 1 305
  • 那天糙捺,我揣著相機(jī)與錄音,去河邊找鬼笙隙。 笑死洪灯,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的竟痰。 我是一名探鬼主播签钩,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼坏快!你這毒婦竟也來(lái)了铅檩?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤莽鸿,失蹤者是張志新(化名)和其女友劉穎昧旨,沒(méi)想到半個(gè)月后拾给,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡兔沃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年蒋得,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粘拾。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡窄锅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出缰雇,到底是詐尸還是另有隱情入偷,我是刑警寧澤,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布械哟,位于F島的核電站疏之,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏暇咆。R本人自食惡果不足惜锋爪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望爸业。 院中可真熱鬧其骄,春花似錦、人聲如沸扯旷。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)钧忽。三九已至毯炮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間耸黑,已是汗流浹背桃煎。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留大刊,地道東北人为迈。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像缺菌,于是被迫代替她去往敵國(guó)和親曲尸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355

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

  • 序言 整理谷歌的小弟的筆記男翰,版權(quán)歸原作者所有,本文僅作整理纽乱,原文鏈接:http://blog.csdn.net/l...
    在代碼下成長(zhǎng)閱讀 1,147評(píng)論 1 5
  • HTML標(biāo)簽解釋大全 一蛾绎、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,243評(píng)論 1 41
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器租冠,智...
    卡卡羅2017閱讀 134,657評(píng)論 18 139
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案鹏倘? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 秋去冬雨煮了時(shí)光 花亦盡、葉做泥裳 柿子紅顽爹、掛在高高的樹(shù)上 染色了故鄉(xiāng) 跟著腳步走在田垅旁 雅俗共賞 像春光尾隨整...
    冰夢(mèng)云天閱讀 193評(píng)論 1 5