程序員必須知道的HTML常用代碼有哪些？

2022-03-28 16:10 更新

HTML 即超文本標(biāo)記語言，是目前應(yīng)用最為廣泛的語言之一，是組成一個(gè)網(wǎng)頁的主要語言。在現(xiàn)今這個(gè) HTML5 華麗麗地占領(lǐng)了整個(gè)互聯(lián)網(wǎng)的時(shí)候，如果想要通過網(wǎng)頁抓住瀏覽者的眼球光靠因循守舊是不行的，程序猿們需要掌握一些必須知道的 HTML 常用代碼，因?yàn)橹挥惺煜ふ莆樟顺Ｓ玫?HTML 代碼，程序猿們?cè)诰帉懢W(wǎng)頁的時(shí)候才可以做到流暢美觀，用細(xì)膩的思維和創(chuàng)意的細(xì)節(jié)效果打動(dòng)并留住網(wǎng)頁瀏覽者。


HTML+CSS 代碼

文本設(shè)置

 font-size  字號(hào)大小
 font-style  字體格式
 font-weight   字體粗細(xì)
 color  文本顏色

提示:注意使用網(wǎng)頁安全色.

超鏈接設(shè)置 

 text-decoration  參數(shù)
 underline  為文字加下劃線
 overline  為文字加上劃線
 line-through  為文字加刪除線
 blink  使文字閃爍
 none  不顯示上述任何效果

背景 

 background-color  設(shè)置背景色  
 背景圖片  background-image: url(URL)  URL就是背景圖片的存放路徑，none表示無。
 背景圖片重復(fù)  background-repeat: 參數(shù)  
 參數(shù)取值范圍    
 no-repeat  不重復(fù)平鋪背景圖片  
 repeat-x  使圖片只在水平方向上平鋪  
 repeat-y  使圖片只在垂直方向上平鋪  如果不指定背景圖片重復(fù)屬性，瀏覽器默認(rèn)的是背景圖片向水平和垂直兩個(gè)方向平鋪
 背景圖片固定  background-attachment: 參數(shù)  
 參數(shù)取值范圍  fixed：網(wǎng)頁滾動(dòng)時(shí)，背景圖片相對(duì)于瀏覽器的窗口而言，固定不動(dòng)  scroll：網(wǎng)頁滾動(dòng)時(shí)，背景圖片相對(duì)于瀏覽器的窗口而言，一起滾動(dòng)
區(qū)塊
 單詞間距    word-spacing
 字母間距    letter-spacing
 文本對(duì)齊    text-align
 參數(shù)的取值    left：左對(duì)齊
 right：右對(duì)齊
justify：相對(duì)左右兩端對(duì)齊
 垂直對(duì)齊    vertical-align
 參數(shù)    top：頂對(duì)齊
 bottom：底對(duì)齊
text-top：相對(duì)文本頂對(duì)齊
text-bottom：相對(duì)文本底對(duì)齊
 baseline：基準(zhǔn)線對(duì)齊
middle：中心對(duì)齊
sub：以下標(biāo)的形式顯示
super：以上標(biāo)的形式顯示
 文本縮進(jìn)    text-indent: 縮進(jìn)距離
 顯示樣式  display  block：塊級(jí)元素，在對(duì)象前后都換行
 inline：在對(duì)象前后都不換行
list-item：在對(duì)象前后都換行，增加了項(xiàng)目符號(hào) 
none：無顯示



方框

 height 高度 
 width  寬度 
 padding  內(nèi)邊距 
 margin  外邊距 
 float（浮動(dòng)） 可以讓塊級(jí)元素在一行中排列，例如橫向菜單。
 clear  清除浮動(dòng)

邊框

 樣式 border style  none：無邊框  
dotted：邊框?yàn)辄c(diǎn)線 
dashed：邊框?yàn)殚L(zhǎng)短線 
solid：邊框?yàn)閷?shí)線 
double：邊框?yàn)殡p線 
寬度   border width
顏色   border color

