jsp、JavaScript與html

0.先看一個實例

<BODY>內嵌子標籤：

<H>… … </H> ：文章標題

<FONT size=“12” color=“red”face=“律書”>...</FONT> ：字體標籤，控制文本的大小、顏色、字體

<H#> ... </H#> ：#=1, 2, 3, 4, 5, 6 6級字號

<P>...</P> ：段落標籤，分段,屬性align="center/left/right"

<BR> ：換行標籤

<HR> ：水平分隔線

<OL> ：有序表

<UL> ：無序表

<PRE> ：預格式文本

<A></A> ：超鏈接或頁內鏈接

<IMG> ：圖片標籤

<MARQUEE>...<MARQUEE>：滾動標籤

<table>… </table> ：表格標籤

<EMBED SRC="音樂/視頻地址" AUTOSTART=true> ：嵌入音樂或視頻

<b>...</b 粗體標籤

<i>...</i> 斜體標籤

<u>...</u> 下劃線標籤,放在<u>與</u>標籤之間的文字將以下劃線方式顯示。

<em> 用於強調的文本，一般顯示爲斜體字</em>

<strong> 用於特別強調的文本，顯示爲粗體字</strong>

<cite> 用於引證和舉例，通常是斜體字</cite>

<code> 用來指出這是一組代碼</code>

<small> 規定文本以小號字顯示</small>

<big> 規定文本以大號字顯示</big>

<samp> 顯示一段計算機常用的字體，即寬度相等的字體</samp>

<kbd> 由用戶輸入文本，通常顯示爲較粗的寬體字</kbd>

<var> 用來表示變量，通常顯示爲斜體字</var>

<dfn> 表示一個定義或說明，通常顯示爲斜體字</dfn>

sup指數標籤：12<sup>2</sup>=144 指數標籤

sub下標標籤：硫酸亞鐵的分子式是Fe<sub>2</sub>SO<sub>4</sub>

小例子：

<HTML>

<HEAD>

<TITLE>同時進行行列分組</TITLE>

</HEAD>

<BODY>

手機充值、IP卡/電話卡</FONT><BR />

移動 |  100 |  聯通|  50

</P>

<UL>

<LI>列表項內容1</LI>

<LI>列表項內容2</LI>

<LI>列表項內容3</LI>

</UL>

<OL>

<LI>列表項內容1</LI>

<LI>列表項內容2</LI>

<LI>列表項內容3</LI>

</OL>

騰訊-QQ幣/QQ幻想-30元卡

一口價： 26.45元

運費：賣家承擔運費

剩餘時間： 5天

寶貝類型：全新

賣主聲明：貨到付款，可試用10天！

</PRE>

滾動文字或圖像

</MARQUEE>

<TD>單元格內容11</TD>

<TD>單元格內容12</TD>

</TR>

<TR>

<TD>單元格內容21</TD>

<TD>單元格內容22</TD>

</TR>

</TABLE>

<TR>

</TR>

<TR>

<TD rowspan="2">各種卡的總彙</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

一、html的<HEAD>及<BODY>標籤

1.html由2部分組成：頭部和實體。

<HTML>

</HTML>

2.HEAD標籤中的一些內嵌子標籤

<HEAD></HEAD>是HTML文檔的頭部標籤, 在瀏覽器窗口中，頭部信息是不被顯示在正文中的,在此標籤中可以插入其它標記, 用以說明文件的標題和整個文件的一些公共屬性

內嵌子標籤：

<TITLE>html標題</TITLE>

3.html的主體標籤<body>

<body>標籤的全部屬性

link 設定頁面默認的連接顏色

alink 設定鼠標正在單擊時的連接顏色

vlink 設定訪問後連接文字的顏色

background 設定頁面背景圖像

bgcolor 設定頁面背景顏色

leftmargin 設定頁面的左邊距

topmargin 設定頁面的上邊距

bgproperties 設定頁面背景圖像爲固定，不隨頁面的滾動而滾動

text 設定頁面文字的顏色

html使用的顏色方案一般是RGB的組合6位16進制“0xff00ff”

二、文字版面的編輯

1.<br>: 換行

2.<P ALIGN= 參數>...</P>：換段align="right/center/left""

3.<pre>...</pre>：原樣顯示文字，保留原始文字排版的格式

4.<center>...</center>：居中對齊標籤

5.<blockquote>...</blockquote>.：可以用來建立一個引文，他特別適合較長文本的引用，引文顯示時將會自動右移，左邊空出幾個格，加以區別。指示這是一段引用。

6.<hr property=?>：水平分隔線

<hr>標籤的屬性

size設置水平分隔線的粗細

