整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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 ;

三、图像标签

<img src="path" alt="文字" title="text" width="x" heigth="y" />

  • 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内联框架

<iframe src="path" name="mainFrame"></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

. 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