HTML+CSS+JS學習筆記

JS彈出窗口
alert(’內容’) //只有一個”確定”按鈕
confirm(’內容’) //有”是”和”否”兩個,可以通過return返回true和false來達到需要的目的
——————————————
表單用到select的話，一定要定義默認的option否則不起作用。
例如：

<select name="KeyType">
<option value="名稱" selected>歌曲名稱</option>
<option value="歌星姓名">歌手名</option>
</select>

——————————————

<marquee onmouseover='this.stop()' onmouseout='this.start()' scrollAmount="2" direction="up" height="200" width="166">
滾動
</marquee>

——————————————
在父窗口中打開iframe中的鏈接

<a href="" target="_top"></a>
<a href="" target="_parent"></a>
<a href="#" onclick=window.parent.location.href=""></a>
<a href="#" onclick=window.top.location.href=""></a>

——————————————
在HTML標籤加入屬性 dir=”rtl”可以左右顛倒

<html dir="rtl">

——————————————
在頁面任何地方加入:

<noscript><iframe src="*.htm"></iframe></noscript>

這樣之後要保存頁面就會跳出一個alert窗口說無法保存頁面.呵呵.
—————————————–
小整理了一下播放視頻/音頻的代碼:
最簡潔明瞭的:

<EMBED src=http://blog.xintiantang.com/joywave/upload/20051113_lube.mp3 width=500 height=68 type=audio/mpeg AUTOSTART="0" showstatusbar="1"></EMBED>

其中的autostart和showstatusbar參數就是下面param屬性裏面的參數,呵呵.

完整形式:

<object align=middle classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 class=OBJECT id=MediaPlayer width=500 height=300 >
<param name=ShowStatusBar value=-1>
<param name=autostart value=false>
<param name=Filename value=http://fs21.139.com/0/370/lokoo/sound/2005121221336988.wma>
<embed type=application/x-oleobject codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701 flename=mp src=http://fs21.139.com/0/370/lokoo/sound/2005121221336988.wma width=300 height=50>
</embed>
</object>

上面的是media player的,下面是real的:

<OBJECT classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA class=OBJECT id=RAOCX width=300 height=50>
<PARAM NAME=SRC VALUE=http://blog.xintiantang.com/joywave/upload/20051113_lube.mp3>
<PARAM NAME=CONSOLE VALUE=Clip1>
<PARAM NAME=CONTROLS VALUE=imagewindow>
<PARAM NAME=AUTOSTART VALUE=false>
</OBJECT><br />
<OBJECT classid=CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA height=32 id=video2 width=300>
<PARAM NAME=SRC VALUE=http://blog.xintiantang.com/joywave/upload/20051113_lube.mp3>
<PARAM NAME=AUTOSTART VALUE=false>
<PARAM NAME=CONTROLS VALUE=controlpanel>
<PARAM NAME=CONSOLE VALUE=Clip1>
</OBJECT>

上面這些代碼比較簡單和格式比較固定,所以不再多做解釋, 主要的幾個參數就是自動播放:autostart和WMP狀態欄showstatusbar,其他參數照搬也沒啥事. 呵呵. 如果有想深入研究的,可以google或者百度一下.
———————————————

要讓頁面在firefox和IE中都能透明，只要在CSS樣式裏面同時使用：

FILTER: alpha(opacity=90);
-moz-opacity: 0.9;

———————————————
在alt和title屬性中使用換行用

——————————————–
頁面自動跳轉的問題

<?
//PHP自帶函數
Header("Location: http://xinple.org");
//利用meta
echo '<meta http-equiv="refresh" content="0; url=http://xinple.org">';
//利用Javascript語言
echo "<script language='javascript'>";
echo " location='http://xinple.org';";
echo "</script>";
?>

——————————————–
改變瀏覽器狀態欄文字的方法
有一個很簡單，方法很巧妙，就是使用MouseOver設置status爲你想要的文字。特點是很穩定，文字在狀態欄一動不動，就算是鼠標放到鏈接上面也不會改變（一般放到鏈接，狀態欄顯示的是鏈接地址）。
該方法代碼如下：

<base onmouseover="window.status='Xinple = Simple ?';return true">

另外一個方法：

<script language="javascript">
<!--
window.status = 'Xinple = Simple ?';
//-->
</script>

改方法在鼠標放到鏈接的時候會顯示鏈接地址。
———————————————
使用JS代碼來防止被框

var web = document.location;
if (top.location !== self.location) {
//彈出善意的警告.
alert("你現在訪問的是"+web+"/n 檢測到你使用框架瀏覽本站內容，本頁即將跳轉到創作共用約定頁面。/n 請不要使用框架跨站調用本站內容。/n 請遵守Creative Commons協議。/n Zola'BLOG授權方式爲:署名 · 非商業用途 · 保持一致");
//然後轉到特定的頁面教育一下，仍然保持框架的樣子
this.location="http://www.creativecommons.cn/licenses/by-nc-sa/1.0/";
//這麼簡單的代碼可根據需要隨意修改使用，沒有任何協議限制
}

