Part 1-2 HTML元素

HTML元素和屬性

<tag>......</tag>

類似于這樣成對出現(xiàn)的結(jié)構(gòu),稱之為元素.
元素結(jié)構(gòu) : 開始標(biāo)簽 + 內(nèi)容 + 結(jié)束標(biāo)簽

<h1 class="title">.....</h1>

元素的出現(xiàn)通常伴隨著屬性,屬性僅會出現(xiàn)在元素的開始標(biāo)簽中.
屬性結(jié)構(gòu) : 屬性名 = "屬性值"

<img src="logo.jpg">

并不是所有的元素都有成對的標(biāo)簽,如圖片元素,它是一個單標(biāo)簽元素.


HTML注釋

<!-- 注釋內(nèi)容 -->

像這種結(jié)構(gòu)的標(biāo)簽就是HTML注釋,被注釋的內(nèi)容不會在瀏覽器中顯示.
適當(dāng)?shù)淖⑨?,能夠讓我們閱讀程序的速度加快
注釋不能嵌套使用
大部分開發(fā)軟件中創(chuàng)建注釋的快捷鍵是 Ctrl+/


HTML屬性

<a harf="index.html" title="首頁">首頁</a>
<input type="text" disabled>

屬性一般結(jié)構(gòu)為 : 屬性名 = "屬性值"
屬性中也有不含屬性值的屬性,如disabled屬于一個布爾屬性.
屬性前必須有空格,屬性值必須被英文雙引號擴起來.
除此之外,我們還可以自定義屬性來存儲我們的一些數(shù)據(jù)以便 JS 使用。

屬性分類

屬性有很多種,從使用來說大概可以分為三類:

  • 可以用于每個元素的全局屬性,如class屬性.
  • 可用于某一類元素的,如form表單相關(guān)元素的namevalue屬性.
  • 只用于某一個元素的,如alt屬性只用于img元素

四大全局屬性

class

<p class="p1 red">文本段落</p>
<div class="red">我也有一個類名為red</div>

設(shè)置元素的一個或多個類名,方便使用 CSS 或 JS 對該元素進(jìn)行操作. 具有以下特點:

  • 類名不能以數(shù)字開頭
  • 類名可以設(shè)置多個值,以空格分開,如<div class="box box--menu">......</div>
  • 不同的元素可以有相同的類名

id

<p id="text">文本段落</p>
<div id="block">區(qū)塊內(nèi)容</div>

設(shè)置元素的唯一性,常用于 JS 操作或 CSS 操作,也可用作定義錨點. 具有以下特點:

  • 每個ID的值在當(dāng)前文檔必須是唯一的,不能出現(xiàn)兩個一樣的id值.
  • 不可以和 class 那樣設(shè)置多個值

title

<a title="全部的鏈接文字" href="#">鏈接文字很多...</a>
  • 用來設(shè)置元素的額外信息,鼠標(biāo)滑過元素暫停一會會顯示 title 屬性的內(nèi)容.

style

<div style="display: none;">我是隱藏的區(qū)域,可以通過JS來切換顯示</div>
<p style="width: 500px;">設(shè)置寬度為500px</p>
  • 用于設(shè)置元素的行內(nèi)樣式,一般用于 JS 動態(tài)改變元素的樣式.

參考資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,906評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,090評論 1 92
  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,789評論 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,769評論 1 45
  • 眾多一線明星的最愛[得意] 活酵母就像吸塵器,鉆到毛孔里清理雜質(zhì),疏通毛孔。 五大功效: 美白,補水,祛痘, 抗...
    Linda12閱讀 387評論 0 0

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