html和js的基础知识有哪些

发布时间：2022-03-05 16:33:21 作者：iii
来源：亿速云阅读：289

# HTML和JS的基础知识有哪些

## 一、HTML基础概念

### 1.1 什么是HTML
HTML（HyperText Markup Language）是构建网页的标准标记语言，它通过标签（tag）定义文档结构和内容。最新版本HTML5于2014年正式发布，新增了语义化标签和多媒体支持。

### 1.2 基本文档结构
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1.3 常用HTML标签

文本标签：<h1>-<h6>、<p>、<span>、<br>
列表标签：<ul>、<ol>、<li>
媒体标签：<img>、<audio>、<video>
表单标签：<form>、<input>、<textarea>、<select>

二、HTML5新特性

2.1 语义化标签

<header>页眉</header>
<nav>导航</nav>
<section>内容区块</section>
<article>独立内容</article>
<footer>页脚</footer>

2.2 多媒体支持

<video controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

2.3 Canvas绘图

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 150, 75);
</script>

三、JavaScript核心语法

3.1 变量与数据类型

// ES6新增let/const
let name = "张三"; // 字符串
const PI = 3.14;  // 常量
let age = 25;     // 数字
let isStudent = true; // 布尔
let person = {    // 对象
    name: "李四",
    age: 30
};

3.2 运算符与表达式

// 算术运算符
let sum = 10 + 5; 

// 比较运算符
if (age >= 18) {
    console.log("成年人");
}

// 逻辑运算符
if (isStudent && age < 25) {
    console.log("年轻学生");
}

3.3 流程控制

// if语句
if (score > 90) {
    grade = 'A';
} else if (score > 80) {
    grade = 'B';
} else {
    grade = 'C';
}

// switch语句
switch(day) {
    case 1: console.log("周一"); break;
    case 2: console.log("周二"); break;
    default: console.log("周末");
}

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

四、DOM操作

4.1 获取DOM元素

// 传统方法
document.getElementById('header');
document.getElementsByClassName('item');

// 现代方法
document.querySelector('#main');
document.querySelectorAll('.btn');

4.2 修改DOM内容

// 修改文本内容
element.textContent = "新内容";

// 修改HTML内容
element.innerHTML = "<strong>加粗文本</strong>";

// 修改样式
element.style.color = "red";
element.classList.add('active');

4.3 事件处理

// 事件监听
btn.addEventListener('click', function() {
    alert('按钮被点击!');
});

// 事件对象
document.addEventListener('keydown', (event) => {
    console.log(`按下了${event.key}键`);
});

五、函数与作用域

5.1 函数定义

// 函数声明
function greet(name) {
    return `Hello, ${name}!`;
}

// 函数表达式
const square = function(x) {
    return x * x;
};

// 箭头函数
const add = (a, b) => a + b;

5.2 作用域与闭包

// 块级作用域
{
    let localVar = "局部变量";
    console.log(localVar); // 可访问
}
console.log(localVar); // 报错

// 闭包示例
function createCounter() {
    let count = 0;
    return function() {
        return ++count;
    };
}
const counter = createCounter();

六、数组与对象操作

6.1 数组方法

let fruits = ['苹果', '香蕉'];

// 添加/删除元素
fruits.push('橙子'); // 末尾添加
fruits.pop();       // 删除最后一个

// 遍历数组
fruits.forEach(item => console.log(item));

// 映射新数组
let lengths = fruits.map(fruit => fruit.length);

6.2 对象操作

let person = {
    name: '王五',
    age: 28,
    sayHi() {
        console.log(`我是${this.name}`);
    }
};

// 访问属性
console.log(person.name);

// 添加方法
person.growOld = function() {
    this.age++;
};

七、异步编程

7.1 回调函数

function fetchData(callback) {
    setTimeout(() => {
        callback('数据加载完成');
    }, 1000);
}

fetchData(data => {
    console.log(data);
});

7.2 Promise

const promise = new Promise((resolve, reject) => {
    const success = true;
    if (success) {
        resolve('操作成功');
    } else {
        reject('操作失败');
    }
});

promise
    .then(result => console.log(result))
    .catch(error => console.error(error));

7.3 async/await

async function getUser() {
    try {
        const response = await fetch('/api/user');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('请求失败:', error);
    }
}

八、ES6+新特性

8.1 解构赋值

// 数组解构
let [a, b] = [1, 2];

// 对象解构
let {name, age} = {name: '赵六', age: 35};

8.2 模板字符串

let message = `你好，${name}！
你现在${age}岁了。`;

8.3 模块化

// math.js
export const PI = 3.14159;
export function square(x) { return x * x; }

// app.js
import { PI, square } from './math.js';

九、调试与最佳实践

9.1 调试技巧

// 控制台输出
console.log('调试信息');
console.table(data);

// 断点调试
debugger;

9.2 代码规范

使用一致的缩进（2或4个空格）
变量使用驼峰命名法
常量使用全大写命名
函数应该有明确的单一职责

十、综合应用示例

10.1 待办事项应用

<div id="app">
    <input type="text" id="taskInput">
    <button id="addBtn">添加</button>
    <ul id="taskList"></ul>
</div>

<script>
    const taskInput = document.getElementById('taskInput');
    const addBtn = document.getElementById('addBtn');
    const taskList = document.getElementById('taskList');

    addBtn.addEventListener('click', () => {
        if (taskInput.value.trim() === '') return;
        
        const li = document.createElement('li');
        li.textContent = taskInput.value;
        li.addEventListener('click', () => {
            li.classList.toggle('completed');
        });
        
        taskList.appendChild(li);
        taskInput.value = '';
    });
</script>

结语

掌握HTML和JavaScript的基础知识是前端开发的基石。本文涵盖了从基础语法到DOM操作、从异步编程到ES6新特性的核心概念。建议通过实际项目练习巩固这些知识，并持续关注Web技术的最新发展。

（全文约2450字） “`

这篇文章采用Markdown格式编写，包含了： 1. 多级标题结构 2. 代码块展示示例 3. 列表和段落文本 4. 完整的HTML和JavaScript代码示例 5. 从基础到进阶的知识点覆盖 6. 实际应用案例 7. 符合要求的字数范围

可以根据需要调整各部分内容的深度或添加更多具体示例。