HTML5 || H5概述及文档基本结构

- 功能:

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 原生的

基本格式

文档结构:

    <!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的支持,使得这门语言受到了越来越多的开发者的青睐。本人也一直没有放弃过学习,博客记录自己的学习情况,顺便分享出来,与大家一起讨论,一起进步。本人还是前端开发领域的一个小学生,错误难免,欢迎各位评论纠错交流!

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页