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，歡迎初學和進階中的小伙伴。

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

avaScript是一種基于瀏覽器的廣泛應用的腳本語言，嵌入于HTML頁面，用來增強網頁的交互功能。除了這些JavaScript還有響應瀏覽器事件、讀寫頁面元素、驗證提交數據、控制cookies、基于Node.js技術。JavaScript常用的是讀寫頁面元素和控制表單，今天為大家講一個簡單的JavaScript確認表單信息完整實例。

在html頁面中常見的是注冊表單，用戶提交數據之前，頁面會調用JavaScript檢查數據的完整性，檢查提交數據是否漏填、錯填等。如果有的重要數據項未填寫會終止提交動作，并且彈出警告框提示用戶，最終確保填寫數據準確有效。

實現過程

1、創建html文件form表單。

2、創建JavaScript代碼。

3、編寫提交數據驗證規則。

4、測試代碼。

代碼和運行效果如下：

JavaScript知識點總結

1、onsubmit 事件

這段代碼由HTML表單和JavaScript部分組成。需要注意的是 onsubmit 事件在表單提交時觸發JavaScript代碼，而這段代碼onsubmit="return check_sub();"，表示提交表單是會執行JavaScript代碼中的check_sub()函數。onsubmit 事件支持冒泡事件、不可以取消、事件類型是 Event、支持html中的<form>和<keygen>標簽。

2、check_sub()

JavaScript中，我們往往把功能相同的一段代碼寫封裝到一個獨立的模塊中，這個模塊就叫做函數（JavaScript中的函數概念和PHP中的概念相識的）。我們把主要把驗證用戶提交數據代碼都放在check_sub()函數中，它依次去判斷表單中的三個元素是否為空，密碼（sub_pwdone）和確認密碼（sub_pwdtwo）是否相同，如果所有數據填寫無誤后會提示“提交成功”。

3、a()函數

a()函數主要作用是根據頁面元素的“id”屬性獲得對頁面元素的引用，直接調用了“document.getElementById”方法，調用了5次a()函數，相當于使用了5次document.getElementById方法。a作為函數名僅僅是因為長度比較短，所以a()函數實際上是“document.getElementById”的簡寫。也可以不調用a()函數，直接使用“document.getElementById”方法，只不過代碼看起來有點繁瑣。

4、if...else語句

在編程中我們往往需要根據不同的條件來執行不同的動作，這個時候就可以用到if..else語句，if..else語句之前的文章詳細講解過，今天就不再重復說了。

關于“JavaScript確認表單信息完整的實例”先聊到這，還是要多多練習。每天學習一個知識點，每日寄語-“欲望以提升熱忱，毅力以磨平高山。”

04頁面是什么，有什么作用？

404頁面的目的是：告訴瀏覽者其所請求的頁面不存在或鏈接錯誤，同時引導用戶使用網站其他頁面而不是關閉窗口離開。

現在大部分開源系統都會為大家考慮到404頁面的跳轉引導，比如：z-blog/wordpress，都是很不錯的開源系統（注意不要用最原始的開源系統，而是采用帶有模板的系統）。菜鳥后院網站本身也是wordpress的開源程序，然后我們用robin模板。(花299元擁有和菜鳥后院一樣的網站，包括域名和1G阿里巴巴云空間)

頁面應該達到什么樣的效果才能滿足SEO的要求？

搜索引擎使用 http 狀態碼來識別網頁的狀態。當搜索引擎獲得不正確的鏈接時，網站應該返回一個狀態代碼404，告訴搜索引擎放棄索引該鏈接。如果返回一個200或302狀態代碼，搜索引擎會對鏈接進行索引，導致許多不同的鏈接指向相同的頁面內容。結果，搜索引擎對這個網站的信任度大大降低。很多網站存在這個問題，那就是404頁面返回的是200或302狀態碼而不是404狀態碼。

正確建立404頁面的方法是：（僅適合Apache服務器）

在.htaccess 文件中加入代碼： ErrorDocument 404 /Error.html
建立一個簡單的html404頁面命名 Error.html
把 Error.html放置在網站根目錄
如果碰到困難，參考本站：錯誤網頁
注意：不要將404錯誤直接，跳轉到網站首頁，這將導致首頁不被收錄，正確的做法是在404頁面加上一個返回首頁的鏈接，讓用戶判斷，并選擇是否返回首頁，或者返回其他頁面，這也是用戶體驗的一種表現，搜索引擎對于這種做法比較友好。
/Error.html 前面不要帶主域名，否則返回的狀態碼是302或200狀態碼。