HTML基礎知識

、HTML基本信息

注釋：

DOCTYPE：就是告訴瀏覽器，我們要使用什么規范

head：網頁頭部標簽

title：網頁標題
meta：描述性標簽，描述網站的信息，用來做SEO

charset = "UTF-8"
name = "keyword" content = ""關鍵詞
name = "descrisption" content = ""描述

body：代表網頁主題

二、網頁基本標簽

標題標簽

<h1>一級標簽</h1>一直到6級標簽

段落標簽

<p>段落標簽</p>

換行標簽

<br/> /是閉合的意思，單標簽，閉不閉合都行

水平線標簽

<hr/>

字體樣式標簽

<strong>粗體</strong>
<em>斜體</em>

注釋

特殊字符

空格 ---->一個空格
大于號 >
小于號<
版權符號©

特殊符號就是 & xxx ;

三、圖像標簽

src 圖像地址必填
alt 圖像的代替文字(找不到圖片的時候顯示) 必填
title 鼠標懸停提示文字
width 圖像的寬度
height 圖像的高度

注意：../ 代表上一級目錄

四、鏈接標簽

文本鏈接

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

href 鏈接路徑，要跳轉帶那個位置必填
target鏈接在哪個窗口打開：常用值_self 當前窗口（默認的）、_blank 新窗口

圖像鏈接：就是嵌套圖片標簽

頁面間鏈接

從一個頁面鏈接到另一個頁面

錨鏈接

第一步需要一個標記使用name做標記
第二步跳轉到標記使用#標記
<a name="top" ></a>
<a href="#top"></a>
上面是頁面內的跳轉

<a name="down"></a>
<a href="第一個頁面的path#down"></a>
頁面間的跳轉

功能性鏈接

郵件鏈接：mailto： <a href="mailto:郵箱"></a>點擊后會打開郵箱
qq鏈接：在qq推廣工具里面的

五、行內元素和塊元素

塊元素

無論內容多少，該元素獨占一行
p、h1-h6

行內元素

內容撐開寬度、左右都是行內元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一種展示方式

有序列表

<ol> <li></li> </ol>

無序列表

<ul> <li></li> </ul>

自定義列表

<dl>
    <dt></dt> 標題
    <dd></dd> 選項
    <dd></dd>
    <dd></dd>
</dl>

七、表格

為什么使用表格

簡單通用
結構穩定

基本結構

單元格
行
列
跨行
跨列

<table border="1px" 邊框>表格標簽
    <tr>
        <td></td>列標簽
        <td></td>
        <td></td>
    </tr>行標簽 這代表一行
</table>

跨列：使用colspan="夸的列數" <td colspan="4">

跨行：使用rowspan="夸的行數" <td rowspan="4">

八、視頻和音頻

視頻元素

video
<video src="path" controls autoplay></video>
src:資源路徑
controls控制條
autoplay自動播放

音頻元素

audio
<audio src="" controls autoplay></audio>

九、頁面結構分析

元素名	描述
header	標題頭部區域的內容(用于頁面或頁面中的一塊區域)
footer	標記腳部區域的內容（用于整個頁面或頁面的一塊區域）
section	web頁面中的一塊獨立區域
atricle	獨立的文章內容
aside	相關內容或應用(常用于側邊欄)
nav	導航類輔助內容

十、iframe內聯框架

src必填
width
heigth
name標記
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
點擊超連接后，會在內聯框架里顯示這個頁面

十一、表單

表單：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 規定如何發送表單數據常用psot、get
action 表示向何處發送表單數據，把表單的數據發送給那個地方

get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效

post方式提交：比較安全，可以傳輸大文件

表單元素格式

屬性	說明
type	指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認為text
name	指定表單元素的名稱必填，用來后臺讀取
value	元素的初試值。type為radio時必須指定一個值
size	指定元素的初始寬度。當type為text時或者password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位
maxlength	type為txet或password時，輸入的最大字符數
cheaked	type為radio或cheackbox時，指定按鈕是否被選中

單選框

input type="radio"
value 單選框的值
name ：表示組，name一樣一次只能選一個，name不一樣可以選多個
checked默認選中的

多選框

input type="checkbox"
value = "sleep"
name = "hooby"
checked默認選中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多選框的結果是以數組的形式返回的

