使用html5結構化元素
阿新 • • 發佈：2018-12-22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#header,#sideLeft,#sideRight,#footer{
border:1px solid #666;
padding:10px;
margin:6px;
}
#header{
width: 500px;
}
#sideLeft{
float: left;
width: 60px;
height: 100px;
#sideRight{
float: left;
width: 406px;
height: 100px;
}
#footer{
clear:both;
width:500px;
}
</style>
<body>
<div id="header">導航</div>
<div id="sideLeft">選單</div>
<div id="sideRight">內容</div>
<div id="footer">底部說明</div>
</body>
</html>
---------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
header,nav,article,footer{
border: solid 1px #666;
padding: 10px;
margin: 6px;
}
header{width: 500px;}
nav{
float: left;
height: 100px;
}
article{
float: left;
width: 406px;
height: 100px;
}
footer{
clear:both;
width: 500px;
}
</style>
</head>
<body>
<header>導航</header>
<nav>選單</nav>
<article>內容</article>
<footer><blink>底部說明</blink></footer>
</body>
</html>
--------------------------------------------------------------------------------------------------------
html5新增的結構標籤可以使得網頁的語義更加清晰，瀏覽器易於識別