注釋:<!-- -->
DOCTYPE:就是告訴瀏覽器,我們要使用什么規范
head:網頁頭部標簽
body:代表網頁主題
標題標簽
段落標簽
換行標簽
水平線標簽
字體樣式標簽
注釋
特殊字符
特殊符號就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意:../ 代表上一級目錄
文本鏈接
<a href="path" target="目標窗口位置">鏈接文本或圖像</a>
圖像鏈接:就是嵌套圖片標簽
頁面間鏈接
錨鏈接
功能性鏈接
塊元素
行內元素
什么是列表:就是一種展示方式
有序列表
無序列表
自定義列表
<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">
視頻元素
音頻元素
元素名 | 描述 |
header | 標題頭部區域的內容(用于頁面或頁面中的一塊區域) |
footer | 標記腳部區域的內容(用于整個頁面或頁面的一塊區域) |
section | web頁面中的一塊獨立區域 |
atricle | 獨立的文章內容 |
aside | 相關內容或應用(常用于側邊欄) |
nav | 導航類輔助內容 |
<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默認為text |
name | 指定表單元素的名稱 必填,用來后臺讀取 |
value | 元素的初試值。type為radio時必須指定一個值 |
size | 指定元素的初始寬度。當type為text時或者password時,表單元素的大小以字符為單位。對于其他類型,寬度以像素為單位 |
maxlength | type為txet或password時,輸入的最大字符數 |
cheaked | type為radio或cheackbox時,指定按鈕是否被選中 |
單選框
多選框
按鈕
<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
文本域
<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">
為什么要進行表單驗證:緩解服務器壓力、保證數據安全
提示信息
非空判斷
正則表達式驗證
高級驗證使用js
. RegExp test() 方法
要在 JavaScript 中檢查字符串是否僅包含字母和空格,請在此正則表達式上調用 test() 方法:/^[A-Za-z\s]*$/。 如果字符串僅包含字母和空格,則此方法返回 true。 否則,它返回 false。
function onlyLettersAndSpaces(str) {
return /^[A-Za-z\s]*$/.test(str);
}const str1 = 'contains_underscore';
const str2 = 'only letters and spaces';console.log(onlyLettersAndSpaces(str1)); // false
console.log(onlyLettersAndSpaces(str2)); // true
RegExp test() 方法搜索正則表達式和指定字符串之間的匹配項。
/ 和 / 字符用于開始和結束正則表達式。
^ 字符匹配字符串的開頭,而 $ 字符匹配字符串的結尾。
方括號 ([]) 用于匹配多個指定模式中的任何一個。 在我們的示例中,我們指定了三種模式:A-Z、a-z 和 \s。 A-Z 匹配任何大寫字母,a-z 匹配任何小寫字母,0-9 匹配任何數字。
* 字符匹配特定模式的零次或多次出現。 我們在方括號之后添加它,以盡可能多地匹配括號中的任何模式。
如何檢查字符串是否至少包含一個字母和一個空格
如果字符串僅包含字母或僅包含空格,我們使用的正則表達式使該方法返回 true。
const str1 = 'OnlyLetters';
const str2 = ' '; // only spaces
const str3 = 'letters and spaces';console.log(onlyLettersAndSpaces(str1)); // true
console.log(onlyLettersAndSpaces(str2)); // true
console.log(onlyLettersAndSpaces(str3)); // true
為確保字符串至少包含一個字母和一個空格,我們需要將字符串與匹配至少一個字母 (/[A-Za-z]/) 的正則表達式和至少匹配一個字母的正則表達式進行匹配 空間/\s/。
function atLeastOneLetterAndSpace(str) {
return (
/^[A-Za-z\s]*$/.test(str) &&
/[A-Za-z]/.test(str) &&
/\s/.test(str)
);
}const str1 = 'OnlyLetters';
const str2 = ' '; // Only spaces
const str3 = 'letters and spaces';console.log(atLeastOneLetterAndSpace(str1)); // false
console.log(atLeastOneLetterAndSpace(str2)); // false
console.log(atLeastOneLetterAndSpace(str3)); // true
2.字符串match()方法
我們還可以使用 String match() 方法來檢查字符串是否只包含字母和空格。
function onlyLettersAndSpaces(str) {
return Boolean(str?.match(/^[A-Za-z\s]*$/));
}const str1 = 'contains_underscore';
const str2 = 'only letters and spaces';console.log(onlyLettersAndSpaces(str1)); // false
console.log(onlyLettersAndSpaces(str2)); // true
String match() 方法返回字符串中正則表達式的所有匹配項的數組。 如果沒有匹配,則返回 null。
const regex = /^[A-Za-z\s]*$/;
const str1 = 'contains_underscore';
const str2 = 'only letters and spaces';// null
console.log(str1?.match(regex));/**
[
'only letters and spaces',
index: 0,
input: 'only letters and spaces',
groups: undefined
]
*/
console.log(str2?.match(regex));
我們將 match() 的結果傳遞給布爾構造函數以將其轉換為布爾值。 Boolean() 將真值轉換為真,將假值轉換為假。
在 JavaScript 中,有六個假值:undefined、null、NaN、0、''(空字符串)和 false。 其他所有值都是真實的。
console.log(Boolean(undefined)); // false
console.log(Boolean(['letters'])); // true
console.log(Boolean(null)); // false
console.log(Boolean(5)); // true
我們在字符串變量上使用了可選的鏈接運算符 (?.)。 如果變量為空(未定義或為空),當我們嘗試對其調用 match() 方法時不會拋出錯誤,此運算符將阻止方法調用并返回未定義。
const str = null;
console.log(str?.match(/^[A-Za-z\s]*$/)); // undefined
關注七爪網,獲取更多APP/小程序/網站源碼資源!
let str = "jiajia2023_&^%^&";
console.log(str.match(/.+/));//匹配除換行符以外的任何單個字符
let url = 'http://www.baidu.com'
console.log(url.match(/https?:\/\/w+\.\w+\.\w+/));//['http://www.baidu.com', index: 0, input: 'http://www.baidu.com', groups: undefined]
// 不能匹配換行符
let aStr = `
sfjsjalsjkajjnjn
dgudjg
`;
console.log(aStr.match(/.+/));//['sfjsjalsjkajjnjn', index: 1, input: '\nsfjsjalsjkajjnjn\ndgudjg\n', groups: undefined]
console.log(aStr.match(/.+/s));//s視為單行 ['\nsfjsjalsjkajjnjn\ndgudjg\n', index: 0, input: '\nsfjsjalsjkajjnjn\ndgudjg\n', groups: undefined]
let tel = '010 - 4561237'
console.log(tel.match(/\d+ - \d{7}/));//['010 - 4561237', index: 0, input: '010 - 4561237', groups: undefined]
console.log(tel.match(/\d+\s-\s\d{7}/));//結果同上,可以用空格,也可以用\s
*請認真填寫需求信息,我們會在24小時內與您取得聯系。