一文詳解HTML屬性

TML全局屬性是所有HTML元素共有的屬性。它們可以應用于所有元素，盡管它們可能對某些元素沒有影響。

HTML屬性

HTML元素可以設置屬性

屬性可以在元素中添加附加信息

屬性一般描述于開始標簽

屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性和屬性值對大小寫不敏感。不過，萬維網聯盟在其HTML4推薦標準中推薦小寫的屬性/屬性值。而新版本的(X)HTML要求使用小寫屬性。

大多數HTML元素支持的屬性：

class：為html元素定義一個或多個類名（classname）(類名從樣式文件引入)

id：定義元素的唯一id

style：規定元素的行內樣式（inlinestyle）

title：描述了元素的額外信息(作為工具條使用)

HTML超鏈接及其屬性

HTML使用標簽<a>來設置超文本鏈接。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。

訪問過的鏈接顯示為紫色并帶有下劃線。

點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

如果為這些超鏈接設置了CSS樣式，展示樣式會根據CSS的設定而顯示。

在標簽<a>中使用了href屬性來描述鏈接的地址。

實例

<a href="https://www.kaikeba.com/">訪問開課吧</a>1復制代碼類型：[html]

上面這行代碼顯示為：訪問開課吧

點擊這個超鏈接會把用戶帶到開課吧的首頁。

使用target屬性，你可以定義被鏈接的文檔在何處顯示。

實例

<ahref="https://www.kaikeba.com/"target="_blank">訪問開課吧</a>  

target="_blank":在新窗口中打開被鏈接文檔。  

target="_self":	默認，在相同的框架中打開被鏈接文檔。  

target="_parent":在父框架集中打開被鏈接文檔。  

target="_top":	在整個窗口中打開被鏈接文檔。  

target=framename:在指定的框架中打開被鏈接文檔。  1234567891011復制代碼類型：[html]

HTML圖像標簽及其屬性

在HTML中，圖像由<img>標簽定義。<img>是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

定義圖像的語法是：

<imgsrc="url"alt="some_text">  1復制代碼類型：[html]

URL指存儲圖像的位置。

alt屬性用來為圖像定義一串預備的可替換的文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

height（高度）與width（寬度）屬性用于設置圖像的高度與寬度。屬性值默認單位為像素。

<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120">  1復制代碼類型：[html]

提示:指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。

開課吧廣場-人才學習交流平臺

果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標簽。

這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。

<html>

</html>

三、雙標簽和單標簽。

在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。

四、head頭部標簽。

head頭部有以下幾種常用標簽：

meta：主要提供有關頁面的元信息。

link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。

title：頁面標題的標簽。

script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。

五、body主體標簽。

1、塊級標簽。

塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內聯標簽。

內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內聯標簽有：span、a、b、strong、i、em 。

3、內聯塊級標簽。

內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：

常用的內聯塊級標簽有：img、input、textarea。

4、區域標簽。

所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。

5、表單標簽。

這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：

?表單常用的標簽有：form、input、select、option、textarea 。

以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。

記的屬性

each()遍歷元素：each(callback)方法主要用于對選擇器進行遍歷，它接受一個函數為參數，該函數接受一個參數，指代元素的序號。

對于標記的屬性而言，可以利用each()方法配合this關鍵字來獲取或者設置選擇器中每個元素相對應的屬性值；

jQuery代碼:

$(function(){
    $("img").each(function(index){
        this.title = "這是第" + index + "幅圖，id是：" + this.id; //此時this指DOM對象
    });
});

HTML代碼:

<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">

理解:首先利用$("image")獲取頁面中所有圖片的集合,然后通過each()方法遍歷所有圖片,通過this關鍵字對圖片進行訪問,獲取圖片的id,

并設置圖片的title屬性。其中each()方法的函數參數index為元素所處的序號(從0開始計數)。

jQuery代碼:

$(function(){
    $("img").each(function(index, item){
        item.title = "這是第" + index + "幅圖，id是：" + this.id; //此時item指當前的DOM對象
    });
});

HTML代碼:

<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">

//使用jQuery中插件機制

