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

html5是和js

HTML5与JavaScript结合紧密，前者构建页面结构，后者实现交互逻辑，共同提升网页动态效果与用户体验

HTML5 与 JavaScript 详解

HTML5 核心特性

语义化标签

作用 示例
<header> 定义页眉区域 <header>网站导航栏</header>
<nav> 标记导航链接区 <nav><a href="#">首页</a></nav>
<article> 文章块 <article>技术博客正文</article>
<section> 文档章节区域 <section>第一章：基础</section>
<footer> 页脚信息区域 <footer>©2023 公司名称</footer>

多媒体支持

  • 直接嵌入音频视频无需插件 
    <video src="movie.mp4" controls></video>
<audio src="music.mp3" loop></audio>
  • 支持多种格式：MP4/WebM/Ogg

图形绘制能力

  • Canvas 2D绘图 
    const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillRect(10, 20, 100, 80); // 绘制矩形
  • SVG矢量图形 
    <svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

本地存储

类型 特性 容量 持久性
localStorage 键值对存储 5MB 永久
sessionStorage 会话级存储 5MB 临时
IndexedDB 对象数据库 500MB+ 永久

离线应用

通过 manifest 文件配置离线资源：

<html manifest="app.manifest">
<!-指定需要缓存的文件列表 -->
</html>

JavaScript 核心特性

语法特性

  • 严格模式声明：'use strict';
  • 模板字符串：`姓名：${name}`
  • 解构赋值：let [a,b] = [1,2];
  • Promise 异步处理： 
    fetch('/api/data')
.then(response => response.json())
.catch(error => console.error(error));

事件处理机制

事件类型 触发时机 示例
DOMContentLoaded DOM加载完成 document.addEventListener('DOMContentLoaded', init);
click 点击元素 btn.addEventListener('click', handleClick);
input 变化 input.addEventListener('input', validate);
scroll 滚动条变化 window.addEventListener('scroll', lazyLoad);

DOM操作方法

方法 作用 示例
createElement() 创建元素 const div = document.createElement('div');
querySelector() 选择元素 const header = document.querySelector('.header');
classList.add() 添加类名 element.classList.add('active');
setAttribute() 设置属性 img.setAttribute('alt', '示意图');

异步编程模型

  • 回调函数：setTimeout(()=>{console.log(1)},1000);
  • Generator 函数： 
    function countdown(){
yield 3;
yield 2;
yield 1;
}
  • async/await： 
    async function fetchData(){
const response = await fetch('/api');
return response.json();
}

HTML5 与 JavaScript 协同工作

典型应用场景

场景 HTML5结构 JavaScript功能
轮播图 <div class="carousel"> 定时切换图片、触屏滑动
表单验证 <form><input type="email"> 实时校验输入格式、阻止提交
数据可视化 <canvas id="chart"></canvas> 绘制柱状图、折线图
单页应用 <div id="app"></div> 动态路由、组件渲染

API交互示例

// 获取地理位置信息
navigator.geolocation.getCurrentPosition(position => {
  const {latitude, longitude} = position.coords;
  document.getElementById('coords').textContent = `${latitude}, ${longitude}`;
});

相关问题与解答

Q1：HTML5相比之前版本的主要改进有哪些？
A1：主要改进包括：1) 语义化标签增强可读性；2) 原生支持音视频播放；3) Canvas/SVG绘图能力；4) 本地存储和离线应用支持；5) 更严格的文档解析规则，这些改进使网页开发更规范，减少了对第三方插件的依赖。

Q2：JavaScript如何操作HTML5新增的元素属性？
A2：通过标准DOM API进行操作，

// 操作data-属性
const customData = element.dataset.customKey; // 获取data-custom-key的值
element.dataset.customKey = 'newValue'; // 设置新值
// 操作ARIA属性（无障碍访问）
element.setAttribute('aria-hidden', 'true'); // 设置属性
const isHidden = element.getAttribute('aria-hidden') === 'true'; //
javascript前端
0

相关文章