随着移动端的兴起与发展,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语法结构如图:

  3. 强化了Web网页的表现性能。除了可描绘二维图形外,还有用于播放视频和音频的标签。
    <audio>定义音频内容;
    <video>自定义视频内容;
    <source>定义多媒体资源<video>和<audio>;
    <embed>定义嵌入的内容,比如插件;

  4. HTML5支持离线存储、本地数据库等Web应用的功能,为代码编写及代码维护提供了很大的便利。
  5. 各浏览器支持情况。
  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更多的特点、更多的优势!

HTML5特点及语法结构简介相关推荐

  1. 什么是html写出html的文档结构,HTML第二课:认识HTML4和HTML5的文档结构

    这两节课的目标是认识HTML4和HTML5的文档结构,了解它们的区别. 一.HTML4文档结构html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  2. php总结1 ——php简介、工作原理、运行环境、文件构成、语法结构、注释

    1.1 PHP  超文本预处理程序.实际就是制作网站的脚本程序 1.2 运行环境: wamp--windowns+apache+mySQL+php    常用于开发.学习和研究 lamp --linu ...

  3. css专栏 01.css简介 02.css注释及语法结构

    # 02.css注释及语法结构[toc]{type: "ol", level: [3]}### css注释 - 单行注释 ```css /*单行注释*/ ``` - 多行注释 `` ...

  4. Shell的基本语法结构

    Shell的基本语法结构 文章目录 Shell的基本语法结构 一.SHELL介绍 1. 编程语言分类 2. shell简介 3. shell脚本 二.变量的定义 1. 变量是什么? 2. 什么时候需要 ...

  5. 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...

  6. HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...

  7. html语言简介 ppt,网页制作与HTML语言基本结构简介.ppt

    网页制作与HTML语言基本结构简介.ppt 第三章网页制作与HTML语言基本结构简介 本章提要静态网页与动态网页DreamweaverMX制作网页HTML语言的基本结构 3 1网页制作概述 3 1 1 ...

  8. 【转载】抽象语法树简介(有图)

    转载自http://blog.chinaunix.net/uid-26750235-id-3139100.html 抽象语法树简介 (一)简介 抽象语法树(abstract syntax code,A ...

  9. 【转】抽象语法树简介(AST)

    引用地址:http://blog.chinaunix.net/uid-26750235-id-3139100.html 抽象语法树简介 (一)简介 抽象语法树(abstract syntax code ...

最新文章

  1. Oracle 11g Release 1 (11.1) Data Pump 导出模式
  2. Django内置分页扩展
  3. OAM Kubernetes 标准实现与核心依赖库发布 | 云原生生态周报 Vol. 52
  4. matplotlib 第二次执行报错在 django web服务中
  5. 5中bug vue_苹果官网出BUG!这些都只要一两百元
  6. powercfg -h off_万代 S.H.Figuarts「假面骑士01 金属腾蝗形态」
  7. 安装APK时INSTALL_FAILED_ALREADY_EXISTS的解决办法
  8. java使用Rocksdb
  9. 简单计算经纬度表示的距离
  10. 手机端html5页面横屏显示,移动端HTML5中判断横屏竖屏的方法
  11. 下列计算机程序设计语言中不属于高级语言,下列计算机程序设计语言中不属于高级语言的是()?...
  12. 【数据库】分布式数据库设计
  13. Hibernate报错org.hibernate.MappingException: Unknown entity解决方法
  14. ESP8266制作创意时钟(DS1302+TM1637)
  15. 教育心理学有一句名言
  16. “庄家”:腾讯的投资“六合彩”
  17. performance性能监控
  18. 小程序组件页面刷新问题
  19. 2022抖音温暖中国年 集年味分7亿玩法攻略
  20. 移动开发:Android数据连接浅析

热门文章

  1. 电脑显示器超频如何恢复正常
  2. 最全markdown教程,它来了
  3. 瑞芯微 TB-RK3399Pro -- AI平台解决方案介绍
  4. STM32F1常用外设介绍(超详细35000字介绍)
  5. 探寻 vivo 印度崛起背后的秘密
  6. 标题|服务器标题|服务器名称|服务器IP|服务器端口|是否自动展开(0不展开,1自动展开)|微端IP|微端端口(0表示不使用微端)|安全盾防火墙端口(0表示不使用防火墙)|防火墙类型,0=安全盾防火墙
  7. smt贴片加工行业pcba常见测试方法优劣分析比较
  8. scholarscope不显示影响因子_Scholarscope
  9. AI线性图标教程-转起
  10. git 常用命令之 git branch