首页 > 代码库 > html5标准新特性及其使用技巧

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

2024-10-18 01:54:39   211人阅读

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

<!DOCTYPE html>
<html><head>
<!--html lang="zh-cmn-Hans"-->
<meta charset="UTF-8">
<!--<link rel="stylesheet"type="text/css"href="http://www.mamicode.com/css/style.css">-->
<script type="text/javascript"src="http://www.mamicode.com/js/main.js"></script>
<!--script language="javascript"src="http://www.mamicode.com/js/main.js"></script-->
<title>！！！我是标题！？？！</title>
<style type="text/css"></style>
<style>
*{
	margin:0;
	padding:0;
}
</style>
</head>
<body>
<header>
</header>
<nav><ul>
<li><a href="http://www.mamicode.com/#"title="点击转到">列表</a></li>
<li><a href="http://www.mamicode.com/#"title="点击转到">列表</a></li>
<li><a href="http://www.mamicode.com/#"title="点击转到">列表</a></li>
</ul></nav>
<article>
</article>
<footer>&copy;额，本文博主版权所有翻版必究</footer>
</body>
</html>

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

<article></article>					<!--独立的内容-->
<aside></aside>						<!--侧边栏-->
<figure></figure>					<!--图像-->
<em></em>						<!--我是乱入旧标签-->
<strong></strong>					<!--我也是我也是-->
<img src="http://www.mamicode.com/images/图片.jpg"alt="图片"/>			<!--话说突然蹦出了个img-->
<a name="名"href="mailto:a@a.c"target="_blank"></a>	<!--a也来跟着凑数-->
<hr size="1">						<!--我也来凑热闹-->
<small></small>						<!--凑热闹的是不是太多了-->
<iframe src="http://www.mamicode.com/文件.html"name="文件"></iframe>		<!--路过-->

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

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

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

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

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

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

  • <figcaption>：定义 <figure> 元素的标题。

  • <footer>：述了文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。


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

技术分享

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

1.导航标签<nav> 

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;
}

表单的使用： 

<form action="login.jsp"method="POST">登录：<input type="text"size="20"placeholder="账号"/><input type="password"placeholder="密码"/><input type="submit"value="http://www.mamicode.com/登录"/>
</form>
<!--type:checkbox reset-->
<input name="选择组"type="radio"value="http://www.mamicode.com/A选项">选项
<input name="选择组"type="radio"value="http://www.mamicode.com/B选项">选项
<select name="选择组">
	<option selected disable>请选择</option>
	<option>A选项</option>
	<option>B选项</option>
</select>
<input type="checkbox"name="A选项">选项
<input type="checkbox"name="B选项">选项
<textarea rows="20"cols="25"></textarea>

下面是常用的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模式：


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

<table border="0"cellspacing="0"cellpadding="0"width="80%">
<caption></caption>
<thead><tr><th></th></tr></thead><tbody>
<tr><td colspan="2"rowspan="2"align="left"></td></tr></tbody>
<tfoot></tfoot>
</table>

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

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等

图标字体： 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->

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

//<script language="javascript"></script>
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标准新特性及其使用技巧


联系
我们