HTML常用代碼集合，背完這些基本可以自己做表白網(wǎng)頁(yè)了

lt;marquee>...</marquee>普通卷動(dòng)

<marquee behavior=slide>...</marquee>滑動(dòng)

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動(dòng)

<marquee behavior=alternate>...</marquee>來(lái)回卷動(dòng)

<marquee direction=down>...</marquee>向下卷動(dòng)

<marquee direction=up>...</marquee>向上卷動(dòng)

<marquee direction=right></marquee>向右卷動(dòng)

<marquee direction=left></marquee>向左卷動(dòng)

<marquee loop=2>...</marquee>卷動(dòng)次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定卷動(dòng)距離

<marquee scrolldelay=300>...</marquee>設(shè)定卷動(dòng)時(shí)間

<!>字體效果

<h1>...</h1>標(biāo)題字(最大)

<h6>...</h6>標(biāo)題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強(qiáng)調(diào))

<i>...</i>斜體字

<em>...</em>斜體字(強(qiáng)調(diào))

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤(pán)文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號(hào))

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =font-size:100 px>...</font>無(wú)限增大

<!>區(qū)斷標(biāo)記

<hr>水平線

<hr size=9>水平線(設(shè)定大小)

<hr width=80%>水平線(設(shè)定寬度)

<hr color=ff0000>水平線(設(shè)定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結(jié)格式

<base href=位址>(預(yù)設(shè)好連結(jié)路徑)

<a href=位址></a>外部連結(jié)

<a href=位址 target=_blank></a>外部連結(jié)(另開(kāi)新視窗)

<a href=位址 target=_top></a>外部連結(jié)(全視窗連結(jié))

<a href=位址 target=頁(yè)框名></a>外部連結(jié)(在指定頁(yè)框連結(jié))

<!>貼圖/音樂(lè)

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設(shè)定圖片寬度

<img src=圖片位址 height=30>設(shè)定圖片高度

<img src=圖片位址 alt=提示文字>設(shè)定圖片提示文字

<img src=圖片位址 border=1>設(shè)定圖片邊框

<bgsound src=MID音樂(lè)檔位址>背景音樂(lè)設(shè)定

<!>表格語(yǔ)法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲(chǔ)存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲(chǔ)存格合并列的列數(shù)(使用數(shù)字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset cols="20%,*">分割左右兩個(gè)框架

<frameset cols="20%,*,20%">分割左中右三個(gè)框架

<分割上下兩個(gè)框架

<frameset rows="20%,*,20%">分割上中下三個(gè)框架

<! - - ... - -> 注解

<a href target> 指定超連結(jié)的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結(jié)

<a href> 指定超連結(jié)

<a name=錨的名稱> 被連結(jié)點(diǎn)的名稱

<address>....</address> 用來(lái)顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結(jié)的分割視窗

<basefont size> 更改預(yù)設(shè)字形大小

<bgsound src> 加入背景音樂(lè)

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設(shè)定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設(shè)定表格標(biāo)題位置

<caption>...</caption> 為表格加上標(biāo)題

<center> 向中對(duì)齊

<cite>...<cite> 用於引經(jīng)據(jù)典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設(shè)定定義列表的項(xiàng)目解說(shuō)

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標(biāo)簽

<dl>...</dl> 設(shè)定定義列表的標(biāo)簽

<dt> 設(shè)定定義列表的項(xiàng)目

<em> 強(qiáng)調(diào)之用

<font face> 任意指定所用的字形

<font size> 設(shè)定字體大小

<form action> 設(shè)定戶動(dòng)式表單的處理方式

<form method> 設(shè)定戶動(dòng)式表單之資料傳送方式

<frame marginheight> 設(shè)定視窗的上下邊界

<frame marginwidth> 設(shè)定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設(shè)定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設(shè)定文字大小

<head> 標(biāo)示文件資訊

<hr> 加上分格線

<html> 文件的開(kāi)始與結(jié)束

<i> 斜體字

<img align> 調(diào)整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預(yù)設(shè)圖形大小

<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界

<img lowsrc> 預(yù)載圖片功能

<img src border> 設(shè)定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項(xiàng)目 ( 可指定符號(hào) )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標(biāo)簽

<multiple> 可同時(shí)選擇多項(xiàng)的列表欄

<noframe> 定義不出現(xiàn)分割視窗的文字

<ol>...</ol> 有序號(hào)的列表

<option> 定義表單中列表欄的項(xiàng)目

<p align> 設(shè)定對(duì)齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強(qiáng)語(yǔ)氣

<sub> 下標(biāo)字

<sup> 上標(biāo)字

<table border=n> 調(diào)整表格的寬線高度

<table cellpadding> 調(diào)整資料欄位之邊界

<table cellspacing> 調(diào)整表格線的寬度

<table height> 調(diào)整表格的高度

<table width> 調(diào)整表格的寬度

<table>...</table> 產(chǎn)生表格的標(biāo)簽

<td align> 調(diào)整表格欄位之左右對(duì)齊

<td bgcolor> 設(shè)定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設(shè)定表格欄位不換行

<td valign> 調(diào)整表格欄位之上下對(duì)齊

<td width> 調(diào)整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動(dòng)否換行

<th>...</th> 定義表格的標(biāo)頭欄位

<title> 文件標(biāo)題

<tr>...</tr> 定義表格美一行

<tt> 打字機(jī)字體

<u> 文字加底線

<ul type>...</ul> 無(wú)序號(hào)的列表 ( 可指定符號(hào) )

<var>...</var> 用於顯示變數(shù)

了美化網(wǎng)站，我在網(wǎng)站上面添加了一個(gè)HTML懸浮音樂(lè)播放器，先來(lái)看看一下效果圖。

如何在自己的網(wǎng)站上添加HTML懸浮音樂(lè)播放器呢？今天和你們分享

首先申明三點(diǎn)：

1、本播放器實(shí)際上是調(diào)用網(wǎng)易云音樂(lè)的音樂(lè)進(jìn)行播放，音樂(lè)版權(quán)歸網(wǎng)易云音樂(lè)所有，僅供個(gè)人學(xué)習(xí)研究，用于商用的后果自負(fù)！

2、本播放器的演示效果可以在我的博客首頁(yè)看到，默認(rèn)支持所有Html和PHP環(huán)境的網(wǎng)站。

3、本播放器可以使用電腦、手機(jī)、IPAD等設(shè)備訪問(wèn)，自適應(yīng)。）

具體的操作方法：

在網(wǎng)站源文件中（如果有單獨(dú)的頁(yè)腳文件，也可以放在頁(yè)腳文件里面）添加這三行代碼：

然后保存發(fā)布，在瀏覽器刷新網(wǎng)頁(yè)就看到效果了

網(wǎng)頁(yè)中添加視頻、聲音、動(dòng)畫(huà)等，可以增強(qiáng)用戶體驗(yàn)。在HTML5之前，為網(wǎng)頁(yè)添加多媒體的唯一辦法，就是使用第三方的插件（如，Adobe Flash等）。

HTML5中，提供了對(duì)多媒體的原生支持，只需通過(guò) video 元素，就可以向網(wǎng)頁(yè)嵌入視頻、電影或音頻資源，通過(guò) audio 元素向網(wǎng)頁(yè)嵌入音頻資源，省時(shí)省力。

HTML中嵌入視頻和音頻代碼

一、視頻

在HTML5時(shí)代，在網(wǎng)頁(yè)中嵌入視頻非常簡(jiǎn)單，只需要一個(gè) video 元素，并設(shè)置它的 src 屬性，使其鏈接一個(gè)視頻地址就可以完全搞定了，這個(gè)太esay了

把這個(gè)網(wǎng)站在IE8中打開(kāi)一看，網(wǎng)站上除了一片空白外，什么也沒(méi)有，這是為什么呢？

原來(lái) video 是HTML5最新引入的元素，并不是所有瀏覽器都支持它，IE8及以下版本都無(wú)法識(shí)別 video 標(biāo)簽。如果瀏覽器不識(shí)別 video標(biāo)簽，則會(huì)忽略它，當(dāng)做什么都沒(méi)有。這就是網(wǎng)站上一片空白的原因。

這個(gè)問(wèn)題好解決，只需在 video 標(biāo)簽之間放置文本信息，不支持 video 標(biāo)簽的老瀏覽器，會(huì)顯示 video 標(biāo)簽之間的文本信息，以提示用戶瀏覽器不支持 video，就這么簡(jiǎn)單！

你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</video>

在IE8上打開(kāi)一看，確實(shí)顯示了提示文本，這下好多了，至少用戶知道自己的瀏覽器不能播放視頻，該換瀏覽器了。

下載了Opera瀏覽器的最新版本25.0，打開(kāi)一看，怎么還是一片空白外！Opera瀏覽器明明是支持video標(biāo)簽的，那又是為什么呢？

這個(gè)就得從視頻的編碼格式說(shuō)起了。video 元素支持三種視頻格式：Ogg、MP4、WebM。

Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件，后綴名為 .ogg；MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件，后綴名為 .mp4；WebM是VP8視頻編碼和Vorbis音頻編碼的文件，后綴名為 .webm。

這個(gè)Opera瀏覽器呢，它可以支持ogg，但不支持mp4。由于Opera支持video標(biāo)簽，故video標(biāo)簽之間的文本信息沒(méi)有顯示出來(lái)，但它不支持ogg，所以就不進(jìn)行播放，最終導(dǎo)致頁(yè)面出現(xiàn)一片空白。這下可怎么辦呢？

其實(shí)辦法有的是，我們可以從網(wǎng)上下載一副圖像，放到視頻播放窗口，如果視頻無(wú)法播放，就顯示這張圖片，是不是更好呢？從網(wǎng)上下載一張美女圖片，干脆叫beauty.jpg吧。那這個(gè)圖像怎么添加到視頻窗口呢？

video標(biāo)簽有個(gè)poster 屬性，就是專門(mén)在視頻窗口放置圖片的。poster是一個(gè)video的占位符，無(wú)論什么情況下，只要視頻還沒(méi)有播放（視頻下載過(guò)程中、視頻不存在、不支持該視頻類型、用戶點(diǎn)擊播放按鈕前），就會(huì)顯示該圖像，可以看做是視頻播放之前插入的宣傳畫(huà)或海報(bào)。

你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上刷新一下，真的有一個(gè)美女沖著自己微笑呢。雖然視頻沒(méi)有播放出來(lái)，這回心情卻是好多了。

那我可不能一天到晚只看美女呀，視頻還是還是要想辦法播放出來(lái)的。既然Opera瀏覽器不支持mp4，我們就換成需要ogg吧，這樣就肯定沒(méi)問(wèn)題了。

我想了想，這個(gè)辦法不好，萬(wàn)一某個(gè)瀏覽器只支持支持ogg，不支持mp4呢。這年頭，什么都缺，就是不缺點(diǎn)子，隨便在網(wǎng)上一搜，辦法就有了。

在 video 元素中添加 source 元素，就可以解決這個(gè)問(wèn)題。在source 元素中，通過(guò) src 屬性指定視頻的地址，通過(guò) type 屬性指定視頻的類型，以幫助瀏覽器決定是否能播放該視頻。并且，在 video 元素中可以添加任意多個(gè)source 元素，讓不同的 source 元素鏈接到不同的視頻文件。

這樣的話，當(dāng)瀏覽器發(fā)現(xiàn) video 元素時(shí)，首先會(huì)查看它本身是否定義了 src 屬性。如果沒(méi)有，就會(huì)檢查 source 元素。瀏覽器會(huì)逐個(gè)查看這些視頻源，直到找到一個(gè)可以播放的視頻。一旦找到，就會(huì)播放它并忽略其他的視頻源。我們干脆添加兩個(gè)source，一個(gè)是mp4，一個(gè)是ogg，這下視頻是一定能播放出來(lái)了。

你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上又刷新一下，只有美女沖著我微笑，視頻還是沒(méi)播放出來(lái)。唉，太粗心了，忘記添加播放視頻的控件了。

在video標(biāo)簽中，通過(guò)添加controls 屬性來(lái)為視頻添加播放控件，方便用戶執(zhí)行播放、暫停操作和音量控制。

（此處略去500字…）

</video>

在Opera瀏覽器上又刷新一下，效果真的不一樣，這次不僅看到美女，還看到了視頻控件。用鼠標(biāo)猛戳一下那個(gè)播放按鈕，哈哈，不錯(cuò)，真的聽(tīng)到美妙的旋律。我們的ogg文件，終于播放出來(lái)了，讓我們好好享受一下吧O(∩_∩)O。

聽(tīng)了一會(huì)，忽然一想，不對(duì)呀，我剛才點(diǎn)了播放按鈕后，等了半天才聽(tīng)到聲音。能不能我一點(diǎn)播放按鈕，就立即播放呢？

原來(lái)視頻也是需要下載緩存的，點(diǎn)擊播放按鈕后，首先緩存，然后才播放的。那能不能在頁(yè)面加載的同時(shí)就緩存呢。這樣，用戶點(diǎn)擊播放后，就不必等待了。

這當(dāng)然可以，在video標(biāo)簽中，通過(guò)添加preload屬性來(lái)為視頻添加預(yù)加載功能，在頁(yè)面加載的同時(shí)加載視頻。

（此處略去500字…）

</video>

關(guān)于 preload 屬性，稍微再啰嗦一點(diǎn)，就是可以把它設(shè)置為 metadata，讓瀏覽器僅僅預(yù)加載視頻的基本信息，如尺寸、時(shí)長(zhǎng)、以及一些關(guān)鍵的幀。這樣的話，在開(kāi)始播放之前，瀏覽器可以提前計(jì)算視頻的顯示尺寸。

既然一切都OK了！讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器，打開(kāi)網(wǎng)頁(yè)，猛戳一下播放按鈕。

等等~，等等~，不對(duì)，怎么只有聲音沒(méi)有畫(huà)面，明明是mp4格式的文件呀？使用暴風(fēng)影音試了一下，是有畫(huà)面的呀！

辛辛苦苦又在網(wǎng)上搜了一番，花了整整586秒，終于找到了答案。mp4視頻需要h.264編碼格式才會(huì)有圖像的。

找了一個(gè) h.264 編碼格式的 mp4 試了一下，不錯(cuò)，確實(shí)有圖像了！看了半天，原來(lái)是一部老外的電影，嘰里咕嚕一陣，一句話也沒(méi)聽(tīng)懂。那O(∩_∩)O~，能否提供中文字幕呢，這樣就不必費(fèi)老大勁去聽(tīng)了！

HTML5中，通過(guò)在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式：WebVTT和TTML。WebVTT是Web視頻文本軌跡（Web Video Text Track），是UTF-8編碼格式的文本文件；TTML是時(shí)序文本標(biāo)記語(yǔ)言（Timed Text Markup Language），是XML格式的文件。兩種文件的具體格式，已經(jīng)超出我們的討論范圍。

video元素支持添加多個(gè)track元素，不同的track元素鏈接到不同的字幕文件。用戶可以在各個(gè)字幕間進(jìn)行切換。

</video>

track元素中，src屬性指定字幕文件的URL；srclang屬性字幕文件的語(yǔ)言類型，若kind 屬性值是 "subtitles" 時(shí)，該屬性必需的；label 屬性指定字幕標(biāo)簽，每個(gè)字幕元素必需設(shè)置一個(gè)唯一不重復(fù)的標(biāo)簽，切換字幕時(shí)，會(huì)顯示標(biāo)簽的名稱；kind指定字幕內(nèi)容類型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default屬性指定是否是默認(rèn)字幕，如果一個(gè)都沒(méi)指定，將不會(huì)自動(dòng)顯示字幕。

除了字幕外，我還希望對(duì)視頻進(jìn)行過(guò)多的控制，比如讓視頻自動(dòng)播放、循環(huán)播放、默認(rèn)靜音，以及視頻窗口的尺寸等等，這些都能做到嗎？

這已經(jīng)不是什么事了，video 元素已經(jīng)提供了相關(guān)屬性，根據(jù)需要設(shè)置相應(yīng)的屬性就可以了。這些屬性及含義見(jiàn)表 23：

HTML中嵌入視頻和音頻代碼

哦，原來(lái)這么簡(jiǎn)單呀！那就到此為止吧，網(wǎng)頁(yè)中嵌入視頻的全部代碼都在這里，就打包給你吧！

你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</video>

睜大眼睛一看，卻只有7行代碼。然而，就這區(qū)區(qū)7行代碼，可把他折磨得夠嗆。

看著這一切都全部搞定，他仰望著天空，長(zhǎng)長(zhǎng)呼了一口氣，顯得是那么的放松，那么的愜意。此時(shí)，他閉上眼睛，在自己的夢(mèng)幻世界里遨游！

二、音頻

有了在網(wǎng)頁(yè)中嵌入視頻的經(jīng)歷，要在網(wǎng)頁(yè)中嵌入音頻，那簡(jiǎn)直就是小菜一碟了。只要把vedio元素?fù)Q成 audio 元素，就全部搞定。

但需要了解的是，audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道，由于音頻沒(méi)有畫(huà)面，也就沒(méi)有 width、height、poster 屬性，而其他屬性都支持，并且跟視頻的含義相同。

網(wǎng)頁(yè)中嵌入音頻的代碼如下：

你的瀏覽器已經(jīng)老掉牙了，不支持audio，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</audio>

在線咨詢

上一篇：15個(gè)好看的Bootstrap HTML網(wǎng)站模板下載
下一篇：如何在瀏覽器賬中查看網(wǎng)頁(yè)的HTML源代碼？

您的項(xiàng)目需求

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

整合營(yíng)銷(xiāo)服務(wù)商

HTML常用代碼集合，背完這些基本可以自己做表白網(wǎng)頁(yè)了

一、視頻

二、音頻

您的項(xiàng)目需求