HTML基础篇
HTML
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，用于描述网页的结构和内容。HTML文档（通常称为网页）由HTML元素（也称为标签）组成，这些元素用于告诉浏览器如何显示内容，如段落、标题、链接、图片、列表等。
HTML元素
| img元素是 HTML（HyperText Markup Language）中的一个元素，用于在网页中嵌入图像。 |
| <h1>...<h6>元素，其中<h1>是最大的（或最重要的）标题，而<h6>是最小的标题。 |
| <hr> 是一个水平线元素，用于在网页上创建一条水平线。这个元素常常用于分割内容，增加页面的可读性和布局美感。 |
| <span>元素是HTML中的内联元素，用来标记文本中的特定部分或进行样式控制。它没有具体的语义含 |
| <color>是一种属性，用于定义文本的颜色。 |
| <a>它用于创建超链接。通过标签，我们可以将文、图像或其他元素转换为可点击的链接，并指定的目标地址< |
| <p>标签是HTML中的段落标签，用于定义段落。 |
| <b>标签用于呈现加粗（bold）的文本 |
| <strong>标签在HTML中表示强调，是一个短语标签。 |
| < >空格占位符 |
| <div>标签本身并不表示任何特定的内容或样式，课通过 CSS进行样式化，从而创建出复杂的网页布局和设计 |
| <table>用于定义HTML表格。<table> 标签内部可以包含多个 <tr>（table row，表格行）标签 |
| <tr> 用于定义表格中的行。<tr> 标签内部可以包含多个 <td>（table data，表格数据）或 <th>（table header，表格头）标签。 |
<td>用于定义表格中的单元格。<td> 标签内部可以包含文本、图片、列表、段落、表单、水平线、表格等。 |
| <form> 标签用于创建HTML表单，以便收集用户的输入数据。 |
CSS元素
| <text-decoration>用于控制文本上的装饰线。具体来说，这个属性通常用于移除链接（ |
| <text indent>用于设置文本块首行的缩进。这通常用于在段落或列表项的第一行添加一些空间，使其看起来像是“缩进”的。 |
| <line-height>设置行高 |
| <text-indent>定义第一个行内容缩进 |
| <text-align>规定元素中对齐方式 |
| <margin>用于设置元素的外边距 |
CSS引入方式
| 内联样式 | 将CSS样式直接写入HTML标签的style属性中。例如：<p style="color: red;">This is a paragraph.</p> |
| 内部样式表 | 将CSS样式写在HTML文档的<head>标签中的<style>标签内。例如： <head> <style> p { color: blue; } </style> </head> <body> <p>This is a paragraph.</p> </body> |
| 外部样式表 | 将CSS代码保存在一个独立的外部文件（以.css扩展名结尾），然后通过<link>标签将其引入到HTML文档中。例如： <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>This is a paragraph.</p> </body> 其中，styles.css是外部CSS文件的文件名 |
CSS元素选择器
| 元素选择器（Element Selector）：使用HTML元素名称作为器，例如`p`、`div`、`span`等。它会配所有对应的HTML元素。 |
| 类选择器（Class Selector：使用类名作为选择器，在HTML元素中通过class属性进行定义和标记。以`.`开头，例如`.my-class`。它会匹配所有具有相类名的HTML元素。 |
| ID选择器（ID Selector）：id属性作为选择器，在HTML元素中通过id属性进行定义和标记。以`#`开，例如 `#my-id`。它只会匹配具有相同值的唯一一个HTML元素。 |
CSS盒子模型
| CSS盒子模型（Box Model）是CSS布局的基础，它决定了元素如何根据其内容、内边距（padding）、边框（border）和外边距（margin）进行定位和大小调整。每个HTML元素都可以看作是由内容、内边距、边框和外边距组成的矩形盒子。 |
| 1、内容（Content）：这是盒子的核心部分，包含了文本、图片等元素的实际内容。内容的大小可以通过width和height属性来设置。 2、内边距（Padding）：内边距是内容与其边框之间的空间。内边距是透明的，并且会增加元素的总宽度和总高度。内边距的大小可以通过padding属性来设置，比如padding-top、padding-right、padding-bottom和padding-left。
扫描二维码关注公众号，回复：
17467464 查看本文章
3、边框（Border）：边框是包围在内边距和内容周围的线。边框的颜色、样式和宽度可以通过border属性来设置。 4、外边距（Margin）：外边距是边框与其他元素之间的空间。外边距是透明的，并且不会增加元素的总宽度和总高度。外边距的大小可以通过margin属性来设置，比如margin-top、margin-right、margin-bottom和margin-left。 |
JS
JavaScript（JS）中，你可以通过多种方式与HTML表单进行交互。JavaScript可以用于验证表单输入、动态地修改表单元素、处理表单提交事件等。
js引入方式
- 在JavaScript中，有几种不同的方式可以引入（或包含）JavaScript代码到HTML文档中。
1. 内部脚本（Inline Script）
直接在HTML文档的<script>标签中编写JavaScript代码。这种方式通常用于简单的脚本或需要在特定位置执行的代码。
<!-- 内部脚本 -->
<script>
alert("Hello js")
</script>2. 外部脚本（External Script）
将JavaScript代码写入一个单独的文件（通常以.js为扩展名），然后在HTML文档中通过<script>标签的src属性引入该文件。这种方式是组织大型JavaScript项目的常用方法。
<script src="JsDemo.js/Demo.js"></script>js基础语法
在JavaScript中，有几种常用的输出语句或方法，它们通常用于在控制台、浏览器窗口或其他地方显示信息。以下是其中最常见的几种：
1.console.log()：这是最常用的输出语句，它会在浏览器的开发者工具的控制台（Console）中显示信息。
console.log("Hello, World!"); // 在控制台输出 "Hello, World!"2.alert()：这是一个浏览器特定的函数，它会在浏览器中弹出一个警告框，并显示指定的信息。
alert("Hello, World!"); // 弹出一个警告框显示 "Hello, World!"
3.document.write()：这个方法会将指定的内容写入HTML文档中。然而，需要注意的是，在现代的web开发中，document.write()通常不推荐使用，因为它会覆盖文档中的现有内容。但在某些特定场景或学习环境中，它仍然是一个有用的工具。
document.write("<h1>Hello, World!</h1>"); // 在HTML文档中写入一个标题
4.console.error()：与console.log()类似，但通常用于输出错误信息。它会在控制台中以红色文本显示信息，以便于与常规日志信息区分。
console.error("An error occurred!"); // 在控制台以红色文本输出错误信息
5.console.warn()：类似于console.error()，但用于输出警告信息。它也会在控制台中以特殊方式显示信息，但通常不如错误信息那么严重。
console.warn("This is a warning!"); // 在控制台输出警告信息
6.debugger：这是一个关键字，用于在代码中设置一个断点。当浏览器的开发者工具打开时，代码执行到debugger语句时会暂停，允许你检查当前的作用域、变量的值等。这对于调试代码非常有用。
debugger; // 在这里设置断点
console.log("This will be logged after the debugger breakpoint.");
js变量
在JavaScript中，定义变量可以使用var、let或const关键字。以下是这些关键字的简单说明和示例：
使用var定义变量：
var关键字用于声明变量。但是，var声明的变量存在一些问题，例如函数作用域（而不是块作用域）和变量提升（hoisting）。
var x = 10;
console.log(x); // 输出 10
使用let定义变量：
let是ES6中引入的新关键字，用于声明块级作用域的变量。这意味着变量只在其声明的代码块内可用。
let y = 20;
console.log(y); // 输出 20
if (true) {
let z = 30;
console.log(z); // 输出 30
}
// console.log(z); // 这里会报错，因为z在if代码块外部不可用
使用const定义常量：
const也是ES6中引入的，用于声明一个只读的常量。一旦常量被赋值，就不能再改变它的值（但如果是对象或数组，则可以通过修改其属性或元素来改变其内部状态）。
const PI = 3.14159;
console.log(PI); // 输出 3.14159
// PI = 3.14; // 这里会报错，因为PI是一个常量
const obj = { prop: 'Hello' };
obj.prop = 'World'; // 可以通过修改属性来改变对象的状态
console.log(obj.prop); // 输出 WorldJavaScript中，数据类型、运算符和流程控制语句是编程的基本概念
数据类型
JavaScript中有几种基本数据类型和两种复合数据类型：
基本数据类型：
Number：数字，包括整数和浮点数。
String：文本数据。
Boolean：逻辑值，true 或 false。
null：表示一个空值或没有值。
undefined：表示变量已被声明但未赋值。
Symbol（ES6新增）：唯一且不可变的数据类型。
BigInt（ES10新增）：任意精度的整数。
复合数据类型（或对象类型）：
Object：表示一组无序的键值对集合。
Array：表示有序的元素集合。
Function：表示可执行的代码块。
Date：表示特定的日期和时间。
RegExp：表示正则表达式，用于字符串匹配。
Map 和 Set（ES6新增）：特殊的集合类型，Map是键值对的集合，Set是值的集合。
运算符
JavaScript中的运算符用于执行各种运算，如算术运算、比较运算、逻辑运算、赋值运算等。
算术运算符：+、-、*、/、%、++、--
比较运算符：<、<=、>、>=、==、===、!=、!==
逻辑运算符：&&、||、!
赋值运算符：=、+=、-=、*=、/=、%=
位运算符：&、|、^、~、<<、>>、>>>
条件（三元）运算符：? :
字符串运算符：+（当与字符串一起使用时，它用作连接符）
类型运算符：typeof、instanceof
js函数
在JavaScript中，函数是执行特定任务的代码块。它们可以被多次调用，并且可以接收输入（参数）和返回输出（返回值）。
下面是一个简单的JavaScript函数的示例：
function greet(name) {
console.log("Hello, " + name + "!");
}
// 调用函数
greet("Alice"); // 输出: Hello, Alice!
greet("Bob"); // 输出: Hello, Bob!JS对象
在JavaScript中，函数是执行特定任务的代码块。它们可以被多次调用，并且可以接收输入（参数）和返回输出（返回值）。
Array
Array是JavaScript 中用于存储一系列有序值的数据结构。这些值可以是任何类型，包括数字、字符串、对象、布尔值、null、undefined，甚至是其他数组（即数组可以是嵌套的）。
<script>
var numbers = [10];
console.log(numbers[0]);
</script>String
String 是一个基本数据类型，用于表示文本数据。然而，JavaScript也提供了一个 String 对象，它提供了许多用于操作字符串的方法和属性。
创建字符串
你可以通过字面量或构造函数来创建字符串：
var string = "hello word";length属性
返回字符串索引长度
let str = "Hello";
console.log(str.length); // 输出 5indexOf
返回指定值在字符串中首次出现的位置。
console.log(string.indexOf("lo"));trim
移除字符串两端的空白字符。
var tm = string.trim();
console.log(tm);substring(indexStart[, indexEnd])
提取字符串中介于两个指定下标之间的字符。
console.log(tm.substring(0,3));JSON
一种轻量级的数据交换格式。它基于 ECMAScript（欧洲计算机协会制定的js规范）的一个子集，采用完全独立于语言的文本格式来存储和表示数据。简单和清晰的层次结构使得 JSON 成为理想的数据交换语言。
{
"name": "John",
"age": 30,
"car": null,
"hobbies": ["reading", "photography"]
}BOM
BOM是JavaScript中的一个重要概念，它提供了独立于内容而与浏览器窗口进行交互的对象。
//对话框
var fl = confirm("确认删除这条数据嘛");
alert(fl);
//定时执行无数次
var i = 0;
setInterval(function () {
i++;
console.log("执行啦" + i + "次");
}, 2000);
//定时器只会执行一次
setTimeout(function () {
alert("时间到");
}, 2000); //location地址栏
alert(location.href);
location.href = "https://www.baidu.com";DOM
JavaScript DOM（Document Object Model）是JavaScript用于与HTML文档（以及XML或SVG文档）进行交互的接口。DOM将HTML文档呈现为一个由节点（如元素节点、文本节点和属性节点）和对象组成的结构化的树，允许开发者通过编程来访问和更新文档的内容、结构和样式。