html

web基礎開發技術總結

1. html(超文本標籤語言)
1.0  <!DOCTYPE> 聲明不是 HTML 標籤;它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD,因爲 HTML 4.01 基於 SGML。
DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。\

        <!-- 如下爲html4的標準DOCTYPE聲明 -->
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1.1註釋標籤:<!-- 這部分內容是註釋 -->
1.2列表標籤:dl
上層標題標籤:dt,
下層數據標籤:dd, 封裝的內容是會被縮進的。 有自動縮進效果。 
	<dl>
		<dt>上層項目內容</dt>
		<dd>下層項目內容</dd>			
		<dd>下層項目內容</dd>			
		<dd>下層項目內容</dd>			
	</dl>
	無序項目列表標籤:ul,條目數據封裝標籤,li
	有序項目列表標籤:ol
	<ul type="square">
		<li>無序項目列表</li>
		<li>無序項目列表</li>
		<li>無序項目列表</li>
		<li>無序項目列表</li>
	</ul>
		
	<ol type="a">
		<li>有序的項目列表</li>
		<li>有序的項目列表</li>
		<li>有序的項目列表</li>
		<li>有序的項目列表</li>
	</ol>
1.3圖片標籤:img

	<!-- src 圖片路徑屬性,alt屬性表示當圖片加載失敗時,會顯示相應的文字提示。 -->
	<img src="imgs\1.jpg" height=350 width=500 border=10 alt="圖片1.jpg" />
1.4表格標籤:table
table標籤的下一級標籤是tbody
th表示表格標籤標題
tr表示表格標籤內容//table標籤有很多屬性,但是由於CSS的發展,各屬性都逐漸被淘汰。
	<table>
		<tbody>
			<tr>
				<th>姓名</th>
				<td>張三</td>
			</tr>
			<tr>
				<th>年齡</th>
				<td>30</td>
			</tr>
		</tbody>
	</table>
1.5超鏈接標籤:a
1.5.1 作用:連接資源。當有了href屬性纔有了點擊效果。href屬性的值的不同,解析的方式也不一樣。 如果在該值中沒有指定過任何協議。解析時,是按照默認的協議來解析該值的。默認協議是file協議。
	1.5.2	<!-- 當用戶點擊時表示在 新窗口中打開鏈接。使用網絡http協議鏈接資源 -->
	<a href="http://www.sohu.com.cn" target="_blank">新浪網站</a>
	1.5.3	<!-- 用戶點擊時使用file協議打開本地的圖片資源 -->
	<a href="imgs/1.jpg">圖片</a>
	1.5.4	<!-- 使用js代表表示點擊後執行onclick函數。
	<a href="javascript:void(0)" onclick="alert('你好')">這是一個超鏈接</a>
	1.5.5	<!-- 點擊後 打開系統內默認的郵件服務軟件,發送郵件 -->
	<a href="mailto:[email protected]">聯繫我們</a>
	1.5.6	<!-- a標籤也可以當做錨點使用  當一個網頁很長時間需要給網頁分段 -->
	<a name=top>頂部位置</a>
	<a href="#top">回到頂部位置</a>


1.6表單標籤:form
如果要給服務端提交數據,表單中的組件必須有name和value屬性。用於給服務端獲取數據方便。
	1.6.1	<!-- 輸入類型爲文本的輸入框 -->
	<input type="text" name="user" value="name" />
	1.6.2	<!-- 輸入類型爲密碼類型的輸入框 -->
	<input type="password" name="psw"  />
	1.6.3	<!-- 輸入單選框的輸入框 name屬性都爲sex但是value屬性不同 -->
	<input type="radio" name="sex" value="nan" />男
	<input type="radio" name="sex" value="nv" checked="checked" />女<br/>
	1.6.4	<!-- 輸入爲複選框 可以多選 同樣name屬性都爲tech 但是value屬性不同 -->
	<input type="checkbox" name="tech" value="java"/>JAVA
	<input type="checkbox" name="tech" value="html"/>HTML
	<input type="checkbox" name="tech" value="css"/>CSS<BR/>
	1.6.5	<!-- 下拉菜單同樣只能選擇一個  可以通過設置selected屬性設置默認選項-->	
	<select name="country">
		<option value="none">--選擇國家--</option>
		<option value="usa">美國</option>
		<option value="en">英國</option>
		<option value="cn" selected="selected">中國</option>
	</select>
	1.6.6	<!-- 按鈕:通過設置onclick函數可以再客戶端執行不同的操作。 -->
	<input type="button" value="確定" onclick="alert('按鈕')" />
	1.6.7	<!-- 多行文本輸入框 -->
	<textarea name="text"></textarea>
	1.6.8	<!-- 其他提交按鈕 submit可以指定提交方式 get post -->
	<input type="reset" value="清除數據"/>
	<input type="submit" value="提交數據" />
1.6.9post get提交方式的區別
<!-- 當點擊提交後 -->
提交方式:get提交。直接在地址欄
地址欄:http://localhost/?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn
提交方式:POST
地址欄:http://localhost:9090/

get提交,提交的信息都顯示在地址欄中。
get提交,對於敏感的數據信息不安全。
get提交,對於大數據不行,因爲地址欄存儲體積有限。最大爲2K的內容
get提交,將信息封裝到了請求消息的請求行中

post提交,對於敏感信息安全。
post提交,提交的信息不顯示地址欄中。
post提交,可以提交大體積數據。 
post提交,將信息封裝到了請求體中。

在服務端的一個區別。
如果出現將中文提交到tomcat服務器,服務器默認會用iso8859-1進行解碼會出現亂碼,
通過iso8859-1進行編碼,在用指定的中文碼錶解碼。即可。
這種方式對get提交和post提交都有效。 

但是對於post提交方式提交的中文,還有另一種解決辦法,就是直接使用服務端一個對象
request對象的setCharacterEncoding方法直接設置指定的中文碼錶就可以將中文數據解析出來。
這個方法只對請求體中的數據進行解碼。 

1.7 其他標籤

<hr/> 標籤在 HTML 頁面中創建一條水平線。水平分隔線(horizontal rule)可以在視覺上將文檔分隔成各個部分。
<br/> 表示文本換行 是空標籤,不需要結束。
X<sub>2</sub> X<sup>2</sup>腳標

	<div>這是一個div區域</div><!-- 有換行 這兩個標籤主要是爲了方便使用css定義樣式 -->
	<span>span區域</span>
	<p>這是一個段落1</p>
		
		<!--
		標籤分爲兩大類。
		1,塊級標籤(元素):標籤結束後都有換行。div p dl table title ol ul 
		2,行內標籤(元素):標籤結束後沒有換行。 font span img input select a
		-->





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章