HTML5新特性之CSS+HTML5实例

标签： html5 css html5 | 发表时间：2013-08-22 23:45 | 作者：xsc_c
出处：http://blog.csdn.net

1、新的DOCTYPE和字符集

HTML5的一项准则就是化繁为简，Web页面的DOCTYPE被极大的简化。

<!DOCTYPE html>
同时字符集声明也被简化了：

<meta charset="utf-8">

2、新元素和旧元素

HTML5引入了很多新的标签，根据内容和类型的不同，被分为7大类。



3、语义化标签

语义化标签可以简化HTML页面设计，并且将来搜索引擎在抓取和索引网页的时候，也会利用这些元素的优势。

HTML5的宗旨之一就是存在即合理。Google分析了上百万的页面，发现DIV标签的通用ID名称重复量很大。例如，很多开发人员喜欢使用DIV id="footer"来标记页脚内容，

所以HTML5 引入了一组新的片段类元素。



4、HTML5代码样例

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>HTML5</title>
	<link rel="stylesheet" href="html5.css">
</head>

<body>
	<header>
		<h1>My first web</h1>
		<h2>learn html5</h2>
		<h4>HTML5 Rocks!</h4>
	</header>

	<div id="container">
		<nav>
			<h3>导 航 链 接</h3>
			<a href="http://www.baidu.com">百   度</a>
			<a href="http://www.google.com">谷   歌</a>
			<a href="http://www.sina.com">新   浪</a>
		</nav>

		<section>
			<article>
				<header>
					<h1>什么是 HTML5</h1>
				</header>
				<p>  HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。</p>
				<p>  HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p>
				<p>  HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p>
				<footer>
					<h2>what is html5</h2>
				</footer>
			</article>

			<article>
				<header>
					<h1>HTML5 新特性</h1>
				</header>
				<ul>
					<li>用于绘画的 canvas 元素
					<li>用于媒介回放的 video 和 audio 元素
					<li>对本地离线存储的更好的支持
					<li>新的特殊内容元素，比如 article、footer、header、nav、section
					<li>新的表单控件，比如 calendar、date、time、email、url、search
				</ul>
				<footer>
					<h2>new feature of html5</h2>
				</footer>
			</article>
		</section>

		<aside>
			<div>
				SEARCH:<input type="text"></input>
				<button>Go</button>
			</div>
			
			<p>HTML5:Lorem ipsum dolor HTML5  nunc ant nunquam sit amet, consectetur adipiscing
				elit. Vivamus at est eros, vel frinailla urna.</p>
			<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula
				pellentesque, turpis lorem dictum nunc.</p>
		</aside>
		<footer>
			<h2>Copyright:Caijinping</h2>
		</footer>
	</div>
</body>

</html>
效果演示：


5、CSS设置内容样式

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>HTML5</title>
	<link rel="stylesheet" href="html5.css">
	<style>
		body{
			background-color:#CCCCCC;
			font-family:Geneva,Arial,Helvetica,sans-serif;
			margin:0px auto;
			border:solid;
			border-color:#FFFFFF;
		}
		header{
			background-color:#F47D31;
			display:block;
			color:#FFFFFF;
			text-align:center;
		}
		header h2{
			margin:0px;
			color:white;
		}
		h1{
			font-size:72px;
			margin:0px;
		}
		h2{
			font-size:24px;
			margin:0px;
			text-align:center;
			color:#F47D31;
		}
		h3{
			font-size:18px;
			margin:0px;
			text-align:center;
			color:#F47D31;
		}
		h4{
			color:#F47D31;
			background-color:#fff;
			-webkit-box-shadow:2px 2px 20px #888;
			-webkit-transform:rotate(-45deg);
			-moz-box-shadow:2px 2px 20px #888;
			-moz-transform:rotate(-45deg);
			position:absolute;
			padding:0px 120px;
			top:40px;
			left:-110px;
			text-align:center;
		}
		nav{
			display:block;
			width:10%;
			float:left;
			text-align:center;
		}
		nav a:link,nav a:visited{
			display:block;
			border-bottom:3px solid #fff;
			padding:10px;
			text-decoration:none;
			font-weight:bold;
			margin:5px;
		}
		nav a:hover{
			color:white;
			background-color:#F47D31;
		}
		nav h3{
			margin:15px;
			color:white;
		}
		#container{
			background-color:#888;
		}
		section{
			display:block;
			width:65%;
			float:left;
		}
		article{
			background-color:#eee;
			display:block;
			margin:10px;
			padding:10px;
			-webkit-border-radius:10px;
			-moz-border-radius:10px;
			border-radius:10px;
			-webkit-box-shadow:2px 2px 20px #aaa;
			-webkit-transform:rotate(0deg);
			-moz-box-shadow:2px 2px 20px #aaa;
			-moz-transform:rotate(0deg);
		}
		article header{
			-webkit-border-radius:10px;
			-moz-border-radius:10px;
			border-radius:10px;
			padding:5px;
		}
		article footer{
			-webkit-border-radius:10px;
			-moz-border-radius:10px;
			border-radius:10px;
			padding:5px;
		}
		article h1{
			font-size:18px;
		}
		aside{
			display:block;
			width:25%;
			float:left;
		}
		aside div{
			margin:15px;
			color:white;
			float:left;
		}
		aside p{
			margin:15px;
			color:white;
			font-weight:bold;
			font-style:italic;
		}
		footer{
			clear:both;
			display:block;
			background-color:#F47D31;
			color:#FFFFFF;
			text-align:center;
			padding:15px;
			float:bottom;
		}
		footer h2{
			font-size:14px;
			color:white;
		}
		a{
			color:#F47D31;
		}
		a:hover{
			text-decoration:underline;
		}
		li{
			padding:10px;
		}
	</style>
