认识HTML5开发

本文深入探讨HTML5作为万维网核心语言的发展历程,详细解释其与HTML的关系及主要特性,包括视频、音频和画布等新标签,以及增强的解析规则和离线编辑功能。同时,文章概述了HTML5在前端、平台、混合、后端和全栈开发中的应用方向。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习笔记
*

认识HTML5开发*

1.什么是HTML?
W3C: World Wide Web Consortium,万维网联盟指定的一系列标准,其中就包括HTML标签的规则。HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

 HTML是用来描述网页的一种语言。
(1)HTML指的是超文本标记语言(Hyper Text Markup Language)
  (2)  HTML不是一种编程语言,而是一种标记语言(Markup Language)
  (3) 标记语言是一套标记标签(markup  tag)
  (4)HTML使用标记标签来描述网页。

HTML文档 = 网页
 (1)HTML文档描述网页
 (2)HTML文档包含HTML标签和纯文本
 (3)HTML文档也被称为网页

2.HTML5的设计目的
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式,包括:
· 新的解析规则增强了灵活性
· 新属性
· 淘汰过时的或冗余的属性
· 一个HTML5文档到另一个文档间的拖放功能
· 离线编辑
· 信息传递的增强
· 详细的解析规则
· 多用途互联网邮件扩展(MIME)和协议处理程序注册
· 在SQL数据库中存储数据的通用标准(Web SQL)
3.HTML5开发的主要方向(5个):
(1)、前端开发

ios;安卓;网页:pc端,移动端(浏览器,app内置页面); 

(2)、平台开发(微信)

比如:hbuilder平台的流应用,5+应用 mui打包的app

比如:(要学的)微信平台的:微信开发

(3)、混合开发

 开发出ios端和安卓端都能用的界面(一套代码,多端使用)

(4)、后端开发

  node.js的开发;效率快,节约资源

 **

(5)、全栈开发

 全栈,基本每一块都有接触。看个人意愿
HTML 5 特性 官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性: • 语义化标记 • Form 表单增强功能 • 视频 / 音频 • 画布(Canvas) • 可编辑内容 • 拖放 • 稳健的数据存储 检测浏览器支持 在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走: • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比 你还可以运行 Javascript(用Javascript 检测浏览器特性)来检测 HTML5 特性的支持。你还应该用用Modernizr: 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。 你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。 值得注意的变更点 除了新的特征,你还应该记下这些重要的变更点: • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。 • 简单易记的编码类型 你现在可以在 meta 标签中使用 "charset":<meta charset="utf-8″ /> • 不需要闭合标签 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp> 简单代码示例: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html> 你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。 语义化标记 HTML5 新增的一些新标签除了不仅仅是更具语义的 标签的替代品,并不提供额外的功能。这些都是新增的标签:、、、、<header>,、、、、 和 。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+)支持。Javascript 提供了document.createElement(tagName) 的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。 你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset: • HTML5 Reset CSS • Reset5 简单代码示例: 兼容 IE 的 HTML5 页面布局 <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] <![endif]--> </head> <body> <header> Page Header Page Sub Heading </header> Home Projects Portfolio Profile Contact <header> Article Heading May 5th, 2010 </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <header> Section Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Section Footer: Pellentesque volutpat, leo nec auctor euismod <header> Section Heading </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. FigCaption: Club, Heart, Spade and Diamond Ut sapien enim, porttitor id feugiat non, ultrices non odio Section Footer: Pellentesque volutpat, leo nec auctor euismod est. Article Footer <header> Siderbar Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Page Footer </body> </html> 注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值