Home思洋影视事业部网站建设知识库
0 Comments

从零开始构建HTML 5 Web页面(2)

发布于：2013-09-04  |   作者：广州网站建设  |   已聚集：人围观

全部放在一起

现在我们全部使用新标记重写前面的示例页面。
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<!DOCTYPE html> 
    2. 
	
  2. 
		<html> 
    3. 
	
  3. 
		    <head> 
    4. 
	
  4. 
		    ...stuff...  
    5. 
	
  5. 
		    </head> 
    6. 
	
  6. 
		    <body> 
    7. 
	
  7. 
		        <header> 
    8. 
	
  8. 
		            <h1>My Site</h1> 
    9. 
	
  9. 
		        </header> 
    10. 
	
  10. 
		        <nav> 
    11. 
	
  11. 
		            <ul> 
    12. 
	
  12. 
		                <li>Home</li> 
    13. 
	
  13. 
		                <li>About</li> 
    14. 
	
  14. 
		                <li>Contact</li> 
    15. 
	
  15. 
		            </ul> 
    16. 
	
  16. 
		        </nav> 
    17. 
	
  17. 
		        <section> 
    18. 
	
  18. 
		            <h1>My Article</h1> 
    19. 
	
  19. 
		            <article> 
    20. 
	
  20. 
		                <p>...</p> 
    21. 
	
  21. 
		            </article> 
    22. 
	
  22. 
		        </section> 
    23. 
	
  23. 
		        <footer> 
    24. 
	
  24. 
		            <p>...</p> 
    25. 
	
  25. 
		        </footer> 
    26. 
	
  26. 
		    </body> 
    27. 
	
  27. 
		</html> 
    28. 




	是不是更干净，更易于理解呢？我们可以把<h1>My Article</h1>打包到header标记中。另外请注意，我们可以在article元素下再增加一个footer元素，用来容纳如翻页导航，相关文章或其它内容。



	新标记的样式



	在大多数浏览器中，你只需要如往常一样对元素使用样式，但是请一定要对每个元素加上display:block;规则，随着时间的推移，浏览器对HTML 5新元素的支持越来越标准后，就可以不使用了。



	下面我们队header应用一些样式：




    
	
  1. 
		header {  
    2. 
	
  2. 
		    display: block;  
    3. 
	
  3. 
		    font-size: 36px;  
    4. 
	
  4. 
		    font-weight: bold;  
    5. 
	
  5. 
		} 
    6. 




	记住，你现在仍然可以在这些元素上添加class和ID属性，因此，如果你想对导航小节单独使用一个样式，你可以向下面这样增加一个class或ID属性：




    
	
  1. 
		<nav class="main-menu"> 
    2. 




	然后再应用一个样式：




    
	
  1. 
		nav.main-menu {  
    2. 
	
  2. 
		    font-size: 18px;  
    3. 
	
  3. 
		} 
    4. 




	与旧浏览器的兼容



	这些样式都不能在IE 6下使用，如果你坚持要保持与旧浏览器兼容，也是有补救办法的，IE 6可以解析这些标记，但不能应用样式，解决办法就是使用JavaScript，使用createElement方法就可以让IE支持HTML 5标记的样式了，你可以在HTML 5文件的头部包括这段代码，也可以保存到一个独立文件中，然后进行引用。

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		<script> 
    2. 
	
  2. 
		  document.createElement('header');  
    3. 
	
  3. 
		  document.createElement('nav');  
    4. 
	
  4. 
		  document.createElement('section');  
    5. 
	
  5. 
		  document.createElement('article');  
    6. 
	
  6. 
		  document.createElement('aside');  
    7. 
	
  7. 
		  document.createElement('footer');  
    8. 
	
  8. 
		</script> 
    9. 




	 



	你可能要问，为什么没有给这段脚本指定MIME类型呢？在HTML 5中无需指定了，在HTML 5中，所有的脚本都假设是type="text/javascript"，因此不必再多此一举了。



	虽然IE的问题得到了解决，但据我所知，Firefox 2中的Gecko渲染引擎仍然存在一个bug，解决办法有两个，但这两个办法都不是很理想，更多信息请看这里http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/。考虑到Firefox 2的使用人数已经很少，你可以完全忽视这个bug。



	现在你已经可以使用HTML 5了，但应该使用吗？



	答案很简单：是的！



	但这也要根据网站的性质做出调整，例如，假设你要重构CNN主页，那可能不太现实，最好还是等浏览器的支持更好一些再说，但如果你是在翻新你的博客系统，那么你可以一试，如果你使用的WordPress，目前已经出现了一些插件可以帮助你，这里就有一个HTML 5的WordPress主题。



	你也可以去HTML 5画廊（http://html5gallery.com/）瞧瞧，因为它全部是用HTML 5构建的，可以看看其源码，加深对HTML 5标记的理解。还可以继续关注51CTO.com的HTML 5专题，我们会持续更新关于HTML 5的技术应用和资讯报道。



	如果你还有点犹豫不决，那你去看看Google的主页，已经是HTML 5了，保险一点的话，你可以使用JavaScript声明这些新标记进行使用。HTML 5的标记远不止这些，希望本文能消除你的疑虑，大胆使用HTML 5，只有使用的人多了，这个规范才能真正见效。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机