网络安全基础

最新推荐文章于 2025-07-18 22:32:19 发布

香菜南波万

最新推荐文章于 2025-07-18 22:32:19 发布

阅读量659

点赞数 16

CC 4.0 BY-SA版权

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/studyinstall/article/details/146451714

HTML 元素、标签、格式、实体详解

1. HTML 元素（Element）

（1）概念

HTML 元素是构成网页的基本构建块，用于定义网页的内容和结构。
每个 HTML 元素都有特定的语义，用于表示不同类型的内容（如标题、段落、链接、图片等）。

（2）分类

块级元素（Block-level Element）：
- 占据整个一行，通常用于表示较大的内容块。
- 示例：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<table>等。
行内元素（Inline Element）：
- 不会独占一行，多个行内元素可以在同一行显示。
- 示例：<span>、<a>、<img>、<strong>、<em>等。
行内块元素（Inline-block Element）：
- 结合了行内元素和块级元素的特点，可以设置宽度和高度，但不会独占一行。
- 示例：<button>、<input>等。

（3）结构

HTML 元素通常由开始标签、内容和结束标签组成，例如：
- <p>这是一个段落。</p>
- 其中，<p> 是开始标签，</p> 是结束标签，这是一个段落。 是内容。
有些元素是自闭合的（空元素），不需要结束标签，例如：
- <img src="image.jpg" alt="图片描述">
- <br>（换行）
- <input type="text">

2. HTML 标签（Tag）

（1）概念

HTML 标签用于定义元素的类型和属性，是 HTML 元素的“外壳”。
标签分为开始标签和结束标签，用于包裹内容。

（2）类型

单标签（Single Tag）：
- 自闭合标签，不需要结束标签。
- 示例：<br>、<hr>、<img>、<input>。
双标签（Paired Tag）：
- 包含开始标签和结束标签。
- 示例：<p>...</p>、<div>...</div>、<h1>...</h1>。

（3）属性

HTML 标签可以包含属性，用于定义元素的额外信息。
属性以键值对的形式出现，例如：
- <a href="https://example.com">这是一个链接</a>（href 是属性名，https://example.com 是属性值）
- <img src="image.jpg" alt="图片描述">（src 和 alt 是属性名）

3. HTML 格式（Formatting）

（1）文档结构

HTML 文档的结构通常包括以下几个部分：
- <!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 文档。
- <html>：根元素，包含整个 HTML 文档的内容。
- <head>：头部元素，包含元数据（如标题、字符集、样式链接等）。
- <body>：主体元素，包含用户可见的内容（如文本、图片、链接等）。

（2）基本格式

HTML复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://example.com">访问示例网站</a>
    <img src="image.jpg" alt="图片描述">
</body>
</html>

预览

（3）语义化标签

HTML5 引入了许多语义化标签，用于更清晰地表示内容的结构和语义。
示例：
- <header>：页面头部。
- <nav>：导航栏。
- <main>：主要内容区域。
- <section>：独立的章节或部分。
- <article>：独立的文章或内容块。
- <footer>：页面底部。

4. HTML 实体（Entity）

（1）概念

HTML 实体用于在 HTML 文档中表示特殊字符或符号，这些字符可能在 HTML 中有特殊含义（如 <、>、& 等）。
使用实体可以避免这些字符被浏览器误解为 HTML 标签的一部分。

（2）类型

字符实体：
- 使用字符名称表示，例如：
  - < 表示 <
  - > 表示 >
  - & 表示 &
  - " 表示 "
  - ' 表示 '
数字实体：
- 使用字符的 Unicode 编码表示，例如：
  - < 表示 <（60 是 < 的 Unicode 编码）
  - > 表示 >
  - & 表示 &
符号实体：
- 用于表示一些特殊符号，例如：
  - © 表示 ©（版权符号）
  - ® 表示 ®（注册商标符号）
  - ™ 表示 ™（商标符号）
  -   表示空格（非断行空格）

（3）使用场景

