Head First HTML5 Programming笔记--chapter1 认识HTML5

升级到HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html14/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Head First Lounge</title>
  <link type="text/css" rel="stylesheet" href="lounge.css">
   <script type="text/javascript" src="lounge.js"></script>
 </head>
 <body>
  <h1>Welcome to Head First Lounge</h1>
  <p>
   <img src="drinks.gif" alt="Drinks">
  </p>
  <p>
    Join us any evening for refreshing <a href="elixirs.html">elixirs</a>, conversation and maybe a game or two of Tap Tap Revolation. Wireless access is always provided; BYOWS (Bring Your Own Web Server).
  </p>
 </body>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html14/strict.dtd">
<!DOCTYPE html>
<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta charset="utf-8"/>
    <title>Head First Lounge</title>
  

<link type="text/css" rel="stylesheet" href="lounge.css">

   <link  rel="stylesheet" href="lounge.css">

<script type="text/javascript" src="lounge.js"></script>

   <script  src="lounge.js"></script>
 </head>
 <body>
  <h1>Welcome to Head First Lounge</h1>
  <p>
   <img src="drinks.gif" alt="Drinks">
  </p>
  <p>
    Join us any evening for refreshing <a href="elixirs.html">elixirs</a>, conversation and maybe a game or two of Tap Tap Revolation. Wireless access is always provided; BYOWS (Bring Your Own Web Server).
  </p>
 </body>
</html>

HTML5的技术家庭:

CSS3, Web工作线程, 表单, 离线Web应用, 音频&视频, 新元素, 本地存储, 画布, 地理定位

BULLET POINTS

  • HTML5是最新版本的HTML.它引入了简化的标记、新的语义和媒体元素,另外要依赖于一组支持Web应用的JavaScript库。
  • XHTML不再是Web页面的标准。开发人员和W3C决定还是继续扩展和改进HTML.
  • 新的、更为简单的HTML5 doctype在较老的浏览器上也得到支持,这些浏览器看到这个doctype时会使用标准模式。
  • <script>标记或指向CSS的样式表链接中不再需要type属性。现在JavaScript和CSS是默认类型。
  • 用于指定字符集的<meta>标记已经大为简化,只包含字符编码。
  • UTF-8现在是Web上使用的标准字符集。
  • 对doctype和<meta>标记做出修改不会影响页面在较老浏览器上的显示。
  • HTML5的新元素是HTML4元素的一个超集,这说明,较老的页面在现代浏览器中仍能正常工作。
  • 按官方说法,HTML5标准在2014年前不会正式完成,不过大多数现代浏览器在此之前就能提供支持(现在就有很多浏览器支持HTML5)!
  • HTML5引入了一些元素,可以向页面增加新的语义,与HTML4.01相比,可以提供更多选项来创建Web页面结构。
  • HTML5中的很多新特性都需要JavaScript来充分加以利用。
  • 通过使用JavaScript,可以与DOM交互,也就是文档对象模型(Document Object Model)。
  • DOM是Web页面的浏览器内部表示。通过使用JavaScript,你可以访问元素、修改元素,还可以向DOM增加新元素。
  • JavaScript API是一个“应用编程接口”。利用API,可以控制HTML5的所有方面,比如2D绘图、视频回放等等。
  • JavaScript是世界上最流行的语言之一。最近几年,JavaScript实现有了显著的改进。
  • 可以检测一个浏览器中是否支持某个新特性,如果不支持还能够妥善地降级。
  • CSS是HTML5的样式标准,很多人用“HTML5”描述创建Web应用所用的技术家族时,都包含CSS。
时间: 2024-10-24 12:50:27

Head First HTML5 Programming笔记--chapter1 认识HTML5的相关文章

Head First HTML5 Programming笔记--chapter2 介绍Javascript和DOM

你已经了解了HTML标记(也称为结构),而且知道了CSS样式(也称为表示),剩下的就是Javascript(也称为行为). JavaScript的工作方式 1. 编写 你创建HTML标记和JavaScript代码,并把它们放在文件中,比如说index.html和index.js(或者,也可以都放在HTML文件中). 2. 加载 浏览器获取并加载你的页面,从上到下解析它的内容.遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码.浏览器还会建立HTML的一个内部模型,称为DO

HTML5学习笔记五:html5表单

表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素指定form属性,属性值为相应表单的id,该元素就属于指定表单了:只有Opera 10支持. 1.2 placeholder属性:文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字:Safari 4,chrome3,firefox4 1.3 autofocus属性:打开页面时,有该属性的控

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

HTML5 程序设计笔记(一)

HTML5 概述 1.html5 发展史 1993年html首次以因特网草案形式发布. 20世纪90年代,html大幅发展,从2.0版,到3.2版和4.0版.最后到1999年的4.01版. 伴随html发展,W3C掌握了对html规范的控制权. 快速发布四个版本后,在业界人为html已经末路的同时,对web标准焦点开始转移到XML和XHTML上.HTML被放在次要位置. 致力于将web平台提升到一个新高度,一小组人在2004年成立WHATWG,他们创立了HTML5规范,同时开始转对web应用开发

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

HTML5 程序设计笔记(二)

Canvas API 1.HTML5 Canvas 概述 1.1 历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若要在浏览器中使用绘图API,只能使用Adobe的Flash和SVG插件,或者只有IE才支持的VML,以及其他一些稀奇古怪的javascript技巧. SVG和Canvas对比 "Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可

html5学习笔记2

css3选择器 1.通过元素的关键字,如p,div等 2.通过id属性 3.通过class属性引用 3.1通过class属性引用p标签,如:p.text{}//text样式只适用于p 4.通过任意键引用 例如:p[name]{}//仅引用带有name属性的p标签 p[name="my"]{}//仅引用带有name属性等于"my"的p标签 还可以使用正则表达式p[name^="my"]{} p[name$="my"]{} 5.通

Html5总结笔记1

Html5总结笔记1(标签+属性+事件) 项目里面一个分页面的html文件结构基本如下: <link href="...css">//每个分页面都会加载的css文件 <div> <section> ...//里面又包含里n个<div> </section> <link rel="stylesheet" href="...css"> <script type="