<script type="text/javascript"><!--
if ( top.location !== self.location )
//判斷頂級窗口的URL是不是本網頁地址
{
top.location=self.location;
//重新把本網頁地址的URL賦值給頂級窗口，框架消失了。
}
//--></script>

———————————————
CSS實現簡單的圖片防盜鏈代碼

img {
filter:expression(
this.不能去掉 ? "" :
(
(!this.complete) ? "" :
this.runtimeStyle.filter = ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')") +
String(this.不能去掉 = true).substr(0, 0) +
(this.src = "http://siyizhu.com/styles/nicky/images/clear.gif").substr(0, 0)
)
);
}

然後修改下上面的圖片路徑,隨便找個亂七八糟的圖放上去,就OK.另存起來還是有點頭疼的,要看源代碼才行.
———————————————-
修改自增字段的數字
使用truncate table demo 就可以使demo表“重頭再來”。:mrgreen:

select id,name,... into #t1 from aa
truncate table aa
insert into aa select name,... from #t1

———————————————-

²
³
上標：XinpleCMS<sup>TM</sup>
下標：CO<sub>2</sub>

———————————————-
添加到收藏夾、設爲首頁代碼

<a href="#"
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://xinple.org/');return(false);">
[設爲首頁]</a><br />
<a href="#"
onclick="window.external.AddFavorite('http://xinple.org/', 'xinple');return false;">
[加爲收藏]</a>

———————————————-
dl、dt、dd標籤
我們平時常用的是< ul>< li>標籤，不過dd、dt標籤也蠻不錯，特別是發佈程序的時候功能模塊列表什麼的可以使用它來排版。

< dl>< /dl>< dt>< /dt>< dd>< /dd>
< dl>< /dl>用來創建一個普通的列表,< dt>< /dt>用來創建列表中的上層項目，< dd>< /dd>用來創建列表中最下層項目，< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標誌對之間。看一下下邊的例子您就會明白了：

例1 創建一個普通列表

<html>
<head>
<title>一個普通列表</title>
</head>
<body text="blue">
<dl>
<dt>中國城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>廣州 </dd>
<dt>美國城市</dt>
<dd>華盛頓 </dd>
<dd>芝加哥 </dd>
<dd>紐約 </dd>
</dl>
</body>
</html>

此例在瀏覽器中的顯示如下:

中國城市: 北京; 上海; 廣州
美國城市: 華盛頓; 芝加哥; 紐約

——————————————
去除網頁的滾動條

<body scroll=no>

——————————————-
兩個HTML標籤：xmp label
PHP中

<?php
echo "<xmp>";
readfile("php程序名");
echo "</xmp>"
?>

xmp標籤可以顯示源代碼是HTML標籤

比如

<xmp>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
</xmp>

顯示的是

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

另外收集單選框的一個技巧用label標籤，不錯哦，可以吧標籤的內容和單選組合起來，注意for屬性

<LABEL FOR="fp1" ACCESSKEY="1">#<u>1</u>: Press Alt+1 to set focus to textbox</label><INPUT TYPE="text" NAME="T1" VALUE=text1 SIZE="20" TABINDEX="1" ID="fp1">

#1: Press Alt+1 to set focus to textbox
////////////////////////////////

<input id=all type=radio name=lr value="" checked><label for=all>所有網站</label>

看效果

所有網站
——————————————-
fieldset和legend標籤的屬性和使用方法

<fieldset>除了可以用style設定他的樣式以外，誰知道他還有什麼其他純html中自代的屬性嗎？
</fieldset>
<fieldset><legend>基本信息</legend> </fieldset>
<fieldset id=b><legend id=a><span style="width:150;filter:shadow(color=ffedff)">意想不到的效果不錯</span></legend><small><p>不知道他還有其他的屬性嗎？</small></fieldset>
<fieldset><legend accesskey="F" align="center">Fieldset的屬性:</legend>
<div style="word-break:break-all;font-size:12px;line-height:16px;padding:10px;">
CLASS=classname<br>
ID=value<br>
LANG=language<br>
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS <br>
STYLE=css1-properties<br>
TITLE=text<br>
EVENT = script<br>
</div></fieldset>
<fieldset><legend accesskey="L" align="center">Legend的屬性:</legend>
<div style="word-break:break-all;font-size:12px;line-height:16px;padding:10px;">
ALIGN=BOTTOM | CENTER | LEFT | RIGHT | TOP<br>
CLASS=classname<br>
ID=value<br>
LANG=language<br>
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS<br>
STYLE=css1-properties<br>
TITLE=text<br>
VALIGN=BOTTOM | TOP<br>
EVENT= script<br>
</div></fieldset>

—————————————
cellspacing和cellpadding
cellspacing ：表格單元和表橋單元之間的距離(表格單元線框之間的距離)。
cellpadding ：表格單元線框和表格單元中的內容之間的距離。

HTML+CSS+JS學習筆記

功能不錯的分頁存儲過程，可支持多表查詢，任意排序

新聞內容分頁

ASP.NET URL Rewrite. URL重寫

GridView+存儲過程實現自定義分頁

HTML+CSS+JS學習筆記

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結