在 HTML 文档中，当需要插入特殊字符（如 <、>、& 等）时，应使用实体。
示例：
- <p>这是一个小于号：<</p>
- <p>这是一个大于号：></p>
- <p>这是一个版权符号：©</p>

总结

HTML 元素是网页的基本构建块，用于定义内容和结构。
HTML 标签是元素的“外壳”，用于定义元素的类型和属性。
HTML 格式规定了文档的结构和语义化标签的使用，使网页内容更清晰、易读。
HTML 实体用于表示特殊字符或符号，避免与 HTML 标签冲突。

html链接、框架、表格、列表、表单、图使用

1. HTML 链接（Hyperlinks）

（1）基本链接

语法：

HTML复制
```
<a href="URL">链接文本</a>
```
预览

示例：

HTML复制

<a href="https://www.example.com">访问示例网站</a>

预览

（2）链接到页面内的锚点

语法：

HTML复制

<a href="#anchor">链接文本</a>
...
<a id="anchor">锚点位置</a>

预览

示例：

HTML复制

<a href="#section1">跳转到第一部分</a>
...
<h2 id="section1">第一部分</h2>

预览

（3）下载链接

语法：

HTML复制
```
<a href="URL" download>链接文本</a>
```
预览

示例：

HTML复制

<a href="file.zip" download>下载文件</a>

预览

（4）电子邮件链接

语法：

HTML复制

<a href="mailto:email@example.com">发送邮件</a>

预览

示例：

HTML复制

<a href="mailto:support@example.com">联系我们</a>

预览

2. HTML 框架（Frames）

（1）基本框架

语法：

HTML复制

<frameset rows="行高, 行高">
    <frame src="页面URL" />
    <frame src="页面URL" />
</frameset>

预览

示例：

HTML复制

<frameset rows="100px, *">
    <frame src="header.html" />
    <frame src="main.html" />
</frameset>

预览

（2）列框架

语法：

HTML复制

<frameset cols="列宽, 列宽">
    <frame src="页面URL" />
    <frame src="页面URL" />
</frameset>

预览

示例：

HTML复制

<frameset cols="200px, *">
    <frame src="sidebar.html" />
    <frame src="main.html" />
</frameset>

预览

（3）嵌套框架

语法：

HTML复制

<frameset rows="行高, 行高">
    <frame src="页面URL" />
    <frameset cols="列宽, 列宽">
        <frame src="页面URL" />
        <frame src="页面URL" />
    </frameset>
</frameset>

预览

示例：

HTML复制

<frameset rows="100px, *">
    <frame src="header.html" />
    <frameset cols="200px, *">
        <frame src="sidebar.html" />
        <frame src="main.html" />
    </frameset>
</frameset>

预览

（4）<iframe>（内联框架）

语法：

HTML复制

<iframe src="页面URL" width="宽度" height="高度"></iframe>

预览

示例：

HTML复制

<iframe src="https://www.example.com" width="600" height="400"></iframe>

预览

3. HTML 表格（Tables）

（1）基本表格

语法：

HTML复制

<table>
    <tr>
        <td>单元格内容</td>
        <td>单元格内容</td>
    </tr>
    <tr>
        <td>单元格内容</td>
        <td>单元格内容</td>
    </tr>
</table>

预览

示例：

HTML复制

<table border="1">
    <tr>
        <td>行1，列1</td>
        <td>行1，列2</td>
    </tr>
    <tr>
        <td>行2，列1</td>
        <td>行2，列2</td>
    </tr>
</table>

预览

（2）表头

语法：

HTML复制

<table>
    <thead>
        <tr>
            <th>表头内容</th>
            <th>表头内容</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格内容</td>
            <td>单元格内容</td>
        </tr>
    </tbody>
</table>

预览

示例：

HTML复制

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

预览

（3）跨行和跨列

跨行（rowspan）：

HTML复制

<table border="1">
    <tr>
        <td rowspan="2">跨2行</td>
        <td>行1，列2</td>
    </tr>
    <tr>
        <td>行2，列2</td>
    </tr>
