tml標簽<
<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>設定卷動時間
<marquee onmouseover="this.stop()">...</marquee>鼠標經過上面時停止滾動
<marquee onmouseover="this.start()">...</marquee>鼠標離開時開始滾動
<!>字體效果
<h1>...</h1>標題字(最大)
<h6>...</h6>標題字(最小)
<b>...</b>粗體字
<strong>...</strong>粗體字(強調) (同上效果略同)
<i>...</i>斜體字
<em>...</em>斜體字(強調)
<dfn>...</dfn>斜體字(表示定義)
<u>...</u>底線
<ins>...</ins>底線(表示插入文字)
<strike>...</strike>橫線
<s>...</s>刪除線
<del>...</del>刪除線(表示刪除)
<kbd>...</kbd>鍵盤文字
<tt>...</tt> 打字體
<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>固定寬度字體(不執行標記符號)
<listing>...</listing> 固定寬度小字體
<font color=00ff00>...</font>字體顏色
<font size=1>...</font>最小字體
<font style =’font-size:100 px’>...</font>無限增大
區斷標記
<hr>水平線
<hr size=’9’>水平線(設定大小)
<hr width=’80%’>水平線(設定寬度)
<hr color=’ff0000’>水平線(設定顏色)
<br>(換行)
<nobr>...</nobr>水域(不換行)
<p>...</p>水域(段落)
<center>...</center>置中
<!>連結格式
<base href=位址>(預設好連結路徑)
<a href=位址></a>外部連結
<a href=位址 target=’_blank’></a>外部連結(另開新視窗)
<a href=位址 target=’_top’></a>外部連結(全視窗連結)
<a href=位址 target=’頁框名’></a>外部連結(在指定頁框連結)
<!>貼圖/音樂
<img src=圖片位址>貼圖
<img src=圖片位址 width=’180’>設定圖片寬度
<img src=圖片位址 height=’30’>設定圖片高度
<img src=圖片位址 alt=’提示文字’>設定圖片提示文字
<img src=圖片位址’ border=’1’>設定圖片邊框
<bgsound src=MID音樂檔位址>背景音樂設定
<!>表格語法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)
分割視窗
<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整
<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整
<frameset cols="20%,*">分割左右兩個框架
<frameset cols="20%,*,20%">分割左中右三個框架
<分割上下兩個框架
<frameset rows="20%,*,20%">分割上中下三個框架
屬性:
cols 垂直切割窗口(如左右分割兩個窗口)接受整數值,百分數,*(*代表占用余下空間)數值的個數代表分成的部分數目,要以逗號分隔。例:cols="30,*,50%"可以 切成三個視窗,第一部分是30像素(pixels)為絕對分割,第二部分是當分配完第一和第三視圖后剩下的空間,第三部分則占整個窗口的50%寬度,為相對分割。
rows 就是橫向切割,將窗口上下分開,數值設置同上。
以上兩屬性盡量不要在同一個<frameset>標記中,因為王井(netscape)不支持,盡量采用多重分割。
frameborder 設置框架的邊框,其值有0不要邊框,1要邊框。
border 設置框架邊框厚度
framespacing 表示框架與框架間保留空白的距離
frame 元素(單標簽)
語法格式:
<frame name="" src="url" scrolling="yes/no" noresize>
屬性:
name 框架名稱,指定框架來做連接的目標窗口。
src 框架中要顯示的網頁文當url地址,每個個框架要對應一個html文擋。
scrolling 是否顯示滾動條,yes/no,auto是自動。
noresize 設置不讓使用者改變這個框架的大小,
noframe元素
指定當使用了框架的頁面在不支持框架的瀏覽器中打開時顯示的信息
語法格式:
<noframe>
......
</noframe>
表單<form></form>
語法格式:
<form action="url" method="get/post">
....
<input type=submit><input type=reset>
</form>
method有兩種提交方式get,post
action 是指明處理該表單的程序位置,這樣表單所填的資料才能傳給cgi做處里,可設定此參數為action="mailto:lwr8494@163.com" 這樣此表單所填的資料將會發送到這個郵箱地址。
method 是指傳送信息給cgi等網絡程序的方式。可選post方法, get方法,post方法容許傳送大量信息。get方法只接受低于1k的信息。
申請表單用的是post搜索引擎用的是get
<! - - ... - -> 注解
<A HREF TARGET> 指定超連結的分割視窗
<A HREF=#錨的名稱> 指定錨名稱的超連結
<A HREF> 指定超連結
<A NAME=錨的名稱> 被連結點的名稱
<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址
<B> 粗體字
<BASE TARGET> 指定超連結的分割視窗
<BASEFONT SIZE> 更改預設字形大小
<BGSOUND SRC> 加入背景音樂
<BIG> 顯示大字體
<BLINK> 閃爍的文字
<BODY TEXT LINK VLINK> 設定文字顏色
<BODY> 顯示本文
<BR> 換行
<CAPTION ALIGN> 設定表格標題位置
<CAPTION>...</CAPTION> 為表格加上標題
<CENTER> 向中對齊
<CITE>...<CITE> 用於引經據典的文字
<CODE>...</CODE> 用於列出一段程式碼
<COMMENT>...</COMMENT> 加上注解
<DD> 設定定義列表的項目解說
<DFN>...</DFN> 顯示"定義"文字
<DIR>...</DIR> 列表文字標簽
<DL>...</DL> 設定定義列表的標簽
<DT> 設定定義列表的項目
<EM> 強調之用
<FONT FACE> 任意指定所用的字形
<FONT SIZE> 設定字體大小
<FORM ACTION> 設定戶動式表單的處理方式
<FORM METHOD> 設定戶動式表單之資料傳送方式
<FRame MARGINHEIGHT> 設定視窗的上下邊界
<FRame MARGINWIDTH> 設定視窗的左右邊界
<FRame NAME> 為分割視窗命名
<FRame NORESIZE> 鎖住分割視窗的大小
<FRame SCROLLING> 設定分割視窗的卷軸
<FRame SRC> 將HTML檔加入視窗
<FRameSET COLS> 將視窗分割成左右的子視窗
<FRameSET ROWS> 將視窗分割成上下的子視窗
<FRameSET>...</FRameSET> 劃分分割視窗
<H1>~<H6> 設定文字大小
<HEAD> 標示文件資訊
<HR> 加上分格線
<HTML> 文件的開始與結束
<I> 斜體字
<IMG ALIGN> 調整圖形影像的位置
<IMG ALT> 為你的圖形影像加注
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入圖片并預設圖形大小
<IMG HSPACE> 插入圖片并預設圖形的左右邊界
<IMG LOWSRC> 預載圖片功能
<IMG SRC BORDER> 設定圖片邊界
<IMG SRC> 插入圖片
<IMG VSPACE> 插入圖片并預設圖形的上下邊界
<INPUT TYPE NAME value> 在表單中加入輸入欄位
<ISINDEX> 定義查詢用表單
<KBD>...</KBD> 表示使用者輸入文字
<LI TYPE>...</LI> 列表的項目 ( 可指定符號 )
<MARQUEE> 跑馬燈效果
<MENU>...</MENU> 條列文字標簽
<meta NAME="REFRESH" CONTENT URL> 自動更新文件內容
<MULTIPLE> 可同時選擇多項的列表欄
<NOFRame> 定義不出現分割視窗的文字
<OL>...</OL> 有序號的列表
<OPTION> 定義表單中列表欄的項目
<P ALIGN> 設定對齊方向
<P> 分段
<PERSON>...</PERSON> 顯示人名
<PRE> 使用原有排列
<SAMP>...</SAMP> 用於引用字
<select >...</select > 在表單中定義列表欄
<SMALL> 顯示小字體
<STRIKE> 文字加橫線
<STRONG> 用於加強語氣
<SUB> 下標字
<SUP> 上標字
<TABLE BORDER=n> 調整表格的寬線高度
<TABLE CELLPADDING> 調整資料欄位之邊界
<TABLE CELLSPACING> 調整表格線的寬度
<TABLE HEIGHT> 調整表格的高度
<TABLE WIDTH> 調整表格的寬度
<TABLE>...</TABLE> 產生表格的標簽
<TD ALIGN> 調整表格欄位之左右對齊
<TD BGCOLOR> 設定表格欄位之背景顏色
<TD COLSPAN ROWSPAN> 表格欄位的合并
<TD NOWRAP> 設定表格欄位不換行
<TD VALIGN> 調整表格欄位之上下對齊
<TD WIDTH> 調整表格欄位寬度
<TD>...</TD> 定義表格的資料欄位
<TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄
<TEXTAREA WRAP> 決定文字輸入欄是自動否換行
<TH>...</TH> 定義表格的標頭欄位
<TITLE> 文件標題
<TR>...</TR> 定義表格美一行
<TT> 打字機字體
<U> 文字加底線
<UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )
<var>...</var> 用於顯示變數
BlockQuotc文本縮進
表示顏色的有三種方式;
1,16進制顏色代碼
語法:#RRGGBB
例:<font color="#ff0000">紅色</font>
2,10進制RGB碼
語法:RGB(RRR,GGG,BBB)
例:<font color="rgb(255,000,000)">紅色</font>
3,直接用顏色的英文名稱
例:<font color="red">紅色</font>
<body>.....</body>屬性可分為三種:
1,背景屬性
包括:bgcolor,background
2,文字屬性:
包括:text,link,alink,vlink,
3,留白屬性:
其中分為:leftmargin,topmargin
.bgcolor背景色
語法格式:<body bgcolor="#ff0000">
.background背景圖案。
語法格式:<body background="url">
.text文本顏色(非連接文字顏色)
.link連接文字顏色(可連接文字顏色)
.alink活動連接文字顏色(正被點擊的可連接文字的顏色)
.vlink已訪問連接文字顏色)(已經點擊訪問過的可連接文字的顏色)
語法格式:<body text="color" link="color" alink="color" vlink="color">
.leftmargin 頁面左側的留白距離
.topmargin 頁面頂部的留白距離
語法格式:<body leftmargin="value" topmargin="value">
注:value為長度值為數字
align 屬性
語法:<h2 align="?">文字</h2>
其屬性有三種:left靠左,center居中,right靠右
〈p〉</p>為段落標記,可利用以上屬性對整個段落進行設置
〈br>為換行標記
<nobr></nobr>為不換行標記 放在文字兩邊即可
例:<body>
<h3>江南逢李龜年</h3>
<p>歧王宅里尋常見<br>
催九堂前幾度聞<br>
正是江南好風景<br>
落花時節又逢君</p>
</body>
預格式化:
<pre>......</pre> 瀏覽是效果和編寫是效果格式一樣
列表
1無序列表又稱符號列表
語法格式:
<ul type="">type的屬性可選直disc實心圓點,clrcle空心圓點,square實心方框
<li>文字</li>
<li>文字</li>
</ul>
2有序列表
語法格式:
<ol type="?" start"?">
<li>文字</li>
<li>文字</li>
</ol>
type的值是編號字符可選的有1...,a...,A...,i... ,I...
start為起始值例:如果start為3是那么將從3開始,而且必須是數字。
3定義列表
<dl>定義列表標記
<dt>標示定義條目
<dd>標示定義內容
語法格式:
<dl>
<dt>文字</dt>
<dd>文字內容</dd>
</dl>
連接和圖像
語法格式:
<a href="url" name="?" target="?" title="?">....</a>
屬性:href 連接目標 值可以是url地址也可以是連接錨點
<a href="url">...</a>或者
<a href="錨點">...</a>
name 連接名稱
語法格式:<a name="錨點名稱">...</a>
例:<a name="abcdcf">...</a>
連接到該錨點的連接則應是:
<a name="#abcdef">....</a>
target目標窗口語法格式:
<a href="url"target="_blank|_self|_farent|_top|windowname">....</a>
-blank打開新窗口
_self當前窗口打開
一下兩個僅在框架葉面中應用
_parent當前窗口的父級窗口(上一級)打開
_top在最高一級的窗口打開
windowname已命名的窗口或框架中打開連接
title連接提示
<a title="打開狂人部落的首頁">狂人部落</a>
圖像<img> 語法格式:
<img src="url" alt="?" width="?" height="?" border="?" align="?">
border屬性定義圖片邊框的寬度,默認值為0
align屬性設置圖片旁邊文字的位置
語法格式:<img src="" align"">
可選值有:
top圖片和文字頂部對齊
middle圖片和文字居中對齊
bottom圖片和文字底邊對齊(默認)
left圖片居左對齊,文字沿圖片繞排
right圖片居右對齊,文字沿圖片繞排
absmiddle圖片對齊到目前文字行絕對中央
absbottom圖片對齊到目前文字行絕對底部
文字的排版
不換行空白標記
font元素
語法格式:
<font face="字體名稱" size="字體大小" color="字體顏色">
字體大小可選值為1——7,默認為3
例:〈font face="黑體" size="4" color="#ff00ff">....</font>
水平線<hr>
語法格式:<hr width="寬度" align="對齊方式默認居中center" size="水平線厚度默認為2" color="顏色" noshade>
noshade無陰影,既實線
層〈div><span>兩種元素
<div>是塊級元素,和段落元素<p>相似,不同的是兩個<div>元素之間不會產生兩個<p>元素之間的空行,
<span>是行內元素,可以定義段落中部分文字的屬性
語法格式:
<div align="" style="">...</div>
align設置層中元素的水平對齊方式
stule設置元素應用css規范的屬性
<div>兼容性比<span>要好一點,最好使用<div>
表格語法格式:
<table width="" bgcolor="" background="" border="" cellspacing="" cellpadding="">
<tr>...<td>....</td>....</tr>
</table>
border邊框寬度默認值為0,既沒有邊框
cellspacing表格中單元格的邊距大小,默認值為兩個像素
cellpadding表格中單元格之間的間距大小,默認值為兩個像素
tr元素
語法格式:
<tr align="" bgcolor="">....</tr>
align屬性對齊方式可選值如下:left,center,tight,默認為left
bgcolor指定該行的背景顏色
td元素
語法格式:
<td width="寬度" height="高度" align="水平對齊方式" valign="垂直對齊方式" bgcolor="" background="" rowspan="單元格的行跨度" colapan="單元格的列跨度">.....</td>
align屬性的可選值有:left,center,right
valign屬性的可選值有:top,middle,bottom
rowspan和colapan跨行和跨列的數量,默認為1
input元素 語法格式:
<input type="">
type屬性的可選值有:
text 單行文本框
屬性:name 文本框名稱
value 文本框的初始值
size 文本框的長度
maxlength 可輸入字符串最大的長度
radio 單選框
屬性:name 單選框名稱
value 內部值
checked 默認選定
checkbox 復選框
屬性:name 復選框名稱
value 內部值
checked 默認選定
reset 重置按鈕
submit 確定按鈕
屬性:name 按鈕名稱
value 顯示在按鈕上的文字
password 密碼框
屬性與文本框的屬性完全相同
file 文件域
屬性:name文件域名稱
size 文件域的長度
maxlength 文件域可接受的字符數量的上限
hidden 隱藏域
屬性:name 隱藏域名稱
value 內定值
image 圖片域
屬性:name 所要代表的按鈕,可以是submit,reset,或其他.
src 按鈕圖片的url 地址
列表框<select>
語法格式:
<select>
.....
<option>....</option>
.....
</select>
select元素
語法格式:<select name="" size=""multiple></select>
name 指定列表框的名字
size 指定列表框顯示列表項的條數,如果指定了該參數,select元素是個列表,否則是一個下拉列表框
multiple 指定了這個參數,則表示該列表框可選擇多項,否則只可選擇一項
option屬性
語法格式:<option value="" selected></option>
value 該列表項的值
selected 如果設定了這個參數,默認為選定這一項
多行文本框<textarea>
<textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea>
屬性:
name文本框的名稱
cols文本框的寬度
rows文本框的高度
wrap文本框的折行方式可選值有:
off不保存換行信息
physical強迫瀏覽器在發送信息到web服務器端時必須將多行文本框的文字一行一行的送出,
virtual送出連續成串的字除非使用者按回車。
css 層疊樣式表
引入層疊樣式表的方法包括:
外聯式樣式表
例:<head>
<link rel="stylesheet" href="/css/default.css">
</head>
<body>
....
</body>
</html>
屬性:rel 用來說明<link>元素在這里要完成的任務是連接一個獨立的css文件。而href屬性給出了所要連接css文件的url地址
內嵌式樣式表:
例:<html>
<head>
<style type="text/css">
<!--
td{font:9pt;color:red}
.font105{font:10.5pt;color:blue}
-->
</style>
</head>
<body>....</body>
</html>
元素內定
格式:<p style="font-size:10.5pt">
導入式樣式表
〈html>
<head>
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
<body>
....
</body>
</html>
css的優先級
越接近目標的樣式定義優先級越高,高優先級樣式將繼承低優先級樣式的未重疊定義但覆蓋重疊的定義
如果4種樣式表對同一元素定義了不同的樣式,那么他們的優先級順序從高到低是,元素內定,內嵌樣式表,導入樣式表,外聯樣式表。
css結構
例:td{font-size:10.5pt;color:#666666}
css樣式包含兩個基礎部分,
選擇符<td>和聲明{font-size:10.5pt;color:#666666}
聲明也有兩部分組成:
屬性font-size,color和值10.5pt,#666666
選擇符分為6種
1元素選擇符
當頁面上多個元素的樣式相同時,可以將多個元素放在一起定義,中間以逗號分開 例:td,p,li,input,select{font-size:12px;}
2class(類)選擇符
例:〈head>
<title>.....</title>
<style type="text/css">
<!--
.red{font-size:10.5pt;color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">士大夫井岡山地方官</p>
<p>九連環離開計劃</p>
</body>
還有一種方法就是限定可以應用它的頁面元素
例:〈head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">士大夫井岡山地方官</p>
<h1 class="red">九連環離開計劃</h1>
</body>
3 id選擇符
與class選擇附類似,只是把'.'換成'#'
例:<body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center" id="select">id選擇符</td>
</tr>
</table>
</body>
</html>
我們看到在調用ID選擇附時與CLASS選擇附類似,只是將class=""換成了id="",方便頁面腳本語言的調用
關聯選擇符
<body>
<head>
<style type="text/css">
<!--
td p{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center"><p>關聯選擇符</p></td>
</tr>
</table>
<p>關聯選擇符</p>
</body>
</html>
我們設定了在元素中<td>的元素<p>所包含文字的樣式,只有在兩個條件都滿足是,樣式在會起作用,
偽類選擇符
是只能用在css選擇符里,而不能用在html代碼中的選擇符
例:
〈html>
<head>
<style type="text/css">
<!--
a:link{color:#000000}
a:visited{color:#cccccc}
a:hover{color:#ff0000}
a:active{color:#ooooff}
-->
</style>
</head>
<body>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
〈/body>
</html>
正確的順序是a:link\a:visited\a:hover否則會引起頁面上連接顏色混亂
偽元素選擇符
與偽類選擇符定義類似,目前被大多數瀏覽器支持的有兩個:首行偽元素(first-line)和首字符偽元素(first-letter)是用來實現首行大寫和首行下沉效果的
例:首行
<html>
<head>
<style>
<!--
p:first-line{color:red;font-size:20pt}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
長度隨瀏覽器窗口大小而改變
首字
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
以上兩種都只能應用于塊狀元素上
css規則
1.繼承
例:<html>
<head>
<style type="text/css">
<!--
td{font-size:12pt}
p{color:red}
-->
</style>
</hesd>
<body>
<table width="300" border="1" height="150">
<tr>
<td align="center">
<p>css規則</p>
</td>
</table>
</body>
</html>
<p>為最高級<td>次一級兩種css用在一個屬性元素上,相同的覆蓋,不同的繼承,
2.組合
例:td{font-size:12pt}
p1{font-size:12pt}
組合后
td,.p1{font-size:12pt}
3.層疊
在樣式里定義過后,在表格屬性中又定義一次
<html>
<head>
<style type="text/css">
<!--
red{color:#ff0000 limportant}
-->
</style>
</hesd>
<body>
<table width="300" border="1" height="150">
<tr>
<td align="center" style="color:#0000ff" class="red">決撒地方官</td>
</tr>
</table>
</body>
</html>
css單位
分四大類:
1 長度單位
數值可以是整數,小數,正數,負數,0,后加單位(負值不要輕易使用)
換算關系:
1in(英寸)=6pc(派)
1in(英寸)=72pt(磅)
1in(英寸)=2.54(厘米)
1cm(厘米)=10mm(毫米)
1cm(厘米)=0.3937(英寸)
1pt(磅)=1/72in(英寸)=0.2478mm(毫米)
1pc(派)=1/6in(英寸)=我國新四號鉛字的尺寸
2 百分比單位
3 顏色單位
4 url單位
div屬性
color : #999999 文字顏色
font-family : 宋體 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜體育
font-variant:small-caps 小字體
letter-spacing : 1pt 文字間距
line-height : 200% 設定行高
font-weight:bold 文字粗體
vertical-align:sub 下標字
vertical-align:super 上標字
text-decoration:line-through 加?h除線
text-decoration:overline 加頂線
text-decoration:underline 加底線
text-decoration:none ?h除連接底線
text-transform : capitalize 首字大寫
text-transform : uppercase 英文大寫
text-transform : lowercase 英文寫
text-align:right 文字*右對齊
text-align:left 文字*左對齊
text-align:center 文字置中對齊
這些是一些簡單的文字效果,可以應用到css的頁面中。
背景
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重復排列-網頁預設
background-repeat : no-repeat 不重復排列
background-repeat : repeat-x 在x軸重復排列
background-repeat : repeat-y 在y軸重復排列
background-position : 90% 90% 背景圖片x與y軸的位置
鏈接
A 所有超連接
A:link 超連接文字格式
A:visited 瀏覽過的連接文字格式
A:active 按下連接的格式
A:hover 鼠標移至連接
邊框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四邊框
虛線
<TEXTAREA STYLE="border:1px dashed pink">
實線
<TEXTAREA STYLE="border:1px solid pink">
前端開發的都知道HTML標簽很多,但常用的也就那么幾個。個人覺得在標簽上面小程序做得很好,只有26個標簽,而且是我們常用到的。文章介紹一些常用的HTML標簽,以及一些非常有用的HTML屬性。
本次不詳細討論標簽的使用,有興趣的朋友可以關注我下篇關于常用標簽的使用注意事項的文章。
以下是小編最常用的標簽,可以說幾乎開發網頁就用到這么22個標簽。
22個最常用的標簽
1.點擊“下載” 鏈接,下載圖片或文件而不是預覽,直接添加一個download屬性就可以
<a href="large.jpg" download>下載</a>
2.disable="disable"禁止點擊屬性,要去除時,請用js刪除該屬性。
3.<button type="button"></button>必須指明類型type="button",否則默認為submit,造成頁面刷新。
4.input type="file" accept="image,excel,word” 上傳控件的accept屬性
默認是可以上傳所有文件。
accept:表示可以選擇的文件MIME類型,多個MIME類型用英文逗號分開。
5.favicon.ico圖標是網站的縮略標志,可以顯示在瀏覽器標簽、地址欄左邊和收藏夾,是展示網站個 性的縮略logo標志
<head>
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="bookmark" href="/favicon.ico"/>
</head>
6.圖片加載慢時用logo圖片代替,onerror當圖片不存或加載不出來才生效。
7.HTML使用標簽的refresh功能來刷新或跳轉頁面
<meta http-equiv="refresh" content="3" />表示頁面每隔3秒鐘刷新一次。
<meta http-equiv="refresh" content="3; url=<#ZC_BLOG_HOST#>" />表示頁面3秒后跳轉到 <#ZC_BLOG_HOST#>頁面。
說明:若果我們網站的首頁是一個index.asp頁面,當它遭到CC攻擊是,我們把index.asp頁面打開的內容保存到index.html(新建文本并保存)中。然后清空index.asp的內容(清空之前注意備份),將上面的refresh語句復制進來。這樣就可以有效的防止CC攻擊。
著橙先生上一篇的常見樣式屬性,可以用在絕大多數的標簽中,如div、sapn、p等標簽中,這篇繼續講樣式屬性,不過是一些特殊標簽的樣式屬性。
廢話不多說,直接往下看
1、<img src="圖片路徑" alt="圖片的描述說明文字">
Img標簽也有橙先生上一篇文章中介紹的常見樣式屬性,另外如上所見它也有自己特殊的屬性src和alt屬性,img就是圖片標簽,那么src就是引入圖片的屬性,其中輸入圖片路徑地址即可,而alt屬性是對圖片的描述文字,當圖片不能正常顯示時,將會顯示alt里的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="GZ.png" alt="‘Hi橙先生’是我的公眾號名稱,請關注一下吧!謝謝" style="width: 400px; height: auto;">
</body>
</html>
如下圖所示
圖片未正常顯示的效果
<ul>
<li>這是ul標簽中的一個小LI</li>
</ul>
<ol>
<li>這是ol標簽中的一個小li</li>
</ol>
ul和ol的固定樣式效果
2、無序列表和有序列表,它們有固定的樣式如下圖的圓點和序號,大多數情況我們是不需要的,這時我們就可以通過list-style: none;這個樣式屬性取消它們的固定樣式
<ul style="list-style: none;">
<li>這是ul標簽中的一個小LI</li>
</ul>
<ol style="list-style: none;">
<li>這是ol標簽中的一個小li</li>
</ol>
ul和ol取消固定樣式的效果
3、另外在常見的標簽中的文章中提到的a標簽,其中href屬性就是填寫鏈接目標的地方,而target屬性定義被鏈接的文檔(即網址)在何處顯示,常用的就是“_blank”代表在新窗口中打開被鏈接文檔。默認的是“_self”代表在此窗口中打開被鏈接文檔,其他屬性值不常用,就不過多介紹了
<a href="需要跳轉到的網址或是文件,如" target="_blank">這個是文字的鏈接</a>
4、外邊距(margin)、內邊距(padding),每個標簽元素都可以設定外邊距和內邊距,外邊距可以理解為是盒子以外的部分,而內邊距是盒子以內的部分直到內容的地方,看圖或是實際操作會比較好理解一些
所有HTML元素可以看作盒子,它包括:邊距(margin),邊框(border),填充(padding),和實際內容(content),如下圖
HTML元素可以看作盒子
當您指定一個 CSS 元素的寬度和高度屬性時,你只是設置內容區域的寬度和高度。要知道,完整大小的元素,你還必須添加內邊距,邊框和邊距。
下面的例子中設置div元素的寬度為300px,而實際寬度為450px
<div style="width: 300px;border: 25px solid orange;padding: 25px;margin: 25px;">這是一個div盒子</div>
實際寬度為450px的div
最終元素的總寬度計算公式是這樣的:
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的:
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
margin和padding(內邊距和外邊距)
margin或是padding只設置一個數值時代表上下左右都是這個數值,以下以margin為例的簡寫形式,代表的不同含義(padding也是一樣的)
margin屬性可以有一到四個值。
margin:25px 50px 75px 100px;
含義如下:
上外邊距為25px (margin-top: 25px;)
右外邊距為50px (margin-right: 50px;)
下外邊距為75px(margin-bottom: 75px;)
左外邊距為100px(margin-left: 100px;)
margin:25px 50px 75px;
含義如下:
上外邊距為25px(margin-top: 25px;)
左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)
下外邊距為75px(margin-bottom: 75px;)
margin:25px 50px;
含義如下:
上和下外邊距都為25px(margin-top: 25px和margin-bottom: 25px;)
左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)
margin:25px;
含義如下:
上、下、左、右外邊距都是25px(margin-top: 25px和margin-bottom: 25px;margin-right: 25px;margin-left: 25px)
這部分先講到這里,后續將會不斷的提到這些屬性,記得要上手操作哦,動手寫一下才能更好的理解!加油!爭取后續出個視頻,這樣可以更形象的講解。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。