按鈕

<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src ="點擊跳轉的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

selected 默認選擇

文本域

<textarea name="name" cols="列數" rows="行數">文本內容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

郵件驗證

<input type="email" name="youjian">

URL

<input type="url" name="url">

數字驗證

<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>

增強鼠標可用性

<label for="mark">點擊</label>
<input type="text" id="mark">

十三、表單初級驗證

為什么要進行表單驗證：緩解服務器壓力、保證數據安全

提示信息

placeholder="提示信息" 在輸入框上

非空判斷

required

正則表達式驗證

pattern
<input type="text" name="mail" pattern="正則表達式">

高級驗證使用js

歡web前端網頁開發和python開發的、請加下企鵝群：526929231 內有大量案例和學習教程，對python、和web感興趣的朋友可以加下哦

form表單域

所有的控件(表單元素都寫在form表單標簽中)

<form>
 使用form標簽建立表單域，當提交數據的時候會收集表單域里面的數據然后發送給服務器</form>

input表單控件元素

賦予不同的type值可實現不同的表單控件

type類型	描述
text	文本輸入框 maxlength最大長度、onlyready只讀、 disabled禁止、 placeholder
password	密碼遮掩框
radio	單選按鈕，checked默認選擇
checkbox	多選框
submit	收集表單域的name數據，然后提交到服務器上

下拉列表框

<select>
 <option value="music">聽音樂</option>
 <option value="running">跑步</option>
 <option value="study">學習</option>
 <option value="coffee">找小姐姐一起喝咖啡</option></select><!-- selected="selected"默認選中 --><!-- size="2" 現實兩行下拉項 --><!-- disabled 禁止選擇 -->

selected默認選擇一項

多行文本輸入框(文本域) textarea

<textare cols="30" rows="10"></textarea>

clos顯示多少列，rows現實多少行

按鈕

單獨使用沒有效果，一般配合js點擊按鈕的時候執行什么操作

<input type="button" value="自定義按鈕標題" />

重置按鈕

回到表單初識狀態

<input type="reset" value="重置表單" />

隱藏域

目的在于收集或發送信息頁面上面沒有任何效果 CSRF跨域攻擊在此作用

<input type="hidden" value="ABCD1234" />

label元素

為input元素定義一個標記，label元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果你在label元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽是，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上

<input id="man" type="radio" /><label for="man">男</label>

form表單屬性

屬性	描述
action	指定提交到哪個url上
method	提交方式，常用的GET / POST

提交方式

Method	Description
GET	URL地址欄上做拼接問號再加參數
POST	隱式提交方式，看不到，可以抓包

格式化文本

pre可定義預格式化的文本。
pre元素中的文本通常會保留空格和換行符。
主要用于在網頁上顯示代碼，比如在網頁當中顯示html模板

頁 URL 中的特殊字符 “空格” 問題

Java 代碼案例

1、將一段內容和接口拼接成 URL 鏈接

代碼示例

java復制代碼public static String generateContent(String content) {
      // 將 content 進行 url 編碼
      String ans;
      try {
          ans = URLEncoder.encode(content, "UTF-8");
      } catch (UnsupportedEncodingException e) {
          // 處理異常情況
          throw new RuntimeException(e);
      }

      return ans;
}

1、不帶空格的處理

java復制代碼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);
}

運行結果：

perl復制代碼https://example.com/resource?a=%E5%B0%8F%E9%BB%91

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

ini復制代碼example.com/resource?a=小黑

網頁截圖：

2、帶有空格的處理

java復制代碼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);
}

運行結果：

perl復制代碼https://example.com/resource?a=%E5%B0%8F+%E9%BB%91

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

ini復制代碼https://example.com/resource?a=小+黑

網頁截圖：

3、解決空格的問題

java復制代碼public static String generateContent(String content) {
      // 將 content 進行 url 編碼
      String ans;
      try {
					// -----------------------調整-----------------------
          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);
}

運行結果：

perl復制代碼https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

ini復制代碼https://example.com/resource?a=小 黑

網頁截圖：

其中 %20 是空格經過編碼后的結果

2、問題解決的原因

