前端基础学习 | Kelin's blog

html定义了网页内容
css描述了网页的布局
js控制了网页的行为(通过函数)

HTML

HTML: 超文本标记语言，运行在浏览器上，由浏览器来解析。文件名后缀为.html。

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="en">
<head> <!-- 头部元素 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> <!-- 可见内容 -->
    <h1>标题</h1> <!-- 定义一个大标题 -->
    <p>段落</p> <!-- 定义一个段落 -->
</body>
</html>

什么是html？

html是一种标记语言（标记标签）
使用标记标签来描述网页
html文档包含了html标签及文本内容

html的标签：

由尖括号包围的关键词，如<html>
标签通常是成对出现的，如<html></html>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始标签和结束标签也被称为开放标签和闭合标签 <标签>内容</标签>

基础语法

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="en"> <!-- html文档 -->
<head> <!-- 头部元素 -->
    <meta charset="UTF-8"> <!-- 字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口 -->
    <title>Document</title> <!-- 网页标题 -->
</head>
<body>
    <meta charset="UTF-8"> <!-- 字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口 -->
    <title>Document</title>
    <h1>标题</h1> <!-- 定义一个大标题 -->
    <p>段落</p> <!-- 定义一个段落 -->
    <a href="https://www.baidu.com">百度</a> <!-- 超链接 -->
    <img decoding="async" src="/images/logo.png" alt="百度logo" width="258"> <!-- 图片 -->
    <br> <!-- 换行 -->
</body>
</html>

一个完整的html文档包含以下几个部分：

<!DOCTYPE html>：声明文档类型，告诉浏览器使用HTML5解析文档
<html>：根元素，包含整个文档
<head>：头部元素，包含文档的元数据，如标题、字符集、样式等
<meta>：元数据元素，提供关于文档的信息，如字符集、视口等
<title>：标题元素，定义文档的标题，在浏览器标签中显示
<body>：可见内容元素，包含文档的可见内容，如标题、段落、链接、图片等

属性

全局属性

全局属性是所有 HTML 元素都可以使用的属性。

class：定义元素的类名，可以用于CSS和JavaScript

<p class="text highlight">This is a highlighted text.</p>

id：定义元素的唯一标识符

<div id="header">This is the header</div>

style：定义元素的内联样式

<p style="color: red;">This is a red paragraph.</p>

title：定义元素的标题，当鼠标悬停在元素上时显示

<p title="This is a tooltip">Hover over me!</p>

特定元素的属性：

href（用于<a> 和 <link> 元素）：指定链接的目标 URL。

<a href="https://www.example.com">Visit Example</a>

布尔属性
布尔属性是指不需要值的属性，它们的存在即表示 true，不存在则表示 false。

1 2	<input type="checkbox" checked> <!-- 选中 --> <input type="checkbox"> <!-- 未选中 -->

1 2	<input type="checkbox" disabled> <!-- 禁用 --> <input type="checkbox"> <!-- 可用 -->

事件处理属性
HTML 元素可以通过事件处理属性来响应特定的事件，如点击、鼠标悬停等。

1	<button onclick="alert('Hello!')">点击我</button>

tips

对于中文网页需要使用<meta charset="utf-8">来指定编码格式，否则会出现乱码。
HTML 元素可以设置属性，如<img>元素的src属性指定图片的路径，alt属性提供替代文本，width属性设置图片的宽度。属性值应该始终被包括在引号内。
id和class有什么区别？id是唯一的，class可以重复使用。

常见的单标签

<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<img src="image.jpg" alt="图片描述"> <!-- 图片 -->
<link rel="stylesheet" href="style.css"> <!-- 外部样式表 -->
<meta charset="UTF-8"> <!-- 字符集 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口 -->

区块元素

块级元素通常占据其父容器的整个宽度，并从新的一行开始显示。

特点：

独占一行：每个块级元素会从新的一行开始，且占据父容器的全部宽度。
可以包含其他块级元素或内联元素。
常用于布局：块级元素适合用来构建页面的结构，比如段落、标题、容器等。

常见的块级元素：

<div>：通用容器元素，用于分组和布局。
<p>：段落元素，用于文本段落。
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>：标题元素，表示不同级别的标题。

示例：

<div>
    <h1>标题</h1>
    <p>这是一个段落。</p>
</div>

内联元素

内联元素不会独占一行，它们通常只占据其内容所需的宽度，并且可以与其他内联元素或文本在同一行中显示。
特点：

不独占一行：内联元素不会独占一行，它们通常只占据其内容所需的宽度，并且可以与其他内联元素或文本在同一行中显示。
不能包含块级元素：内联元素通常只能包含文本或其他内联元素，不能包含块级元素。
常用于文本格式化：内联元素适合用来格式化文本，比如强调、链接等。

常见的内联元素：

<span>：通用内联容器元素，用于分组和样式化文本。
<a>：超链接元素，用于创建超链接。
<strong>：强调文本元素，通常以粗体显示。

示例：

1	<p>这是一个<span style="color: red;">红色文本</span>和<a href="https://www.example.com">链接</a>。</p>

iframe

