当前位置：首页 > 行业动态 > 正文

html5与js

HTML5构建网页结构，JS实现交互逻辑，二者

HTML5 核心特性与新功能

语义化标签

HTML5 引入了描述内容的语义化标签，提升可读性与 SEO 效果：

  • <header>：页面或区域头部
  • <nav>：导航链接区块
  • <article>文章
  • <section>：文档章节
  • <footer>：页脚信息
  • <aside>：侧边栏相关内容

多媒体支持

原生支持音频视频播放,无需依赖 Flash：

<video src="movie.mp4" controls autoplay></video>
<audio src="music.mp3" loop></audio>

本地存储

提供 localStorage 和 sessionStorage 实现客户端数据存储：
| 存储类型 | 生命周期 | 容量限制 | 使用场景 |
|—————-|——————-|———-|————————|
| localStorage | 永久保存 | ~5MB | 长期配置信息 |
| sessionStorage | 页面会话期间有效 | ~5MB | 临时表单数据缓存 |

Canvas 绘图

通过 <canvas> 元素实现图形绘制：

const ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(10, 10, 100, 80); // 绘制红色矩形

JavaScript 核心特性与语法

变量声明

关键字 作用域 是否可重赋值 是否可重新声明
var 函数作用域 是 是
let 块级作用域 是 否
const 块级作用域 否 否

箭头函数

简化函数表达式写法并绑定上下文：

// 传统函数
function sum(a, b) { return a + b; }
// ES6 箭头函数
const sum = (a, b) => a + b;

Promise 异步处理

解决回调地狱问题：

fetchData()
  .then(data => process(data))
  .catch(err => console.error(err));

模块化

通过 export/import 实现代码分离：

// utils.js
export function add(a, b) { return a + b; }
// main.js
import { add } from './utils.js';
console.log(add(2, 3)); // 5

HTML5 与 JavaScript 协同应用

DOM 操作

通过 JavaScript 动态修改页面结构：

document.querySelector('.btn')
  .addEventListener('click', () => {
    const newItem = document.createElement('li');
    newItem.textContent = '新列表项';
    document.querySelector('ul').appendChild(newItem);
  });

事件委托

利用事件冒泡机制优化事件处理：

document.getElementById('list')
  .addEventListener('click', (e) => {
    if(e.target.tagName === 'LI') {
      e.target.style.color = 'red';
    }
  });

AJAX 与 Fetch API

实现页面无刷新数据请求：

// 传统 AJAX
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = () => console.log(xhr.response);
xhr.send();
// 现代 Fetch API
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

Form 表单验证

自定义校验逻辑增强用户体验：

document.querySelector('form')
  .addEventListener('submit', (e) => {
    const email = e.target.email.value;
    if(!validateEmail(email)){
      e.preventDefault();
      alert('请输入有效邮箱');
    }
  });

常见问题与解答

问题1：HTML5 的 <canvas> 和 SVG 有什么区别？何时选择哪种技术？
答：<canvas> 是像素级绘图，适合动态渲染（如游戏动画），性能消耗大但灵活性高；SVG 是基于矢量图形，适合静态图标和复杂图形，缩放不失真，选择依据：需要动态交互选 Canvas，静态图形选 SVG。

问题2：JavaScript 中的 let 和 const 能否在块级作用域外访问？
答：不能。let 和 const 具有块级作用域特性，在块外无法访问。

if(false) {
  let x = 5;
}
console.log(x); // 报错
0

相关文章