當前位置:吉日网官网 - 紀念幣收藏 - 程序員必須知道的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>!

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

<body scroll="no">

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

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

<html>

<head>

<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

<param name="Command" value="Close">

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

<meta. "">

刪除時確認

<a href="javascript:if(confirm("確實要刪除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>

屏蔽功能鍵Shift,Alt,Ctrl

<script>

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

怎樣讓表單沒有凹凸感?

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

讓橫條沒有:

<body style="overflow:scroll;overflow-x:hidden">

</body>

兩個都去掉?更簡單了

<body scroll="no">

</body>

怎樣去掉圖片鏈接點擊後,圖片周圍的虛線?

<a href="#"nFocus="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 nload="top.resizeTo(300,200);">

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

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

<STYLE>

body

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

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

</STYLE>

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

<script. language="Javascript"><!--

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=27npropertychange="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

<HTML><script. language="vbscript">

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

腳本永不出錯

<SCRIPT. LANGUAGE="JavaScript">

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

</SCRIPT>

ENTER鍵可以讓光標移到下壹個輸入框

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

  • 上一篇:社區綜治人員的先進事跡
  • 下一篇:簡述歌劇的發展歷程(西方音樂)
  • copyright 2024吉日网官网