pixel(像素）默認2

width設置水平分隔線的寬度，pixel(像素）、%

align 設置水平分隔線的對齊方式 left center right

color 設置水平分隔線的顏色

noshade取消水平分隔線的3d陰影

7.<address>...</address>署名標籤一般用於說明這個網頁是由誰或是由哪個公司編寫的，以及其它相關信息。

<HTML>

<HEAD>

</HEAD>

<BODY>

×××原

<PRE>

向晚意不適，

驅車登古原。

夕陽無限好，

只是近黃昏。

</PRE>

[唐] 李商隱

</ADDRESS>

</BODY>

</HTML>

8.八大特殊字符

< <

> >

? ©

× ×

& &

? ®

" "

空格  

9.字體標籤

9.1<Hn align=參數〉標題內容</Hn> 標題文字標籤

9.2.<FONT PROPERTY=?>...<FONT>文字格式控制標籤

<FONT>標籤用於控制文字的字體，大小和顏色。控制方式是利用屬性設置得以實現的。

屬性

face 設置文字使用的字體,默認“宋體”

size 設置文字的大小,默認“3”

color 設置文字的顏色,默認“000000”

例子：

<html>

<head>

<title>控制文字的格式</title>

</head>

<body>

<font face=黑體 size=6 color="red" >盼望着，盼望着，東風來了，春天腳步近了。</font> <p>

一切都像剛睡醒的樣子，欣欣然張開了眼。<p>山朗潤起來了，水漲起來了，太陽的臉紅起來了。

</font><p>

小草偷偷地從土裏鑽出來，嫩嫩的，綠綠的。<p>園子裏，田野裏，瞧去一大片一大片滿是的。<p>坐着，躺着，打兩個滾，踢幾腳球，賽幾趟跑，捉幾回迷藏。<p>風輕悄悄的，草軟綿綿的。

</font>

</center>

</body>

</html>

9.3.特定文字樣式標籤

a.物理類型

(1) 粗體標籤<b>...</b

(2) 斜體標籤<i>...</i>

(3) 下劃線標籤<u>...</u> 放在<u>與</u>標籤之間的文字將以下劃線方式顯示。

b.邏輯類型

邏輯類型是使用一些標籤來改變字體的形態和式樣，以便產生一些瀏覽者習慣的或約定的顯示效果，常用的邏輯類型標籤有八種，放在標籤之間的文字受其控制。

em標籤：<em>用於強調的文本，一般顯示爲斜體字</em>

strong標籤：<strong>用於特別強調的文本，顯示爲粗體字</strong>

cite標籤：<cite>用於引證和舉例，通常是斜體字</cite>

code標籤：<code>用來指出這是一組代碼</code>

small標籤：<small>規定文本以小號字顯示</small>

big標籤：<big>規定文本以大號字顯示</big>

samp標籤：<samp>顯示一段計算機常用的字體，即寬度相等的字體</samp>

kbd標籤：<kbd>由用戶輸入文本，通常顯示爲較粗的寬體字</kbd>

var標籤：<var>用來表示變量，通常顯示爲斜體字</var>

dfn標籤：<dfn>表示一個定義或說明，通常顯示爲斜體字</dfn>

sup標籤：12<sup>2</sup>=144

sub標籤：硫酸亞鐵的分子式是Fe<sub>2</sub>SO<sub>4</sub>

例子：

<html>

<head>

<title>字體的物理類型</title>

</head>

<body>

<font color="#FF0000" size="+2"><b>這些文字是粗體的</b></font><br><br>

<i>這些文字是斜體的</i> <br><br>

<u>這些文字帶有下劃線</u>

<pre>

em標籤：<em>用於強調的文本，一般顯示爲斜體字</em>

strong標籤：<strong>用於特別強調的文本，顯示爲粗體字</strong>

cite標籤：<cite>用於引證和舉例，通常是斜體字</cite>

code標籤：<code>用來指出這是一組代碼</code>

small標籤：<small>規定文本以小號字顯示</small>

big標籤：<big>規定文本以大號字顯示</big>

samp標籤：<samp>顯示一段計算機常用的字體，即寬度相等的字體</samp>

kbd標籤：<kbd>由用戶輸入文本，通常顯示爲較粗的寬體字</kbd>

var標籤：<var>用來表示變量，通常顯示爲斜體字</var>

dfn標籤：<dfn>表示一個定義或說明，通常顯示爲斜體字</dfn>

sup標籤：12<sup>2</sup>=144

sub標籤：硫酸亞鐵的分子式是Fe<sub>2</sub>SO<sub>4</sub>

</pre>

</center>

</body>

</html>

三、建立列表

合理的使用列表標籤可以起到提綱和格式排序文件的作用。

列表分爲兩類：無序列表和有序列表

1.無序列表<UL>

無序列表使用的一對標籤是<ul></ul>，無序列表指沒有進行編號的列表,每一個列表項前使用<LI>。

<LI>的屬性type有三個選項：

disc實心園，circle空心園，square小方塊

格式：

<ul>

<li type=disc>第一項

<li type=circle>第二項

<li type=square>第三項

</ul>

2.有序列表<OL>

使用標籤<ol></ol>，每一個列表項前使用<li>。<ol>列表的結果是帶有前後順序之分的編號。如果插入和刪除一個列表項，編號會自動調整。

與無序列表不同，有序列表的屬性是屬於<ol>的。

<ol>的兩個屬性：type和start。

start=編號開始的數字，如start=2則編號從2開始，如果從1開始可以省略，或是在<li>標籤中設定value＝"n"改變列表行項目的特定編號，例如<li value="7">。 type=用於編號的數字,字母等的類型，如type=a，則編號用英文字母，I表示羅馬數字，默認爲阿拉伯數字。

格式：

<li>第1項

<li>第2項

<li>第3項

<li value= 20>第4項

3.定義列表的標記<DL>/<DT>/<DD>

定義列表的標記也叫描述性列表，定義列表默認爲兩個層次，第一層爲列表項標籤<DT>，第二層爲註釋項標籤<DD>。<DT>和<DD>標籤通常是成對使用的。也可以一個列表項對應於幾個解釋項，這種方式很少用。<DD>默認的註釋是顯示在另一行中,當使用<dl compact="compact">後,註釋項和列表項將顯示在同一行。

格式：

<dl>

<dt>第1項 <dd>註釋1

<dt>第2項 <dd>註釋2

<dt>第3項 <dd>註釋3

</dl>

4.目錄列表<DIR>和菜單列表<MENU>

<dir>爲目錄列表標籤,<menu>爲菜單列表標籤,它們的格式和無序列表<ul>是一樣的,例如:

他們和無序列表一樣，只不過縮進的空格不同

格式1:

<dir>

<li>第一項

<li>第二項

<li>第三項

</dir>

格式2

<menu>

<li type=disc>第一項

<li type=circle>第二項

<li type=square>第三項

</menu>

四、圖像的處理

1.頁面背景圖像的設定

2.圖片標籤<img>

圖片標籤<img>的14個屬性：

src 圖像的url的路徑

alt 提示文字

width 寬度通常只設爲圖片的真實大小以免失真,改變圖片大小最好用圖像工具.

height 高度通常只設爲圖片的真實大小以免失真,改變圖片大小最好用圖像工具.

dynsrc avi文件的url的路徑

loop 設定avi文件循環播放的次數

loopdelay 設定avi文件循環播放延遲

start 設定avi文件的播放方式

lowsrc 設定低分辨率圖片,若所加入的是一張很大的圖片，可先顯示圖片。

usemap 映像地圖

align 圖像和文字之間的排列屬性

border 邊框

hspace 水平間距

vlign 垂直間距

格式：

3.設定文字和圖片之間的對其方式

1).單獨佔一行時，放在<p>…</p>中，用<p>的對齊屬性進行設置。

2).與文本在同一行時，用其自身的align屬性（top,middle,bottom）設置圖像與文本的垂直對齊。其中：bottom爲默認值。

