天天看點
傳回

筆記二(JavaWeb)

想起就寫

上一個筆記寫的好累，這次換Markdown試試

預設擴充卡設計模式:父類不實作該方法，讓子類去實作(抽象方法)

模闆方法設計模式：定義一個操作中的方法骨架，而将一些步驟延遲到子類中。模闆方法使得子類可以不改變一個方法的結構即可重定義該算法的某些特定步驟。如：在父類中有參方法調用無參方法，子類可以重寫無參方法而不會影響到有參方法

(html)

1.基本規則

html書寫規則：

​ 1.雙标簽

你好宋偉 開始标記 結束标記 中間可以包裹内容或其他标簽

​ 2.單标簽（自結束标簽） charset="utf-8" 沒有結束标記 通常要搭配屬性使用

亂碼：文本本身編碼格式 跟讀取的程式編碼格式不統一
統一編碼格式

html解析文本格式

​ 1.回車換行 需要使用html中特殊的方式（使用br标簽）

​ 2.空格需要使用html特殊的格式（轉義符） &xxx;

​ 3.編寫文本時 注意不要跟html标簽格式産生沖突

2.常用标簽

2.1.标題标簽

加粗 改字号 換行（自己占滿一行） 上下邊距

<h1>測試标題</h1>
		<h2 id="myaim">測試标題</h2>
		<h3>測試标題</h3>
		<h4>測試标題</h4>
		<h5>測試标題</h5>
		<h6>測試标題</h6>
		普通文本
		<p>這是一個段落</p>

2.2.轉義标簽

源代碼 顯示結果 描述
&lt； <
&gt； >
&amp； &
&quot； "
&reg； 注冊商标
&copy； 版權符号
&trade； tm符号
&ensp； 半個空白位
&emsp； 一個空白位
&nbsp； b不斷行的空白

2.3.清單标簽 

定義清單	
		<dl>
			<dt>标題1</dt>
			<dd>清單項1</dd>
			<dd>清單項2</dd>
			<dt>标題2</dt>
			<dd>清單項1</dd>
			<dd>清單項2</dd>
		</dl>
	有序清單
		<ol type="a">
			<li>清單項1</li>
			<li>清單項2</li>
			<li>清單項3</li>
			<li>清單項4</li>
		</ol>

	無序清單
		<ul type="square">
			<li>清單項1</li>
			<li>清單項2</li>
			<li>清單項3</li>
			<li>清單項4</li>
		</ul>

2.4.文本标簽 

<u>測試</u><strong>文</strong><em>本</em>

2.5.超連結 

<a href="1html基本規則.html">這是超連結</a>

圖檔超連結
<a href="#">
			<img src="https://www.baidu.com/img/bd_logo1.png" width="50px" height="50px" alt="美女圖檔" />
		</a>

2.5.1.錨點

使用id與name聲明錨點的差別

在老版本浏覽器中最初都是使用name作為錨點位置的聲明方式。

網頁中name屬性的取值不唯一，是以造成錨點定位不準，是以後期浏覽器都支援使用id作為錨點聲明位置。

Html5規範中已經聲明取消name的錨點聲明方式，建議使用id。

超連結中經常嵌套圖檔标簽

<a href="#jump">點我看看</a>
---<p id="jump">我是該區域的相應内容</p>
    ---<p name="jump">我是該區域的相應内容</p>

2.6圖檔

Src 圖檔路徑

Width 圖檔寬度

Height 圖檔高度

Alt 圖檔說明(當圖檔失效時顯示)

1.src與href的差別：實際效果類似 内部處理方式不同 主要差別如下

2.src（ source ）的值是外部資源的通路路徑，在請求src資源時會将其指向的資源下載下傳并應用到目前文檔中，此時外部資源作為目前文檔的一部分（引入），一般用作非文本引入方式。

3.href 表示超文本引用（hypertext reference），在使用href請求外部資源時，會下載下傳外部資源，同時目前網頁讀取外部資源的内容（引用）。一般用作文本引入方式

注意：Link、a标簽使用href，其餘使用src

<img src="coder.jpg" width="100px" height="100px" alt="圖檔"/>

2.7表格

常見标簽

Table 表格

Tr 行

Td 單元格（列）

Th 列頭

Thead 表區域（頭）

Tbody 表區域（體）

Tfoot 表區域（腳）

Caption 表名

Rowspan 跨行

Cellspan 跨列

2.8.表單 

Input标簽
<input  type=”xxxx”/>  常用表單元素
type的屬性值：
	Text  文本框
	Password  密碼框
	Radio  單選按鈕
	Checkbox  多選按鈕
	File    檔案框
	Color   顔色框
	Date   日期框
	Button  空白按鈕
	Submit  送出按鈕
	Reset   重置按鈕

Select标簽  下拉菜單
<select>       
<option>選項1</option>
<option>選項1</option>
</select>

Textarea标簽 多行文本框
<textarea></textarea>  

Form表單（使用者填寫的資料需要通過表單标簽送出）
<form action=“http://www.sohu.com” method=“post”>  </form>
Action屬性 代表送出的位址
Method屬性 代表送出的方式get post

2.8.get和post

