HTML常用全部代碼，你懂，你不想成功都難

Low了，網頁居然還用這么老掉牙的特效！弄個粗體字，下劃線就是突出重點了？真是一股濃濃的鄉村風撲面而來；弄個圖在頁面飄來飄去就是動畫效果了，你要這么認為的話那我只能保持沉默了。在HTML5占領著整個互聯網之時，想透過網頁抓住所有人的眼球，因循守舊是行不通的。因此，有你不能不知道的HTML常用代碼。只有熟悉掌握了常用的HTML代碼，你才能在編寫網頁的時候做到行云流水，用處處流露著細膩和創意的動效細節打動所有人。

在這里還是要說一下我自己建的前端JavaScript學習交流群：574462090，不管你是小白還是大牛，小編我都挺歡迎，小白嘛，多問點問題也就學好了，不定期分享干貨，包括最新的2017年前端學習資料，歡迎初學和進階中的小伙伴。

html代碼大全：結構性定義

文件類型<HTML></HTML> （放在檔案的開頭與結尾）

文件主題<TITLE></TITLE> （必須放在「文頭」區塊內）

文頭<HEAD></HEAD> （描述性資料，像是「主題」）

文體<BODY></BODY> （文件本體）

標題<H?></H?> （從1到6，有六層選擇）

標題的對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>

區分<DIV></DIV>

區分的對齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區塊<BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）

強調<EM></EM> （通常會以斜體顯示）

特別強調<STRONG></STRONG> （通常會以加粗顯示）

引文<CITE></CITE> （通常會以斜體顯示）

碼<CODE></CODE> （顯示原始碼之用）

樣本<SAMP></SAMP>

鍵盤輸入<KBD></KBD>

變數<VAR></VAR>

定義<DFN></DFN> （有些瀏覽器不提供）

地址 <ADDRESS></ADDRESS>

大字<BIG></BIG>

小字<SMALL></SMALL>

與外觀相關的標簽（作者自訂的表現方式）

加粗<B></B>

斜體<I></I>

底線<U></U> （尚有些瀏覽器不提供）

刪除線<S></S> （尚有些瀏覽器不提供）

下標<SUB></SUB>

上標<SUP></SUP>

打字機體<TT></TT> （用單空格字型顯示）

預定格式<PRE></PRE> （保留文件中空格的大小）

預定格式的寬度<PRE WIDTH=?></PRE>（以字元計算）

向中看齊<CENTER></CENTER> （文字與圖片都可以）

閃耀<BLINK></BLINK> （有史以來最被嘲弄的標簽）

字體大小 <FONTSIZE=?></FONT>（從1到7）

改變字體大小 <FONTSIZE=+|-?></FONT>

基本字體大小 <BASEFONTSIZE=?> （從1到7; 內定為3）

字體顏色 <FONTCOLOR="#$$"></FONT>（$$為顏色代碼）

html代碼大全：修改頁面的實用性HTML代碼

1)貼圖：<img src="圖片地址">

2)加入連接：<a href="所要連接的相關地址">寫上你想寫的字</a>

3)在新窗口打開連接：<a href="相關地址" target="_blank">寫上要寫的字</a>

4)移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

5)字體加粗：<b>寫上你想寫的字</b>

6)字體斜體：<i>寫上你想寫的字</i>

7)字體下劃線: <u>寫上你想寫的字</u>

8)字體刪除線: <s>寫上你想寫的字</s>

9)字體加大: <big>寫上你想寫的字</big>

10)字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

11)更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

12)消除連接的下劃線：<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

13)貼音樂：<embed src="音樂地址" width="寬度" height="高度" autostart=false>

14)貼flash: <embed src="flash地址" width="寬度" height="高度">

15)貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

16)換行：<br>

17)段落：<p>段落</p>

18)原始文字樣式：<pre>正文</pre>

19)換帖子背景：<body background="背景圖片地址">

20)固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body

bgproperties=fixed>

21)定制帖子背景顏色：<body bgcolor="#value">(value值見10)

22)帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>

23)貼網頁：<iframe. src="相關地址" width="寬度" height="高度"></iframe>

html代碼大全：常常會遇到的問題

點擊關閉窗口

<a href="javascript.:top.window.close();">點擊關閉窗口</a>！