3).圖文混排時，可實現圖像的左、右環繞文本，用align屬性（left圖像在左、文本在右,right）。

4.用<img>標籤插入avi文件

格式：

<img>標籤插入avi文件的屬性：

dynsrc 指定avi文件所在路徑

loop 設定avi文件循環次數

loopdelay 設定avi文件循環延遲

start 設定文件播放方式：fileopen/mouseover(網頁打開時即播放/當鼠標滑到avi文件時播放）

五、建立超鏈接

HTML文件中最重要的應用之一就是超鏈接，超鏈接是一個網站的靈魂，web上的網頁是互相鏈接的，單擊被稱爲超鏈接的文本或圖形就可以鏈接到其它頁面。超文本具有的鏈接能力,可層層鏈接相關文件，這種具有超級鏈能力的操作，即稱爲超級鏈接。超級鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖象、動畫，通過它們我們可享受豐富多采的多媒體世界。

1.建立超鏈接的格式：

<A HREF="資源地址" TARGET="窗口名稱" TITLE="指向連接顯示的文字">超鏈接名稱</A>

屬性：（3個）

HREF 鏈接的網頁地址：可以是絕對路徑、相對路徑和根路徑

TITLE 該屬性用於指定指向鏈接時所顯示的標題文字

TARGET 鏈接網頁將要顯示的窗口，默認問當前窗口，frameset中的name的值,或特殊的值

特殊值有：

_parent 在上一級窗口中打開，一般使用分楨的框架頁會經常使用

_blank 在新窗口打開

_self 在同一個楨或窗口中打開，這項一般不用設置

_top 在瀏覽器的整個窗口中打開，忽略任何框架

2.超鏈接的應用

a.書籤鏈接（2種方式）

首先需要一個：鏈接到的目的地址

<a name="書籤名稱">目標超鏈接名稱</a>

name的屬性值爲該目標定位點的定位標記點名稱，是給特定位置點(這個位置點也叫錨點)起個名稱。

1）在同一頁面要使用鏈接的地址：頁內標籤鏈接

<a href="#書籤名稱" target="窗口名稱">超連鏈標題名稱</a>

2）在不同頁面要使用鏈接的地址：頁外標籤鏈接

<a href="URL地址#書籤名稱" target="窗口名稱">超鏈接標題名稱</a>

b.站內鏈接

所謂內部鏈接，指的是在同一個網站內部，不同的html頁面之間的鏈接關係，在建立網站內部鏈接的時候，要明確哪個是主鏈接文件（即當前頁），哪個是被鏈接文件。可以使用相對路徑

c.站外鏈接

所謂外部鏈接，指的是跳轉到當前網站外部，與其它網站中頁面或其它元素之間的鏈接關係。這種鏈接的URL地址一般要用絕對路徑，要有完整的URL地址，包括協議名，主機名，文件所在主機上的的位置的路徑以及文件名。最常用的外部鏈接格式是：<a href="http://網址">

URL外鏈部接格式:

服務 URL格式描述

WWW http://"地址" 進入萬維網站點

Ftp ftp://"" 進入文件傳輸協議

Telnet telnet://"" 啓動Telnet方式

Gopher gopher://"" 訪問一個gopher服務器

News news://"" 啓動新聞討論組

Email email://"" 啓動郵件

發送email

<html>

<head>

</head>

<body>

<p>

<a href="mailto:[email protected][email protected]&Subject=早安&[email protected]

&Body= 早安,笨笨貓祝你度過一個快樂的早晨！">

向笨笨貓的好友發送郵件(抄送笨笨貓)

</a>

</p>

</body>

</html>

d.圖像的超鏈接

e.圖像的影像地圖超鏈接

在HTML中還可以把圖片劃分成多個熱點區域，每一個熱點域鏈接到不同網頁的資源。這種效果的實質是把一幅圖片劃分爲不同的熱點區域，再讓不同的區域進行超鏈接。這就是影像地圖。要完成地圖區域超鏈接要用到三種標籤：

例子：

實例 6-2-42.html

<html>

<head>

</head>

<body>

</map>

</body>

</html>

六、TABLE表格

表格在網站應用中非常廣泛,可以方便靈活的排版,很多動態大型網站也都是藉助表格排版,表格可以把相互關聯的信息元素集中定位,使瀏覽頁面的人一目瞭然.所以說要製作好網頁,就要學好表格

定義表格的標籤：

<table>...</table> 用於定義一個表格開始和結束

<caption>...</caption> 定義表格的標題。在表格中也可以不用此標籤。

<tr>...</tr> 定義一行標籤，一組行標籤內可以建立多組由<td>或<th>標籤所定義的單元格

<th>...</th> 定義表頭單元格。表格中的文字將以粗體顯示,<th>標籤必須放在<tr>標籤內

<td>...</td> 定義單元格標籤，一組<td>標籤將將建立一個單元格，<td>標籤必須放在<tr>標籤內

1.表格<table>標籤屬性:

width 表格的寬度

height 表格的高度

align 表格在頁面的水平擺放位置

background 表格的背景圖片

bgcolor 表格的背景顏色

border 表格邊框的寬度（以像素爲單位）

bordercolor 表格邊框顏色當border>=1時起作用

bordercolorlight 表格邊框明亮部分的顏色,當border>=1時起作用

bordercolordark 表格邊框昏暗部分的顏色,當border>=1時起作用

cellspacing 單元格之間的間距

cellpadding 單元格內容與單元格邊界之間的空白距離的大小

rules 單元格邊框或分割線:“all”顯示所有分隔線,“groups”顯示組與組的分隔線,"rows"只顯示行與行的分隔線, "cols"只顯示列與列的分隔線,"none"所有分隔線都不顯示;

frame 表格外邊框:

box顯示整個表格邊框,void不顯示錶格邊框,hsides只顯示錶格的上下邊框,vsides只顯示錶格的左右邊框,above只顯示錶格的上邊框,below只顯示錶格的下邊框,lhs只顯示錶格的左邊框,rhs只顯示錶格的右邊框

例子：

<html>

<head>

<title>無標題文檔</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

2.表格行<tr>標籤的屬性

屬性:

height 行高

align 行內容的水平對齊

valign 行內容的垂直對齊

bgcolor 行的背景顏色

bordercolor 行的邊框顏色

bordercolorlight 行的亮邊框顏色

bordercolordark 行的暗邊框顏色

3.單元格<th>和<td>的屬性

<th>和<td>的屬性:

width/height 單元格的寬和高，接受絕對值（如 80）及相對值（如 80%）。

colspan 單元格向右打通的欄數，跨多列

rowspan 單元格向下打通的列數，跨多行

align 單元格內字畫等的擺放貼，位置（水平），可選值爲： left, center, right。

valign 單元格內字畫等的擺放貼位置（垂直），可選值爲： top, middle, bottom。

bgcolor 單元格的底色

bordercolor 單元格邊框顏色

bordercolorlight 單元格邊框向光部分的顏色

bordercolordark 單元格邊框背光部分的顏色

background 單元格背景圖片

nowrap <td nowrap>禁止單元格內容自動換行.如未設置TD寬度，則noWra起作用；否則noWrap不起作用。

例子：

4.表格的分組

a.表格的行分組<thead>/<tbody>/<tfoot>

html文檔的表格按行分組是由表頭標籤<thead>、表格主體標籤<tbody>和尾註標籤<tfoot>三個部分組成的。其中尾註標籤很少用。<thead>標籤是成對標籤，其標籤內是由表頭標籤標識的表頭元素。<tbody>標籤用於規定表格主體部分的元素，可出現多次。<thead>和<tbody>標籤的屬性和<th><td>標籤是一樣的。

<html>

<head>

<title>表格按行分組</title>

</head>

<body>

</TR>

</thead>

</TR>

</TR>

</tbody>

</TR>

</TR>

</tbody>

</table>

</body>

</html>

b.表格按列分組<colgroup>

語法格式：<colgroup span="數值" align="參數">

<html>

<head>

<title>表格按列分組</title>

</head>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

七、網頁的動態、多媒體效果

1.滾動字幕<marquee>

格式：<marquee>...</marquee>

屬性：

align 指定對齊方式top,middle,bottom

bgcolor 設定文字捲動範圍的背景顏色

loop 設定文字捲動次數，其值可以是正整數或infinite表示無限次默認爲無限循環

height 設定字幕高度

width 設定字幕寬度

scrollamount指定每次移動的速度,數值越大速度越快

scrolldelay 文字每一次滾動的停頓時間，單位是毫秒。時間越短滾動越快

hspace 指定字幕左右空白區域的大小

vspace 指定字幕上下空白區域的大小

direction 設定文字的捲動方向,left表示向左,right表示向右,up表示往上滾動

behavior指定移動方式.scroll滾動播出;slibe滾動到一方後停止;alternate滾動到一方後向相反方向滾動。

2.插入多媒體文件

格式：<EMBED SRC="音樂文件地址">

屬性：

SRC="FILENAME" 設定音樂文件的路徑

AUTOSTART=TRUE/FALSE 是否要音樂文件傳送完就自動播放，TRUE是要，FALSE是不要，默認爲FALSE

LOOP=TRUE/FALSE 設定播放重複次數，LOOP=6表示重複6次，TRUE表示無限次播放，FALSE播放一次即停止。

STARTIME="分:秒" 設定樂曲的開始播放時間，如20秒後播放寫爲STARTIME=00:20

VOLUME=0-100 設定音量的大小。如果沒設定的話，就用系統的音量。

WIDTH HEIGHT 設定播放控件面板的大小

HIDDEN=TRUE 隱藏播放控件面板

CONTROLS=CONSOLE/SMALLCONSOLE 設定播放控件面板的樣子

3.嵌入多媒體文件

這種方式將不調用媒體播放器

<bgsound>標籤用來設置網頁的背景音樂。但只適用於 IE，其參數設定不多。格式如下：

4.點播音樂（超鏈接音樂）

將音樂做成一個鏈接，只需用鼠標在上面單擊，就可以聽到動人的音樂了

<A HREF="imge/一千零一夜.mid">MIDI音樂</A>

超鏈接的對象可以是各種資源

八、多視窗口框架

框架就是把一個瀏覽器窗口劃分爲若干個小窗口，每個窗口可以顯示不同的 URL 網頁。使用框架可以非常方便的在瀏覽器中同時瀏覽不同的頁面效果，也可以非常方便的完成導航工作。

1.語法格式：

<html>

<head>

</head>

......

</html>

2.<frameset>屬性

border 設置邊框粗細,默認是5象素.

bordercolor 設置邊框顏色

frameborder 指定是否顯示邊框："0"代表不顯示邊框，"1"代表顯示邊框

cols 用"象素數" 和 "%"分割左右窗口,"*"表示剩餘部分，，當"*"出現一次以上時，表示按比例分割剩餘的窗口空間

rows 用"象素數" 和 "%"分割上下窗口,"*"表示剩餘部分

framespacing="5" 表示框架與框架間的保留空白的距離

noresize 設定框架不能夠調節，只要設定了前面的，後面的將繼承

3.子窗口<frame>標籤及其屬性

<frame>是個單標籤,<frame>標籤要放在框架集frameset中,<frameset>設置了幾個子窗口就必須對應幾個<frame>標籤，而且每一個<frame>標籤內還必須設定一個網頁文件（src="*.html",子窗口的排列遵循從左到右，從上到下的次序規則。

其常用屬性有:

src 指示加載的url文件的地址

bordercolor 設置邊框顏色

frameborder 指示是否要邊框,1顯示邊框，0不顯示（不提倡用 yes 或 no）

border 設置邊框粗細

name 指示框架名稱,是連結標記的 target所要的參數

noresize 指示不能調整窗口的大小,省略此項時就可調整,

scorlling 指示是否要滾動條,auto根據需要自動出現,Yes有,No無

marginwidth 設置內容與窗口左右邊緣的距離，默認爲1

marginheight 設置內容與窗口上下邊緣的邊距，默認爲1

width 框窗的寬及高默認爲width="100" height="100"

align 可選值爲 left, right, top, middle, bottom

例子：

<html>

<head>

</head>

</frameset><noframes></noframes>

</html>

4.窗口的名稱和鏈接

如果在窗口中要做鏈接，就必須對每一個子窗口命名，以便於被用於窗口間的鏈接，窗口命名要有一定的規則，名稱必須是單個英文單詞，允許使用下滑線，但不允許使用"—","句點"和空格等，名稱必須以字母開頭，不能使用數字，還不能使用網頁腳本中保留的關鍵字，在窗口的鏈接中還要用到一個新的屬性"targe",

5.浮動窗口<iframe>

九、表單的設計

表單在Web網頁中用來給訪問者填寫信息，從而能採集客戶端信息，使網頁具有交互的功能。一般是將表單設計在一個Html文檔中，當用戶填寫完信息後做提交 (submit)操作，於是表單的內容就從客戶端的瀏覽器傳送到服務器上，經過服務器上的 ASP 或 CGI 等處理程序處理後，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網頁就具有了交互性。

1.表單

一個表單用<form></form>標誌來創建。也即定義表單的開始和結束位置，在開始和結束標誌之間的一切定義都屬於表單的內容。

格式：<FORM action＝"url" method=get|post name="myform" target="_blank">... </FORM>

屬性：

action "用來接收表單信息的url"，如果這個屬性是空值("")則當前文檔的url將被使用.當用戶提交表單時，服務器將執行網址裏面的程序。

method 定義處理程序從表單中獲得信息的方式，可取值爲 GET 和 POST的其中一個。GET方式是處理程序從當前Html文檔中獲取數據，然而這種方式傳送的數據量是有所限制的，一般限制在1KB（255個字節）以下。POST方式與GET方式相反，它是當前的Html文檔把數據傳送給處理程序，傳送的數據量要比使用GET方式的大的多。

target 屬性用來指定目標窗口或目標幀。可選當前窗口_self,父級窗口_parent,頂層窗口_top,空白窗口_blank。

2.寫入標記<input>

在html語言中,標記<input>具有重要的地位，它能夠將瀏覽器中的控件加載到html文檔中，該標記是單個標記，沒有結束標記。

<input type="">標誌用來定義一個用戶輸入區，用戶可在其中輸入信息。此標誌必須放在 <form></form>標誌對之間。<input type="">標誌中共提供了九種類型的輸入區域

格式： <INPUT type="checkbox" name="gen" value="男" size="21“ maxlength=4 checked="checked">

常用屬性：

name 控件名稱指定元素的類型,10種:TEXT單行文本輸入框,PASSWORD密碼輸入框,RADIO單選按鈕,CHECKBOX複選按鈕,SUBMIT提交按鈕,RESET重置按鈕,

FILE文件上傳框,IMAGE圖片按鈕,HIDDEN隱藏域,BUTTON普通按鈕

type 控件類型如：botton 普通按鈕，texe 文本框等

align 指定對齊方式,可取top, bottom, middl

size 指定控件的寬度

value 用於設定輸入默認值

maxlength 在單行文本的時候允許輸入的最大字符數

src 插入圖像的地址

event 指定激發的事件

除10種input子元素外，還有2種表單元素：

TEXTAREA多行文本框 <textarea rows="5" cols="40">...</textarea>

SELECT下拉列表 <select><option>...</option><option>...</option></select>

十、css樣式表

1.作用

CSS樣式表也叫級聯樣式表，它是HTML的美容師，可以改變HTML頁面的樣式

– 會創建統一外觀的字體文本

– 會創建無下劃線的超連接樣式

– 會創建個性化的表格

– 會創建個性化的表單

2.爲什麼需要CSS樣式表

a.HTML標籤的外觀樣式比較單一

– 顏色只有黑白

– 字體類型和大小無變化

b.樣式表的作用相當於華麗的衣服

c.樣式表能實現內容與樣式的分離，方便團隊開發

3.樣式表的基本語法

a.樣式表的基本結構

P {color:red; font-size:30px; font-family:隸書;}

… …

</STYLE>

b.樣式規則：標籤樣式

<HTML>

<HEAD>

P { color:red; font-family:"隸書"; font-size:24px;}

</STYLE>

c.樣式規則：共享樣式(類)

.red {

color:red; font-family:"隸書"; font-size:24px;

}

… …

</STYLE>

例子：

<HEAD>

.red

{ color:red; font-family:"隸書"; }

</STYLE>

</HEAD>

<BODY>

<P class="red">牀前明月光， </P>

<P class="red">疑是地上霜。</P>

<P>我是郭德剛， </P>

<P class="red">低頭思故鄉。</P>

</BODY>

d.文本屬性

font-size 字體大小

font-family 字體類型

font-style 字體樣式

color 設置或檢索文本的顏色

text-align 文本對齊

e.方框屬性

邊界屬性 margin-left / margin-right / margin-top /margin-bottom 設置對象的下邊距/右邊距/上邊距

方框屬性 border-width border-color border-style 設置邊框的寬度/顏色/樣式

填充屬性 padding-top padding-right padding-bottom padding-left 設置內容與上邊框之間的距離

4.特殊樣式-超鏈接樣式

– a:link {color: #FF0000} /* 未被訪問的鏈接紅色*/

– a:visited {color: #00FF00} /* 已被訪問過的鏈接綠色*/

– a:hover {color: #FFCC00} /* 鼠標懸浮在上的鏈接橙色*/

– a:active {color: #0000FF} /* 鼠標點中激活鏈接藍色*/

5. 行內（嵌入）樣式表

如果希望某段文字和其他段落文字顯示風格不一樣，該如何解決？

<HTML>

<HEAD>

</HEAD>

<BODY>

這個段落應用了樣式

<P>

這個段落按默認樣式顯示

</BODY>

</HTML>

6. 外部樣式表文件

如果希望一個網站中多個頁面的樣式保持一致，如何解決？外部樣式表文件

根據樣式文件與網頁的關聯方式又分爲：

– 鏈接（LINK ）外部樣式表

– 導入（@import）外部樣式表

a.鏈接（LINK ）外部樣式表

<HEAD>

</HEAD>

b.導入（@import）外部樣式表

<HEAD>

@ import newstyle.css;

</STYLE>

</HEAD>

十一、html中使用javascript

1.在HTML中嵌入Javasript的方法

a.直接在Javascript代碼放在標記對<script type="text/javascript">和</script>之間

b.由<script type="text/javascript" src="myjs.js"/>標記的src屬性制定外部的js文件

c.放在事件處理程序中，比如：<p ;onclick事件適用於大部分標籤及自定義標籤

d.作爲URL的主體，這個URL使用特殊的Javascript：協議，比如：<a href=”javascript:alert(‘我是由javascript:協議執行的javascript’)”>點擊我</a>

e.利用javascript本身的document.write()方法寫入新的javascript代碼

f.利用Ajax異步獲取javascript代碼，然後執行

2.Javascript在頁面的執行順序

a.頁面上的Javascript代碼是HTML文檔的一部分，所以Javascript在頁面裝載時執行的順序就是其引入標記<script />的出現順序， <script />標記裏面的或者通過src引入的外部JS，都是按照其語句出現的順序執行，而且執行過程是文檔裝載的一部分。

b.每個腳本定義的全局變量和函數，都可以被後面執行的腳本所調用。

c.變量的調用，必須是前面已經聲明，否則獲取的變量值是undefined。

alert(tmp); //輸出 undefined

var tmp = '111';

alert(tmp); //輸出 111

//]]>

</script>

d.同一段腳本，函數定義可以出現在函數調用的後面，但是如果是分別在兩段代碼，且函數調用在第一段代碼中，則會報函數未定義錯誤。

test(); //瀏覽器報錯

//]]>

</script>

test(); //輸出 fun!

function test(){alert('fun!');}

//]]>

</script>

e.document.write()會把輸出寫入到腳本文檔所在的位置，瀏覽器解析完documemt.write()所在文檔內容後，繼續解析document.write()輸出的內容，然後在繼續解析HTML文檔.(document.write會被解析2次)

複製代碼

document.write('<script type="text/javascript" src="test.js"><\/script>');

document.write('<script type="text/javascript">');

document.write('alert("222");')

document.write('alert("變量保存值" + tmpStr);');

document.write('<\/script>');

//]]>

</script>

alert("333");

//]]>

</script>

3.如何改變Javascript在頁面的執行順序

利用window.onload

4.顯示的數字每秒加1

var o=document.getElementById('abc');

window.setInterval('o.innerHTML=parseInt(o.innerHTML)+1;',1000);

</script>

刷新時，該值會重置，如果不想重置，可以使用session或cookie

5.任意自定義標籤都可以有一個onclick回調屬性，執行js的函數

例子：點擊“click me”更新輸出加1

function myfunc(){

var o=document.getElementById('abc'); //重新將內存中的元素對象獲取回來

o.innerHTML=parseInt(o.innerHTML)+1;

}

</script>

jsp腳本

1.JavaServlet引擎通過反射機制鏈接JSP頁面轉化爲servlet子類，並在請求到來時執行該子類的方法。

2.JSP指令

@指令：提供給JavaServer引擎的編譯指示；

<jsp:forward>：提供運行時指令,用於處理頁面.

3.請求可被轉發和擴充

4.當每次GET頁面刷新時，頁面上的代碼將會被重新執行；而POST頁面只能被髮送一次，一旦表單數據被髮送，瀏覽器將無法保存數據。

5.Servlet與JSP的關係？

Servlet與JSP都可以通過其文件的絕對路徑被瀏覽器請求，然後處理這些請求，返回響應；不同的是Servlet使用前必須作者自己編譯爲.class文件才能被使用，而JSP文件直接就可以被使用，但是JSP文件使用的過程是被JavaServlet自動解析爲了Servlet子類並進行編譯成了.class文件。JSP文件本質上是一個Servlet子類文件，並且JSP文件的不同部分在Servlet文件中存在一一對應的關係。JSP頁面存在3種形式：JSP源碼(.jsp文件)->java源碼(servlet類)->java類(servlet對應class)

6.GET和POST請求參數傳遞

對於以下表單分別通過GET和POST傳送

First Name: <input name="first_name" type="text" />

Last Name: <input name="last_name" type="text" />

</form>

當這個表單被提交時，HTTP request 就會像這樣：

GET /foo.php?first_name=John&last_name=Doe&action=Submit HTTP/1.1

...

POST：發送數據至服務器

POST /foo.php HTTP/1.1

...

Content-Length: 43

first_name=John&last_name=Doe&action=Submit //隱藏域

6.Servlet的生命週期

（1）init()

當一個請求被容器引擎收到後，容器檢查該servlet是否被載入,如就然後調用裝載器得到servlet類並實例化,然後調用init()方法。該方法只會被調用一次。servlet被載入之後就可以處理任意數目的請求了，請求處理完不會被卸載。

（2）service()

init()方法成功完成後，servlet可以接收請求。默認只有一個servlet實例被創建。servlet容器在一個單一線程中向servlet實例轉發每一個請求，並調用service()方法(或者doGet(),doPost())。

（3）destroy()

容器在卸載servlet實例時將調用destroy()方法。手動調用destroy()方法並不會卸載實例

7.線程模型

servlet引擎載入一個十二vletde單一實例，在單線程中使用該實例服務於多個請求，而該實例並不是線程安全的。安全的做法是在service()方法中定義局部變量，而不要輕易的將變量定義爲servlet的成員變量。

雖然單實例多線程模型爲缺省模型，但servlet可以通過繼承SingleThreadMode改變此行爲，此接口不包含需要實現的方法。這樣容器引擎可以創建一個實例池，並分配每一請求到自己的實例和線程，而不是共用實例。但是由於存在多個servlet實例，他們可能同時訪問文件或數據庫這樣的資源，可能會有併發問題。這需要使用同步來解決。

8.服務器與瀏覽器會話

http不存在狀態導致服務器與瀏覽器之間的會話需要使用其他的方式實現。

跟蹤客戶端行爲狀態有2種方式：

a.由客戶端來跟蹤保存，每次請求頁面時，攜帶該狀態給服務器處理。->cookie

b.有服務器來跟蹤保存，瀏覽器保存該狀態集id，每次請求頁面時，攜帶該id給服務器。->session；那麼session的會話id如何在服務器和瀏覽器之間傳遞：(1)服務器可以在響應中加入一個set-Cookie頭標,並將session-id作爲cookie的取值，在隨後的瀏覽器訪問中可以返回帶有cookie頭標的取值；(2)瀏覽器可以將session-id附加到URL傳遞給服務器；(3)隱藏域，如果應用有一系列使用submit按鈕進行導航的html窗體組成，session-id可以被存儲成一個隱藏域，服務器可以通過request.getParameter()進行檢索。顯然，只有窗體均爲動態生產的時候此方法纔有用。

cookie和session都以鍵值對的形式保存數據。

9.JSP頁面組件

JSP元素有3種：

(1).僞指令

僞指令是指示JSP容器生產何種代碼的命令。

格式：

<%@ directive-name [attribute="value" ...] %>

3種標準僞指令：page include taglib

a.page用於指定整體jsp頁面的屬性

b.include爲指令在轉換時將另一個文件複製到該處，類似與C編譯器的#incldue指令;<%@ include file="header.html" %>

c.通過使用一個標籤庫，在當前頁面中啓用定製行爲

(2).腳本元素：註釋、包含表達式、scriptlet和聲明

<%-... -%> 註釋

<%= express%> 表達式，相當於out.write(express);

<% 語句;語句;...%> scriptlet

<%! 函數或成員變量%> 聲明

(3).動作行爲（7種，完全使用XML語法編碼）

<jsp:useBean> 申明一個java bean實例，使其與一變量名相關;

<jsp:setProperty> 設置在前面<jsp:useBean>申明的bean的屬性值;

<jsp:getProperty> 返回一個bean的指定屬性值

<jsp:include> 調用另一個資源,將其輸出流併入到JSP輸出流

<jsp:forward> 將http請求轉發到另一個JSP頁面或servlet進行處理

<jsp:param>將取值綁定到一個名字,並將綁定傳至<jsp:include>或<jsp:forward>調用的另一個資源

<jsp:plugin> 用於生成下載java插件相應的html鏈接

10.jsp全部隱含對象

request response pageContext session

application out config page exception

11.JSP文件與servlet.java文件對應關係

<%@ page import ...%> -> import ...;

<%! 函數或成員變量%> -> servlet成員變量和成員函數定義或聲明

<%...%> -> service()成員函數中的一段代碼

JavaScript腳本

一、基礎

1.javascript調試一般需要使用firedug插件，開發工具有很多，visual stuaio,eclipse,notpad等等

2.基本語法

2.1 javascript的語法類似與java語言,但不是面向對象的。

2.2 javascript的註解和C語言相同，使用'//'和'/**/'

2.3 javascript可以直接放在html中,如下

...

</script>

而在xhtml中可能需要這麼寫：

<![CDATA[

...

]]>

</script>

也可以把javascritpt單獨放在一個.js的文件中，在html中應用該文件，如

myjavascript.js

alert("hello"); //只有一句

在html中這樣引用

2.3 var聲明變量

變量只有先聲明才能使用,

var x=4; //javascript是自動數據類型

js的數據類型有： Number,String,Boolean,Null,Object(對象),Array,Date,RegExp

Number 數字 : var h=0xe;

String : var str="ls"

Boolean ：var f=false

Null ：null是使用var定義後但沒有賦值的變量，var t;此時t是空，沒有定義的變量是不能用的。

Object ：var myobject={“iden”:"1","name":"coco"};不同於其它語言的對象，js的對象類似與字典，可以嵌套

調用成員可以這樣：alert(myobject.iden) 和這樣alert(myobject["iden"])

還可以這樣：var mo=new Object; mo.iden="1";mo.name="coco";

Array : var star=new Array(); star[0]="p";star[1]="e";star[2]="w";

或var star=["p","e","w"]; 可以嵌套

Date ：var date= new Date(); alert(date.getYear());

類型轉換：一般之涉及數字與字符串之間的轉化

var mystr=String(100);

var mynum=Number("100")

bool值可以在字符串及數字之間自動轉化

2.4保留字

break,delete,if,this,while,case,do,in,throw,with,catch,else,instanceof,try,continue,finaly,new,typeof,debugger,for,return,var,default,function,switch,void;下面將來保留字：calss,enum,extends,super,const,export,import,implements,let,private,public,yield,interface,package,protected,static

2.5 幾個重要的操作符

in 包含操作符： if("start" in myobj) myobj是對象

instanceof 操作符 if(myobj instanceof Object)

delete 刪除操作符，可用於任何變量及元素 var st={"1","2"}; delete(st[0]);

typeof 求var的類型 if(typeof(st)=="object")

2.6 js的流控制語句

if else

switch case 支持字符串匹配哦

while/do while

for/for in for in用於遍歷對象

2.7 函數

1.無名函數：var f=function(para1,para2){...};f();

2.一些對話框函數：alert(),confirm()

3.有名函數

function cub(par1,par2){

...

return ...

}

也可以不直接指定入參(使用內建的arguments數組)

function cub(){

var arglen=arguments.length;

for(var i=0;i<arglen;i++){...}

return ...

}

2.8 閉包

function myfun(){

var mybun=10;

function showNum(){

alert(myNum)

}

return showNum();

}

var callFun=myfun();

callFun();

2.9對象

1.定義一個具有屬性和方法的對象：(先定義對象,再定義屬性和方法)

var ball={};

ball.size=10;

ball.color="red";

ball.roll=function(para1){...};

使用for..in..可以遍歷對象中的所有屬性(不包括方法)

2.使用function定義類(先定義屬性和方法再定義對象)

function Star(){ //函數中使用this定義的Star類

this.size=10;

this.roll=function(){...}

}

var t=new Star(); 定義一個對象

三、瀏覽器對象模型

1.瀏覽器本身使用被抽象成一個window對象，該對象是以下對象

document,frames,history,location,navigator,screen,self/window/parent

2.window對象

window對象是一個全局對象,表示瀏覽器目前正打開的窗口,alert和prompt()方法都是window的方法,由於window是全局對象，所以調用不需要加window前綴。

screen.availHeight,screen.height

四、文檔對象模型

1.DOM以一種樹形結構，或者說一種根部在上的樹形結構表示HTML文檔,DOM提供了修改HTML的方法。

2.獲取元素

a.通過id獲取元素

var a=document.getElementById("w3link");

jsp、JavaScript與html

NETCore中實現一個輕量無負擔的極簡任務調度ScheduleTask

docker使用特定的網絡

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

容器中nginx無法使用同一個網絡下的容器域名

避免DbContext同時在多個線程調用

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

free AI online tools All In One

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（二）使用kube-vip實現集羣VIP訪問

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（三）數據卷掛載NFS（網絡文件系統）

jsp、JavaScript與html

cmake學習

TCP/UDP的一些收發接口的特殊用法

android一些認識

Mysql索引與鍵

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

linux以太網驅動總結