Html 內容css
|
l 多數標籤都是有開始標籤和結束標籤,其中有個別標籤由於只有單一功能,或者沒有要修飾的內容能夠在標籤內結束。html
l 想要對被標籤修飾的內容進行更豐富的操做,就用到了標籤中的屬性,經過對屬性值的改變,增長了更多的效果選擇。瀏覽器
l 屬性與屬性值之間用「=」鏈接,屬性值能夠用雙引號或單引號或者不用引號,通常都會用雙引號。或公司規定書寫規範。安全
l 格式:<標籤名 屬性名='屬性值'> 數據內容 </標籤名>服務器
<標籤名 屬性名='屬性值' />網絡
l 操做思想:框架
爲了操做數據,都須要對數據進行不一樣標籤的封裝,經過標籤中的屬性對封裝的數據進行操做。ide
標籤就至關於一個容器。對容器中的數據進行操做,就是在再不斷的改變容器的屬性值。工具
經常使用標籤的使用佈局
字 體 |
||||||||||||||||||
例:<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 鏈接一個文件
應用:當要在圖像中選取某一部分做爲鏈接的時候。如:中國地圖每一個省所對應的區域。 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>。 |
超 鏈 接 |
兩種用法: 1、超連接<a href=」」> 例: <a href=」http://www.sina.com.cn」 target=」_blank」>新浪</a> <!-- href屬性值能夠是url,也能夠是本地文件。target屬性是指定在哪一個窗口或者幀中打開。 --> 2、定位標記<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做爲配置文件。 |