HTML屬性與標(biāo)題

性是HTML元素提供的附國(guó)信息

HTML元素可以設(shè)置屬性

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

屬性一般描述于開(kāi)始標(biāo)簽

屬性總是以名稱/值對(duì)應(yīng)的形式出現(xiàn)，例如：name="value"

例，鏈接地址是href的屬性

<a >鏈接地址是href的屬性</a>

HTML屬性常用引用屬性值

屬性值應(yīng)該始終被包含在引號(hào)內(nèi)

雙引號(hào)是常用的，單引號(hào)也沒(méi)有問(wèn)題，

如果屬性值本身就包含了雙引號(hào)，即么則必須引用單引號(hào)，例：name='John"ShotGun"Nelson'

HTML提示：使用小寫屬性

屬性和屬性值對(duì)大小寫不敏感。

HTML屬性參考

calss 為HMTL元素定義一個(gè)或多個(gè)名

id 定義元素的唯一id

style 規(guī)定元素的行內(nèi)樣式

title 描述元素的額外信息

HTML標(biāo)題

HTML注釋

類似于對(duì)代碼進(jìn)行備注，默認(rèn)有兩種試

1、

常用于一小段注釋

2、//注釋有時(shí)候不起作用，不知道為啥，知道的回復(fù)下啦

HTML提示，如何查看源代碼

如果你想看，在網(wǎng)頁(yè)中，單擊右鍵，然后選擇查看“源文件”或者醒看頁(yè)面源代碼即可；

用說(shuō)， Flash的效果大家都清楚。實(shí)際上，HTML5和JavaScript擁有很多新屬性，可以用它們來(lái)替代Flash。W3Cschool精選16個(gè)超牛逼的HTML5和JavaScript特效，看了這些特效，未來(lái)的Web發(fā)展前途無(wú)量。

1.特效：FlowerPower

創(chuàng)作者使用花朵作為畫刷，以貝茲曲線方式繪圖。

2.特效：Breathing Galaxies

動(dòng)態(tài)變換直徑及顏色，可通過(guò)鼠標(biāo)或鍵盤產(chǎn)生新形狀，這個(gè)效果不錯(cuò)!

3.特效：Noise Field

移動(dòng)鼠標(biāo)可改變粒子運(yùn)動(dòng)，點(diǎn)擊可隨機(jī)生成不同粒子效果。

4.特效：HTML5 Canvas粒子效果文字動(dòng)畫特效

W3Cschool利用HTML5，制造出了粒子效果文字動(dòng)畫特效。只要你輸入框中輸入想要展示的文字，回車后即可在canvas上繪制出粒子效果的文字動(dòng)畫，相當(dāng)酷的動(dòng)畫效果。

5.特效：Swirling Tentacles

三維脈沖效果，沿著脈沖線有運(yùn)動(dòng)的顏色漸變模塊。

6.特效：Keylight

雙擊生成兩個(gè)以后的鍵即可發(fā)出聲音，移動(dòng)鍵的位置可產(chǎn)生不同的聲音效果。W3Cschool上面有很多這樣的教程，有興趣可以去看一下！

7.特效：Rotating Spiral

旋轉(zhuǎn)的螺旋效果，單擊可以控制開(kāi)始和停止旋轉(zhuǎn)，是不是覺(jué)得高大上？

8.Blob

拖動(dòng)水滴有重力效果，雙擊可以分離，小水滴碰到大水滴會(huì)合并。

9.Trail

彩色顆粒跟隨鼠標(biāo)運(yùn)動(dòng)效果，帶尾巴淡出效果。

10.Graph Layout

一種交互的力向圖布局效果，刷新三觀。

11.Typographic Effects

使用HTML5 Canvas實(shí)現(xiàn)的文本特性，效果超過(guò)Flash。

12.Crazy Tentacles

移動(dòng)鼠標(biāo)可以進(jìn)行涂鴉，點(diǎn)擊鼠標(biāo)可以清除畫布，看著確實(shí)瘋狂。

13.Nebula

吸引眼球的粒子系統(tǒng)，目的是測(cè)試WebGL性能，如果滑動(dòng)鼠標(biāo)，可以產(chǎn)生絢麗效果。

14.WebGL Globe

WebGL Globe 是一個(gè)開(kāi)放的地理數(shù)據(jù)可視化平臺(tái)，我們鼓勵(lì)你復(fù)制代碼，添加自己的數(shù)據(jù)，創(chuàng)建自己的應(yīng)用。

15.Particle Playground

用鼠標(biāo)和粒子進(jìn)行交互，能發(fā)現(xiàn)不一樣的精彩。

16.Surface

使用WebGL實(shí)現(xiàn)的水面特效實(shí)驗(yàn)，可放入一張照片，使用鼠標(biāo)觸動(dòng)水面會(huì)有奇特效果。

