运用html5新特性，首先需要声明头文件，其实浏览器不认识头也会照最新标准渲染。声明后网站结构如下：1
<!DOCTYPE html>
<html><head>
<!--html lang="zh-cmn-Hans"-->
<meta charset="UTF-8">
<!--<link rel="stylesheet"type="text/css"href="css/style.css">-->
<script type="text/javascript"src="js/main.js"></script>
<!--script language="javascript"src="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="#"title="点击转到">列表</a></li>
<li><a href="#"title="点击转到">列表</a></li>
<li><a href="#"title="点击转到">列表</a></li>
</ul></nav>
<article>
</article>
<footer>©额，本文博主版权所有翻版必究</footer>
</body>
</html>
上面的例子中已经运用了html5新标签header,nav,footer等类似的还有：
<article></article> <!--独立的内容--> <aside></aside> <!--侧边栏--> <figure></figure> <!--图像--> <em></em> <!--我是乱入旧标签--> <strong></strong> <!--我也是我也是--> <img src="images/图片.jpg"alt="图片"/> <!--话说突然蹦出了个img--> <a name="名"href="mailto:[email protected]"target="_blank"></a> <!--a也来跟着凑数--> <hr size="1"> <!--我也来凑热闹--> <small></small> <!--凑热闹的是不是太多了--> <iframe src="文件.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="登录"/> </form> <!--type:checkbox reset--> <input name="选择组"type="radio"value="A选项">选项 <input name="选择组"type="radio"value="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：
时间： 2024-08-06 07:50:43