筆記二(JavaWeb)

Amier_X發表於2020-05-22
筆記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。

超連結中經常巢狀圖片標籤筆記二(JavaWeb)

<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 層疊順序 需要使用在有定位屬性的元素上，值大的覆蓋值小的

相關文章