HTML5 新特性

HTML5 简介

HTML5是HTML的最新版本，引入了许多新特性和API，使Web开发更加简单和强大。

语义化标签

新增语义化标签

html

<header>页眉</header>
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<section>章节</section>
<aside>侧边栏</aside>
<footer>页脚</footer>
<figure>图表</figure>
<figcaption>图表说明</figcaption>
<time>时间</time>
<mark>标记</mark>
<progress>进度条</progress>
<meter>度量衡</meter>

新增表单元素和属性

新增输入类型

html

<!-- 颜色选择器 -->
<input type="color" name="color" value="#ff0000">

<!-- 日期选择器 -->
<input type="date" name="date">
<input type="time" name="time">
<input type="datetime-local" name="datetime">
<input type="month" name="month">
<input type="week" name="week">

<!-- 数字输入 -->
<input type="number" name="number" min="0" max="100" step="1">

<!-- 范围选择 -->
<input type="range" name="range" min="0" max="100" value="50">

<!-- 邮箱输入 -->
<input type="email" name="email" required>

<!-- URL输入 -->
<input type="url" name="url">

<!-- 电话输入 -->
<input type="tel" name="tel">

<!-- 搜索输入 -->
<input type="search" name="search" placeholder="搜索...">

新增表单属性

html

<!-- 自动完成 -->
<input type="text" name="username" autocomplete="username">

<!-- 自动聚焦 -->
<input type="text" name="username" autofocus>

<!-- 必填 -->
<input type="text" name="username" required>

<!-- 最小/最大长度 -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- 最小/最大值 -->
<input type="number" name="age" min="0" max="120">

<!-- 正则表达式验证 -->
<input type="text" name="phone" pattern="^1[3-9]\d{9}$">

<!-- 占位符 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 只读 -->
<input type="text" name="username" value="只读" readonly>

<!-- 禁用 -->
<input type="text" name="username" disabled>

<!-- 多选 -->
<input type="file" name="files" multiple>

<!-- 列表 -->
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

新增多媒体元素

Video 和 Audio

html

<!-- 视频 -->
<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放
</video>

<!-- 音频 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放
</audio>

Canvas 和 SVG

html

<!-- Canvas -->
<canvas id="myCanvas" width="400" height="300">
  您的浏览器不支持Canvas
</canvas>

<!-- SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

新增API

1. Geolocation API

javascript

// 获取当前位置
navigator.geolocation.getCurrentPosition(
  function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(`纬度: ${latitude}, 经度: ${longitude}`);
  },
  function(error) {
    console.error('获取位置失败:', error.message);
  }
);

// 持续监控位置变化
const watchId = navigator.geolocation.watchPosition(
  function(position) {
    console.log('位置变化:', position.coords);
  }
);

// 停止监控
navigator.geolocation.clearWatch(watchId);

2. LocalStorage 和 SessionStorage

javascript

// LocalStorage - 永久存储
localStorage.setItem('username', '张三');
localStorage.setItem('age', '25');

const username = localStorage.getItem('username');
const age = localStorage.getItem('age');

localStorage.removeItem('username');
localStorage.clear();

// SessionStorage - 会话存储
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');
sessionStorage.removeItem('token');
sessionStorage.clear();

3. Web Workers

javascript

// 主线程
const worker = new Worker('worker.js');

worker.postMessage({ data: 'Hello Worker' });

worker.onmessage = function(e) {
  console.log('收到Worker消息:', e.data);
};

worker.onerror = function(error) {
  console.error('Worker错误:', error.message);
};

// worker.js
self.onmessage = function(e) {
  const result = e.data.data + ' - Processed';
  self.postMessage(result);
};

4. WebSocket

javascript

// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:8080');

// 连接打开
socket.onopen = function() {
  console.log('WebSocket连接已打开');
  socket.send('Hello Server');
};

// 接收消息
socket.onmessage = function(e) {
  console.log('收到消息:', e.data);
};

// 连接关闭
socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

// 连接错误
socket.onerror = function(error) {
  console.error('WebSocket错误:', error);
};

// 关闭连接
socket.close();

5. Fetch API

javascript

// GET请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// POST请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: '张三', age: 25 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 带认证的请求
fetch('https://api.example.com/protected', {
  headers: {
    'Authorization': 'Bearer token123'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

6. History API

javascript

// 添加历史记录
history.pushState({ page: 'home' }, '首页', '/home');

// 替换当前历史记录
history.replaceState({ page: 'about' }, '关于', '/about');

// 监听历史记录变化
window.onpopstate = function(event) {
  console.log('状态:', event.state);
};

// 前进/后退
history.back();
history.forward();
history.go(-1);

7. Notification API

javascript

// 请求通知权限
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    new Notification('通知标题', {
      body: '通知内容',
      icon: 'icon.png'
    });
  }
});

// 检查权限
if (Notification.permission === 'granted') {
  new Notification('通知标题', {
    body: '通知内容'
  });
}

8. File API

javascript