從上面的案例可以看到，如果 url 中有空格出現，且不經過特殊處理，那么將會導致瀏覽器無法正確解析 url，從而導致 url 重定向失敗，那么問題的原因是什么呢？首先來看一下URL的組成部分

1、URL 的組成部分

下面是一個簡單的 URL 鏈接：

bash復制代碼http://localhost:8080/path/to/index.html?id=123#content

它主要有下面幾個部分組成

協議：URL 的網絡傳輸協議,如 http、https、ftp 等。表示資源訪問需使用何種協議；
服務器名稱：表示要訪問的服務器主機名或 IP 地址；
端口（可選）：服務器使用的端口號，如 http 默認的端口是 80，https 默認的端口是443，如果省略則使用該協議的默認端口；
路徑：表示服務器上具體資源的路徑信息：例如“/index.html”；
查詢參數（可選）：路徑后加問號開頭的查詢字符串，用于傳遞額外的參數，如”?id=123”;
錨點（可選）：鏈接內的超鏈接錨點定位，例如“#content”；

HTTP請求不包括#
#是用來指導瀏覽器動作的，針對瀏覽器起作用,對服務器端完全無用
訪問http://www.example.com/index.html#print，瀏覽器實際發出的請求只是請求index.html，沒有"#print"部分。
位于#后面的字符都是位置標識符
在第一個#后面出現的任何字符，都會被瀏覽器解讀為位置標識符。這意味著，這些字符都不會被發送到服務器端。
在URL中指定一個顏色值 http://www.example.com/?color=#fff 但瀏覽器實際發出的請求是"#fff"被省略了。只有將#轉碼為%23，瀏覽器才會將其作為實義字符處理。http://example.com/?color=%23fff
改變#后面的參數不會觸發頁面重載
改變#后面的參數會改變瀏覽器的訪問歷史

用戶名密碼（可選）：用于基礎的 HTTP 認證的用戶名和密碼；

2、URL 編碼中遵循的規則

在 URL 編碼過程中，會遵循以下的規則：

空格：替換成 + （%20）
/：分割目錄和子目錄
?：分割 URL 和查詢
%：指定特殊字符
#：指定書簽（%23）
&：指定分隔參數（%26）
=：指定參數的值（%3D）

3、為何 URL 中不允許包含空格和部分特殊字符

URL 作為資源定位符,它需要保證各個組成部分(協議、主機名、端口、路徑等)之間使用統一的分隔符,通常采用斜線"/"。如果直接使用空格,很難區分路徑中的空格與路徑之間的分隔；
早期URL標準沒有規定如何處理空格等特殊字符,直接包含空格可能導致解析或匹配時產生歧義；
例如：http://www.example.com/products/product name.html
當瀏覽器在解析這個 URL 的時候，可能就會產生下面的歧義問題：
1、是否應該解析為兩個路徑組件"products/product"和"name.html”
2、搜索引擎或其他系統進行URL匹配檢索時,不清楚空格是否應該作為路徑分隔符來匹配； 3、攻擊者可以構造歧義URL,利用空格來規避安全機制或進行異常操作；
包含空格特殊字符可能會破壞URL本身結構或導致安全問題；
包含空格可能導致傳輸或存儲時產生問題。例如傳輸過程中空格是否需要編碼等問題沒有明確規定；

在線咨詢

上一篇：結合cookie和session，把登陸流程梳理的清清楚楚
下一篇：HTML5教程從入門到精通，隨堂筆記（二）H5的form標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎知識

、HTML基本信息

二、網頁基本標簽

三、圖像標簽

四、鏈接標簽

五、行內元素和塊元素

六、列表

七、表格

八、視頻和音頻

九、頁面結構分析

十、iframe內聯框架

十一、表單

十二、表單的應用

十三、表單初級驗證

form表單域

input表單控件元素

下拉列表框

多行文本輸入框(文本域) textarea

按鈕

重置按鈕

隱藏域

label元素

form表單屬性

提交方式

格式化文本

頁 URL 中的特殊字符 “空格” 問題

Java 代碼案例

1、將一段內容和接口拼接成 URL 鏈接

1、不帶空格的處理

2、帶有空格的處理

3、解決空格的問題

2、問題解決的原因

1、URL 的組成部分

2、URL 編碼中遵循的規則

3、為何 URL 中不允許包含空格和部分特殊字符

您的項目需求