列表

 list-style-type 列表樣式  不同瀏覽器的列表符可能不相同，可能會(huì)影響到網(wǎng)頁，所以網(wǎng)頁中的列表大多都是由背景圖片顯示

鼠標(biāo)

 cursor 鼠標(biāo)形狀參數(shù)   style="cursor:hand" 　　　　　手形 
style="cursor:crosshair" 　　十字形 
style="cursor:text" 　　　　　文本形 
style="cursor:wait" 　　　　　沙漏形 
style="cursor:move" 　　　　十字箭頭形： 
style="cursor:help" 　　　　　問號(hào)形 
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常用代碼之：結(jié)構(gòu)性定義

 文件類型  放在檔案的開頭與結(jié)尾 <html></html>
 文件主題  必須放在「文頭」區(qū)塊內(nèi)  <title></title>
 文頭  描述性資料，像是「主題」 <head></head>
 文體  文件本體 <body></body>
標(biāo)題  從1到6，有六層選擇  <h?></h?>
標(biāo)題的對(duì)齊    <h? align=left|center|right></h?>
區(qū)分    <div></div>
區(qū)分的對(duì)齊    <div align=left|right|center|justify></div>
引文區(qū)塊    <blockquote></blockquote>
強(qiáng)調(diào)  通常會(huì)以斜體顯示 <em></em>
特別強(qiáng)調(diào)  通常會(huì)以加粗顯示 <strong></strong>
引文  通常會(huì)以斜體顯示 <cite></cite>
 碼 顯示原始碼之用  <code></code>
樣本    <samp></samp>
鍵盤輸入    <kbd></kbd>
變數(shù)    <var></var>
定義  有些瀏覽器不提供 <dfn></dfn>
地址    <address></address>
大字    <big></big>
小字    <small></small>
加粗    <b></b>
斜體    <I></I>
底線    <u></u>
刪除線    <s></s>
下標(biāo)    <sub></sub>
上標(biāo)    <sup></sup>
打字機(jī)體    <tt></tt> 
預(yù)定格式    <pre></pre>
向中看齊  文字與圖片都可以 <center></center> 
閃耀  有史以來最被嘲弄的標(biāo)簽 <blink></blink>


HTML常用代碼之：常常會(huì)遇到的問題

點(diǎn)擊關(guān)閉窗口

實(shí)例

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

嘗試一下 ?

請(qǐng)問如何去掉主頁右面的滾動(dòng)條？

實(shí)例

<body scroll="no"> 

<body style="overflow-y:hidden">


嘗試一下 ?

使用<object> 元素在 HTML 加入 Flash 文件

實(shí)例

<object width="300" height="300" data="helloworld.swf" >


嘗試一下 ?

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

實(shí)例

<style> 

