3/7/2017 7:10:13 PM
什么是html 5？
html 5是拥有新的语义、图形及多媒体元素，专门为承载丰富的web内容而设计的，无需额外插件且提供了新元素和新的API（应用程序接口）简化了web应用程序的搭建的，可跨平台（PC、平板、手机、电视机等）运行的最新的html标准。
html5中的默认字符编码是utf-8.
新的属性语法
html 5标准允许4种不同的属性语法。
本例演示在<input>标签中使用的不同语法：
类型:示例
Empty(空):<input type="text" value="John Doe" disabled>
Unquoted(无引号):<input type="text" value=John Doe>
Double-quoted(双引号):<input type="text" value="John Doe">
Single-quoted(单引号):<input type="text" value='John Doe'>
在html 5标准中，根据对属性的需求，可能会用到所有的4种用法。
html 5中被删除的元素
-
<acronym>-定义只取首字母缩写，替代元素：abbr -
<applet>-定义嵌入的小程序，替代元素：object -
<basefont>-定义所有文本的默认字体颜色尺寸等，替代：用样式表来写。 -
<font>--定义文字的字体颜色尺寸等，替代：用样式表来写。 -
<big>-定义大号字体，替代：用样式表来写。 -
<center>-定义水平居中文本，替代：用样式表来写。 -
<dir>-定义目录列表，替代：用样式表来写。 -
<frameset>-定义框架集，被用来组织多个frame。不能与body标签一起使用，除非定义了<noframes>标签时必须将<body>放置在<noframes>标签中！嵌套方式为
<frameset>
<frame>
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
-
<frame>-定义框架集的一个窗口或框架，可单独设置border/scrolling/noresize之类的属性。 -
<noframes>-定义针对不支持框架的用户的替代内容，如果浏览器有能力处理框架，就不会显示出noframes元素中的文本。 -
<strike>-定义加删除线文本定义。替代：del标签与ins标签。 -
<tt>-定义等宽文本，替代：用样式表来写。
html 5浏览器支持
浏览器无论新旧，都会把未识别元素当作行内元素来处理，可以借助这一点帮助老式浏览器处理未知的html元素。
方法为：将老式浏览器不认识的8个html 5新块级元素以及用script语句创建的任意新元素都定义为块级元素。即把CSS display属性设置为block，以确保老式浏览器能够理解并呈现正确的行为。
html 5中定义的8个新的语义html块级元素
header, section, footer, aside, nav, main, article, figure {
display: block;
}
可通过浏览器特技向html添加/创建任何新元素，只要在css中命名的元素选择器与html中的元素名完全一致且将新元素定义为块级元素即可
下例向HTML添加了一个名为<myHero>的新元素，并为其定义display样式：
<!DOCTYPE html>
<html>
<head>
<title>Styling the article element</title>
<script type="text/javascript">document.createElement("myHero")</script>
<style>
myHero {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>
效果如下：
图片说明文字
上例中添加的js语句document.createElement("myHero")仅适用于IE，意为文档内创建一个名为“myHero”的元素。
【上面的js语句如果写成：
document.createElement("myHero")
那么页面中会显示括号内的文本，效果如下：
图片说明文字
】【这一段仅仅是帮助自己记忆，与上下文无关】
IE的问题
所有新的html 5元素都可以引用上述方法，现代浏览器不管有没有声明上例中的script语句，都可以接受创建元素，但IE不行，上例中，不管有没有声明script，IE9及以上的浏览器都可显示正确的行为，IE9以下的版本都不允许对未知元素添加样式。
但Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript"---"the shiv"，使IE9以下的浏览器可以读取并且理解放在<head>元素中的注释中的script脚本，从而显示正确的行为。shiv代码如下：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
3/8/2017 2:26:00 PM
完整的Shiv解决方案
<!DOCTYPE html>
<html>
<head>
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<h1>My First Article</h1>
<article>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</article>
</body>
</html>
无法识别<script>标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，应当在注释标签中隐藏脚本。老式的（无法识别<script>标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！<script>标签会内嵌于条件注释。
注意：引用shiv代码的链接必须位于 <head>元素中，因为IE需要在读取之前认识所有新元素。
html 5骨架Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header, nav, section, article, footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 Skeleton</h1>
</header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>© 2014 W3Schools. All rights reserved.</p>
</footer>
</body>
</html>
html 5新元素
有一部分不理解需要再看，还有一部分在html4.01的笔记中。
html 5部分语义元素
- section、article、div
<section>元素被定义为相关元素块。
<article>元素定义完整的相关元素自包含块。
<div>元素被定义为子元素的块。
这三者差异非常非常小。
以下嵌套都是正确的：
<section><article></article><article></article></section>
<article><section></section><section></section></article>
<section><section></section><section></section></section>
<article><article></article><article></article></article>
<article><div></div><div></div></article>
<article><section><div></div><div></div></section></article>
- figure和figcaption
<figure>
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
<img>元素定义图像，<figcaption> 元素定义标题,<figure>用来组合这两个元素。
为什么要使用html 5语义元素
避免因html4.01属性名与html5标签名相同时设置css样式出问题，而且用新的标签更容易理解和定义。
如何在不破坏原始的内容与结构的前提下将一张已有的典型的html4.01页面迁移或转换为典型的html5页面
- 修改文档类型为
<!DOCTYPE html> - 修改编码信息为
<meta charset="utf-8"> - 为IE支持添加shiv
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
- 修改元素名和对应的css选择器名字
网友评论