注释:<!-- -->
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小时内与您取得联系。