button{color:#000000;} 

</style> 

<button onclick=document.styleSheets[0].rules[0].style.color='red'>點(diǎn)擊按鈕直接修改style標(biāo)簽里button選擇符使按鈕改為　　紅色</button> 


嘗試一下 ?

請(qǐng)問如何讓網(wǎng)頁自動(dòng)刷新？

實(shí)例

 方法一，用refresh

HTML 代碼片段如下: 

<head> 

<meta. http-equiv="refresh" content="3">  

</head> 

3表示刷新時(shí)間 

方法二，使用setTimeout控制 

<img src=/logo.gif> 

<script> 

function rl(){ 

document.location.reload() 

} 

setTimeout(rl,2000) 

</SCRIPT>


嘗試一下 ?

如何讓超鏈接沒有下劃線

實(shí)例

<style> 

a { text-decoration: none} 

 </style>


嘗試一下 ?

如何用html實(shí)現(xiàn)瀏覽器上后退按鈕的功能？ 

實(shí)例

<a href="java script:history.go(-1)">點(diǎn)擊后退</a> 

嘗試一下 ?


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

實(shí)例

<link rel="Shortcut Icon"href="favicon.icon"> IE地址欄前換成自己的圖標(biāo)

<link rel="Bookmark"href="favicon.icon"> 可以在收藏夾中顯示出你的圖標(biāo)

<inputstyle="ime-mode:disabled"> 關(guān)閉輸入法

<body  oncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標(biāo)右鍵 

onselectstart="return false" 取消選取 

onpaste="return false" 不準(zhǔn)粘貼 

oncopy="return false;" 防止復(fù)制

oncut="return false;"> 防止剪切


嘗試一下 ?

永遠(yuǎn)都會(huì)帶著框架 

實(shí)例

<script language="JavaScript">

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

</script>


嘗試一下 ?

 防止被人frame.

實(shí)例

<script>

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

</script>


嘗試一下 ?

 網(wǎng)頁將不能被另存為

實(shí)例

<noscript><iframe src=*.html></iframe></noscript>

嘗試一下 ?

 查看網(wǎng)頁源代碼

實(shí)例

<input type=button value=查看網(wǎng)頁源代碼 onclick="window.location = "view-source:"+"http://o2fo.com"">

嘗試一下 ?

刪除時(shí)確認(rèn)

實(shí)例

<a href="" onclick="javascript:return del();">刪除</a>

<script> 

function del() {

var msg = "您真的確定要?jiǎng)h除嗎？\n\n請(qǐng)確認(rèn)！";

if (confirm(msg)==true){

return true;

}else{

return false;}}

</script>

嘗試一下 ?

 網(wǎng)頁不會(huì)被緩存 

實(shí)例

<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">


嘗試一下 ?

怎樣讓表單沒有凹凸感？

實(shí)例

<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"> //滾動(dòng)條豎條消失

<body style="overflow:scroll;overflow-x:hidden"> //滾動(dòng)條橫條消失

<body scroll="no"> //兩種滾動(dòng)條都消失


嘗試一下 ?

怎樣去掉圖片鏈接點(diǎn)擊后，圖片周圍的虛線？

實(shí)例

<a href="#" onFocus="this.blur()">

<img src="logo.jpg"border=0></a>


嘗試一下 ?

電子郵件處理提交表單

實(shí)例

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

<input type=submit> 

</form>


嘗試一下 ?

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

實(shí)例

window.opener.location.reload()

如何設(shè)定打開頁面的大小

實(shí)例

<body onload="top.resizeTo(300,200);"> 

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


嘗試一下 ?

在頁面中,如何加入不是滿鋪的背景圖片,拉動(dòng)頁面時(shí)背景圖不動(dòng)

實(shí)例

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

background-repeat:no-repeat; 

background-position:center;

background-attachment: fixed}


嘗試一下 ?

 檢查一段字符串是否全由數(shù)字組成

實(shí)例

<script>

function checkNum(str){return str.match(/\\D/) == null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))

</script>


嘗試一下 ?

獲得一個(gè)窗口的大小

實(shí)例

document.body.clientWidth; 

document.body.clientHeight;

怎么判斷是否是字符

實(shí)例

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

else alert("全是字符");


TEXTAREA自適應(yīng)文字行數(shù)的多少

實(shí)例

<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> 

</textarea>


嘗試一下 ?

 日期減去天數(shù)等于第二個(gè)日期

實(shí)例

<script. language=Javascript> 

function cc(dd,dadd) 

