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

. 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

在線咨詢

上一篇：移動HTML5模擬觸摸屏長按事件
下一篇：Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點

您的項目需求

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

整合營銷服務商