HTML、CSS、JavaScript、DOM操作、AJAX知识梳理
【摘要】 一、HTML（超文本标记语言）1. 定义与核心特点定义：HTML（HyperText Markup Language）是用于创建网页的标记语言，通过标签描述网页结构和内容。核心特点：非编程语言，仅用于结构描述。支持超链接（<a>）、多媒体（<img>、<video>）等，实现资源关联。浏览器解析执行，渲染为可视化页面。2. 基本结构<!DOCTYPE html> <!-- HTML5文档声...
一、HTML（超文本标记语言）
1. 定义与核心特点
- 定义：HTML（HyperText Markup Language）是用于创建网页的标记语言，通过标签描述网页结构和内容。
- 核心特点：
- 非编程语言，仅用于结构描述。
- 支持超链接（
<a>）、多媒体（<img>、<video>）等，实现资源关联。 - 浏览器解析执行，渲染为可视化页面。
2. 基本结构
<!DOCTYPE html> <!-- HTML5文档声明 -->
<html>
<head>
<meta charset="utf-8"> <!-- 字符编码 -->
<title>页面标题</title>
</head>
<body>
<h1>标题</h1> <!-- 内容区域 -->
<p>段落</p>
</body>
</html>
- 关键标签：
<!DOCTYPE html>：声明HTML5标准。<head>：包含元数据（如编码、标题）。<body>：页面可见内容。
3. 常用标签
| 标签 | 功能 | 示例 |
|---|---|---|
<h1>~<h6> |
标题层级 | <h1>一级标题</h1> |
<p> |
段落 | <p>这是一个段落</p> |
<a> |
超链接 | <a href="https://example.com">链接</a> |
<img> |
图片 | <img src="image.jpg" alt="描述"> |
<table> |
表格 | <table><tr><td>单元格</td></tr></table> |
4. HTML5新特性
- 语义化标签：
<section>、<article>、<nav>等，增强结构清晰性。 - 多媒体支持：
<video>、<audio>标签直接嵌入音视频。 - 本地存储：
localStorage、sessionStorage实现客户端数据存储。
二、CSS（层叠样式表）
1. 作用与语法
- 作用：分离样式与结构，控制页面布局、颜色、字体等。
- 语法：
/* 内联样式 */
<p style="color: red;">红色文字</p>
/* 内部样式表 */
<style>
p {
color: blue; /* 选择器 + 属性 + 值 */
}
</style>
/* 外部样式表 */
<link rel="stylesheet" href="styles.css">
2. 选择器与优先级
| 选择器 | 示例 | 优先级 |
|---|---|---|
| 元素选择器 | h1 |
低 |
| 类选择器 | .container |
中 |
| ID选择器 | #header |
高 |
| 行内样式 | style="" |
最高 |
3. 布局技术
- 传统布局：依赖
<table>或浮动（float）。 - 现代布局：
- Flexbox：弹性盒模型，用于单维度布局。
- Grid：网格布局，双维度控制行列。
三、JavaScript（脚本语言）
1. 基础作用
- 实现动态交互，如表单验证、事件响应、数据请求等。
2. 关键语法
// 变量声明
let x = 10;
const PI = 3.14;
// 函数定义
function greet(name) {
return `Hello, ${name}!`;
}
// 事件监听
document.getElementById('btn').addEventListener('click', function() {
alert('按钮被点击');
});
3. 与HTML/CSS的协作
- 操作DOM：通过
document.getElementById等方法修改页面内容。 - 动态样式：
document.body.style.backgroundColor = 'lightblue'; // 修改背景色
四、DOM操���（文档对象模型）
1. DOM的核心概念
- 将HTML文档视为树形结构，每个节点（元素、文本、属性）均可通过JavaScript操作。
2. 常用方法
| 操作 | 方法 | 示例 |
|---|---|---|
| 获取元素 | getElementById |
document.getElementById('id') |
| 创建元素 | createElement |
document.createElement('div') |
| 修改内容 | innerHTML |
element.innerHTML = '新内容' |
| 事件绑定 | addEventListener |
element.addEventListener('click', callback) |
3. 实践案例
// 动态添加按钮
const btn = document.createElement('button');
btn.textContent = '点击我';
btn.addEventListener('click', () => alert('Hello!'));
document.body.appendChild(btn);
五、AJAX（异步JavaScript和XML）
1. 原理与流程
- 异步通信：在不刷新页面的情况下，与服务器交换数据。
- 流程：
- 创建
XMLHttpRequest对象。 - 配置请求方式（GET/POST）和URL。
- 发送请求并监听状态变化。
- 处理响应数据。
- 创建
2. 基础示例
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data'); // 请求URL
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
document.body.innerHTML += `<p>${data.message}</p>`;
}
};
xhr.send();
3. 现代替代方案
- Fetch API：更简洁的Promise式请求。
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));
学习资源推荐
- 菜鸟教程：提供HTML/CSS/JS实例及在线编辑器。
- MDN Web文档：权威的前端技术参考（如HTTPS）。
- JYShare工具：实时编辑代码并预览效果。
总结
- HTML：网页结构基石，需掌握语义化标签与表单元素。
- CSS：样式控制，重点学习Flex/Grid布局与响应式设计。
- JavaScript：交互逻辑核心，建议从DOM操作入门。
- AJAX：提升用户体验，现代开发可结合Fetch API。
通过实战练习（如构建静态网页、动态表单）可快速巩固技能。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）