系列文章目录

前端系列文章——传送门
HTML系列文章——传送门

文章目录

• 系列文章目录
• • 什么是 HTML5?
  • HTML5 的语法
  • HTML5 中的语义化标签
  • 额外的表单元素
  • HTML5 中的 input type 类型
  • • 验证类型
    • 取值类型
  • HTML5 中的表单属性
  • • form 新属性
    • input 新属性
  • HTML5 中的关联文本
  • HTML5 中的音频和视频
  • HTML5 中的Canvas
  • • 什么是 canvas?
  • HTML5 中的内联 SVG
  • • 什么是 SVG？
    • SVG 优势
  • SVG 与 Canvas 区别

什么是 HTML5?

HTML5 是下一代 HTML 标准

HTML , HTML 4.01 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持

声明必须位于 HTML5 文档中的第一行,使用非常简单

对于中文网页需要使用 声明编码，否则会出现乱码

HTML5 的语法

内容类型（ContentType）
HTML5 的文件扩展符与内容类型保持不变，仍然为".html"或".htm"

DOCTYPE 声明
不区分大小写

指定字符集编码

meta charset="UTF-8"

可省略标记的元素
不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody

省略引号
属性值可以使用双引号，也可以使用单引号

HTML5 中的语义化标签

HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分

额外的表单元素

HTML5 中的 input type 类型

验证类型

取值类型

HTML5 中的表单属性

form 新属性

input 新属性

HTML5 中的关联文本

点击文本时也可以控制表单元素的选择情况

第一种方案

  我同意此条款

第二种方案

 我同意此条款

HTML5 中的音频和视频

1. 音频
   src 音频文件的 URL
   controls 向用户显示音频控件（比如播放/暂停按钮）
   autoplay 音频在就绪后马上播放
   loop 每当音频结束时重新开始播放
   muted 音频输出为静音
   preload 当网页加载时，音频是否默认被加载以及如何被加载

2. 视频
   src 音频文件的 URL
   controls 向用户显示音频控件（比如播放/暂停按钮）
   autoplay 音频在就绪后马上播放
   loop 每当音频结束时重新开始播放
   muted 音频输出为静音
   preload 当网页加载时，音频是否默认被加载以及如何被加载
   poster 视频正在下载时显示的图像，直到用户点击播放按钮
   width 视频播放器的宽度
   height 视频播放器的高度

HTML5 中的Canvas

什么是 canvas?

HTML5 元素用于图形的绘制，通过脚本 (通常是 JavaScript)来完成
标签只是图形容器，您必须使用 脚本 来绘制图形
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像

HTML5 中的内联 SVG

什么是 SVG？

1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2. SVG 用于定义用于网络的基于矢量的图形
3. SVG 使用 XML 格式定义图形
4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
5. SVG 是万维网联盟的标准

SVG 优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大

SVG 与 Canvas 区别

1. SVG 适用于描述 XML 中的 2D 图形的语言
2. Canvas 随时随地绘制 2D 图形（使用 javaScript）
3. SVG 是基于 XML 的，意味这可以操作 DOM，渲染速度较慢
4. 在 SVG 中每个形状都被当做是一个对象，如果 SVG 发生改变，页面就会发生重绘
5. Canvas 是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