$.fn.extend({
    quanxuan:function(){
        //專用于實現全選
        this.attr("checked",true);
    },
    quxiao:function(){
        //取消功能
        this.attr("checked",false);
    },
    fanxuan:function(){
        //反選
        var leng = this.length;
        this.each(function(index,domElement){ //this指jQuery對象
        domElement.checked = !domElement.checked; //domElement= this this指DOM對象
    })
    }
});

獲取屬性的值

attr(name)

$(function(){
    //var sTitle = $("em").attr("title"); //獲取第一個<em>元素的title屬性值
    var sTitle = $("em:eq(1)").attr("title"); //獲取第二個<em>元素的title屬性值
    $("span").text(sTitle);
});

注意: 因為沒有遍歷,$("em").attr("title") 實際上獲取的是第一個<em>元素的title屬性值

$("em").attr("title") 等同于$("em:eq(1)").attr("title")

$("em").get(0).title 也是獲取第一個<em>元素的title屬性值, 而$("em").get(0)已經轉換成DOM對象, 因此就不能使用jquery對象的attr方法

設置屬性值

attr(name,value)

$("a[href^=http://]").attr("target","_blank")

jQuery代碼：

function DisableBack(){
    $("button:gt(0)").attr("disabled","disabled");
}

HTML代碼:

<button onclick="DisableBack()">第一個Button</button> 
<button>第二個Button</button> 
<button>第三個Button</button>

通過位置選擇器:gt(0),當單擊第1個按鈕時后面的兩個按鈕將同時禁用;

attr()方法還接受函數作為參數attr(name,fn),它的第2個參數為一個函數,該函數接受一個參數,為元素的序號,返回值為字符串;

jQuery代碼

$(function(){
    $("div").attr("id", function(index){
        //將id設置為序號相關的參數
        return "div-id" + index;
    }).each(function(){
        //找到每一項的span標記
        $(this).find("span").html("(id='" + this.id + "')");
    });
});

HTML代碼:

<div>第0項 <span></span></div>
<div>第1項 <span></span></div>
<div>第2項 <span></span></div>

用attr()方法接受屬性列表

$(function(){
    $("img").attr({
        src: "06.jpg",
        title: "紫荊公寓",
        width:300, //參考HTML語法, 無需加單位, 也可以寫成 widht:"300px" 加單位必須加引號
        alt: "紫荊公寓"
    });
});

刪除屬性

$("button").removeAttr("disabled");

removeAttr(name)刪除屬性相當于HTML的標記中不設置該屬性, 并不是取消了該標記的這個特點。

小結：

$().attr(屬性名稱); //獲得屬性信息值

$().attr(屬性名稱,值); //設置屬性的信息

$().removeAttr(屬性名稱); //刪除屬性

$().attr(json對象); //同時為多個屬性設置信息值, json對象的鍵值對就是名稱和值

$().attr(屬性名稱,fn); //通過fn函數執行的return返回值對屬性進行賦值

獲取屬性的第二種方式:

$("input[type='checkbox']").prop("checked");

設置元素的樣式

添加、刪除CSS類別

用addClass()方法添加CSS類別

$(function(){
    //同時添加多個CSS類別
    $("div").addClass("myClass1 myClass2"); //增加多個CSS類別,用空格隔開
});

用removeClass()方法刪除CSS類別

希望某些元素的樣式風格在某個類別之間切換,時而addClass()類別,時而removeClass()類別;

用toggleClass()方法在類別間動態切換 toggle 切換

$(function(){
    $("p").click(function(){
        //點擊的時候不斷切換
        $(this).toggleClass("highlight");
    });
});

實例:jQuery制作交替變幻的表格

<html>
<head>
<title>交替變幻的表格</title>
<style>
<!--
.datalist{
border:1px solid #007108; /* 表格邊框 */
font-family:Arial;
border-collapse:collapse; /* 邊框重疊 */
background-color:#d9ffdc; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #007108; /* 行名稱邊框 */
background-color:#00a40c; /* 行名稱背景色 */
color:#FFFFFF; /* 行名稱顏色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108; /* 單元格邊框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#a5e5aa; /* 隔行變色 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
$("table").mouseover(function(){
$("tr:gt(0)").toggleClass("altrow");
});
$("table").mouseout(function(){
$("tr:gt(0)").toggleClass("altrow");
});
});
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
</body>
</html>

