html5标准新特性及其使用技巧

标签：标准   html5   

运用html5新特性，首先需要声明头文件，其实浏览器不认识头也会照最新标准渲染。声明后网站结构如下：1

上面的例子中已经运用了html5新标签header,nav,footer等类似的还有：

• ：描述了文档的头部区域，于定义内容的介绍展示区域

• nav>：定义导航链接的部分。

• section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。

• article>：定义独立的内容。

• aside>：定义页面主区域内容之外的内容（比如侧边栏）。

• figure>：标签规定独立的流内容（图像、图表、照片、代码等等）。

• figcaption>：定义

  元素的标题

  。
  

在一个网页中，这些新的语义标签元素位置如下图所示（引用自：http://blog.csdn.net/nongweiyilady/article/details/53885433）：

下面是各个部分的css细致构建：

1.导航标签

nav{
	background-color:#f00;
	font-family:‘Microsoft YaHei‘;
	padding:3px;
	text-align:center;
}
nav ul{
	margin:6px 30px;
	border-left:1px solid #0f0;
	border-right:1px solid #0f0;
	font-size:12px;
}
nav li{
	list-style-type:none;
	display:inline;
}
nav p{
	padding-left:12px;
	padding-right:12px;
	color:#fff;
	font-size:15px;
	display:inline;
}
nav a{
	color:#fff;
	text-decoration:none;
	font-size:15px;
}
nav a:link,nav a:visited,nav a:active{
	color:#fff;
	text-decoration:none;
}
nav a:hover{
	color:#00f;
	text-decoration:none;
}

2.左右留边，内部固定大小居中以footer为例：

footer{
	height:150px;
	background-color:#f00;
	font-size:10px;
	color:#fff;
}
footer div{
	margin:0 auto;
	width:1000px;
}

3.

为保证html与css分离我们可以使用来css指定第几个html标签：

p:nth-child(3){
}
input[type="text"],input[type="password"]{
}
article ul>li:last-child{
}

上面还有指定属性来确定html标签位置的方法与顺序链接。

对于超链接来说css有：

nav a:link,nav a:visited,nav a:hover,nav a:active{
	color:#fff;
	text-decoration:none;
}

表单的使用：

下面是常用的css来美化html5标签：

*{
	border-bottom:1px solid rgba(255,255,255,0.5);
	border: 1px dotted green;
	
	font-family:‘华文隶书‘,‘隶书‘,normal;
	letter-spacing:9px;
	word-spacing:5px;
	text-shadow:1px 1px 2px rgba(0,0,0,.5);
	text-decoration:underline;
	list-style-type:none;
	width:calc(30% - 20px);
	
	overflow:visible;
	overflow:hidden;
	white-space:pre;
	line-height:3;
	border-collapse:collapse;
	word-break:keep-all;
	text-overflow:ellipsis;
	vertical-align:top;
	text-indent:0 !important;
	
	font:2em/3 SimHei;/*2倍字体大小3倍字体行高*/
	/*设置列表的属性 list-style:square inside url(‘/i/arrow.gif‘);*/
	
	background-image:url(../images/icon-more.png);
	background-size:16px 16px;
	background-repeat:no-repeat;
	background-position:right center;
	
	text-align:center;
	font-weight:normal;
	font-style:normal;
	
	.clearfix::after{content:"\200B";display:block;height:0;clear:both;}
	.clearfix{*zoom:1;}
}

对于图像与文字在一行上的情况，我们要使文字居中，可以使用以下css模式：

我们有时需要表格的构建：

有时我们需要引用一些外部的字体、样式来美化我们的网页：

ZoomlaXingtiJ6字体：

@font-face{
	font-family:‘ZoomlaXingtiJ6‘;
	src: url(‘http://code.z01.com/font/ZoomlaXingtiJ6.eot?#iefix‘); /* IE9 */
	src: url(‘http://code.z01.com/font/ZoomlaXingtiJ6.eot?#iefix‘) format("embedded-opentype"), /* IE6-IE8 */
	url(‘http://code.z01.com/font/ZoomlaXingtiJ6.woff‘) format("woff"), /* chrome、firefox */
	url(‘http://code.z01.com/font/ZoomlaXingtiJ6.ttf‘) format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
	url(‘http://code.z01.com/font/ZoomlaXingtiJ6.svg#ZoomlaXingtiJ6‘) format("svg"); /* iOS 4.1- */
	font-style: normal; font-weight: normal;
}

已安装字体：

small-caps等

图标字体：

当然，加一些js将会使页面效果更好：

//
window. txt1=document.getElementById(‘txt1‘);
	var btn1=document.getElementById(‘btn1‘);
	var dv1=document.getElementById(‘dv1‘);
	btn1.onclick=function(){
		dv1.innerHTML=txt1.value;
	}
}

最后，写完html网页代码后你可以去这个网站进行检查：https://validator.w3.org/#validate_by_upload

在这个网页检查css：

本文出自 “11878225” 博客，谢绝转载！

html5标准新特性及其使用技巧

标签：标准   html5   

原文地址：http://11888225.blog.51cto.com/11878225/1945074