gzyueqian
13352868059

HTML5前端开发概述及文档基本结构

更新时间: 2018-08-20 18:04:51来源: 粤嵌教育浏览量:6679

    一、功能:

    1、核心:由W3C官方规范组成,设计新的语义元素、新增的web表单、音频、视频、以及通过JavaScript绘图的Canvas;
    2、曾经的html5标准:来自初的html5规范、其中大多数功能需要JavaScript且支持富web应用开发;比如:本地数据存储、离线应用和消息传递‘
    二、特点:
    1、向下兼容:XHTML2.0遵循严格模式,对有错误的html文件无法正常显示,而html5实现“不破坏we“的原则。可以兼容不同版本的HTML存在的问题,并且支持向下兼容;
    2、用户至上:HTML5遵循用户至上的原则。为用户提供完美的网页内容;
    3、化繁为简:以浏览器的原生能力代替复杂的JavaScript;DOCTYPE 被简化到;字符集声明被简化;简单强大的API;
    4、无插件范式:在HTML5 出现之前,很多功能只能通过插件或hack(如绘图API)来实现,但HTML5原生提供了这些支持。使用插件有很多问题,如:
    (1).插件安装容易失败;
    (2).插件被浏览器或软件禁用屏蔽(如Flash 插件);
    (3).插件经常会被爆出漏洞被利用攻击;
    (4).插件不容易与HTML 文档其他部分集成(比如整体透明化等)。
    5、访问通用性: 
    (1).可访问性:比如更加利于残障人士的阅读方案;
    (2).媒体中立:比如HTML5 的媒体播放在不同设备或平台均能正常运行;
    (3).支持所有语种:比如新元素。
    6、引入原生媒体支持和可编程内容
    HTML5 支持在浏览器中直接播放视频和音频文件,以前都需要借助插件才能实现此类功能;引入了需要通过JavaScript 编程才能完全的各种效果,而这些很多都是HTML5 原生的
    三、基本格式
    1、文档结构:
        <!DOCTYPE html>                          //文档声明类型  文档为Html
        <html lang="zh-cn">                     //表示文档开始 lang声明文本的语言
        <head>                                  //包含文档元数据开始
            <meta charset="utf-8">              //声明文档的编码格式   
            <title></title>                     //文档的标题栏
        </head>                                 //包含文档元数据结束
        <body>                                  //表示html文档内容

        </body>                                 
        </html>
    四、文档结构分析:
    1.Doctype:文档类型声明(Document Type Declaration,也称Doctype)。它主要告诉浏览器所查看的文件类型。在以往的HTML4.01 和XHTML1.0 中,它表示具体的HTML 版本和风格。而如今HTML5 不需要表示版本和风格了。
    //不分区大小写
    2.html 元素:首先,元素就是标签的意思,html 元素即html 标签。html 元素是文档开始和结尾的元素。它是一个双标签,头尾呼应,包含内容。这个元素有一个属性和值:lang=”zh-cn”,表示文档采用语言为:简体中文。
    <html lang="zh-cn"> //如果是英文则为en`
    3.head 元素:用来包含元数据内容,元数据包括:、、、
    <head>...</head> //这些信息在页面不可见
    4.meta 元素:该元素用来提供关于文档的信息,起始结构有一个属性为:charset=”utf8”。表示告诉浏览器页面采用的什么编码,一般来说我们就用utf-8。当然,文件保存的时候也是utf-8,而浏览器也设置utf8 即可正确显示中文。
    <meta charset="utf-8"> //除了设置编码,还有别的
    5.title 元素:该元素很简单,设置浏览器左上角的标题。
    <title>标题</title>
    6.body 元素:用来包含文档内容的元素,也就是浏览器可见区域部分。所有的可见内容,都应该在这个元素内部进行添加。
    <body>...</body>   //页面在浏览器中显示的内容
    HTML5是近几年前端开发非常火的编程语言,其新特性给开发者带来了非常多的便利。同时,不同浏览器厂商对HTML5的支持,使得这门语言受到了越来越多的开发者的青睐。
    粤嵌科技13年专注IT人才培训学习的专业机构,主要培训课程为,嵌入式开发、Java大数据、Unity游戏开发、Python人工智能、HTML5前端开发、全栈UI设计、网络营销、CCIE网络等专业课程

免费预约试听课