base64格式上傳圖片方法
阿新 • • 發佈：2021-06-29
一、HTML
<!DOCTYPE html> <!--告訴瀏覽器網頁所使用的文件型別（DOCTYPE）--> <html> -- 文件的開始標籤 <head> -- 文件頭的開始標籤 <title>標題</title> -- 文件標題，顯示的瀏覽器標題欄中 </head> -- 文件頭的結束標籤 <body> -- 文件內容的開始標籤 內容 </body> -- 文件內容的結束標籤 </html> -- 文件的結束標籤 <!--註釋內容-->
塊級標籤：
就像標題、段落一樣，需要在頁面上佔據一塊的位置的標籤
-
<h1>---<h6>標題
-
<p>段落標籤（無格式）
-
<div>塊標籤
-
<pre>用於顯示想要格式化顯示的文字（程式碼）
內聯標籤：
-
<em>/<i>斜體
-
<strong>/<b>黑體
-
<sub>下標
-
<sup>上標
-
<br>換行
-
<hr>水平線
-
<span>普通內聯標籤
-
<code>標示一段程式碼
常用實體字元：
-
空格
-
<<
-
> -
&&
-
"“
1 - <a> 標籤：
| 屬性 | 屬性作用 | 值 |
|---|---|---|
href |
指定超連結目標的 URL | 任何有效文件的相對或絕對 URL / 絕對路徑（http/https/mailto/ftp） |
name |
記錄頁面跳轉位置 | 設定頁面錨點 top(頂部)/middle(中部) |
target |
指定開啟位置 | _blank:新頁面開啟；_selftargetname：指定視窗或Frame中開啟連結 |
_parent:父視窗中開啟；_top:最頂層父視窗中開啟； |
||
2 - <img>標籤：
若圖片有邊框，用
style="borde:0px;"屬性去掉邊框圖片地圖
<map>：設定點選圖片不同位置，觸發不同的連線
| 屬性 | 值 | 作用 |
|---|---|---|
alt |
alt="無法載入" |
規定影象的替代文字 |
src |
src="圖片地址" |
規定顯示影象的 URL |
height |
height=200px |
定義影象的高度 |
width |
width=400px |
設定影象的寬度 |
usemap |
usemap="#earthmap" |
earthmap為<map>標籤的name屬性值 |
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img alt="earth" src="./stady.jpg" usemap="#earthmap"/>
<map name="earthmap">
<area shape="rect" coords="0,0,20,20" href="baidu" href="https://www.baidu.com" target="_blank">
<area shape="circle" coords="80,80,20" href="google" href="https://www.google.com" target="_blank">
</map>
</body>
</html>
3 - <input>標籤：
| 屬性 | 值 | 作用 |
|---|---|---|
alt |
alt="text" |
定義文字 |
type |
type=button |
定義可點選按鈕 |
type=text |
定義單行的輸入欄位，使用者可在其中輸入文字（預設寬度為 20 個字元） | |
type=password |
定義密碼欄位 | |
type=hidden |
定義隱藏的輸入欄位 | |
type=radio |
定義單選按鈕 | |
type=checkbox |
定義複選框 | |
type=reset |
定義重置按鈕，清除表單中的所有資料 | |
type=submit |
定義提交按鈕，把表單資料傳送到伺服器 | |
value |
value=" " |
規定 input 元素的值 |
4 - 表格標籤<table>：
<table border="1" align="center" cellspacing="7" cellpadding="20">
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td colspan="2">佔兩列(1-4)</td>
<td >1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
4 - 1 <table>標籤：
| 屬性 | 值 | 作用 |
|---|---|---|
border |
規定表格邊框的寬度 | |
width |
規定表格的寬度 | |
cellpadding |
規定單元邊沿與其內容之間的空白（單元格內邊距） | |
cellspacing |
規定單元格之間的空白（單元格邊框的寬度） | |
4 - 2 <th>,<td>,<tr>標籤：
| 標籤 | 作用 | 屬性 | 值 | 作用 |
|---|---|---|---|---|
<th> |
表頭 | |||
<td> |
列 | colspan |
colspan=2 |
規定單元格可橫跨的列數(佔兩列) |
rowspan |
rowspan=2 |
規定單元格可橫跨的行數(佔兩行) | ||
align |
left,right,center |
規定單元格內容的水平對齊方式 | ||
<tr> |
行 | colspan |
||
rowspan |
||||
align |
5 - 表單標籤<form>：
表單：用來蒐集使用者資訊並提交給伺服器
一般按鈕要提交表單：JavaScript
<form method="post" >
使用者名稱：<input type="txt" name="username"><br>
密碼：<input type="password" name="password"><br>
<a><input type="submit" value="登入"></a>
</form>
5 - 0 標籤的輸入提示
list屬性搭配<datalist>標籤來使用 輸入提示
<datalist>標籤中的提示項由<option>標籤包裹
<datalist id="fruit">
<option>梨</option>
<option>西瓜</option>
<option>蘋果</option>
<option>菠蘿</option>
<option>火龍果</option>
</datalist>
請輸入水果名：<input list="fruit">
5 - 1 <form>標籤：
| 屬性 | 值 | 作用 |
|---|---|---|
method |
get | （提交資料的方式）收集少量的使用者資訊，url長度限制為4KB |
| post | 收集大量使用者資訊，資訊儲存在HTTP請求訊息的正文，提交後不能使用重新整理按鈕 | |
action |
地址（form.html） | 提交表單時轉到的url地址 |
5 - 2 <input>標籤：
| 屬性 | 值 | 作用 |
|---|---|---|
type |
type=button |
可點選按鈕，已棄用，一般按鈕，，由button標籤中的button替代 |
type=text |
單行的輸入欄位，使用者可在其中輸入文字（預設寬度為 20 個字元） | |
type=password |
密碼欄位 | |
type=date |
日期輸入框 | |
type=time |
時間輸入框 | |
type=hidden |
隱藏輸入框(使用者不可見，但輸入框的值會隨表單一起提交，用與多頁面收集使用者資訊) | |
type=radio |
單選按鈕，name相同的一組只能選一個 | |
type=checkbox |
複選框 | |
type=reset |
重置按鈕，清除表單中的所有資料，已廢棄，由button標籤中的reset替代 | |
type=submit |
提交按鈕，把表單資料傳送到伺服器，已廢棄，由button標籤中的submit替代 | |
value |
文字框的值 | |
name（必須包含） |
提交表單時，文字框的值value儲存在name變數中 | |
| maxlength | 文字框允許輸入的最多的字元數 | |
| readonly | 只讀文字框 | |
| disabled | 只讀文字框，文字框顯示為灰色，文字框的值不會發送到伺服器 |
5 - 3 <textarea>標籤
多行文字輸入框
沒有字元數的限制
| 屬性 | 值 | 作用 |
|---|---|---|
| rows | 行數 | 內容過長時自動顯示滾動條 |
| cols | 列數 | |
5 - 4 <select>標籤
下拉列表框
| 標籤 | 屬性 | 值 | 作用 |
|---|---|---|---|
| select | name | 下拉框的名稱 | |
| size | 顯示行數（>1） | 顯示多少行，以平鋪的形式顯示 | |
| multiple | multiple | 可以多選 | |
| option | value | 選項代表的值 | 提交以後會將value的值儲存到name中 |
| selected | selected | 是否選中此選項 | |
| optgroup | labal | 分組名稱（此名稱不可選中） | 用來對選項進行分組 |
<select name="country">
<optgroup label="北美洲">
<option value="America">美國</option>
</optgroup>
<optgroup label="亞洲">
<option value="China" selected="selected">中國</option>
<option value="India">印度</option>
<option value="Russia" >俄羅斯</option>
</optgroup>
</select>
<select name="country" size="5" multiple="multiple">
<option value="America">美國</option>
<option value="China" selected="selected">中國</option>
<option value="India">印度</option>
<option value="Russia" >俄羅斯</option>
</select>
5 - 5 <lable>標籤、<fieldset>標籤
<lable>標籤：實現點選按鈕旁邊與點選選項框的效果相同
<fieldset>標籤：實現分組框
| 標籤 | 屬性 | 值 | 作用 |
|---|---|---|---|
| lable | for | <input>標籤中id的值 |
點選按鈕旁邊與點選選項框的效果相同 |
| fieldset | style | width:200px | 設定分組框的大小 |
<fieldset>/<legend> |
分組框的名稱 |
<fieldset style="width: 200px">
<legend>選擇顏色</legend>
<label for="blue">藍色</label>
<input type="radio" id="blue" name="color" ><br>
<label for="red">紅色</label>
<input type="radio" name="color" id="red"><br>
<label for="white">白色</label>
<input type="radio" name="color" id="white">
</fieldset>
6 - 框架<frameset>（瞭解）
此標籤不能寫在<html>標籤中，因為它是集成了多個html
可以將很多頁面組合成一個頁面
常見應用場景：（部分重新整理）
一個 frame 中放置頁面導航，另一個 frame 中放置頁面內容，當點選頁面導航時，只重新整理頁面內容。
| 標籤 | 屬性 | 值 | 作用 |
|---|---|---|---|
<frameset> |
cols | px;%;* | 垂直分欄的各列的寬度(*表示佔用剩餘全部空間) |
| rows | px;%;* | 水平分欄的各行的寬度(*表示佔用剩餘全部空間) |
|
| frameborder | 0 | 不顯示分割條 | |
<frame> |
noresize | noresize | 分割條不可拖動 |
| scrolling | no | 不顯示滾動條 | |
<!-- <frameset cols="33%,33%,*">
<frame src="1.html"></frame>
<frame src="2.html"></frame>
<frame src="3.html"></frame>
</frameset> -->
<frameset rows="33%,33%,*">
<frame src="1.html"></frame>
<frame src="2.html" ></frame>
<frame src="3.html"></frame>
</frameset>
6 - 1 框架之間的導航
框架中的連結可以在框架之間導航，通過設定 標籤的 target 屬性
<a>的target屬性和<frame>的name屬性相對應
6 - 2 <frameset>的缺點
- 無法正確顯示頁面的url地址
- 通過URL開啟單獨的一個內容頁面時，看到的不是完整的頁面
- Frame之間的導航有點複雜，可能出現不一致的情況
- 重新整理頁面後載入的頁面和使用者期望的可能不一致