</table>

预览

跨列（colspan）：

HTML复制

<table border="1">
    <tr>
        <td colspan="2">跨2列</td>
    </tr>
    <tr>
        <td>行2，列1</td>
        <td>行2，列2</td>
    </tr>
</table>

预览

4. HTML 列表（Lists）

（1）无序列表（Unordered List）

语法：

HTML复制

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

预览

示例：

HTML复制

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

预览

（2）有序列表（Ordered List）

语法：

HTML复制

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

预览

示例：

HTML复制

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

预览

（3）自定义列表（Description List）

语法：

HTML复制

<dl>
    <dt>术语</dt>
    <dd>描述</dd>
    <dt>术语</dt>
    <dd>描述</dd>
</dl>

预览

示例：

HTML复制

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

预览

5. HTML 表单（Forms）

（1）基本表单

语法：

HTML复制

<form action="处理表单的URL" method="提交方法">
    <label for="输入框ID">标签文本：</label>
    <input type="text" id="输入框ID" name="输入框名称">
    <button type="submit">提交</button>
</form>

预览

示例：

HTML复制

<form action="submit.php" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <button type="submit">登录</button>
</form>

预览

（2）表单控件类型

文本输入框：

HTML复制
```
<input type="text" name="username">
```
预览
密码输入框：

HTML复制
```
<input type="password" name="password">
```
预览

单选按钮：

HTML复制

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female">

JavaScript语法、数据类型、变量

JavaScript 是一种动态、弱类型、基于原型的脚本语言，广泛用于网页交互和服务器端开发。以下是 JavaScript 的语法、数据类型和变量的详细介绍。

1. JavaScript 语法

（1）基本语法

注释：
- 单行注释：// 这是单行注释
- 多行注释：/* 这是多行注释 */
语句分隔：
- 使用分号（;）分隔语句，但在大多数情况下，分号可以省略（不推荐）。
JavaScript复制
```
let x = 10; // 推荐
let y = 20 // 不推荐，但可以工作
```
大小写敏感：
- JavaScript 是大小写敏感的语言，Variable 和 variable 是不同的变量。
代码块：
- 使用花括号 {} 包裹代码块。
JavaScript复制
```
{
    let x = 10;
    console.log(x);
}
```

（2）函数定义

函数声明：

JavaScript复制

function add(a, b) {
    return a + b;
}

函数表达式：

JavaScript复制

const add = function(a, b) {
    return a + b;
};

箭头函数（ES6）：

JavaScript复制
```
const add = (a, b) => a + b;
```

（3）条件语句

if 语句：

JavaScript复制

if (x > 0) {
    console.log("x 是正数");
}

else if 和 else：

JavaScript复制

if (x > 0) {
    console.log("x 是正数");
} else if (x < 0) {
    console.log("x 是负数");
} else {
    console.log("x 是零");
}

switch 语句：

JavaScript复制

switch (x) {
    case 1:
        console.log("x 是 1");
        break;
    case 2:
        console.log("x 是 2");
        break;
    default:
        console.log("x 不是 1 或 2");
}

（4）循环语句

for 循环：

JavaScript复制

for (let i = 0; i < 5; i++) {
    console.log(i);
}

while 循环：

JavaScript复制

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

do...while 循环：

JavaScript复制

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

2. JavaScript 数据类型

JavaScript 是一种弱类型语言，变量的数据类型在运行时自动确定。JavaScript 中的数据类型分为两大类：原始类型（Primitive Types）和引用类型（Reference Types）。

（1）原始类型

Number：数字类型。

JavaScript复制
```
let age = 25;
```
String：字符串类型。

JavaScript复制
```
let name = "John Doe";
```
Boolean：布尔类型。

JavaScript复制
```
let isApproved = true;
```
Undefined：未定义类型。

JavaScript复制
```
let x;
console.log(x); // 输出 undefined
```
Null：空值类型。

JavaScript复制
```
let y = null;
```
Symbol（ES6）：唯一且不可变的数据类型。