</head>

<body>
	<header>
		<h1>My first web</h1>
		<h2>learn html5</h2>
		<h4>HTML5 Rocks!</h4>
	</header>

	<div id="container">
		<nav>
			<h3>导 航 链 接</h3>
			<a href="http://www.baidu.com">百   度</a>
			<a href="http://www.google.com">谷   歌</a>
			<a href="http://www.sina.com">新   浪</a>
		</nav>

		<section>
			<article>
				<header>
					<h1>什么是 HTML5</h1>
				</header>
				<p>  HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。</p>
				<p>  HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p>
				<p>  HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p>
				<footer>
					<h2>what is html5</h2>
				</footer>
			</article>

			<article>
				<header>
					<h1>HTML5 新特性</h1>
				</header>
				<ul>
					<li>用于绘画的 canvas 元素
					<li>用于媒介回放的 video 和 audio 元素
					<li>对本地离线存储的更好的支持
					<li>新的特殊内容元素，比如 article、footer、header、nav、section
					<li>新的表单控件，比如 calendar、date、time、email、url、search
				</ul>
				<footer>
					<h2>new feature of html5</h2>
				</footer>
			</article>
		</section>

		<aside>
			<div>
				SEARCH:<input type="text"></input>
				<button>Go</button>
			</div>
			
			<p>HTML5:Lorem ipsum dolor HTML5  nunc ant nunquam sit amet, consectetur adipiscing
				elit. Vivamus at est eros, vel frinailla urna.</p>
			<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula
				pellentesque, turpis lorem dictum nunc.</p>
		</aside>
		<footer>
			<h2>Copyright:Caijinping</h2>
		</footer>
	</div>
</body>

</html>
效果演示：



作者：xsc_c 发表于2013-8-22 23:45:06 原文链接
阅读：92 评论：0 查看评论

相关 [html5 css html5] 推荐：

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简，Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签，根据内容和类型的不同，被分为7大类. 语义化标签可以简化HTML页面设计，并且将来搜索引擎在抓取和索引网页的时候，也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.

HTML5中的CSS Shader技术

- SUN - Solidot
Panggit 写道 "Adobe在Photoshop和Flashplayer等产品中运用了2D Shader技术来丰富它们的滤镜和动画，现在Adobe也将这种技术运用到了CSS中并将CSS Shaders提案提交给了W3C. 运用这项技术，可以轻松实现类似纸张折叠(视频)，弯曲(视频)等3D效果，并运用在CSS动画中.

Groundwork：响应式 HTML5，CSS & JavaScript 工具包

- - 博客园_梦想天空
　　Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5，CSS & JavaScript 工具包. 使用 Groundwork，您可以快速构建 Web 应用程序. Groundwork 拥有一个令人难以置信的灵活，可嵌套，流体的网格系统，是 Github 上的开源项目.

CSS 与 HTML5 响应式图片

- - TaoBaoUED
 随着  Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指： 用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费.

最佳PHP，HTML5和CSS框架大荟萃之二 HTML5框架

- - Web前端 - ITeye博客
这篇文章继续我们的框架大荟萃，如果你没有阅读前面的文章，请点击这里查看 PHP框架. 数以百万计的设计师和工程师都接受使用foundation框架来作为产品或者网站的前端设计. foundation是第一个支持响应式，语义化， 移动为先的开源框架. 最近Foundation5已经发布，作为当今最快速的发布版本工具，在很多方便比如开发产品和网站都很快.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样：十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息，甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面，主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

综合运用硬件加速、3D CSS、WebM 技术的《小羊肖恩》HTML5 演示

- XsLiDian - WebM 项目
Google 与 Instrument 携手 Aardman Studios，将这款以《小羊肖恩》（Shaun the Sheep）为主题的 HTML5 技术演示作品搬上了 Chrome Experiments. 在这款采用硬件加速 HTML5 视频、3D CSS 变换与 WebM 技术的互动实验中，大家可以看到肖恩和它的朋友们在《An Ill Wind》《Snowed In》《The Big Chase》与《Twos Company》四集中的滑稽表演.