Html 內容 Html就是超文本標記語言的簡寫,是最基礎的網頁語言。 Html是通過標簽來定義的語言,代碼都是由標簽所組成。 Html代碼不用區分大小寫。 Html代碼由<html>開始</html>結束。裡面由頭部分<head></head>和體部分<body></body>兩部分組成。 頭部分 ...
Html 內容
|
l 多數標簽都是有開始標簽和結束標簽,其中有個別標簽因為只有單一功能,或者沒有要修飾的內容可以在標簽內結束。
l 想要對被標簽修飾的內容進行更豐富的操作,就用到了標簽中的屬性,通過對屬性值的改變,增加了更多的效果選擇。
l 屬性與屬性值之間用“=”連接,屬性值可以用雙引號或單引號或者不用引號,一般都會用雙引號。或公司規定書寫規範。
l 格式:<標簽名 屬性名='屬性值'> 數據內容 </標簽名>
<標簽名 屬性名='屬性值' />
l 操作思想:
為了操作數據,都需要對數據進行不同標簽的封裝,通過標簽中的屬性對封裝的數據進行操作。
標簽就相當於一個容器。對容器中的數據進行操作,就是在再不斷的改變容器的屬性值。
常用標簽的使用
字 體 |
||||||||||||||||||
例:<font size=5 color=red>字體標簽示例</font> 註:簡單顏色可是直接寫對應的英文,複雜顏色用16進位表示,表現形式#FF0000兩個數為一組,按紅,綠,藍排列,如:#00FF00表示綠色。建議用工具選取。
因為標題是文本中常用的內容,為了方便操作而定義的。其實就是某個字型大小和粗體的組合。
如果要在網頁上顯示一些特殊符號,比如< > & 等。因為這些符號在代碼中會被瀏覽器識別並解釋,所以用一些特殊的方式來表示。
註:在Dreamweaver8中都具有聯想功能。 |
列 表 |
<dt>:上層項目 <dd>:下層項目 例: <dl> <dt>游戲名稱</dt> <dd>星際爭霸</dd> <dd>紅色警戒</dd> <dt>部門名稱</dt> <dd>技術部</dd> <dd>培訓部</dd> </dl> 效果:
列表中項目符號對應的標簽 <ol>:數字標簽(a A 1 i I) <ul>:符號標簽(○●■) <li>:具體項目內容標簽。此標簽只在<ol> <ul>中有效。 通過type屬性更改項目符號,如果想做出效果更好的列表,如:黑色圓點用圖片表示,就用到CSS。 |
圖 像 |
例:<img src=”1.jpg” align=”middle” border=”3” alt=”圖片說明文字 圖片不顯示是 出現文字”/> align:屬性定義圖片的排列方式,border用來設置圖像的邊框。Src 連接一個文件 Title 滑鼠放上去會有 說明文字
應用:當要在圖像中選取某一部分作為連接的時候。如:中國地圖每個省所對應的區域。 map標簽要和img標簽聯合使用。Href是超連接 <img src="Sunset.jpg" alt="圖片說明文字" usemap="#Map" /> <map > <area shape="rect" coords="50,59,116,104" href="1.html" /> <area shape="circle" coords="118,203,40" href="2.html" /> </map> |
表 格 |
組成:標題標簽:<caption>,給表格提供標題。 表頭標簽:<th>,一般對錶格的第一行或者第一列進行格式化,就是粗體顯示。並不常用。 行標簽:<tr>
單元格標簽:<td>,載入行標簽的裡面。可以簡單理解為,先有行,在行中在加入單元格。 格式: <table border="1" width=”40%”><!—width值為百分比可以讓表格的寬度隨瀏覽器視窗的大小變化--> <caption>表格標題</caption> <tr><!-- 第一行 --> <th>姓名</th> <th>年齡</th> </tr> <tr algin=”center”><!-- 第二行 --> <td>張三</td> <td>23</td> </tr> </table> 效果:
<table border="1" width="40%"> <tr> <tr> <th colspan="2"> <!-- colspan:th標簽占兩列 --> 個人信息 </th> </tr> <tr align="center"> <td>張三</td> <td>23</td> </tr> </tr> </table> 效果:
每個表格可以有一個表頭、一個表尾和一個或多個表體(即正文),分別以THEAD、TFOOT和TBODY元素表示。 THEAD、TFOOT包含關於表格列的信息。 TBODY作用是:可以控製表格分行下載,從而提高下載速度。(網頁的打開是先表格的的內容全部下載完畢後,才顯示出來,分行下載可以先顯示部分內容,這樣會減少用戶等待時間。) 使用TBODY的目的是可以使得這些包含在內的代碼不用在整個表格都解析後一起顯示,就是說如果有多個行,那麼如果得到一個TBODY行,就可以先顯示一行。 TBODY這個標簽可以控製表格分行下載,當表格內容很大時比較實用,在需要分行下載處加上<tbody>和</tbody>。 |
超 鏈 接 |
兩種用法: 一、超鏈接<a href=””> 例: <a href=”http://www.sina.com.cn” target=”_blank”>新浪</a> <!-- href屬性值可以是url,也可以是本地文件。target屬性是指定在哪個視窗或者幀中打開。 --> 二、定位標記<a name=””> 一般在本頁面中使用,當網頁內容過長,定位標記會比拖動滾動條方便快捷。 註:定位標記要和超鏈接結合使用才有效。 例: <a name=”標記”>標記位置</a> <p>…….<!--很多空行以製造網頁過長的效果 --> <a href=”#標記”>返回標記位置</a> 註:使用定位標記時一定在href值的開始加入#標記名。 |
框 架 |
註:框架標簽不可以放到<body>,一般為了代碼的可讀性,會到<head>和<body>之間。 例: <frameset rows="10%,*"> <frame src="1.html" name="top" /> <frameset cols="30%,*"> <frame src="2.html" name="left" /> <frame src="3.html" name="right" /> </frameset> </frameset> 這段代碼會需要已經存在的3個html頁面,分別是:1.html,2,html,3.html 效果:
註:當框架大小不想被滑鼠拖動而改變,可以在frame標簽中加入noresize屬性,這個屬性沒有屬性值,稱為標記屬性,加上就為固定。在XHTML的規範中,所有的屬性都要有屬性值,那麼標記屬性的屬性值就是自身,如:noresize=”noresize” 10. 畫中畫標簽:<iframe> <iframe src=”1.html” > 很遺憾,畫中畫你沒有看到,因為你的瀏覽器不支持iframe標簽。 </iframe> 框架標簽現在不是很常用,佈局都用div+css+table。框架很少使用了。 |
ø表 單ø |
11. 表單標簽:<form> 表單標簽是最常用的標簽,用於與伺服器端的交互。 <input>:輸入標簽 :接收用戶輸入信息。 其中的type屬性指定輸入標簽的類型。 l 文本框 text。輸入的文本信息直接顯示在框中。 l 密碼框 password。輸入的文本以原點或者星號的形式顯示。 l 單選框 radio 如:性別選擇。 l 覆選框 checkbox 如:興趣選擇。 l 隱藏欄位 hidden 在頁面上不顯示,但在提交的時候隨其他內容一起提交。 l 提交按鈕 submit 用於提交表單中的內容。 l 重置按鈕 reset 將表單中填寫的內容設置為初始值。 l 按鈕 button 可以為其自定義事件。 l 文件上傳 file 後期擴展內容,會自動生成一個文本框,和一個瀏覽按鈕。 l 圖像 image 它可以替代submit按鈕。 <select>:選擇標簽 提供用戶選擇內容。如:用戶所在的省市。size 屬性為顯示項目個數。 <option>:子項標簽 屬性 selected 沒有屬性值,加在子項上,其中一個子項上,子項就變成預設被選項。 <textarea>:多行文本框。如:個人信息描述。 <label>:用於給各元素定義快捷鍵。 for 屬性:指定快捷鍵作用的表單元素。必須與要作用的表單元素的id值相同。 accesskey 屬性:指定快捷鍵,此快捷鍵需要和alt鍵組合使用。 例: <label for="user" accesskey="u">用戶名(u)</label> <input type="text" id="user" />
表單提交: 1.先定義form表單中的action屬性值,指定表單數據提交的目的地(服務端)。 2.明確提交方式,通過指定method屬性值。如果不定義,那麼method的值預設是get。
get和post這兩種最常用的提交方式的區別: 1.get提交將數據顯示在地址欄,對於敏感信息不安全。 post提交不顯示在地址欄,對於敏感信息安全 2.地址欄中存放的數據是有限,所以get方式對提交的數據體積有限制。 post可以提交大體積數據。 3.對提交數據的封裝方式不同: get:將提交數據封裝到了http消息頭的第一行,請求行中。 post:將提交的數據封裝到消息頭後,在請求數據體中。 註意:通常表單使用post提交,因為編碼方便。 對於Tomcat伺服器端,預設的解碼方式是ISO8859-1,那麼中文會出現亂碼。 通過post提交,可以使用request.setCharacterEncoding(“GBK”);來解決亂碼問題,該方法只對數據體有效。 如果是get提交,request.setCharacterEncoding(“GBK”)該方法對亂碼解決不了,必須先進行ISO8859-1編碼,然後在進行GBK的解碼。這種方式雖然對post提交的亂碼也通用,但是麻煩。所以建立表單提交使用post。 |
頭 標 簽 |
頭標簽都放在<head></head>頭部分之間。包括:title base meta link 12. <title>:指定瀏覽器的標題欄顯示的內容。 13. <base>: href 屬性:指定網頁中所有的超鏈接的目錄。可以是本地目錄,也可以是網路目錄。註意值得結尾處一定要用/表示目錄。只作用於相對路徑的超鏈接文件。 target 屬性:指定打開超鏈接的方式。如_blank 表示所有的超鏈接都用新視窗打開顯示。 14. <meta>: name 屬性:網頁的描述信息。當取keywords時,content屬性的內容就作為搜索引擎的關鍵字進行搜索。 http-equiv 屬性:模擬HTTP協議的響應消息頭。 例: <meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /> 表示打開此頁面3秒後自動轉到新浪頁面。 15. <link>: rel 屬性:描述目標文檔與當前文檔的關係。 type 屬性:文檔類型。 media:指定目標文檔在哪種設備上起作用。 例: <link rel="stylesheet" type="text/css" media="screen,print" href="a.css" /> |
Other |
16. <marquee> 讓內容動起來。 direction 屬性:left right down up behavior 屬性:scroll alternate slide 17. <pre>:可以將文本內容按在代碼區的樣子顯示在頁面上。 |
XHTML XML |
XHTML是可擴展的超文本標記語言(Extensible HyperText Markup Language)。 l XHTML是w3c組織在2000年的時候為了增強HTML推出的,本來是想替代HTML,但是發現Internet上用HTML寫的網頁太多,未遂!可以理解為它是HTML一個升級版(HTML4.01)。 l XHTML的代碼結構更為嚴謹,是基於XML的一種應用。 XML是可擴展標記語言(Extensible Markup Language) l XML是對數據信息的描述。HTML是數據顯示的描述。 l XML代碼規定的更為嚴格,如:標簽不結束被視為錯誤。 l XML規範可以被更多的應用程式所解釋,將成為一種通用的數據交換語言。 l 各個伺服器,框架都將XML作為配置文件。 |
|
|
|
是大夫撒旦防撒地方撒 |
|
色人防守對方薩芬的 |
|
|
|
||||||
|
|
|