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
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
