常用html
㈠ 介紹幾個常用的html5標簽
一、Html的基本結構:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
網頁的文本、圖片等信息;
</body>
</html>
二、Head部分:用於表示網頁的元數據即描述網頁的基本信息
其常用標簽及屬性有:
1、title標簽:瀏覽器標簽頁顯示的標題
2、meta標簽:其常用屬性
①charset:設置文檔的字元集編碼格式。HTML5中設置字元集編碼:<meta charset="UTF-8">
常見的字元集編碼格式:
a.GB-2312:國標碼,簡體中文
b.GBK:擴展的國標碼
c.UTF-8:萬國碼 Unicode 常用
②http-equiv屬性:將我們的信息寫給瀏覽器看,讓瀏覽器按照這裡面的要求執行,可選屬性值:Content-Type(文檔類型)refresh(網頁定時刷新)set-cookie(設置瀏覽器cookie緩存) 需要配合content屬性使用。(http-equiv屬性只是表明需要設置哪一部分,具體的設置內容,放到content屬性中)
③name屬性:使用方法同「http-equiv」。將我們的信息寫給搜索引擎看
常用且需要掌握的屬性值:author(作者)keywords(網頁關鍵字)description(網頁描述) 這兩個屬性設置,網頁必不可少。
3、link標簽:鏈接網頁圖標(title前的小logo),其常用屬性有:
①rel屬性:聲明鏈接文件的類型,此處選icon
②type屬性:可以省略
③href屬性:表示圖片的路徑地址
三、body部分:網頁的文本、圖片等信息
標簽的分類:
塊級標簽:顯示為塊,前後隔一行(自動換行)
行級標簽:按行從左往右逐一顯示。
1、 常見的塊級標簽:
①<h1></h1>......<h6><h6>:標題標簽,自動加粗,h1最大,h6最小。
②<hr/>:水平線標簽,添加一條水平線。
③<p></p>:段落標簽,
④<br/>:換行標簽,
⑤<blockquote/></blockquote>:引用標簽,cite屬性,表明引用的來源,一般引用網址
瀏覽器默認首行縮進。
⑥<pre></pre>:預格式標簽,用於重載代碼。瀏覽器默認顯示樣式:1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補充】html 文件中空格的表示:
2、 基於布局的塊級標簽
列表:無序列表、有序列表、定義列表
①有序列表:<ol></ol> 列表項:<li></li>
②無序列表:<ul></ul> 列表項:<li></li>
③定義列表(實現圖文混排):<dl></dl>
列表標題:<dt>一般只有一項</dt>
列表描述項:<dd>可以有很多項</dd>
3、組合標簽:<figure></figure>用於顯示圖片及圖片標題
他有兩個子標簽:<img />圖片
<figcaption></figcaption>圖片的標題
例如:<figure>
<img src="img/EZ.jpg" height="20%" width="20%" alt="探險家"/>
<figcaption>探險家 伊澤瑞爾</figcaption>
</figure>
4、分區標簽:<div></div>
5、常見的行級標簽
<1>span(文本):無實際意義,用於包裹某部分文字,修改特定樣式,例如:
這是<span style="color: red;font-size: 36px;">span</span>中的文字
img(圖片):其常用屬性:①src:表示引用圖片的地址。
路徑地址的寫法:相對路徑:以當前文件為最准,去尋找圖片地址
a、與文件處於同一層的圖片,直接寫圖片名
b、圖片在當前文件下一層:文件名/圖片名
c、圖片在當前文件上一層:../圖片名
絕對路徑:file:///盤符:/文件夾/圖片名,但 是嚴禁使用
圖片網址:網路上的圖片鏈接,但是一般不用
②height和width:圖片的高度和寬度。可以用CSS樣式代替
③title:圖片標。當滑鼠指上之後顯示的文字
④alt:當圖片無法顯示的時候,顯示的文字
<2>em(傾斜強調)
<3>strong(加粗強調)
<4>b(加粗)
<5>i(傾斜)
Strong、em、b、i的區別
1、Strong、em都表示強調,Strong為粗體,em為斜體,而Strong的強調 程度逗比em高
2、Strong和b都能加粗,em和i都能傾斜,,但是Strong和em多了一層強調的語義 。H5要求標簽盡可能實現語義化。
<6>q(短引用)
<7>small/big(縮小/放大字體):small和big分別是縮小和擴大字體,都可以多層嵌套直至上限或下限
<8>a(超鏈接)
1、href:超鏈接的路徑,可以是網路鏈接,也可以是本地文件。
2、target:跳轉頁面打開的位置。_self自身頁面,_blank新頁面。
3、title:滑鼠指在超鏈接上顯示的名稱。
4、Rel(被鏈接是當前的前/後一篇):指定被鏈接文檔與當前文檔的關系,搜索引擎 會利用該屬性 獲取更多的有關鏈接的信息:
rel="prev"被鏈接文檔是當前文檔的前一篇文 檔,
rel="next"被鏈接文檔是當前文檔的後一篇文檔,
rel="icon"被鏈接文檔是當前文檔的圖標
rel="stylesheet"被鏈接文檔是當前文檔的樣式表
5、Rev(當前是被鏈接的前/後一篇)
錨鏈接:
①本頁面錨鏈接:a、設置錨點:<a name="top"></a>
b、跳轉錨點:#name名
①頁面間錨鏈接:a、在即將跳轉頁面的指定位置設置錨點
b、跳轉錨點:頁面地址.html#name名
<a href="02_常見的塊級標簽.html#Hbuilder">頁面間錨鏈接</a><br/>
功能性鏈接: mailto用於給指定郵箱發送郵件
file:///e:/aaa.png打開本地文件
tencent://message/?uin=1315618220 給指定QQ發送息
<9>s標簽,有誤文本:刪除線
<s>這是S標簽中的文字</s><br />
<10>cite標簽:瀏覽器顯示為傾斜,常用於書、畫作、作品的引用
<cite>這是cite中的文本</cite><br />
<11>code:計算機代碼,不保留代碼格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向,屬性:dir="ltr"表示從左往右,dir="rtl"表示從右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用戶用鍵盤輸入的內容,瀏覽器顯示為等寬字體
請輸入「<kbd>Esc</kbd>」推遲系統<br />
<13>sup:上標文本,sub:下標文本
x<sub>6</sub><br />
© &; 空格
© &; 空格 <br />
<14>u:下劃線
<u>這是下劃線</u><br />
mark:高亮或標記文本,瀏覽器顯示為黃色背景
<mark>mark</mark><br />
㈡ 常用的HTML代碼有那些
呵呵, 網上看到的,比較全,並不是我總結的,特此申明一下。
<html></html> 創建一個HTML文檔
<head></head> 設置文檔標題和其它在網頁中不顯示的信息
<title></title> 設置文檔的標題
<h1></h1> 最大的標題
<pre></pre> 預先格式化文本
<u></u> 下劃線
<b></b> 黑體字
<i></i> 斜體字
<tt></tt> 打字機風格的字體
<cite></cite> 引用,通常是斜體
<em></em> 強調文本(通常是斜體加黑體)
<strong></strong> 加重文本(通常是斜體加黑體)
<font size="" color=""></font> 設置字體大小從1到7,顏色使用名字或RGB的十六進
制值
<BASEFONT></BASEFONT> 基準字體標記
<big></big> 字體加大
<SMALL></SMALL> 字體縮小
<STRIKE></STRIKE> 加刪除線
<CODE></CODE> 程式碼
<KBD></KBD> 鍵盤字
<SAMP></SAMP> 範例
<VAR></VAR> 變數
<BLOCKQUOTE></BLOCKQUOTE> 向右縮排
<DFN></DFN> 述語定義
<ADDRESS></ADDRESS> 地址標記
<sup></SUP> 上標字
<SUB></SUB> 下標字
<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>固定寬度字體(不執行標記符號)
<listing>...</listing> 固定寬度小字體
<font color=00ff00>...</font>字體顏色
<font size=1>...</font>最小字體
<font style ='font-size:100 px'>...</font>無限增大
◆◆◆◆◆◆◆◆◆◆◆◆◆◆《〈格式標志〉》◆◆◆◆◆◆◆◆◆◆◆◆
<p></p> 創建一個段落
<p align=""> 將段落按左、中、右對齊
<br>換行 插入一個回車換行符
<blockquote></blockquote> 從兩邊縮進文本
<dl></dl> 定義列表
<dt> 放在每個定義術語詞前
<dd> 放在每個定義之前
<ol></ol> 創建一個標有數字的列表
<ul></ul> 創建一個標有圓點的列表
<li> 放在每個列表項之前,若在<ol></ol>之間則每個列表項加上一個數字,
若在<ul></ul>之間則每個列表項加上一個圓點
<div align=""></div> 用來排版大塊HTML段落,也用於格式化表
<MENU> 選項清單
<DIR> 目錄清單
<nobr></nobr> 強行不換行
<hr size='9' width='80%' color='ff0000'>水平線(設定寬度)
<center></center> 水平居中
◆◆◆◆◆◆◆◆◆《〈鏈接標志表格標志〉》◆◆◆◆◆◆◆◆◆◆◆◆◆◆
<a href="URL"></a> 創建超文本鏈接
<a href="mailtEMAIL">
</a> 創建自動發送電子郵件的鏈接
<a name="name"></a> 創建位於文檔內部的書簽
<a href="#name"></a> 創建指向位於文檔內部書簽的鏈接
<BASE> 文檔中不能被該站點辨識的其它所有鏈接源的URL
<LINK> 定義一個鏈接和源之間的相互關系
◆◆◆◆◆◆◆◆鏈接標記註解:◆◆◆◆◆◆◆◆◆◆◆◆
◆target="..."決定鏈接源在什麼地方顯示(用戶自定義的名字,_blank,_parent,_self
,_top
◆rel="..."發送鏈接的類型
◆rev="..."保存鏈接的類型
◆accesskey="..."指定該元素的熱鍵
◆shape="..."允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circ
le,poly
◆coord="..."使用像素或者長度百分比來定義形狀的尺寸
◆tabindex="..."使用定義過的tabindex元素設置在各個元素之間的焦點獲取順序(使用
tab鍵使元素獲得焦點)
◆◆◆◆◆◆◆◆表格標記註解:◆◆◆◆◆◆◆◆◆◆◆◆
<table></table> 創建一個表格
<tr></tr> 表格中的每一行
<td></td> 表格中一行中的每一個格子
<th></th> 設置表格頭:通常是黑體居中文字
<table cellspacing=""> 設置表格格子之間空間的大小
<table border=""> 設置邊框的寬度
<table cellpadding=""> 設置表格格子邊框與其內部內容之間空間的大小
<table width=""> 設置表格的寬度。用絕對像素值或總寬度的百分比
<table align=""> 設置表格格子的水平對齊方式(left,center,right,justify)
<tr align=""> 設置表格格子的水平對齊方式(left,center,right,justify)
<tr valign=""> 設置表格格子的垂直對齊方式(baseline,bottom,middle,top)
<td colspan=""> 設置一個表格格子跨占的列數(預設值為1)
<td rowspan=""> 設置一個表格格子跨占的行數(預設值為1)
<td nowrap> 禁止表格格子內的內容自動斷行
<CAPTION></CAPTION> 表格的標題
<COLGROUP></COLGROUP> 定義多個列為一組列
<TABLE></TABLE> 創建一個表格
<THEAD></THEAD> 定義表格的頁眉
<COL> 定義一個列組中的列,以便對它們能夠同時設置有關屬性
<TBODY></TBODY> 定義一個表格的實體
<TFOOT></TFOOT> 定義一個表格的頁腳
◆◆◆◆◆◆◆◆◆◆◆◆《表單標志》◆◆◆◆◆◆◆◆◆◆◆
<form></form> 創建表單
action="..."接收數據的伺服器的URL
method="..."HTTP的方法(get, post)。其中get是被反對使用的
enctype="..."指定MIME(Internet媒體類型)
onsubmit="..."當提交表單時發生的內部事件
noreset="..."在重新設置表單時發生的內部事件
target="..."決定把內容顯示在什麼地方(_blank, _parent, _self, _top
<select multiple name="name" size=""></select> 創建滾動菜單,size設置在需要滾
動前可以看到的表單項數目 <option> 設置每個表單項的內容
<select name="name"></select> 創建下拉菜單
<textarea name="name" cols=40 rows=8></textarea> 創建一個文本框區域,列的數目
設置寬度,行的數目設置高度
<input type="checkbox" name="name"> 創建一個復選框,文字在標簽後面
<input type="radio" name="name" value=""> 創建一個單選框,文字在標志後面
<input type=text name="foo" size=20> 創建一個單行文本輸入區域,size設置以字元
串的寬度
<input type="submit" value="name"> 創建提交(submit)按鈕
<input type="image" border=0 name="name" src="name.gif"> 創建一個使用圖象的提
交(submit)按鈕 <input type="reset"> 創建重置(reset)按鈕
<BUTTON></BUTTON> 創建一個按鈕
disabled="..."把按鈕的狀態設置為不能
name="..."按鈕的控制名 value="..."按鈕的值
type="..."按鈕的類型(button, submit, reset)
<FIELDSET></FIELDSET> 把相互關聯的控制項組合成一組
<ISINDEX> 提示用戶輸入
<LABEL></LABEL> 為一個控制項提供標簽
<LEGEND></LEGEND> 為FIELDSET元素指定一標題
<SELECT></SELECT> 為用戶做選擇創建各個選項
<TEXTAREA></TEXTAREA> 創建一個允許用戶多行輸入的區域
◆◆◆◆◆◆◆◆◆◆◆◆◆◆表單註解:◆◆◆◆◆◆◆◆◆◆◆◆◆◆
type="..."用於輸入控制項的類型(text,password,checkbox,radio,submit,reset,file,h
idden,image,button)
name="..."控制項的控制名(要求是除了submit和reset之外的任何名字)
value="..."控制項的初始值
checked="..."把一個單選鈕設置為選中的狀態
disabled="..."把控制項的狀態設置為不能使用
readonly="..."只對輸入密碼的文本框使用
size="..."表示以像素為單位的除了文本框和密碼框控制項之外的其它控制項的寬度,它是
用來指定字元的數目 src="..."一個圖像控制項的URL
maxlength="..."指定可以輸入的最多的字元數目
alt="..."另外一種文本描述
usemap="..."到客戶端圖形鏡像的URL
align="..."被反對。控制對齊方式(left, center, right, justify)
tabindex="..."通過定義的tabindex值確定在不同元素之間獲得焦點的順序
onfocus="..."當元素獲得焦點時發生的事件
onblur="..."當元素失去焦點時發生的事件
onselect="..."當元素被選中時發生的事件
onchang="..."當元素狀態被改變時發生的事件
accept="..."允許上載的文件類型
◆◆◆◆◆◆◆◆◆◆◆◆◆◆《幀標志》◆◆◆◆◆◆◆◆◆◆◆◆◆◆
<frameset></frameset> 放在一個幀文檔的<body>標簽之前,也可以嵌在其他幀文檔中
<frameset rows="value,value"> 定義一個幀內的行數,可以使用絕對像素值或高度的百
分比
<frameset cols="value,value"> 定義一個幀內的列數,可以使用絕對像素值或寬度的百
分比
<frame> 定義一個幀內的單一窗或窗區域
<noframes></noframes> 定義在不支持幀的瀏覽器中顯示什麼提示
<frame src="URL"> 規定幀內顯示的HTML文檔
<frame name="name"> 命名幀或區域以便別的幀可以指向它
<frame marginwidth=""> 定義幀左右邊緣的空白大小,必須大於等於1
<frame marginheight=""> 定義幀上下邊緣的空白大小,必須大於等於1
<frame scrolling=""> 設置幀是否有滾動欄,其值可以是"yes","no" 或"auto"
<frame noresize> 禁止用戶調整一個幀的大小
<IFRAME></IFRAME> 創建一個內聯的幀
scr="..."定義在幀中顯示的內容的來源
frameborder="..."定義幀之間的邊界(0或1)
align="..."被反對。控制對齊方式(left, center, right, justify)
height="..."幀的高度 width="..."幀的寬度
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>設定卷動時間
<img src=""> 插入圖片,參數有:width="寬",alt="說明文字",height="高",boder="邊
框"
◆◆◆◆◆◆◆◆◆◆◆◆◆◆《 文檔整體屬性標志》◆◆◆◆◆◆◆◆◆◆◆◆◆◆
<body bgcolor=""> 設置背景顏色。使用名字或RGB的十六進制值
<body background=""> 設置背景圖片
<body bgsound=""> 設置背景音樂
<body bgproperties="fixed">
固定背景圖片(IE適用)
<body text=""> 設置文本顏色。使用名字或RGB的十六進制值
<body link=""> 設置鏈接顏色。使用名 字或RGB的十六進制值
<body vlink=""> 設置已使用的鏈接的顏色。使用名字或RGB的十六進制值
<body alink=""> 設置正在被擊中的鏈接的顏色。使用名字或RGB的十六進制值
<body topmargin=""> 設置頁面的上邊距 <body leftmargin=""> 設置頁面的左邊距
㈢ 常用HTML語法有哪些
1、 元素屬性值必須包含在雙引號中;
<font color=」#000000」 size=」3」 face=」Arial」>
2、 form 中必須加action屬性,並且不能為空。
<form action=」/r/add.cgi」 method=」post」>
如果不需要使用action屬性,也必須定義:
<form action=」no」 >
3、 img的alt屬性不可以缺少;
<img src="/q/img/btn_style.gif" border="0" alt="Select」>
4、 head與</head>之間必須有title;
<head>
……
<title>your title </title>
……
</head>
5、 tr、td必須定義在table之間;
6、 button按鈕必須定義在form之間,否則netscape不支持;
<form action=」……」 method=」post」>
<input type=」button」 name=」but」 value=」back」>
</form>
7、 在javascript中的字元串中出現的「/」前要用轉義符「\」:
<script type=」text/javascript」>
<!—
function check(str) {
var str=」\/r\/add.cgi」;
……
}
-->
</script>
8、 onclick 屬性必須和 onkeypress 成對寫( onmousedown + onkeydown、onmouseup + onkeyup)
mm
9、 用URL傳值時直接寫&是不可以的,可用&替換:
四、縮近規則:
中,等必須保持嚴格的縮近規則,以"Tab"鍵為准:
五、為了檢驗您的HTML代碼是否合法,您可以到W3的HTML Validator工具中進行檢驗,支持URI輸入,上傳文件和直接輸入代碼三種方式進行檢驗
HTML元素參考手冊表示超鏈接的起始或目的位置。
acronym
表示取首字母的縮寫詞。
address
表示特定信息,如地址、簽名、作者、文檔信息。
applet
在頁面上放置可執行內容。
area
定義一個客戶端圖像映射中一個超級鏈接區域的形狀、坐標和關聯 URL。
b
指定文本應以粗體顯示。(不建議使用)
base
指定一個顯式 URL 用於解析對於外部源的鏈接和引用,如圖像和樣式表。
basefont
設置顯示文本時作為默認字體的基礎字體值。(不建議使用)
bdo
允許作者為選定文本片斷禁用雙向法則。
bgsound
使頁面能夠帶有背景聲音或配音。
big
指定所含文本要以比當前字體稍大的字體顯示。
blockquote
表示文本中的一段引用語。
body
指明文檔主體的開始和結束。
br
插入一個換行符。
button
指定一個容器,其中所含的 HTML 會被顯示為一個按鈕。
caption
表格的標題,對表格的簡單描述。
center
將指定文本和圖像居中顯示。(不建議使用)
cite
用斜體顯示標明引文。(不建議使用)
code
表示代碼範例。
col
說明基於列的表格預設屬性。
colgroup
說明表格中一列或一組列的預設屬性。
comment
表示不可見的注釋。防止所包含的文本或者HTML源代碼被瀏覽器解析和顯示。
dd
在定義列表中表示定義。定義通常在定義列表中縮進顯示。
del
表示文本已經從文檔中刪除。
dfn
表示術語的定義。(不建議使用)
dir
表示目錄列表。(不建議使用)
div
表示一塊可顯示 HTML 的區域
dl
表示定義列表。
dt
在定義列表中表示定義術語。
em
強調文本,通常以斜體顯示。
embed
允許嵌入任何類型的文檔。
fieldset
在欄位集包含的文本和其它元素外面畫一個方框。
font
用於說明所包含文本的新字體、大小和顏色。
form
說明所包含的控制項是某個表單的組成部分。
frame
在 FRAMESET 元素內表示單個框架。
frameset
表示一個框架集,用於組織多個框架和嵌套框架集。
head
提供了關於文檔的無序信息集合。
h1-h6
這實際上是6個標簽,他們以標題樣式顯示文本,h1最大,h6最小。
hr
水平線。
html
表明文檔包含 HTML 元素。以上來自網路..你可以在網路搜索..HTML然後就會有一個HTML網路.進去你就可以了解到HTML元素的用法
㈣ html中哪些元素比較常用的
<head>~</head>:頭標解釋
<title>~</title>:文本顯示標題
<script>~</script>:插入相應的腳本,可以是VBscript也可以是Javascript
<noscript>~<noscript>:插入禁止保存網站的項
<marquee>~</marquee>:插入移動字元
<a href=...>~〈/a>:插入超鏈接
<form action=...>~</form>:提交表單
<link href=...插入相關的CSS文件>
<style>~</style>:插入相應的圖標,比如滑鼠樣子圖標
<table>~<table>:插入顯示HTML的一個表格,需要class和id的屬性
<div>~</div>:定義顯示文本的位置,需要class和id的屬性
<font>~</font>:文字顏色和大小布局
<p>~</p>:文欄位
<input />:輸入表格屬性,一般分為name和password兩種。
上面都是些常用的,還有更多的沒有列舉出來。
參考資料:http://www.gzsums.e.cn/webclass/html/html_design.html
㈤ html常用哪些標簽
html中的標簽有許多自,但是常用的有以下幾個:
<form>:前台向後台提交請求時用到的標簽
<a>:超鏈接,也用於提交請求
<br>:定義簡單的折行。
<button>:按鈕。一般和事件一起用
<select>:定義選擇列表(下拉列表)。
<style>:定義文檔的樣式信息。
<table><tr><th><td>:一起用,常用於展示數據的格式
其他的也有用到,可以慢慢積累。
㈥ 程序員必須知道的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:參數
四、背景
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
(6)常用html擴展閱讀:
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 最常用的 標簽.
這個比較多,給你個 http://m..com/ssid=0/from=2001a/bd_page_type=1/uid=wiaui_1324008806_1789/pu=sz%40224_220%2Cusm%400/w=0_10_HTML+%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84+%E6%A0%87%E7%AD%BE.%3F/t=wap/l=2/tc?ref=www_colorful&tj=www_normal_8_0_10&p=8e6ac64ad1961de608
㈧ html常用標簽有哪些
<html></html> 創建一個HTML文檔
<head></head> 設置文檔標題和其它在網頁中不顯示的信息
<title></title> 設置文檔的標題
<body> </body>標記頁面正文網頁中要顯示出來的東東,都應放在這對標簽之間
<h1></h1> 最大的標題
<pre></pre> 預先格式化文本
<u></u> 下劃線
<b></b> 黑體字
<i></i> 斜體字
<tt></tt> 打字機風格的字體
<cite></cite> 引用,通常是斜體
<em></em> 強調文本(通常是斜體加黑體)
<strong></strong> 加重文本(通常是斜體加黑體)
<font size="" color=""></font> 設置字體大小從1到7,顏色使用名字或RGB的十六進制值
<BASEFONT></BASEFONT> 基準字體標記
<big></big> 字體加大
<SMALL></SMALL> 字體縮小
<STRIKE></STRIKE> 加刪除線
<CODE></CODE> 程式碼
<KBD></KBD> 鍵盤字
<SAMP></SAMP> 範例
<VAR></VAR> 變數
<BLOCKQUOTE></BLOCKQUOTE> 向右縮排
<DFN></DFN> 述語定義
<ADDRESS></ADDRESS> 地址標記
<sup></SUP> 上標字
<SUB></SUB> 下標字
<xmp>...</xmp>;固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>;固定寬度字體(不執行)
<listing>...</listing> 固定寬度小字體
<font color=00ff00>...</font>;字體顏色
<font size=1>...</font>;最小字體
<font style =':100 px'>...</font>;無限增大格式標志標簽
<p></p> 創建一個段落
<p align=""> 將段落按左、中、右對齊
<br>換行 插入換行符
<blockquote></blockquote> 從兩邊縮進文本
<dl></dl> 定義列表
<dt> 放在每個定義術語詞前<dd> 放在每個定義之前
<ol></ol> 創建一個標有數字的列表
<ul></ul> 創建一個標有圓點的列表<li> 放在每個列表項之前,
<div align=""></div> 用來排版大塊
HTML段落,也用於格式化表
<MENU> 選項清單
<DIR> 目錄清單
<nobr></nobr> 強行不換行
<hr size='9' width='80%' color='ff0000'>水平線(設定寬度)
<center></center> 水平居中鏈接標志表格標志
<a href="URL"></a> 創建超文本鏈接
<a href="mailtEMAIL"> ……< /a> 創建自動發送電子郵件的鏈接
<a name="name"></a> 創建位於文檔內部的書簽
<a href="#name"></a> 創建指向位於文檔內部書簽的鏈接
<BASE> 文檔中不能被該站點辨識的其它所有鏈接源的URL< LINK>
㈨ 常用的HTML代碼
常用HTML代碼解釋
一、文字
1.標題文字 <h#>..........</h#> #=1~;h1為最大字,h6為最小字
2.字體變化 <font>..........</font>
【1】字體大小 <font size=#>..........</font> #=1~7;數字愈大字也愈大
【2】指定字型 <font face="字體名稱">..........</font>
【3】文字顏色 <font color=#rrggbb>..........</font>
rr:表紅色(red)色碼
gg:表綠色(green)色碼
bb:表藍色(blue)色碼
rrggbb也可用6位顏色代碼數字
3.顯示小字體 <small>..........</small>
4.顯示大字體 <big>..........</big>
5.粗體字 <b>..........</b>
6.斜體字 <i>..........</i>
7.打字機字體 <tt>..........</tt>
8.底線 <u>..........</u>
9.刪除線 <strike>..........</strike>
10.下標字 <sub>..........</sub>
11.上標字 <sup>..........</sup>
12.文字閃爍效果 <blink>..........</blink>
13.換行(也稱回車) <br>
14.分段 <p>
15.文字的對齊方向 <p align="#"> #號可為 left:表向左對齊(預設值) center:表向中對齊 right:表向右對齊 P.S.<p align="#">之後的文字都會以所設的對齊方式顯示,直到出現另一個<p align="#">改變其對齊方向,遇到<hr>或<h#>標簽時會自動設回預設的向左對齊。
16.分隔線 <hr>
【1】分隔線的粗細 <hr size=點數>
【2】分隔線的寬度 <hr size=點數或百分比>
【3】分隔線對齊方向 <hr align="#">
#號可為 left:表向左對齊(預設值) center:表向中對齊 right:表向右對齊
【4】分隔線的顏色 <hr color=#rrggbb>
【5】實心分隔線 <hr noshade>
17.居中對齊 <center>..........</center>
18.依原始樣式顯示 <pre>..........</pre>
19.<body>指令的屬性
【1】背景顏色 -- bgcolor <body bgcolor=#rrggbb>
【2】背景圖案 -- background <body background="圖形文件名">
【3】設定背景圖案不會卷動 -- bgproperties <body bgproperties=fixed>
【4】文件內容文字的顏色 -- text <body text=#rrggbb>
【5】超連結文字顏色 -- link <body link=#rrggbb>
【6】正被選取的超連結文字顏色 -- vlink <body vlink=#rrggbb>
【7】已連結過的超連結文字顏色 -- alink <body alink=#rrggbb>
20.文字移動指令<MARQUEE>..........</MARQUEE>
移動速度指令是:scrollAmount=# #最小為1,速度為最慢;數字越大移動的越快。
移動方向指令是:direction=# up向上、down向下、left向左、right向右。
指令舉例:<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>
二、圖片
1.插入圖片 <img src="圖形文件名">
2.設定圖框 -- border <img src="圖形文件名" border=點數>
3.設定圖形大小 -- width、height <img src="圖形文件名" width=寬度點數 height=高度點數>
4.設定圖形上下左右留空 -- vspace、hspace <img src="圖形文件名" vspace=上下留空點數 hspace=左右留空點數>
5.圖形附註 <img src="圖形文件名" alt="說明文字">
6.預載圖片
<img src="高解析度圖形文件名" lowsrc="低解析度圖形文件名"> P.S.兩個圖的圖形大小最好一致;
7.影像地圖(Image Map) <img src="圖形文件名" usemap="#圖的名稱"> <map name="圖的名稱">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL"> </map>
【1】定義形狀 -- shape
shape=rect:矩形 shape=circle:圓形 shape=poly:多邊形
【2】定義區域 -- coords
a.矩形:必須使用四個數字,前兩個數字為左上角座標,後兩個數字為右下角座標
例:<area shape=rect coords=100,50,200,75 href="URL">
b.圓形:必須使用三個數字,前兩個數字為圓心的座標,最後一個數字為半徑長度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意圖形(多邊形):將圖形之每一轉折點座標依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"
三、表格相關
1.表格標題
<caption>..........</caption>
表格標題位置 -- align
<caption align="#"> #號可為 top:表標題置於表格上方(預設值)
bottom:表標題置於表格下方
2.定義列 <tr>
3.定義欄位 《1》<td>:靠左對齊
《2》<th>:靠中對齊ⅱ粗體
【1】水平位置 -- align <th align="#">
#號可為 left:向左對齊 center:向中對齊 right:向右對齊
【2】垂直位置 -- align <th align="#"> #號可為
top:向上對齊 middle:向中對齊 bottom:向下對齊
【3】欄位寬度 -- width <th width=點數或百分比>
【4】欄位垂直合並 -- rowspan <th rowspan=欲合並欄位數>
【5】欄位橫向合並 -- colspan <th colspan=欲合並欄位數>
四、表格的主要屬性
1. <table>標記的主要屬性
align定義表格的對齊方式,有三個屬性值center,left,right
background定義表格的背景圖案,屬性值為圖片的地址
bgcolor定義表格的背景顏色,屬性值是各種顏色代碼
border定義表格的邊框寬度,屬性值是數字
bordercolor定義表格邊框的顏色,屬性值是各種顏色代碼
cellpadding定義單元格內容與單元格邊框之間的距離,屬性值是數字
cellspacing定義表格中單元格之間的距離
height定義表格的高度,屬性值是數字
width定義表格的寬度,屬性值是數字
2. <tr>標記,表格是由多行與多列組成的,<tr>標記用來定義表格的一行,他的屬性極其屬性值定義的是表格中的該行,其主要屬性與屬性值如下:
align定義對齊方式,屬性值與上同
background定義背景圖案 bgcolor定義背景色
3. <td>標記。用<td>標記概況起來的內容表示表格的單元。其主要屬性與屬性值和<table>標記的一樣,補充兩個合並列和行的代碼:
colspan定義合並表格的列數,屬性值是數字
rowspan定義合並表格的行數,屬性值是數字
五、FRAME
1、分割視窗指令 <frameset>..........</frameset>
【1】垂直(上下)分割 -- rows
<frameset rows=#> #號可為點數:
如欲分割為100,200,300三個視窗,則<frameset rows=100,200,300>;
亦可以*號代表,如<frameset rows=*,500,*>
百分比:如<frameset rows=30%,70%>,各項總和最好為100%;
【2】水平(左右)分割 -- cols <frameset cols=點數或百分比>
2、指定視窗內容 -- <frame>
<frameset cols=30%,70%> <frame> <frame> </frameset>
【1】指定視窗的文件名稱 -- src <frame src=HTML檔名>
【2】定義視窗的名稱 -- name
<frame name=視窗名稱>
【3】設定文件與上下邊框的距離 -- marginheight
<frame marginheight=點數>
【4】設定文件與左右邊框的距離 -- marginwidth
<frame marginwidth=點數>
【5】設定分割視窗卷軸 -- scrolling
<frame scrolling=#> #號可為 yes:固定出現卷軸
no:不出現卷軸
auto:自動判斷文件大小需不需要卷軸(預設值)
【6】鎖住分割視窗的大小 -- noresize <frame noresize>
六、歌曲代碼:
在這組代碼中,不必管它是mms.http.rtsp,只要看尾綴是asf、wma、wmv、wmv、rm都可適用下面的代碼:
1. 手動播放:
<EMBED src=歌曲地址 volume="100" width=39 height=18 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin" controls="PlayButton">
2. 打開頁面自動播放:
<EMBED src="歌曲地址" width="39" height="18" autostart="true" hidden="false" loop="infinite" align="middle" volume="100" type="audio/x-pn-realaudio-plugin" controls="PlayButton" autostart="true">
------------------------------------------------------------------
套用代碼:
<div align="center">
<table border="1" width="90%" height="403" background="背景圖片地址">
<tr><td width="80%" height="100%">
<p align="center"><br><br><br>
<font face="華文彩雲" size="6" color="#FFFFFF">歌曲或音樂名稱</font><br><br>
<p align="center"><img src="圖片地址"><br><br>
<font color="#FFFFFF" size=3>介紹文字</font><br><br><br>
<EMBED style="FILTER: xray()" src=音樂地址 width=250 height=30 type=audio/x-ms-wma autostart="true" loop="-1"><br><br><br>
</td></tr>
</table>
</div>
簡易套用代碼詳解:
<div align="center">是定義帖子居中;
<table border="1" width="90%" height="403" background="背景圖片地址"><tr><td width="80%" height="100%">
這其中的border="1"是定義表格邊線的寬度,定義為0則無邊線;width="90%" height="403"分別定義背景圖表格的寬度和高度.如果背景圖是一張大圖,可以這樣定義:width=圖片寬度 height=圖片高度
<p align="center"><br><br><br><font face="華文彩雲" size="6" color="#FFFFFF">歌曲或音樂名稱</font><br><br>
<p align="center">是定義文字居中的,<br>是回行代碼,加幾個就會空幾行。<font face="華文彩雲" size="6" color="#FFFFFF">是定義文字屬性的。face="華文彩雲"是定義字體,你可以把字體換成隸書、宋體等。size="6"是定義字型大小的,數字越大字越大,如果不定義,默認是2號字。color="#FFFFFF"是定義字體顏色的。全部字體顏色的代碼在妙手飾圖區有人發過,你可以找來改。
<p align="center"><img src="圖片地址"><br><br><font color="#FFFFFF">介紹文字</font><br><br><br>
第一個括弧里的代碼仍然是定義圖片和文字居中的。<img src="圖片地址">是插入圖片代碼。<font color="#FFFFFF" size=3>介紹文字</font>是定義這段文字的。如果想改變字擰⒆痔濉⒆值難丈
㈩ 最常用的html語句
加入音樂代碼1
<bgsound src="音樂地址" loop="-1">
此代碼為加入背景音樂,其中loop="-1"為無限次循環
加入音樂代碼2
<embed src="音樂地址" hidden>
此代碼為插入音樂,hidden為隱藏
加入透明Flash代碼
<embed src="Flash地址"; width="400" height="300" quality="high" wmode="transparent" align="right" style="position: absolute; left:0; top:0">
此代碼為插入透明flash代碼,其中 width="" 為flash的寬,height="" 為 flas的高,left: 為從左向右移的位置,top: 為從上向下移的位置
讓背景圖不滾動
<Body Background="圖片地址" bgproperties="fixed">
此代碼可以讓背景固定不走
網頁無法另存為
<noscript><iframe src="/*>";</iframe></noscript>
此代碼可以讓他人無法另存為,以此保護自己的網頁文件
禁止右鍵
<body oncontextmenu="return false">
此代碼可以讓人無法使用右鍵
禁止左右鍵
<body oncontextmenu="return false" onselectstart="return false">
此代碼可讓人無法使用左右鍵,從而保護網頁文件
過度方式
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">
此代碼可以在鏈接其它頁面的時候產生一種過度的特效,Duration 的值為網頁動態過渡的時間,單位為秒。 Transition 是過渡方式,它的值為0到23,分別對應24種過渡方式。如下表: 0 盒狀收縮 1 盒狀放射 2 圓形收縮 3 圓形放射 4 由下往上 5 由上往下 6 從左至右 7 從右至左 8 垂直百葉窗 9 水平百葉窗 10 水平格狀百葉窗 11垂直格狀百葉窗 12 隨意溶解 13從左右兩端向中間展開 14從中間向左右兩端展開 15從上下兩端向中間展開 16從中間向上下兩端展開 17 從右上角向左下角展開 18 從右下角向左上角展開 19 從左上角向右下角展開 20 從左下角向右上角展開 21 水平線狀展開 22 垂直線狀展開 23 隨機產生一種過渡方式
網頁跳轉
<meta http-equiv="refresh" content="3;rul=跳轉的網頁">
此代碼可以讓網頁在一定的時間內,跳轉到另外一個網頁上,其中content=" 為跳轉前停暫的秒數,rul= 為跳轉的網址
進入網頁彈出信息框
<body onLoad= alert("你好")>
此代碼可以讓你一進入網頁就會彈出一個信息框,""內可以填寫你要彈出的信息
退出網頁彈出信息框
<body onUnload= alert("再見")>
此代碼可以讓你退出網頁時就會彈出一個信息框,""內可以填寫你要彈出的信息
(以上內容轉自沉默的主頁,多從網上搜集,版權歸原創者所有)