`
SunnyYoona
  • 浏览: 361658 次
社区版块
存档分类
最新评论

学习笔记(1)HTML5

 
阅读更多

(1)前言

HTML5本身其实很简单,就是一些标签,没有什么复杂的。找个教程或手册,把用法搞清楚,一天应该就差不多能掌握了。其实HTML5最难的还是和JS的整合,首先必须熟悉和了解JavaScript的语法结构和基础,必要时还要学习一些JS库,方便开发。然后才能深入的学习一些基于HTML5的扩展知识,比如Canvas2D在浏览器中画图,可以用于游戏开发等等场合。WebSocket 浏览器可以与服务器间双向通信;而Socket方式能够大大提高浏览器与服务器间的通信效率,可以用于浏览器与服务器间通信频繁的场合,比如实时聊天。

(2)革新

对于 HTML 5 革新,按我的理解,可以总结为语义明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、不需要插件的富动画(canvas)、强大的 API 支持。

(3)标签

所有的HTML5结构标签本质上都是一个div标签,只不过有意义。

(4)文档声明类型

<!doctype html>
在编写HTML5文档时,要求指定文档类型。以确保浏览器在HTML5正确的模式下渲染。

(5)新增元素

目前,我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部,底部或者侧栏等。
有了它们,代码编写者不再需要为id的命名费尽心思,对于手机、阅读器等设备更有语义的好处。
HTML 5增加了新的结构元素来表达这些最常用的结构:
section: 这可以表达书本的一部分或一章,或者一章内的一节
header: 页面主体上的头部。并非head元素
footer: 页面的底部(页脚),可以是一封邮件签名的所在
nav: 到其他页面的链接集合
article: 诸如blog, 杂志,纲要等之中的一条独立记录。

<!doctype html>
<html>
	<head></head>
	<body>
		<header>
			<nav></nav>
		</header>
		<div>
			<section>
				<article></article>
			</section>
			<aside></aside>
		</div>
		<footer></footer>
	</body>
</html>



传统的布局方式



HTML5布局方式




分享到:
评论

相关推荐

    HTML的学习笔记.zip

    HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记...

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...

    Web前端学习笔记:HTML5+CSS3+JavaScript.pdf

    Web前端学习笔记:HTML5+CSS3+JavaScript.pdf

    HTML+CSS学习笔记.zip

    HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...

    html css js 学习笔记.zip

    html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...

    HTML5高级程序设计学习笔记

    HTML5高级程序设计学习笔记,僅供參考。

    HTML5学习笔记

    HTML5学习的详细教程,能快速帮助你掌握这门技术。

    HTML学习笔记.md

    HTML学习笔记

    html5学习笔记

    一、html5页面结构 二、html5标记 三、html5结构化语义元素 四、表单 五、html5媒体元素:audio和video 六、html5绘图API 七、html5 Canvas

    html常用标签学习笔记

    html常用标签学习笔记 html常用标签学习笔记 html常用标签学习笔记

    HTML学习笔记.ppt

    HTML学习笔记.pptHTML学习笔记.pptHTML学习笔记.pptHTML学习笔记.pptHTML学习笔记.ppt

    html+css前端学习笔记.zip

    html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...

    bootstrap学习笔记-html5

    bootstrap学习笔记-html5 各类简单案例,适合初学者

    html 5 学习教程笔记.zip

    html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...

    nodeJS学习笔记.html

    nodejs 学习笔记 nodejs 学习笔记 nodejs 学习笔记

    前端的学习笔记HTML+css.zip

    前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...

    html和css学习笔记

    作为html 和css 学习笔记 和 复习大纲

    html+css+js学习笔记.zip

    html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...

    前端学习笔记, html, css, js.zip

    前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习...

Global site tag (gtag.js) - Google Analytics