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標籤的下一級標籤是tbodyth表示表格標籤標題
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
-->