上面的HTML5和JavaScript特效，簡(jiǎn)直趕超F(xiàn)lash。W3Cschool上面有很多用戶留言稱HTML5和JavaScriptit將替代Flash，不過(guò)對(duì)于這種說(shuō)法，也不知道怎么去評(píng)判。畢竟這些用戶說(shuō)的也是很有道理，你認(rèn)為JavaScriptit會(huì)替代Flash嗎?很想知道你的答案!

公眾號(hào)：w3c技術(shù)教程

提供專業(yè)的web技術(shù)教程、手冊(cè)、工具。

全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實(shí)用視頻。

主要內(nèi)容：正式引入HTML網(wǎng)頁(yè)開(kāi)發(fā)，學(xué)習(xí)并了解HTML的相關(guān)知識(shí)。變身Web開(kāi)發(fā)達(dá)人，做全棧程序員。這是HTML技術(shù)的第二課，主要講解一下HTML的幾大重要標(biāo)簽，做出來(lái)比較不錯(cuò)的顯示效果。

回顧上節(jié)

上節(jié)中主要講解了HTML的開(kāi)發(fā)工具以及書寫了第一個(gè)Web網(wǎng)頁(yè)。上節(jié)請(qǐng)戳→HTML電腦編程02 書寫第一個(gè)Web網(wǎng)頁(yè) 程序員學(xué)習(xí)復(fù)習(xí)

第一個(gè)HTML網(wǎng)頁(yè)

其中包括<html>....</html>標(biāo)簽、<head>...</head>（頭部標(biāo)簽）、<title>...</title>（標(biāo)題標(biāo)簽）、<body>...</body>（身體標(biāo)簽）。每個(gè)標(biāo)簽都有自己的含義。其實(shí)還有很多非常重要的標(biāo)簽的。下面我們一起來(lái)看一看。

PS小技巧：分享個(gè)寫標(biāo)簽的小技巧，在書寫（<）時(shí)，順帶著把（>）也也寫好了。成對(duì)成對(duì)的寫，對(duì)于標(biāo)簽也適用，如在寫html標(biāo)簽時(shí)。書寫順序如下：
1.<
2.>
3.html
4.<
5.>
6./html

文本標(biāo)簽

對(duì)于標(biāo)簽的學(xué)習(xí)，最好進(jìn)行分類，這樣就可以快速的進(jìn)行學(xué)習(xí)了。首先說(shuō)一下文本標(biāo)簽。

文本標(biāo)簽是用來(lái)顯示文字的。只要是內(nèi)容的東西，咋就意味著需要卸載body內(nèi)：

body標(biāo)簽

如同上節(jié)課一樣，直接在body標(biāo)簽中寫文字也是可行的。但是你無(wú)法對(duì)字體顏色格式等信息進(jìn)行控制。所以出現(xiàn)了不同的文本標(biāo)簽，用來(lái)顯示設(shè)置不同的字形。

標(biāo)題標(biāo)簽

如同名字一樣，標(biāo)題標(biāo)簽就是標(biāo)題。使用這個(gè)標(biāo)簽可以讓你的內(nèi)容和標(biāo)題一樣顯示。標(biāo)題標(biāo)簽包括<h1>-<h6>六種。

6種標(biāo)題標(biāo)簽

其顯示效果如下：

6種標(biāo)題標(biāo)簽的展示效果

可以看到H1-H6標(biāo)簽的大小不一致。H后面的數(shù)字越大反而越小。

H標(biāo)簽中還包含一個(gè)屬性align。那到底什么是屬性呢？

屬性

屬性以鍵值對(duì)的形式存在。屬性是相對(duì)于標(biāo)簽而言的，也就是需要把屬性寫在標(biāo)簽內(nèi)。既然是屬性，也就意味著可以改變標(biāo)簽的某些功能。例如H標(biāo)簽中含有align屬性。這就是用來(lái)控制對(duì)齊方式的。

align屬性

align屬性就是用來(lái)控制對(duì)齊方式的。通過(guò)上圖，也可以看到屬性的書寫方式。一起來(lái)看一下效果吧：

align屬性的不同效果

align屬性常用的包括left（靠左）、center（居中）、right（靠右）三個(gè)基本值。

物理字體

下面介紹幾個(gè)物理字體的標(biāo)簽。物理字體指的是：加粗、斜體、下劃線、上下標(biāo)等

粗體：

粗體

粗體顯示的效果

還有其他的標(biāo)簽，和b標(biāo)簽使用方式一致：

各種物理字體

大家直接試用一下就可以看到效果了。

本教程由做全棧攻城獅，原創(chuàng)首發(fā)，如有轉(zhuǎn)載，請(qǐng)注明出處。

如果你有什么比較不錯(cuò)的編程技巧，或者你想要什么程序員編程資源，點(diǎn)擊下方了解更多。

在線咨詢

上一篇：webpack是什么
下一篇：「玩轉(zhuǎn)前端」如何創(chuàng)建完美的HTML郵件

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。