直接獲取、設置樣式

jQuery提供css()方法來直接獲取、設置元素的樣式風格。使用方法與attr()幾乎一模一樣。

通過css(name)來獲取某種樣式風格的值；$("p").css("color");

通過css(properties)列表來同時設置元素的多種樣式；$("p").css({ color: "#ff0011", background: "blue" });

通過css(name,value)來設置元素的某種樣式；$("p").css("color","red");

通過css(name,function(index, value))設置一個樣式屬性的值

css()樣式操作特點：

此函數返回要設置的屬性值。接受兩個參數，index為元素在對象集合中的索引位置, value是原先的屬性值。

1 樣式獲取，jquery可以獲取行內、內部、外部的樣式。dom方式只能獲得行內樣式

2 復合屬性樣式需要拆分為"具體樣式"才可以操作

例如： background 需要拆分為 background-color background-image 等進行操作

border： border-left-style border-left-width border-left-color 等

margin： margin-left margin-top 等

也可以將樣式屬性寫成駝峰式: backgroundColor, 可以不加引號。

在json對象中, 帶橫線的css屬性(如font-size)必須加引號;

如：

$('div').css({"font-size":"40px","font-weight":"bold",color:"red"});

標準格式：

$('div').css({"font-size":"40px","font-weight":"bold","color":"red"});

css還支持獲取屬性值的方法, 保持原來的屬性值(width()和css()兩種方法)

oInput.val(tdText).css({'width':oTd.width(), 'font-size':'14px','font-weight':'bold', 'border':0,
'background-color':oTd.css('background-color')});

與下面的語句等同：

oInput.val(tdText).css('width',tdObj.width()).css('font-size','14px').css('font-weight','bold').
css('border-width',0).css('background-color',oTd.css('background-color'));

$("div").click(function() {
    $(this).css({
        width: function(index, value) {
            return parseFloat(value) * 1.2;
        },
        height: function(index, value) {
            return parseFloat(value) * 1.2;
        }
    });
});

以下代碼為<p>標記添加了mouseover和mouseout事件，當這兩個事件觸發時通過css(name,value)來修改標記的顏色。

$(function(){
    $("p").mouseover(function(){
        $(this).css("color","red");
    });
    $("p").mouseout(function(){
        $(this).css("color","black");
    });
});

另外還可以通過hasClass(name)方法來判斷某個元素是否設置了某個CSS類別，如何設置了則返回true，否則為false。

$("li:last").hasClass("myClass")

等同于$("li:last").is(".myClass")

在jQuery中其實hasClass方法內部調用的就是is()方法,只不過代碼可讀性更高一些;

小結：

class屬性值操作

$().attr('class',值);

$().attr('class');

$().removeAttr('class屬性'); //刪除class的屬性

class具體快捷操作方法：

$().addClass(class屬性值); //給class屬性追加信息值

$().removeClass(class屬性值); //刪除class屬性中的某個信息值

$().toggleClass(class屬性值); //開關效果，有就刪除，沒有就添加

css樣式操作

$().css(name,value); //設置

$().css(name); //獲取

$().css(json對象); //同時修改多個css樣式

CSS樣式操作-寬高

width() 取得第一個匹配元素當前計算的寬度值(px)。

width(val) 為每個匹配的元素設置CSS寬度(width)屬性的值; 如果沒有明確指定單位(如：em或%), 默認使用px

height(100) height("100px") 后面含有單位的必須加引號

在線咨詢

上一篇：HTML5 Video(視頻)
下一篇：HTML 標簽和屬性值的基本格式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一文詳解HTML屬性

HTML屬性

大多數HTML元素支持的屬性：

HTML超鏈接及其屬性

一、文檔類型聲明。

二、html主標簽。

三、雙標簽和單標簽。

四、head頭部標簽。

五、body主體標簽。

您的項目需求

一、文檔類型聲明。

三、雙標簽和單標簽。

四、head頭部標簽。

五、body主體標簽。