iframe: 内联框架，用于在当前页面中嵌入另一个HTML页面。可以用于嵌入视频、地图等内容。

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

iframe元素允许在当前页面中嵌入另一个HTML页面。它通常用于嵌入视频、地图、广告等内容。
iframe元素的src属性指定要嵌入的页面的URL，width和height属性指定iframe的宽度和高度。

iframe通信

iframe和父页面之间可以通过postMessage方法进行通信。父页面可以向iframe发送消息，iframe也可以向父页面发送消息。

<script>
    window.addEventListener('message', function(event) {
        if (event.origin === 'https://www.example.com') {
            // 处理来自父页面的消息
            console.log(event.data);
        }
    });
    // 向父页面发送消息
    window.parent.postMessage('Hello from iframe', '*');
</script>

CSS

CSS: 层叠样式表，用于设置HTML元素的样式，如颜色、字体、大小、间距、边框等。文件名后缀为.css。

body{
    background-color: #f3f3f3;
}
h1{
    color: red;
}
p{
    color: blue;
}

语法

选择器：要改变样式的html元素
声明块：由{}包围的一条或多条声明，如color: red;，总是以分号结尾，用大括号括起来
注释：/* */，不会被浏览器读取，可以提高代码可读性

id和class选择器

id：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    #para1
    {
        text-align:center;
        color:red;
    } 
</style>
</head>

<body>
    <p id="para1">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>
</body>
</html>

class：
class用于描述一组元素的样式，可以在多个元素中使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    .center
    {
        text-align:center;
    }
</style>
</head>

<body>
    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p> 
</body>
</html>

id选择器用于唯一的元素
class选择器通常具有重用性

tips

id不要以数字开头

外部样式表

每个页面使用<link>标签链接到外部样式表，外部样式表通常存储在.css文件中。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

浏览器会从文件mystyle.css中读取样式信息，然后将其应用到当前的文档上。

内部样式表

参考上面的写法。

优先级：内联样式》内部样式》外部样式

样式

不过多赘述，需要时再查阅。

JavaScript

JavaScript: 一种轻量级的编程语言，可用于创建动态网页。文件名后缀为.js。

编程语言语法不做过多赘述，主要关注JavsScript是如何和HTML交互的。

js能够直接写入html输出流中

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

js对事件的反应

1	<button type="button" onclick="alert('Welcome!')">点击这里</button>

改变html内容

<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

用法

HTML中的JavaScript代码必须位于<script>和</script>标签之间。放置到<body>和<head>标签中都可以。

通常的做法是把函数放入到<head>标签中，然后在<body>标签中调用函数。或者是放置到底部。

外部的JavaScript

如果需要使用外部文件，在<script>标签的src属性中设置该文件：

1	<script src="myScript.js"></script>

语法

输出：

document.write("Hello World!");
window.alert("Hello World!"); // 弹出警告框
innerHTML // 内容
console.log() // 控制台

变量：
Number\String\Array\Object\Function

var x, length;
x = 1.2;
length = 5;
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

一些交互示例

JavaScript可以附加到HTML元素上的事件处理程序，例如点击事件、鼠标移动事件、键- 盘事件等。
当事件发生时，与该事件相关的JavaScript代码将被执行，以响应用户的操作。

<button id="myButton">点击我</button>
<script>
    const button = document.getElementById("myButton");
    button.addEventListener("click", function() {
        alert("按钮被点击了！");
    });
</script>

JavaScript可以访问和操作文档对象模型（DOM），这是HTML页面的表示。
通过JavaScript，您可以创建、修改、删除HTML元素，以及改变元素的样式和内容。

<div id="myDiv">这是一个<div>元素</div></div>
<script>
    const myDiv = document.getElementById("myDiv");
    myDiv.innerHTML = "现在我被JavaScript修改了！";
</script>

JavaScript可以用于验证表单数据、提交表单、以及处理表单的输入。
可以使用JavaScript来验证用户输入是否有效，然后根据验证结果采取相应的行动。

<form id="myForm">
    <input type="text" id="name" placeholder="姓名">
    <input type="submit" value="提交">
</form>
<script>
    const form = document.getElementById("myForm");
    form.addEventListener("submit", function(event) {
        const nameInput = document.getElementById("name");
        if (nameInput.value === "") {
            alert("请输入您的姓名！");
            event.preventDefault(); // 阻止表单提交
        }
    });
</script>

DOM

DOM（Document Object Model）是HTML和XML文档的编程接口。它提供了一种方法来操作和修改文档的结构、样式和内容。

DOM 树（Document Object Model Tree）是网页的结构化表示。它将 HTML 文档解析成一个树状结构，每个节点代表文档的一部分，比如标签、属性和文本内容。

想象一下，你有一个 HTML 文件：

<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎</h1>
    <p>这是一个段落。</p>
  </body>
</html>

DOM 树会将这个文件解析成如下的树状结构：

html
├── head
│   └── title
│       └── 我的网页
└── body
    ├── h1
    │   └── 欢迎
    └── p
        └── 这是一个段落。

每个节点都是文档的一部分，父节点和子节点之间有层级关系。通过 DOM 树，JavaScript 可以动态地访问和修改网页内容。

响应式编程