介绍写作背景
SOLANA是我将要介绍的HTML静态页面的名字，可以称它为“蓝色海湾”，这个静态页面是我去年初学HTML，CSS时制作的，包括一些页面的布局，鼠标的滑动效果等元素，现在来看确实还有很多的不足之处，比如一些标签的命名规范和代码比较冗余，也希望能对初学者有点帮助。
静态页面效果展示
在介绍 SOLANA编写过程之前，先给大家看一下页面效果图：
solana1.png
solana2.PNG
solana3.PNG
静态页面制作过程
#引入CSS文件，由于这个页面的css较多，就不一一赘述了，建议使用外部引入方法
<head>
<meta charset="UTF-8">
<title>SOLANA</title>
<link href="css/SOLANA.css" rel="stylesheet" type="text/css">
</head>
#页面布局，分为上中下结构
<body>
<div id="container">
<div class="setting">
<a href="#"></a>
</div>
<div id="top">
<div id="header">
<ul class="top">
<li class="logo"></li>
<li class="first"><a href="#">HOME</a></li>
<li><a href="#">FEATURES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
<li><input class="text" type="text"></li>
<li class="search"><a></a></li>
</ul>
</div>
<div class="content">
<h2>MULTIPURPOSE THEME</h2>
<p>CRAS JUSTO ODIO, DAPIBUS AC FACILISIS</p>
<div class="link">
<a href="#">
READ MORE
</a>
</div>
</div>
<div class="footer">
<p></p>
<div class="body">
<div class="container1">
<div class="content">
<div class="block-text">
WE PROVIDE<br>
AWESOME DIGITAL<br>
<strong>SERVICES</strong>
</div>
</div>
<div class="block-link">
<a href="#">READ MORE
</a>
</div>
</div>
<div class="container2" align="center">
<h2>RESPONSIVE TEMPLATE</h2>
<h3>Sed ut perspiciatis unde omnis iste natus error sit.</h3>
</div>
<div class="container3" align="center">
<h2>EASY TO CUSTOMIZE</h2>
<h3 class="ca-sub">Sed ut perspiciatis unde omnis iste natus error sit.</h3>
</div>
<div class="container4" align="center">
<h2>RETINA READY</h2>
<h3>Sed ut perspiciatis unde omnis iste natus error sit.</h3>
</div>
</div>
</div>
</div>
<div id="middle">
<div class="header2">
<h2>Solana is a Responsive Multipurpose Theme</h2>
<h3>Easy Customizable, Retina Ready, Cross-Browser Compatible,
Unlimited Colors</h3>
<a href="#">PURCHASE IT</a>
</div>
<div class="body">
<div class="container1">
<div class="content">
<div class="block-text">
THIS IS THE LIST OF<br>
OUR RECENT<br>
<strong>WORKS</strong>
</div>
</div>
<div class="block-link">
<div class="block-left"><img src="images/img/prev-small.png"
width=" 10" height="15"></div>
<div class="block-right"><img src="images/img/next-small.png"
width="10" height="15"></div>
</div>
</div>
<div class="container2">
<div class="up">
<h2>Lorem Ipsum</h2>
</div>
<div class="down">
<h3>web design</h3>
</div>
</div>
<div class="container3">
<div class="up">
<h2>Lorem Ipsum</h2>
</div>
<div class="down">
<h3>photography</h3>
</div>
</div>
<div class="container4">
<div class="up">
<h2>Lorem Ipsum</h2>
</div>
<div class="down">
<h3>illustration</h3>
</div>
</div>
</div>
<div class="content2">
<div class="feature1"></div>
<div class="feature2">
FULLY<br>
<strong>RESPONSIVE</strong>
</div>
<div class="feature3">
<ul>
<li>Fully Responsive</li>
<li>Retina Ready</li>
<li>SEO Optimized</li>
<li>Easy to Customize</li>
</ul>
</div>
</div>
<div class="foot">
<div class="body">
<div class="container1">
<div class="content">
<div class="block-text">
STAY TUNED.<br>
READ OUR<br>
<strong>NEWS</strong>
</div>
</div>
<div class="block-link">
<div class="block-left"><img src="images/img/prev-small.png"
width=" 10" height="15"></div>
<div class="block-right"><img src="images/img/next-small.png"
width="10" height="15"></div>
</div>
</div>
<div class="container2">
<div class="up">
<h2>Craes Nustro </h2>
<h3>10 Okt 2013 | 7 Comments </h3>
</div>
<div class="down">
<h3>Lorem ipsum dolor sit amet, consec at adipiscing elit.
Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet.
Aliquam...</h3>
</div>
<div class="icon"></div>
</div>
<div class="container3">
<div class="up">
<h2>Sed Lectus </h2>
<h3>10 Okt 2013 | 7 Comments</h3>
</div>
<div class="down">
<h3>Lorem ipsum dolor sit amet, consec at adipiscing elit.
Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet.
Aliquam...</h3>
</div>
<div class="icon"></div>
</div>
<div class="container4">
<div class="up">
<h2>Lorem Ipsum </h2>
<h3>10 Okt 2013 | 7 Comments</h3>
</div>
<div class="down">
<h3>Lorem ipsum dolor sit amet, consec at adipiscing elit.
Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet.
Aliquam...</h3>
</div>
<div class="icon"></div>
</div>
</div>
</div>
</div>
<div id="bottom">
<div class="header3">
<p><strong>NEWS</strong> LETTER</p>
<h3>Stay up-to date with the latest news and other stuffs,
Sign Up today!</h3>
<div class="form">
<input type="text" onblur="if(this.value=='')this.value='Your email here...';"
onfocus="if(this.value=='Your email here...')this.value='';"
value="Your email here..." name="email" class="newform">
<a href="#">SIGN UP</a>
</div>
</div>
<div class="footer-icon">
</div>
<div class="footer-content">
<div class="div1">
<a href="#"></a>
</div>
<div class="div2">
<p>WE PROVIDE AWESOME DIGITAL <strong>SERVICES</strong></p>
</div>
<div class="div3">
<p class="p1">SAY <strong>HELLO</strong></p>
<p class="p2">WE'D LOVE HEARING FROM YOU</p>
</div>
<div class="div4">
<h3>LATEST <strong>POST</strong></h3>
</div>
<div class="div5">
<h3>CONTACT
<strong>INFO</strong></h3>
</div>
<div class="div6">
<ul>
<li><a class="facebook" title="Facebook" href="" target="_blank"></a></li>
<li><a class="skype" title="Skype" href="" target="_blank"></a></li>
<li><a class="twitter" title="Twitter" href="" target="_blank"></a></li>
<li><a class="flickr" title="Flickr" href="" target="_blank"></a></li>
<li><a class="vimeo" title="Vimeo" href="" target="_blank"></a></li>
<li><a class="linkedin" title="linkedin" href="" target="_blank"></a></li>
<li><a class="pintrest" title="pintrest" href="" target="_blank"></a></li>
<li><a class="googleplus" title="googleplus" href="" target="_blank"></a></li>
</ul>
</div>
<div class="div7">
<ul>
<li>
<h4><a href="#">Donec id elit</a></h4>
<h4>July 10, 2013</h4>
</li>
<li>
<h4><a href="#">Donec id elit</a></h4>
<h4>July 10, 2013</h4>
</li>
<li>
<h4><a href="#">Donec id elit</a></h4>
<h4>July 10, 2013</h4>
</li>
</ul>
</div>
<div class="div8">
<ul>
<li>
<p>Corporation, 123 Some Ave, Suite 700, New York</p>
</li>
<li>
<p>(123) 456-7890<br>
(123) 987-6540</p>
</li>
<li>
<a href="#" class="e1">email@felius.com</a>
<a href="#" class="e2"> email@optimas.com</a>
</li>
</ul>
</div>
</div>
<div class="footer-formation">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">FEATURES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">PURCHASE</a></li>
</ul>
<p>© Solan<span>a</span> - Build with Passion by <a href="#">AbcGomel</a></p>
</div>
<p id="back-top"><a href="#"></a></p>
</div>
</div>
</body>
结语
相信大家在看完这段HTML之后可能会觉得头大，其实现在看来应该有很大的提升空间，但是作为初学者来说，只要把效果做出来了，也是很大的提高，随着知识的不断积累，同一段代码可能还可以继续优化。下面我将介绍一下HTML中比较重要和常用的命名规范。
1.关于布局命名，可以使用以下html命名标签，也可以使用比较常用的左中右结构，left，center，right，上中下结构，top，middle，bottom或者
header，content，footer
html布局.PNG
2.关于命名注意事项
(1) 一律小写；
(2) 尽量用英文；
(3) 不加中杠和下划线；
(4) 尽量不缩写，除非一看就明白的单词