JavaScript复制
```
let mySymbol = Symbol("mySymbol");
```
BigInt（ES2020）：用于表示大于 2^53 - 1 的整数。

JavaScript复制
```
let bigNumber = BigInt(1234567890123456789012345678901234567890n);
```

（2）引用类型

Object：对象类型。

JavaScript复制

let person = {
    name: "John",
    age: 30
};

Array：数组类型。

JavaScript复制

let fruits = ["apple", "banana", "orange"];

Function：函数类型。

JavaScript复制

let sayHello = function() {
    console.log("Hello!");
};

Date：日期类型。

JavaScript复制
```
let today = new Date();
```
RegExp：正则表达式类型。

JavaScript复制
```
let regex = /pattern/;
```

3. JavaScript 变量

（1）变量声明

var：
- 声明的变量具有函数作用域或全局作用域。
- 可以重复声明同一个变量。
JavaScript复制
```
var x = 10;
```
let（ES6）：
- 声明的变量具有块级作用域。
- 不允许重复声明同一个变量。
JavaScript复制
```
let y = 20;
```
const（ES6）：
- 声明的变量具有块级作用域。
- 不允许重复声明同一个变量。
- 声明后不能重新赋值。
JavaScript复制
```
const PI = 3.14;
```

（2）变量提升（Hoisting）

使用 var 声明的变量会被提升到函数或全局作用域的顶部，但赋值不会提升。

JavaScript复制
```
console.log(x); // 输出 undefined
var x = 10;
```
使用 let 和 const 声明的变量不会被提升，访问未声明的变量会抛出 ReferenceError。

JavaScript复制
```
console.log(y); // 抛出 ReferenceError
let y = 20;
```

（3）解构赋值（Destructuring）（ES6）

数组解构：

JavaScript复制

let [a, b] = [1, 2];
console.log(a); // 输出 1
console.log(b); // 输出 2

对象解构：

JavaScript复制

let { name, age } = { name: "John", age: 30 };
console.log(name); // 输出 John
console.log(age); // 输出 30

总结

语法：JavaScript 的语法包括注释、语句分隔、大小写敏感、代码块、函数定义、条件语句和循环语句。
数据类型：JavaScript 的数据类型分为原始类型（如 Number、String、Boolean 等）和引用类型（如 Object、Array、Function 等）。
变量：变量可以通过 var、let 和 const 声明，具有不同的作用域规则和特性。

JavaScript运算符，流程控制、字符串对象、事件等

1. JavaScript 运算符

JavaScript 提供了多种运算符，用于执行数学运算、比较、逻辑操作等。

（1）算术运算符

运算符	描述	示例	结果
`+`	加法	`a + b`	`5 + 3 = 8`
`-`	减法	`a - b`	`5 - 3 = 2`
`*`	乘法	`a * b`	`5 * 3 = 15`
`/`	除法	`a / b`	`5 / 3 = 1.67`
`%`	求余	`a % b`	`5 % 3 = 2`
`++`	自增	`a++` 或 `++a`	`a = a + 1`
`--`	自减	`a--` 或 `--a`	`a = a - 1`

（2）比较运算符

运算符	描述	示例	结果
`==`	等于（值相等）	`a == b`	`5 == "5"` 是 `true`
`===`	严格等于（值和类型都相等）	`a === b`	`5 === "5"` 是 `false`
`!=`	不等于	`a != b`	`5 != "5"` 是 `false`
`!==`	严格不等于	`a !== b`	`5 !== "5"` 是 `true`
`>`	大于	`a > b`	`5 > 3` 是 `true`
`<`	小于	`a < b`	`5 < 3` 是 `false`
`>=`	大于等于	`a >= b`	`5 >= 3` 是 `true`
`<=`	小于等于	`a <= b`	`5 <= 3` 是 `false`

（3）逻辑运算符

运算符	描述	示例	结果
`&&`	逻辑与（AND）	`a && b`	`true && false` 是 `false`
`		`	逻辑或（OR）	`a	b`	`true	false`是`true`
`!`	逻辑非（NOT）	`!a`	`!true` 是 `false`

