HTML5特点及语法结构简介

本是古典何须时尚 2022-06-11 05:44 313阅读 0赞

随着移动端的兴起与发展，HTML5逐渐被接受，并广泛应用到页面制作中去，掌握HTML5编写技术，已成为前端开发者进入职场的一个必备条件，哪么HTLM5有哪些特点？具有哪些新兴的语法结构呢？接下来的文章将有详细的介绍。

**    以下为HTML5特点及语法结构：**

1.  文档声明变得更简单。  
    HTML5不再继承Strict（严格型）、Transitional（过渡型）、或Frameset（框架型）的文档声明，H5（HTML5的简写）有自己简洁、易懂、方便、快捷的文档声明：`<!DOCTYPE html>`
2.  **H5部分新增语意化标签如下：**  
    `<header>定义文档的头部区域； <nav>定义导航链接的部分； <section>定义文档中的节、区段； <article>定义页面独立的内容区域； <aside>定义页面的侧边栏内容； <figure>规定独立的流内容（图像、图标、照片、代码等）； <figcaption>定义<figure>元素的标题； <time>定义日期或时间； <mark>定义带有记号的文本，记号默认背景色为黄色； <progress>定义任何类型的任务的进度； <ruby>定义ruby注释（中文注音或字符）； <rt>定义字符（中文注音或字符）的解释或发音； <rp>在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容； <footer>定义section或document的页脚；`  
    **H5语法结构如图：**  
    ![这里写图片描述][SouthEast]
3.  强化了Web网页的表现性能。除了可描绘二维图形外，还有用于播放视频和音频的标签。  
    `<audio>定义音频内容； <video>自定义视频内容； <source>定义多媒体资源<video>和<audio>; <embed>定义嵌入的内容，比如插件；`
4.  HTML5支持离线存储、本地数据库等Web应用的功能，为代码编写及代码维护提供了很大的便利。
5.  各浏览器支持情况。  
    ![这里写图片描述][SouthEast 1]
6.  VIEWPORT（视窗）。  
    在H5中新增添了VIEWPORT meta 便签，该标签为编写移动端页面提供了很大的帮助，方便了PC端页面与移动端页面的转换，为开发者提供了和大的便利。  
    标签大致如下：  
    `<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">`  
    标签解释如下：  
    width：控制 viewport 的大小；  
    device-width 为设备的宽度；  
    initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例；  
    maximum-scale：允许用户缩放到的最大比例；  
    minimum-scale：允许用户缩放到的最小比例；  
    user-scalable：用户是否可以手动缩放。

以上内容为HTML5 中包含的特点及语法结构，当然，HTML5优点不仅仅只包含这些，大家在使用过程中还会发现H5更多的特点、更多的优势！

[SouthEast]: /images/20220611/c8969f345c7e403bb6504c83e720f4a0.png
[SouthEast 1]: /images/20220611/4a87355bc9134e8caf33a033662fa4e2.png