編程教程程序員必須知道的HTML常用代碼有哪些？
HTML 即超文本標記語言，是目前應用最為廣泛的語言之一，是組成一個網頁的主要語言。在現今這個 HTML5 華麗麗地占領了整個互聯網的時候，如果想要通過網頁抓住瀏覽者的眼球光靠因循守舊是不行的，程序猿們需要掌握一些必須知道的 HTML 常用代碼，因為只有熟悉掌握了常用的 HTML 代碼，程序猿們在編寫網頁的時候才可以做到流暢美觀，用細膩的思維和創意的細節效果打動并留住網頁瀏覽者。
HTML+CSS 代碼
文本設置
| font-size | 字號大小 |
| font-style | 字體格式 |
| font-weight | 字體粗細 |
| color | 文本顏色 |
提示:注意使用網頁安全色.
超鏈接設置
| text-decoration | 參數 |
| underline | 為文字加下劃線 |
| overline | 為文字加上劃線 |
| line-through | 為文字加刪除線 |
| blink | 使文字閃爍 |
| none | 不顯示上述任何效果 |
背景
| background-color | 設置背景色 | |
| 背景圖片 | background-image: url(URL) | URL就是背景圖片的存放路徑，none表示無。 |
| 背景圖片重復 | background-repeat: 參數 | |
| 參數取值范圍 | ||
| no-repeat | 不重復平鋪背景圖片 | |
| repeat-x | 使圖片只在水平方向上平鋪 | |
| repeat-y | 使圖片只在垂直方向上平鋪 | 如果不指定背景圖片重復屬性，瀏覽器默認的是背景圖片向水平和垂直兩個方向平鋪 |
| 背景圖片固定 | background-attachment: 參數 | |
| 參數取值范圍 | fixed：網頁滾動時，背景圖片相對于瀏覽器的窗口而言，固定不動 | scroll：網頁滾動時，背景圖片相對于瀏覽器的窗口而言，一起滾動 |
| 單詞間距 | word-spacing | |
| 字母間距 | letter-spacing | |
| 文本對齊 | text-align | |
| 參數的取值 | left：左對齊 right：右對齊 justify：相對左右兩端對齊 | |
| 垂直對齊 | vertical-align | |
| 參數 | top：頂對齊 bottom：底對齊 text-top：相對文本頂對齊 text-bottom：相對文本底對齊 baseline：基準線對齊 middle：中心對齊 sub：以下標的形式顯示 super：以上標的形式顯示 | |
| 文本縮進 | text-indent: 縮進距離 | |
| 顯示樣式 | display | block：塊級元素，在對象前后都換行 inline：在對象前后都不換行 list-item：在對象前后都換行，增加了項目符號 none：無顯示 |
方框
| height | 高度 |
| width | 寬度 |
| padding | 內邊距 |
| margin | 外邊距 |
| float（浮動） | 可以讓塊級元素在一行中排列，例如橫向菜單。 |
| clear | 清除浮動 |
邊框
| 樣式 | border style | none：無邊框 dotted：邊框為點線 dashed：邊框為長短線 solid：邊框為實線 double：邊框為雙線 |
| 寬度 | border width | |
| 顏色 | border color |
列表
| list-style-type | 列表樣式 | 不同瀏覽器的列表符可能不相同，可能會影響到網頁，所以網頁中的列表大多都是由背景圖片顯示 |
鼠標
| cursor | 鼠標形狀參數 | 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> |
| 標題 | 從1到6，有六層選擇 | <h?></h?> |
| 標題的對齊 | <h? align=left|center|right></h?> | |
| 區分 | <div></div> | |
| 區分的對齊 | <div align=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> | |
| 向中看齊 | 文字與圖片都可以 | <center></center> |
| 閃耀 | 有史以來最被嘲弄的標簽 | <blink></blink> |
HTML常用代碼之：常常會遇到的問題
點擊關閉窗口
實例
請問如何去掉主頁右面的滾動條？
實例
<body scroll="no">
<body style="overflow-y:hidden">
使用<object> 元素在 HTML 加入 Flash 文件
實例
<object width="300" height="300" data="helloworld.swf" >
如何在不刷新頁面的情況下刷新css?
實例
<style>
button{color:#000000;}
</style>
<button onclick=document.styleSheets[0].rules[0].style.color='red'>點擊按鈕直接修改style標簽里button選擇符使按鈕改為 紅色</button>
請問如何讓網頁自動刷新？
實例
方法一，用refresh
HTML 代碼片段如下:
<head>
<meta. http-equiv="refresh" content="3">
</head>
3表示刷新時間
方法二，使用setTimeout控制
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>
如何讓超鏈接沒有下劃線
實例
<style>
a { text-decoration: none}
</style>
如何用html實現瀏覽器上后退按鈕的功能？
實例
HTML常用代碼之：你不一定知道的技巧
實例
<link rel="Shortcut Icon"href="favicon.icon"> IE地址欄前換成自己的圖標
<link rel="Bookmark"href="favicon.icon"> 可以在收藏夾中顯示出你的圖標
<inputstyle="ime-mode:disabled"> 關閉輸入法
<body oncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵
onselectstart="return false" 取消選取
onpaste="return false" 不準粘貼
oncopy="return false;" 防止復制
oncut="return false;"> 防止剪切
永遠都會帶著框架
實例
<script language="JavaScript">
if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁
</script>
防止被人frame.
實例
<script>
if (top.location != self.location)top.location=self.location;
</script>
網頁將不能被另存為
實例
查看網頁源代碼
實例
刪除時確認
實例
<a href="" onclick="javascript:return del();">刪除</a>
<script>
function del() {
var msg = "您真的確定要刪除嗎？\n\n請確認！";
if (confirm(msg)==true){
return true;
}else{
return false;}}
</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">
怎樣讓表單沒有凹凸感？
實例
<input type=text style="border:1 solid #000000">
<input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>
<body style="overflow:scroll;overflow-y:hidden"> //滾動條豎條消失
<body style="overflow:scroll;overflow-x:hidden"> //滾動條橫條消失
<body scroll="no"> //兩種滾動條都消失
怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？
實例
<a href="#" onFocus="this.blur()">
<img src="logo.jpg"border=0></a>
電子郵件處理提交表單
實例
<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">
<input type=submit>
</form>
在打開的子窗口刷新父窗口的代碼里如何寫？
實例
window.opener.location.reload()
如何設定打開頁面的大小
實例
<body onload="top.resizeTo(300,200);">
<body onload="top.moveBy(300,200);"> //打開頁面的位置
在頁面中,如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動
實例
body {background-image:url(logo.gif);
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed}
檢查一段字符串是否全由數字組成
實例
<script>
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 rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>
日期減去天數等于第二個日期
實例
<script. language=Javascript>
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
實例
<script>
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script>
<body>
<input name="radio1" type="radio"value="style" checked>Style.
<input name="radio1" type="radio"value="barcode">Barcode
<input type="button" value="check"nclick="checkme()">
</body>
腳本永不出錯
實例
<SCRIPT>
<Hide function killErrors(){return true;} window.onerror = killErrors;>
</SCRIPT>
ENTER鍵可以讓光標移到下一個輸入框
實例
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
HTML 特殊符號編碼對照表
| 特殊符號 | 命名實體 | 十進制編碼 | 特殊符號 | 命名實體 | 十進制編碼 | 特殊符號 | 命名實體 | 十進制編碼 |
| Α | Α | Α | Β | Β | Β | Γ | Γ | Γ |
| Δ | Δ | Δ | Ε | Ε | Ε | Ζ | Ζ | Ζ |
| Η | Η | Η | Θ | Θ | Θ | Ι | Ι | Ι |
| Κ | Κ | Κ | Λ | Λ | Λ | Μ | Μ | Μ |
| Ν | Ν | Ν | Ξ | Ξ | Ξ | Ο | Ο | Ο |
| Π | Π | Π | Ρ | Ρ | Ρ | Σ | Σ | Σ |
| Τ | Τ | Τ | Υ | Υ | Υ | Φ | Φ | Φ |
| Χ | Χ | Χ | Ψ | Ψ | Ψ | Ω | Ω | Ω |
| α | α | α | β | β | β | γ | γ | γ |
| δ | δ | δ | ε | ε | ε | ζ | ζ | ζ |
| η | η | η | θ | θ | θ | ι | ι | ι |
| κ | κ | κ | λ | λ | λ | μ | μ | μ |
| ν | ν | ν | ξ | ξ | ξ | ο | ο | ο |
| π | π | π | ρ | ρ | ρ | ? | ς | ς |
| σ | σ | σ | τ | τ | τ | υ | υ | υ |
| φ | φ | φ | χ | χ | χ | ψ | ψ | ψ |
| ω | ω | ω | ? | ϑ | ϑ | ? | ϒ | ϒ |
| ? | ϖ | ϖ | ? | • | • | … | … | … |
| ′ | ′ | ′ | ″ | ″ | ″ | ￣ | ‾ | ‾ |
| ? | ⁄ | ⁄ | ? | ℘ | ℘ | ? | ℑ | ℑ |
| ? | ℜ | ℜ | ? | ™ | ™ | ? | ℵ | ℵ |
| ← | ← | ← | ↑ | ↑ | ↑ | → | → | → |
| ↓ | ↓ | ↓ | ? | ↔ | ↔ | ? | ↵ | ↵ |
| ? | ⇐ | ⇐ | ? | ⇑ | ⇑ | ? | ⇒ | ⇒ |
| ? | ⇓ | ⇓ | ? | ⇔ | ⇔ | ? | ∀ | ∀ |
| ? | ∂ | ∂ | ? | ∃ | ∃ | ? | ∅ | ∅ |
| ? | ∇ | ∇ | ∈ | ∈ | ∈ | ? | ∉ | ∉ |
| ? | ∋ | ∋ | ∏ | ∏ | ∏ | ∑ | ∑ | − |
| ? | − | − | ? | ∗ | ∗ | √ | √ | √ |
| ∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
| ∧ | ∧ | ⊥ | ∨ | ∨ | ⊦ | ∩ | ∩ | ∩ |
| ∪ | ∪ | ∪ | ∫ | ∫ | ∫ | ∴ | ∴ | ∴ |
| ～ | ∼ | ∼ | ? | ≅ | ≅ | ≈ | ≈ | ≅ |
| ≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
| ≥ | ≥ | ≥ | ? | ⊂ | ⊂ | ? | ⊃ | ⊃ |
| ? | ⊄ | ⊄ | ? | ⊆ | ⊆ | ? | ⊇ | ⊇ |
| ⊕ | ⊕ | ⊕ | ? | ⊗ | ⊗ | ⊥ | ⊥ | ⊥ |
| ? | ⋅ | ⋅ | ? | ⌈ | ⌈ | ? | ⌉ | ⌉ |
| ? | ⌊ | ⌊ | ? | ⌋ | ⌋ | ? | ◊ | ◊ |
| ? | ♠ | ♠ | ? | ♣ | ♣ | ? | ♥ | ♥ |
| ? | ♦ | ♦ | |   | ? | ¡ | ¡ | |
| ￠ | ¢ | ¢ | ￡ | £ | £ | ¤ | ¤ | ¤ |
| ￥ | ¥ | ¥ | | | ¦ | ¦ | § | § | § |
| ¨ | ¨ | ¨ | ? | © | © | a | ª | ª |
| ? | « | « | ? | ¬ | ¬ | - | ­ | ­ |
| ? | ® | ® | ˉ | ¯ | ¯ | ° | ° | ° |
| ± | ± | ± | 2 | ² | ² | 3 | ³ | ³ |
| ′ | ´ | ´ | μ | µ | µ | " | " | " |
| < | < | < | > | > | > | ' | ' |