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

学习笔记(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初学者零基础入门...

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar ...

    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学习的详细教程,能快速帮助你掌握这门技术。

    HTML学习笔记.md

    HTML学习笔记

    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”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料,非常适合初学者入门。接下来,我们将深入探讨这两个重要主题。 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 ...

    h5前端学习笔记

    【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本,它引入了许多新的元素、API和特性,极大地增强了网页的交互性、可访问性和可用性。 【描述...

    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+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, 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.zip

    学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...

    html和css学习笔记

    ### HTML与CSS学习笔记 #### 一、基础知识概述 HTML(HyperText Markup Language)与CSS(Cascading Style Sheets)是构建网页的基础技术。通过学习HTML与CSS,我们可以创建结构化且美观的网页。 - **WWW (World ...

Global site tag (gtag.js) - Google Analytics