整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
注釋：<!-- -->
DOCTYPE：就是告訴瀏覽器，我們要使用什么規(guī)范
head：網(wǎng)頁頭部標(biāo)簽
body：代表網(wǎng)頁主題
標(biāo)題標(biāo)簽
段落標(biāo)簽
換行標(biāo)簽
水平線標(biāo)簽
字體樣式標(biāo)簽
注釋
特殊字符
特殊符號就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一級目錄
文本鏈接
<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>
圖像鏈接：就是嵌套圖片標(biāo)簽
頁面間鏈接
錨鏈接
功能性鏈接
塊元素
行內(nèi)元素
什么是列表：就是一種展示方式
有序列表
無序列表
自定義列表
<dl>
<dt></dt> 標(biāo)題
<dd></dd> 選項
<dd></dd>
<dd></dd>
</dl>為什么使用表格
基本結(jié)構(gòu)
<table border="1px" 邊框>表格標(biāo)簽
<tr>
<td></td>列標(biāo)簽
<td></td>
<td></td>
</tr>行標(biāo)簽 這代表一行
</table>跨列：使用colspan="夸的列數(shù)" <td colspan="4">
跨行：使用rowspan="夸的行數(shù)" <td rowspan="4">
視頻元素
音頻元素
元素名 | 描述 |
header | 標(biāo)題頭部區(qū)域的內(nèi)容(用于頁面或頁面中的一塊區(qū)域) |
footer | 標(biāo)記腳部區(qū)域的內(nèi)容（用于整個頁面或頁面的一塊區(qū)域） |
section | web頁面中的一塊獨立區(qū)域 |
atricle | 獨立的文章內(nèi)容 |
aside | 相關(guān)內(nèi)容或應(yīng)用(常用于側(cè)邊欄) |
nav | 導(dǎo)航類輔助內(nèi)容 |
<iframe src="path" name="mainFrame"></iframe>
表單：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效
post方式提交：比較安全，可以傳輸大文件
表單元素格式
屬性 | 說明 |
type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認(rèn)為text |
name | 指定表單元素的名稱 必填，用來后臺讀取 |
value | 元素的初試值。type為radio時必須指定一個值 |
size | 指定元素的初始寬度。當(dāng)type為text時或者password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位 |
maxlength | type為txet或password時，輸入的最大字符數(shù) |
cheaked | type為radio或cheackbox時，指定按鈕是否被選中 |
單選框
多選框
按鈕
<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src ="點擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕下拉框
<select name="列表名稱">
<option value="選項的值" select>中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
</select>
提交的格式就是列表名稱和value文本域
<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>郵件驗證
<input type="email" name="youjian">URL
<input type="url" name="url"> 數(shù)字驗證
<input type="number" name="num" max="100" min="0" step="10">滑塊
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隱藏域 hidden
<input type="text" id="mark" hidden>只讀 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增強(qiáng)鼠標(biāo)可用性
<label for="mark">點擊</label>
<input type="text" id="mark">為什么要進(jìn)行表單驗證：緩解服務(wù)器壓力、保證數(shù)據(jù)安全
提示信息
非空判斷
正則表達(dá)式驗證
高級驗證使用js
歡web前端網(wǎng)頁開發(fā)和python開發(fā)的、請加下企鵝群：526929231 內(nèi)有大量案例和學(xué)習(xí)教程，對python、和web感興趣的朋友可以加下哦
所有的控件(表單元素都寫在form表單標(biāo)簽中)
<form> 使用form標(biāo)簽建立表單域，當(dāng)提交數(shù)據(jù)的時候會收集表單域里面的數(shù)據(jù)然后發(fā)送給服務(wù)器</form>
賦予不同的type值可實現(xiàn)不同的表單控件
| type類型 | 描述 |
|---|---|
| text | 文本輸入框 maxlength最大長度、onlyready只讀、 disabled禁止、 placeholder |
| password | 密碼遮掩框 |
| radio | 單選按鈕，checked默認(rèn)選擇 |
| checkbox | 多選框 |
| submit | 收集表單域的name數(shù)據(jù)，然后提交到服務(wù)器上 |
<select> <option value="music">聽音樂</option> <option value="running">跑步</option> <option value="study">學(xué)習(xí)</option> <option value="coffee">找小姐姐一起喝咖啡</option></select><!-- selected="selected"默認(rèn)選中 --><!-- size="2" 現(xiàn)實兩行下拉項 --><!-- disabled 禁止選擇 -->
selected默認(rèn)選擇一項
<textare cols="30" rows="10"></textarea>
clos顯示多少列，rows現(xiàn)實多少行
單獨使用沒有效果，一般配合js點擊按鈕的時候執(zhí)行什么操作
<input type="button" value="自定義按鈕標(biāo)題" />
回到表單初識狀態(tài)
<input type="reset" value="重置表單" />
目的在于收集或發(fā)送信息 頁面上面沒有任何效果 CSRF跨域攻擊在此作用
<input type="hidden" value="ABCD1234" />
為input元素定義一個標(biāo)記，label元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果你在label元素內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽是，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上
<input id="man" type="radio" /><label for="man">男</label>
| 屬性 | 描述 |
|---|---|
| action | 指定提交到哪個url上 |
| method | 提交方式，常用的GET / POST |
| Method | Description |
|---|---|
| GET | URL地址欄上做拼接問號再加參數(shù) |
| POST | 隱式提交方式，看不到，可以抓包 |
pre可定義預(yù)格式化的文本。
pre元素中的文本通常會保留空格和換行符。
主要用于在網(wǎng)頁上顯示代碼，比如在網(wǎng)頁當(dāng)中顯示html模板
代碼示例
java復(fù)制代碼public static String generateContent(String content) {
// 將 content 進(jìn)行 url 編碼
String ans;
try {
ans = URLEncoder.encode(content, "UTF-8");
} catch (UnsupportedEncodingException e) {
// 處理異常情況
throw new RuntimeException(e);
}
return ans;
}
java復(fù)制代碼public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最終生成的 URL 的值為：" + ansUrl);
}
運(yùn)行結(jié)果：
perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F%E9%BB%91
粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:
ini復(fù)制代碼example.com/resource?a=小黑
網(wǎng)頁截圖：
java復(fù)制代碼public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小 黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最終生成的 URL 的值為：" + ansUrl);
}
運(yùn)行結(jié)果：
perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F+%E9%BB%91
粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:
ini復(fù)制代碼https://example.com/resource?a=小+黑
網(wǎng)頁截圖：
java復(fù)制代碼public static String generateContent(String content) {
// 將 content 進(jìn)行 url 編碼
String ans;
try {
// -----------------------調(diào)整-----------------------
ans = URLEncoder.encode(content, "UTF-8").replace("+", "%20");
} catch (UnsupportedEncodingException e) {
// 處理異常情況
throw new RuntimeException(e);
}
return ans;
}
public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小 黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最終生成的 URL 的值為：" + ansUrl);
}
運(yùn)行結(jié)果：
perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91
粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:
ini復(fù)制代碼https://example.com/resource?a=小 黑
網(wǎng)頁截圖：
其中 %20 是空格經(jīng)過編碼后的結(jié)果
從上面的案例可以看到，如果 url 中有空格出現(xiàn)，且不經(jīng)過特殊處理，那么將會導(dǎo)致瀏覽器無法正確解析 url，從而導(dǎo)致 url 重定向失敗，那么問題的原因是什么呢？首先來看一下URL的組成部分
下面是一個簡單的 URL 鏈接：
bash復(fù)制代碼http://localhost:8080/path/to/index.html?id=123#content它主要有下面幾個部分組成
在 URL 編碼過程中，會遵循以下的規(guī)則：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
