您的位置: 首页  >  文章  >  HTML5 - 3.基础

HTML5 - 3.基础

分类: 文章 • 2024-02-23 22:01:10

HTML5 基础

HTML

HTML是超文本标记语言的英文缩写，这是一种标记语言，不需要进行编译，直接由浏览器执行。

语言就必须有一个语法的规则，如果没有规则，谁知道应该把一个HTML元素以怎样的形式展现给用户呢？目前HTML语言的标准是由 W3C负责制定的。依照规则，无论是何种浏览器，对于相同的HTML代码，应当展现给用户相同的效果。

目前HTML语言最新版本为4(HTML4)，此外还有一个可扩展超文本标记语言（XHTML）作为其扩展版本，提供更为丰富的功能和更严谨的语法规范。

HTML5

HTML5，即超文本标记语言(HTML)第五次重大修改。HTML5中增加了许多新特性，例如嵌入音频、视频和图片的函数、客户端存储数据、交互式文档等，通过制定如何处理所有HTML元素以及如何从错误中恢复的精确规则，HTML5进一步增强了互动性，并有效减少了开发成本。

标准网址：https://www.w3.org/TR/html5/
HTML5标准：https://www.w3.org/TR/html5/
HTML5开发指南：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5
HTML5元素参看：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
浏览器支持情况：http://caniuse.com/

定稿时间：2014年10月28日

HTML5新特性

W3.org列举出来的8个Class技术描述：

A. 语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。

B. 本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5
APPCache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）。

C. 设备兼容特性 (Class: DEVICE ACCESS)

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联

D. 连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。

E. 网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能，
与网站自带的APPS，摄像头，影音功能相得益彰。

F. 三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

G. 性能与集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

H. CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。

HTML5和HTML4区别

A.简化的语法

更简单的doctype声明

B. 一个替代Flash的新”canvas”标记

对于Web用户来说，Flash既是一个惊喜，也是一种痛苦。用新的 “canvas”
标记生成视频的技术已经到来。

C. 新的 “header” 和 “footer” 标记

HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些”header”
和”footer”等新标记的出现，它们是专门为标志网站的这些部分设计的。在开发网站时，你不在需要用”div”标记来标注网页的这些部分。

D. 新的 “section” 和 “article” 标记

跟”header” 和 “footer”标记类似，HTML5中引入的新的”section” 和 “article”标记可以让开发人员更好的标注页面上的这些区域。据推测，除了让代码更有组织外，它也能改善SEO效果，能让搜索引擎更容易的分析你的页面。

E.新的 “menu” 和 “figure” 标记

F. 新的 “audio” 和 “video” 标记

新的”audio” 和 “video”标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称，它们是用来嵌入音频和视频文件的。

G. 全新的表单设计

H. 不再使用 “b” 和 “font” 标记

i. 不再使用 “frame”, “center”, “big” 标记

HTML5文件结构

HTML5 - 3.基础

HTML5元素组成

HTML5 - 3.基础

HTML5元素分类

HTML5 - 3.基础

HTML5元素标准属性

  • 核心属性

Class id style style title

  • ** 国际化属性**

Dir lang

  • 焦点属性

accesskey tabindex

  • 事件属性

onclick onfocus onblur、ondlbclick、onkeydown、okeypress、onkeyup、onmousedown、onmouseup、onmousemove、onmouseout、onmouseover适用于几乎所有的HTML元素

HTML5属性值分类

  • 字符集 utf-8 gb2312 gbk

  • 内容类型(MIME)

  • 像素值

  • 百分比长度值

  • 颜色值

  • URI(绝对链接,相对链接)

  • name与id属性的属性值

HTML5特殊字符

  • &lt;被显示为<

  • &gt;被显示为>

  • &copy被显示为©

  • &nbsp;被显示为空格

  • &deg;而被显示为°

  • <!-- 这里是注释 -->

项目开发：登录布局页面

  • app/auth/login.html

  • 总体分成四块

  • 注释书写规范

  • 尾部增加版权信息

HTML5 - 3.基础

HTML5 - 3.基础

HTML5 - 3.基础

本章项目源码

URL：https://gitee.com/yuanbaonet/master_web/tree/baoai_html5_v2/

对应版本：baoai_html5_v2

相关推荐