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)元素的name與value屬性. - 只用于某一個元素的,如
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)改變元素的樣式.