// 文件上传
<input type="file" id="fileInput" multiple>

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(e) {
  const files = e.target.files;
  
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    console.log('文件名:', file.name);
    console.log('文件大小:', file.size);
    console.log('文件类型:', file.type);
    console.log('最后修改时间:', file.lastModified);
    
    // 读取文件内容
    const reader = new FileReader();
    reader.onload = function(e) {
      console.log('文件内容:', e.target.result);
    };
    reader.readAsText(file);
  }
});

9. Drag and Drop API

html

<div id="dropZone" 
     style="width: 300px; height: 200px; border: 2px dashed #ccc;">
  拖拽文件到此处
</div>

<script>
const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragover', function(e) {
  e.preventDefault();
  dropZone.style.borderColor = '#000';
});

dropZone.addEventListener('dragleave', function(e) {
  e.preventDefault();
  dropZone.style.borderColor = '#ccc';
});

dropZone.addEventListener('drop', function(e) {
  e.preventDefault();
  dropZone.style.borderColor = '#ccc';
  
  const files = e.dataTransfer.files;
  console.log('拖拽的文件:', files);
});
</script>

10. Clipboard API

javascript

// 复制文本
navigator.clipboard.writeText('要复制的文本')
  .then(() => console.log('复制成功'))
  .catch(err => console.error('复制失败:', err));

// 读取剪贴板
navigator.clipboard.readText()
  .then(text => console.log('剪贴板内容:', text))
  .catch(err => console.error('读取失败:', err));

其他新特性

1. Data Attributes

html

<div data-id="123" data-name="张三" data-age="25">
  自定义数据
</div>

<script>
const element = document.querySelector('div');
const id = element.dataset.id;
const name = element.dataset.name;
const age = element.dataset.age;

console.log(id, name, age);
</script>

2. Content Editable

html

<div contenteditable="true">
  这是一个可编辑的div
</div>

<p contenteditable="true">
  这是一个可编辑的段落
</p>

3. Hidden Attribute

html

<div hidden>
  这个元素是隐藏的
</div>

4. Autocomplete

html

<form autocomplete="on">
  <input type="text" name="username" autocomplete="username">
  <input type="email" name="email" autocomplete="email">
  <input type="password" name="password" autocomplete="new-password">
</form>

面试常见问题

1. HTML5有哪些新特性？

语义化标签
新增表单元素和属性
多媒体元素（video、audio）
Canvas和SVG
Web Storage（localStorage、sessionStorage）
Web Workers
WebSocket
Geolocation API
History API
Notification API
File API
Drag and Drop API
Clipboard API

2. localStorage 和 sessionStorage 的区别？

localStorage: 永久存储，除非手动清除
sessionStorage: 会话存储，关闭浏览器后清除

javascript

localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

3. WebSocket 和 HTTP 的区别？

WebSocket: 双向通信，实时性高，连接保持
HTTP: 请求-响应模式，单向通信，无状态

javascript

const socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function(e) {
  console.log(e.data);
};

4. Web Workers 的作用？

Web Workers允许在后台线程中运行JavaScript，不会阻塞主线程，提高性能。

javascript

const worker = new Worker('worker.js');
worker.postMessage({ data: 'Hello' });
worker.onmessage = function(e) {
  console.log(e.data);
};

5. History API 的作用？

History API允许操作浏览器的历史记录，实现单页应用的路由功能。

javascript

history.pushState({ page: 'home' }, '首页', '/home');
window.onpopstate = function(e) {
  console.log(e.state);
};

通过理解HTML5的新特性和API，可以构建更加强大和现代化的Web应用。

HTML5 新特性 ​

HTML5 简介 ​

语义化标签 ​

新增语义化标签 ​

新增表单元素和属性 ​

新增输入类型 ​

新增表单属性 ​

新增多媒体元素 ​

Video 和 Audio ​

Canvas 和 SVG ​

新增API ​

1. Geolocation API ​

2. LocalStorage 和 SessionStorage ​

3. Web Workers ​

4. WebSocket ​

5. Fetch API ​

6. History API ​

7. Notification API ​

8. File API ​

9. Drag and Drop API ​

10. Clipboard API ​

其他新特性 ​

1. Data Attributes ​

2. Content Editable ​

3. Hidden Attribute ​

4. Autocomplete ​

面试常见问题 ​

1. HTML5有哪些新特性？ ​

2. localStorage 和 sessionStorage 的区别？ ​

3. WebSocket 和 HTTP 的区别？ ​

4. Web Workers 的作用？ ​

5. History API 的作用？ ​

HTML5 新特性

HTML5 简介

语义化标签

新增语义化标签

新增表单元素和属性

新增输入类型

新增表单属性

新增多媒体元素

Video 和 Audio

Canvas 和 SVG

新增API

1. Geolocation API

2. LocalStorage 和 SessionStorage

3. Web Workers

4. WebSocket

5. Fetch API

6. History API

7. Notification API

8. File API

9. Drag and Drop API

10. Clipboard API

其他新特性

1. Data Attributes

2. Content Editable

3. Hidden Attribute

4. Autocomplete

面试常见问题

1. HTML5有哪些新特性？

2. localStorage 和 sessionStorage 的区别？

3. WebSocket 和 HTTP 的区别？

4. Web Workers 的作用？

5. History API 的作用？