（4）赋值运算符

运算符	描述	示例	结果
`=`	赋值	`a = b`	`a = 5`
`+=`	加法赋值	`a += b`	`a = a + b`
`-=`	减法赋值	`a -= b`	`a = a - b`
`*=`	乘法赋值	`a *= b`	`a = a * b`
`/=`	除法赋值	`a /= b`	`a = a / b`
`%=`	求余赋值	`a %= b`	`a = a % b`

2. 流程控制

流程控制语句用于控制代码的执行流程，包括条件语句和循环语句。

（1）条件语句

if 语句：

JavaScript复制

if (condition) {
    // 如果条件为 true，则执行这里的代码
}

else if 和 else：

JavaScript复制

if (condition1) {
    // 如果条件1为 true，则执行这里的代码
} else if (condition2) {
    // 如果条件1为 false 且条件2为 true，则执行这里的代码
} else {
    // 如果所有条件都不满足，则执行这里的代码
}

switch 语句：

JavaScript复制

switch (expression) {
    case value1:
        // 如果 expression 等于 value1，则执行这里的代码
        break;
    case value2:
        // 如果 expression 等于 value2，则执行这里的代码
        break;
    default:
        // 如果 expression 不等于任何 case，则执行这里的代码
}

（2）循环语句

for 循环：

JavaScript复制

for (let i = 0; i < 5; i++) {
    console.log(i);
}

while 循环：

JavaScript复制

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

do...while 循环：

JavaScript复制

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

for...of 循环（ES6）：

JavaScript复制

let fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
    console.log(fruit);
}

for...in 循环：

JavaScript复制

let person = { name: "John", age: 30 };
for (let key in person) {
    console.log(key, person[key]);
}

3. 字符串对象

字符串是 JavaScript 中的基本数据类型之一，但也可以通过 String 对象来操作字符串。

（1）字符串的创建

字符串字面量：

JavaScript复制
```
let str = "Hello, World!";
```
String 对象：

JavaScript复制
```
let str = new String("Hello, World!");
```

（2）字符串方法

获取字符串长度：

JavaScript复制

let str = "Hello, World!";
console.log(str.length); // 输出 13

访问字符串中的字符：

JavaScript复制

let str = "Hello, World!";
console.log(str[0]); // 输出 "H"
console.log(str.charAt(0)); // 输出 "H"

字符串拼接：

JavaScript复制

let str1 = "Hello";
let str2 = "World";
let result = str1 + " " + str2; // "Hello World"

查找子字符串：

JavaScript复制

let str = "Hello, World!";
console.log(str.indexOf("World")); // 输出 7
console.log(str.lastIndexOf("o")); // 输出 8

截取字符串：

JavaScript复制

let str = "Hello, World!";
console.log(str.slice(0, 5)); // 输出 "Hello"
console.log(str.substring(0, 5)); // 输出 "Hello"
console.log(str.substr(0, 5)); // 输出 "Hello"

替换字符串：

JavaScript复制

let str = "Hello, World!";
console.log(str.replace("World", "JavaScript")); // 输出 "Hello, JavaScript!"

转换大小写：

JavaScript复制

let str = "Hello, World!";
console.log(str.toUpperCase()); // 输出 "HELLO, WORLD!"
console.log(str.toLowerCase()); // 输出 "hello, world!"

分割字符串：

JavaScript复制

let str = "apple,banana,orange";
console.log(str.split(",")); // 输出 ["apple", "banana", "orange"]

4. 事件

事件是用户与网页交互时发生的动作，例如点击按钮、鼠标移动、键盘输入等。JavaScript 提供了丰富的事件处理机制，用于响应用户的操作。

（1）事件监听器

addEventListener 方法：

JavaScript复制

document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});

removeEventListener 方法：

JavaScript复制

function handleClick() {
    alert("按钮被点击了！");
}
document.getElementById("myButton").addEventListener("click", handleClick);
document.getElementById("my