請問如何去掉主頁右面的滾動條？

如何做到讓一個網頁自動關閉.

<html>

<head>

</object>

</head>

<body >

這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

如何在不刷新頁面的情況下刷新css?

<style>

button{ color:#000000;}

</style>

<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為　　紅色</button>

請問如何讓網頁自動刷新？

在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新，你可以更改為任意值。

如何讓頁面自動刷新？

方法一，用refresh

HTML 代碼片段如下:

<head>

</head>

5表示刷新時間

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運行]

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</SCRIPT>

如何讓超鏈接沒有下劃線

在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：

a { text-decoration: none}

--> </style>

請問如何去掉IE的上下滾動條？

</body>

怎樣才能把RealPlayer文件在網頁做一個試聽連接？

如何用html實現瀏覽器上后退按鈕的功能？

或者

html代碼大全：你不一定知道的技巧

16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

　　<table borderncontextmenu=return(false)><td>no</table> 可用于Table

17. <body nselectstart="return false"> 取消選取、防止復制

18.onpaste="return false" 不準粘貼

19.oncopy="return false;" ncut="return false;" 防止復制

20. <link rel="Shortcut Icon"href="favicon.ico"> IE地址欄前換成自己的圖標

21. <link rel="Bookmark"href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

22. <inputstyle="ime-mode:disabled"> 關閉輸入法

23. 永遠都會帶著框架

if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁

// --></script>

24. 防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

25. 網頁將不能被另存為

26. 查看網頁源代碼

<input type=button value=查看網頁源代碼

onclick="window.location = "view-source:"+"http://www.pconline.com.cn"">

27.刪除時確認

28.屏蔽功能鍵Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!");//可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

29. 網頁不會被緩存

<META. HTTP-EQUIV="pragma" CONTENT="no-cache">

<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">

<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

或者<META. HTTP-EQUIV="expires"CONTENT="0">

30.怎樣讓表單沒有凹凸感？

或 <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>

31.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

32.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

33.電子郵件處理提交表單

<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

</form>

34.在打開的子窗口刷新父窗口的代碼里如何寫？

window.opener.location.reload()

35.如何設定打開頁面的大小

打開頁面的位置<bodynload="top.moveBy(300,200);">

36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

37. 檢查一段字符串是否全由數字組成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

38. 獲得一個窗口的大小

document.body.clientWidth; document.body.clientHeight

39. 怎么判斷是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

else alert("全是字符");

40.TEXTAREA自適應文字行數的多少

</textarea>

41. 日期減去天數等于第二個日期

function cc(dd,dadd)