{ 

//可以加上錯(cuò)誤處理 

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>


 選擇了哪一個(gè)Radio

實(shí)例

<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>


嘗試一下 ?

腳本永不出錯(cuò)

實(shí)例

<SCRIPT> 

<Hide function killErrors(){return true;} window.onerror = killErrors;> 

</SCRIPT>


嘗試一下 ?

ENTER鍵可以讓光標(biāo)移到下一個(gè)輸入框

實(shí)例

<input onkeydown="if(event.keyCode==13)event.keyCode=9">


HTML 特殊符號(hào)編碼對(duì)照表

特殊符號(hào) 命名實(shí)體 十進(jìn)制編碼 特殊符號(hào) 命名實(shí)體 十進(jìn)制編碼 特殊符號(hào) 命名實(shí)體 十進(jìn)制編碼
Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915;
Δ &Delta; &#916; Ε &Epsilon; &#917; Ζ &Zeta; &#918;
Η &Eta; &#919; Θ &Theta; &#920; Ι &Iota; &#921;
Κ &Kappa; &#922; Λ &Lambda; &#923; Μ &Mu; &#924;
Ν &Nu; &#925; Ξ &Xi; &#926; Ο &Omicron; &#927;
Π &Pi; &#928; Ρ &Rho; &#929; Σ &Sigma; &#931;
Τ &Tau; &#932; Υ &Upsilon; &#933; Φ &Phi; &#934;
Χ &Chi; &#935; Ψ &Psi; &#936; Ω &Omega; &#937;
α &alpha; &#945; β &beta; &#946; γ &gamma; &#947;
δ &delta; &#948; ε &epsilon; &#949; ζ &zeta; &#950;
η &eta; &#951; θ &theta; &#952; ι &iota; &#953;
κ &kappa; &#954; λ &lambda; &#955; μ &mu; &#956;
ν &nu; &#957; ξ &xi; &#958; ο &omicron; &#959;
π &pi; &#960; ρ &rho; &#961; ? &sigmaf; &#962;
σ &sigma; &#963; τ &tau; &#964; υ &upsilon; &#965;
φ &phi; &#966; χ &chi; &#967; ψ &psi; &#968;
ω &omega; &#969; ? &thetasym; &#977; ? &upsih; &#978;
? &piv; &#982; ? &bull; &#8226; … &hellip; &#8230;
′ &prime; &#8242; ″ &Prime; &#8243; ￣ &oline; &#8254;
? &frasl; &#8260; ? &weierp; &#8472; ? &image; &#8465;
? &real; &#8476; ? &trade; &#8482; ? &alefsym; &#8501;
← &larr; &#8592; ↑ &uarr; &#8593; → &rarr; &#8594;
↓ &darr; &#8595; ? &harr; &#8596; ? &crarr; &#8629;
? &lArr; &#8656; ? &uArr; &#8657; ? &rArr; &#8658;
? &dArr; &#8659; ? &hArr; &#8660; ? &forall; &#8704;
? &part; &#8706; ? &exist; &#8707; ? &empty; &#8709;
? &nabla; &#8711; ∈ &isin; &#8712; ? &notin; &#8713;
? &ni; &#8715; ∏ &prod; &#8719; ∑ &sum; &#8722;
? &minus; &#8722; ? &lowast; &#8727; √ &radic; &#8730;
∝ &prop; &#8733; ∞ &infin; &#8734; ∠ &ang; &#8736;
∧ &and; &#8869; ∨ &or; &#8870; ∩ &cap; &#8745;
∪ &cup; &#8746; ∫ &int; &#8747; ∴ &there4; &#8756;
～ &sim; &#8764; ? &cong; &#8773; ≈ &asymp; &#8773;
≠ &ne; &#8800; ≡ &equiv; &#8801; ≤ &le; &#8804;
≥ &ge; &#8805; ? &sub; &#8834; ? &sup; &#8835;
? &nsub; &#8836; ? &sube; &#8838; ? &supe; &#8839;
⊕ &oplus; &#8853; ? &otimes; &#8855; ⊥ &perp; &#8869;
? &sdot; &#8901; ? &lceil; &#8968; ? &rceil; &#8969;
? &lfloor; &#8970; ? &rfloor; &#8971; ? &loz; &#9674;
? &spades; &#9824; ? &clubs; &#9827; ? &hearts; &#9829;
? &diams; &#9830;   &nbsp; &#160; ? &iexcl; &#161;
￠ &cent; &#162; ￡ &pound; &#163; ¤ &curren; &#164;
￥ &yen; &#165; | &brvbar; &#166; § &sect; &#167;
¨ &uml; &#168; ? &copy; &#169; a &ordf; &#170;
? &laquo; &#171; ? &not; &#172; - &shy; &#173;
? &reg; &#174; ˉ &macr; &#175; ° &deg; &#176;
± &plusmn; &#177; 2 &sup2; &#178; 3 &sup3; &#179;
′ &acute; &#180; μ &micro; &#181 " &quot; &#34;
< &lt; &#60; > &gt; &#62; '   &#39;






以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)