GET POST
後退按鈕/重新整理 無害 資料會被重新送出（浏覽器應該告知使用者資料會被重新送出）。
書簽 可收藏為書簽 不可收藏為書簽
緩存 能被緩存 不能緩存
編碼類型 application/x-www-form-urlencoded application/x-www-form-urlencoded 或 multipart/form-data。為二進制資料使用多重編碼。
曆史 參數保留在浏覽器曆史中。 參數不會儲存在浏覽器曆史中。
對資料長度的限制 是的。當發送資料時，GET 方法向 URL 添加資料；URL 的長度是受限制的（URL 的最大長度是 2048 個字元）。 無限制。
對資料類型的限制 隻允許 ASCII 字元。 沒有限制。也允許二進制資料。
安全性 與 POST 相比，GET 的安全性較差，因為所發送的資料是 URL 的一部分。 在發送密碼或其他敏感資訊時絕不要使用 GET ！ POST 比 GET 更安全，因為參數不會被儲存在浏覽器曆史或 web 伺服器日志中。
可見性 資料在 URL 中對所有人都是可見的。 資料不會顯示在 URL 中。

2.9.Frameset frame

通過frameset 可以把頁面拆分成多份

通過frame在每一份引入一個單獨的頁面

<FRAMESET  rows="20%,*"   frameborder="0">  //設定成無邊框
      <FRAME src="top.html" name="topframe" scrolling="no" noresize="noresize">  //scrolling="no" 不顯示滾動條
      <FRAMESET cols="20%,*">
      <FRAME src="left.html"  noresize="noresize" scrolling="no" name="leftframe" > //noresize="noresize"禁止調整架構大小
      <FRAME src="right.html" name="rightframe">  // name="rightframe"架構名稱，便于超文本連結錨标簽
</FRAMESET>

可以通過超連結的target屬性 指定到跳轉哪個frame

<frame src="xxxx" name="視窗名">　　 

<a href="xxx" target="視窗名">

(css)

1.css引入方式

1.通過style标簽 編寫css代碼 調試代碼時使用

2.通過style屬性 不推薦使用（調試較麻煩）（優先級高）

3.通過link标簽引入css檔案 最終格式 使頁面整潔

2.css常用選擇器

​

.元素選擇器         元素名（标簽名）
2.class選擇器   .class值     使用較靈活
	class屬性允許多個值
3.id選擇器           #id值             盡量不用

4.并集選擇器         選擇器,選擇器
5.交集選擇器         (元素)選擇器選擇器    
6.後代選擇器          選擇器 選擇器          可以跨代
7.子代選擇器          選擇器>選擇器         不可以跨帶
8.屬性選擇器         [屬性] [屬性="屬性值"] 一般要搭配交集選擇器使用
9.全局選擇器         *

2.1.僞類選擇器

：active 點選動作

：hover 滑鼠懸停

a:hover{
				color: greenyellow;				
			}
			a:active{
				color: lightblue;
			}
			div{
				border: 1px solid black;
				height: 100px;
				width: 100px;
				
			}
			div:hover{
				background-color: lightseagreen;
				cursor: pointer;
			}
			div:active{
				background-color: lightpink;
			}
			<a href="###">超連結</a>

3.常用屬性

html元素中 有幾個通用屬性使用

id 在頁面中盡量不要重複

name 表單元素的送出

class 跟樣式配合使用 值部分允許多個值

style 直接編輯樣式屬性 盡量不用

color 文字顔色

font-size 文字大小

font-family 字型類型

text-align 文本對齊方式

line-hight 行高

text-decoration 文本修飾（下劃線等）

Background 背景圖檔

background-repeat 背景圖檔重複方式

background-color 背景顔色

Widht 寬

Height 高

List-style 清單标簽的清單樣式

3.1.元素排布規則相關屬性display

預設文檔流

block 塊狀元素 從上到下

inline行内元素從左到右 不可以設定寬高 大小由内容大小決定

inline-block行内塊狀元素 從左到右 可以設定寬高

none不顯示

3.2盒子相關屬性

border 邊框

margin 外邊距

padding 内部填充

margin: 10px;上下左右

margin: 10px 20px;上下 左右

margin: 10px 20px 30px; 上 左右 下

margin: 10px 20px 30px 40px; 上 右 下 左

margin: 10px auto; 做塊左右居中

margin-left: 100px; 四邊可以單獨設定

padding 填充 用法和margin相似

3.2.1盒子嵌套的問題

當盒子模型嵌套使用時 會遇到超過邊界的問題（内容大小 大于父元素的大小）

可以使用overflow屬性處理 隐藏超過的内容

改變在父元素中的排列屬性 可以使用float浮動屬性 讓元素水準排列

通過div加浮動 可以使用css制作類似frameset的頁面布局

overflow例：
.mainD{
				border: 1px solid black;
				width: 700px;
				height: 500px;
				overflow: hidden;/*處理内部超過邊界*/
			}

3.3.position定位

relative 相對定位 元素本身位置保留（不脫離文檔流） 根據元素本身的位置進行偏移

absolute 絕對定位 元素本身位置不保留（脫離文檔流） 根據頁面位置進行偏移 不推薦使用

fixed 固定定位 元素本身位置不保留（脫離文檔流）根據浏覽器主體部分進行偏移 并固定在主偏移位置上(小廣告)

z-index 層疊順序 需要使用在有定位屬性的元素上，值大的覆寫值小的

javawebjava
上一篇: Maven+JSP+Servlet+C3P0+Mysql實作的音樂庫管理系統
下一篇: Netty原理二：NioEventLoop 如何啟動監聽事件前言原了解析總結