{

//可以加上錯誤處理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

</script>

42. 選擇了哪一個Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio"value="style" checked>Style.

<INPUT name="radio1" type="radio"value="barcode">Barcode

</BODY></HTML>

43.腳本永不出錯

<SCRIPT. LANGUAGE="JavaScript">

</SCRIPT>

44.ENTER鍵可以讓光標移到下一個輸入框

文末再提兩點建議吧：

剛學前端JavaScript的時候，一定不要追求速成，編程不比其他傳統行業，可以快速的上手，他需要一定的代碼量積累起來，不然你追求速成很可能會車毀人亡。
這個文章到這里就說完了，想要前端學習資料的進我的群自助領取，已經上傳到群文件里了：574462090，歡迎初學和進階中的小伙伴。

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘前端根據地’關注后回復‘給我資料’可以領取一套完整的學習視頻

TML即超文本標記語言，是目前應用最為廣泛的語言之一，是組成一個網頁的主要語言。在現今這個HTML5華麗麗地占領了整個互聯網的時候，如果想要通過網頁抓住瀏覽者的眼球光靠因循守舊是不行的，程序猿們需要掌握一些必須知道的HTML常用代碼，因為只有熟悉掌握了常用的HTML代碼，程序猿們在編寫網頁的時候才可以做到流暢美觀，用細膩的思維和創意的細節效果打動并留住網頁瀏覽者。

html+css代碼

文本設置

1、font-size: 字號參數

2、font-style: 字體格式

3、font-weight: 字體粗細

4、顏色屬性

color: 參數

注意使用網頁安全色

超鏈接設置

text-decoration: 參數

主要用途是改變瀏覽器顯示文字鏈接時的下劃線。

參數取值范圍：

underline：為文字加下劃線

overline：為文字加上劃線

line-through：為文字加刪除線

blink：使文字閃爍

none：不顯示上述任何效果

背景

1、背景顏色

background-color: 參數

2、背景圖片

background-image: url(URL)

URL就是背景圖片的存放路徑，none表示無。

3、背景圖片重復

background-repeat: 參數

參數取值范圍：

no-repeat：不重復平鋪背景圖片

repeat-x：使圖片只在水平方向上平鋪

repeat-y：使圖片只在垂直方向上平鋪

如果不指定背景圖片重復屬性，瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。

4、背景圖片固定

背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時轉移瀏覽者的注意力，一般都設為固定

background-attachment: 參數

參數取值范圍：

fixed：網頁滾動時，背景圖片相對于瀏覽器的窗口而言，固定不動

scroll：網頁滾動時，背景圖片相對于瀏覽器的窗口而言，一起滾動

區塊

1、單詞間距

word-spacing: 間隔距離

2、字母間距

letter-spacing: 字母間距

3、文本對齊

text-align: 參數

參數的取值：

left：左對齊

right：右對齊

center：居中對齊

justify：相對左右對齊

4、垂直對齊

vertical-align: 參數

top：頂對齊

bottom：底對齊

text-top：相對文本頂對齊

text-bottom：相對文本底對齊

baseline：基準線對齊

middle：中心對齊

sub：以下標的形式顯示

super：以上標的形式顯示

5、文本縮進

text-indent: 縮進距離

12px相當于一個文字距離

6、空格

white-space: 參數

normal 正常

pre 保留

nowrap 不換行

7、顯示樣式

display: 參數

參數取值范圍：

block：塊級元素，在對象前后都換行

inline：在對象前后都不換行

list-item：在對象前后都換行，增加了項目符號

none：無顯示

方框

1、height 高度

2、width 寬度

3、padding 內邊距

4、margin 外邊距

5、float（浮動）：可以讓塊級元素在一行中排列，例如橫向菜單。

6、clear 清除浮動

邊框

1、樣式

border style 參數

邊框樣式的參數：

none：無邊框

dotted：邊框為點線

dashed：邊框為長短線

solid：邊框為實線

double：邊框為雙線

2、寬度

border width 參數

3、顏色

border color 參數

列表

list-style-type 列表樣式

不同瀏覽器的列表符可能不相同，可能會影響到網頁，所以網頁中的列表大多都是由背景圖片顯示。

控制用戶界面的樣式

鼠標

cursor：鼠標形狀參數

CSS鼠標形狀參數表：

鼠標形狀：CSS代碼

style="cursor:hand" 　　　　　手形

style="cursor:crosshair" 　　十字形

style="cursor:text" 　　　　　文本形

style="cursor:wait" 　　　　　沙漏形

style="cursor:move" 　　　　十字箭頭形：

style="cursor:help" 　　　　　問號形

style="cursor:e-resize" 　　　右箭頭形

style="cursor:n-resize" 　　　上箭頭形

style="cursor:nw-resize" 　　左上箭頭形

style="cursor:w-resize" 　　　左箭頭形

style="cursor:s-resize" 　　　下箭頭形

style="cursor:se-resize" 　　右下箭頭形

style="cursor:sw-resize" 　　左下箭頭形

HTML常用代碼之：結構性定義

文件類型<HTML></HTML> （放在檔案的開頭與結尾）

文件主題<TITLE></TITLE> （必須放在「文頭」區塊內）

文頭<HEAD></HEAD> （描述性資料，像是「主題」）

文體<BODY></BODY> （文件本體）

標題<H?></H?> （從1到6，有六層選擇）

標題的對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>

區分<DIV></DIV>

區分的對齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區塊<BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）

強調<EM></EM> （通常會以斜體顯示）

特別強調<STRONG></STRONG> （通常會以加粗顯示）

引文<CITE></CITE> （通常會以斜體顯示）

碼<CODE></CODE> （顯示原始碼之用）

樣本<SAMP></SAMP>

鍵盤輸入<KBD></KBD>

變數<VAR></VAR>

定義<DFN></DFN> （有些瀏覽器不提供）

地址 <ADDRESS></ADDRESS>

大字<BIG></BIG>

小字<SMALL></SMALL>

與外觀相關的標簽（作者自訂的表現方式）

加粗<B></B>

斜體<I></I>

底線<U></U> （尚有些瀏覽器不提供）

刪除線<S></S> （尚有些瀏覽器不提供）

下標<SUB></SUB>

上標<SUP></SUP>

打字機體<TT></TT> （用單空格字型顯示）

預定格式<PRE></PRE> （保留文件中空格的大小）

預定格式的寬度<PRE WIDTH=?></PRE>（以字元計算）

向中看齊<CENTER></CENTER> （文字與圖片都可以）

閃耀<BLINK></BLINK> （有史以來最被嘲弄的標簽）

字體大小 <FONTSIZE=?></FONT>（從1到7）

改變字體大小 <FONTSIZE=+|-?></FONT>

基本字體大小 <BASEFONTSIZE=?> （從1到7; 內定為3）

字體顏色 <FONTCOLOR="#$$"></FONT>（$$為顏色代碼）

HTML常用代碼之：修改頁面的實用性HTML代碼

貼圖：<img src="圖片地址">

加入連接：<a href="所要連接的相關地址">寫上你想寫的字</a>

在新窗口打開連接：<a href="相關地址" target="_blank">寫上要寫的字</a>

移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

字體加粗：<b>寫上你想寫的字</b>

字體斜體：<i>寫上你想寫的字</i>

字體下劃線: <u>寫上你想寫的字</u>

字體刪除線: <s>寫上你想寫的字</s>

字體加大: <big>寫上你想寫的字</big>

字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

消除連接的下劃線：<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

貼音樂：<embed src="音樂地址" width="寬度" height="高度" autostart=false>

貼flash: <embed src="flash地址" width="寬度" height="高度">

貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

換行：<br>

段落：<p>段落</p>

原始文字樣式：<pre>正文</pre>

換帖子背景：<body background="背景圖片地址">

固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body bgproperties=fixed>

定制帖子背景顏色：<body bgcolor="#value">(value值見10)

帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>

貼網頁：<iframe. src="相關地址" width="寬度" height="高度"></iframe>

HTML常用代碼之：常常會遇到的問題

點擊關閉窗口

<a href="javascript.:top.window.close();">點擊關閉窗口</a>！

請問如何去掉主頁右面的滾動條？

如何做到讓一個網頁自動關閉.

<html>

<head>

</object>

</head>

<body >

這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

如何在不刷新頁面的情況下刷新css?

<style>

button{ color:#000000;}

</style>

<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為　　紅色</button>

請問如何讓網頁自動刷新？

在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新，你可以更改為任意值。

如何讓頁面自動刷新？

方法一，用refresh

HTML 代碼片段如下:

<head>

</head>

5表示刷新時間

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運行]

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</SCRIPT>

如何讓超鏈接沒有下劃線

在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：

a { text-decoration: none}

--> </style>

請問如何去掉IE的上下滾動條？

</body>

怎樣才能把RealPlayer文件在網頁做一個試聽連接？

如何用html實現瀏覽器上后退按鈕的功能？

或者

HTML常用代碼之：你不一定知道的技巧

ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

<table borderncontextmenu=return(false)><td>no</table> 可用于Table

<body nselectstart="return false"> 取消選取、防止復制

onpaste="return false" 不準粘貼

oncopy="return false;" ncut="return false;" 防止復制

<inputstyle="ime-mode:disabled"> 關閉輸入法

永遠都會帶著框架

if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁

// --></script>

防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

網頁將不能被另存為

查看網頁源代碼

<input type=button value=查看網頁源代碼

onclick="window.location = "view-source:"+"http://www.w3cschool.cn"">

刪除時確認

屏蔽功能鍵Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!");//可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

網頁不會被緩存

<META. HTTP-EQUIV="pragma" CONTENT="no-cache">

<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">

<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

或者<META. HTTP-EQUIV="expires"CONTENT="0">

怎樣讓表單沒有凹凸感？

不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

電子郵件處理提交表單

<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

</form>

在打開的子窗口刷新父窗口的代碼里如何寫？

window.opener.location.reload()

如何設定打開頁面的大小

打開頁面的位置<bodynload="top.moveBy(300,200);">

在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

檢查一段字符串是否全由數字組成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

獲得一個窗口的大小

document.body.clientWidth; document.body.clientHeight

怎么判斷是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

else alert("全是字符");

TEXTAREA自適應文字行數的多少

</textarea>

日期減去天數等于第二個日期

function cc(dd,dadd)

{

//可以加上錯誤處理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

</script>

選擇了哪一個Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio"value="style" checked>Style.

<INPUT name="radio1" type="radio"value="barcode">Barcode

</BODY></HTML>

lt;marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=left></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定卷動距離

<marquee scrolldelay=300>...</marquee>設定卷動時間

<!>字體效果

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

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

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

<strong>...</strong>粗體字(強調)

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

<em>...</em>斜體字(強調)

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

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

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

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

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

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

<kbd>...</kbd>鍵盤文字

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

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

<plaintext>...</plaintext>固定寬度字體(不執行標記符號)

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

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

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

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

<!>區斷標記

<hr>水平線

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

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

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

<br>(換行)

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

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

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

<!>連結格式

<base href=位址>(預設好連結路徑)

<a href=位址></a>外部連結

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

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

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

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設定圖片寬度

<img src=圖片位址 height=30>設定圖片高度

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

<img src=圖片位址 border=1>設定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設定

<!>表格語法

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

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

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

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

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

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

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

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

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

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

<table cols=參數>...</table>指定表格的欄數

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

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

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

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

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

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整

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

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

<分割上下兩個框架

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

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

<a href target> 指定超連結的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結

<a href> 指定超連結

<a name=錨的名稱> 被連結點的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結的分割視窗

<basefont size> 更改預設字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設定表格標題位置

<caption>...</caption> 為表格加上標題

<center> 向中對齊

<cite>...<cite> 用於引經據典的文字

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

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

<dd> 設定定義列表的項目解說

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

<dir>...</dir> 列表文字標簽

<dl>...</dl> 設定定義列表的標簽

<dt> 設定定義列表的項目

<em> 強調之用

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

<font size> 設定字體大小

<form action> 設定戶動式表單的處理方式

<form method> 設定戶動式表單之資料傳送方式

<frame marginheight> 設定視窗的上下邊界

<frame marginwidth> 設定視窗的左右邊界

<frame name> 為分割視窗命名

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

<frame scrolling> 設定分割視窗的卷軸

<frame src> 將html檔加入視窗

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

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

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

<h1>~<h6> 設定文字大小

<head> 標示文件資訊

<hr> 加上分格線

<html> 文件的開始與結束

<i> 斜體字

<img align> 調整圖形影像的位置

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

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預設圖形大小

<img hspace> 插入圖片并預設圖形的左右邊界

<img lowsrc> 預載圖片功能

<img src border> 設定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預設圖形的上下邊界

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

<isindex> 定義查詢用表單

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

<li type>...</li> 列表的項目 ( 可指定符號 )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標簽

<multiple> 可同時選擇多項的列表欄

<noframe> 定義不出現分割視窗的文字

<ol>...</ol> 有序號的列表

<option> 定義表單中列表欄的項目

<p align> 設定對齊方向

<p> 分段

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

<pre> 使用原有排列

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

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

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強語氣

<sub> 下標字

<sup> 上標字

<table border=n> 調整表格的寬線高度

<table cellpadding> 調整資料欄位之邊界

<table cellspacing> 調整表格線的寬度

<table height> 調整表格的高度

<table width> 調整表格的寬度

<table>...</table> 產生表格的標簽

<td align> 調整表格欄位之左右對齊

<td bgcolor> 設定表格欄位之背景顏色

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

<td nowrap> 設定表格欄位不換行

<td valign> 調整表格欄位之上下對齊

<td width> 調整表格欄位寬度

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

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

<textarea wrap> 決定文字輸入欄是自動否換行

<th>...</th> 定義表格的標頭欄位

<title> 文件標題

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

<tt> 打字機字體

<u> 文字加底線

<ul type>...</ul> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數

在線咨詢

上一篇：HTML里h1~h6標簽和p標簽里的內容不會自動換行？
下一篇：高頻JavaScript手寫面試題及答案

您的項目需求

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

整合營銷服務商

HTML常用全部代碼，你懂，你不想成功都難

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘前端根據地’關注后回復‘給我資料’可以領取一套完整的學習視頻

您的項目需求