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

初学者必知的HTML 5入门级技巧(2)

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

6. 使网页内容可以编辑

使网页内容可以编辑

7. 电子邮件输入框

HMTL 5中新增了一个输入框的电子邮件属性，可以检测输入的内容是否符合电子邮件的书写格式，功能越来越强大了吧，在HTML 5之前只能依靠JavaScript来检测。虽然内置的表单验证功能很快就会成为现实，但这个属性很多浏览器都还不支持，只会当作普通的文本输入框来处理。



    
	
  1. 
		<form method=get> 
    2. 
	
  2. 
		   <label for="email">email:</label> 
    3. 
	
  3. 
		<input id="email" type="email" name="email"> 
    4. 
	
  4. 
		  <button type="submit"> submit form </button> 
    5. 
	
  5. 
		</form> 
    6. 




	 



	电子邮件输入框



	到目前为止，包括现代浏览器在内都不支持该属性，所以这个属性暂时还是靠不住的。



	8. 占位符



	文本框中的占位符(看看本博的搜索框效果)有利于提升用户体验，之前，我们只能依靠JS来实现占位符的效果，在HTML 5中新增了占位符属性placeholder。




    
	
  1. 
		<input type="email" name="email" placeholder="doug@givethesepeopleair.com"> 
    2. 
	
  2. 
		 
    3. 




	同样，目前的主流现代浏览器对该属性的支持不大好，暂时只有Chrome和Safari支持该属性，Firefox和Opera不支持该属性。



	占位符



	9. 本地存储



	HTML 5的本地存储功能，可以让现代浏览器“记住”我们输入的，就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持，但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的，你可以测试下。



	本地存储



	10. 更有语义的header和footer



	下面的代码在HTML 5中将不复存在




    
	
  1. 
		<div id=header> 
    2. 
	
  2. 
		     ...  
    3. 
	
  3. 
		</div> 
    4. 
	
  4. 
		<div id=footer> 
    5. 
	
  5. 
		     ...  
    6. 
	
  6. 
		</div> 
    7. 




	通常我们都会给header和footer定义一个div，然后再添加一个id，但是在HTML5中可以直接使用<header>和<footer>标签，所以可以将上面的代码改写成：




    
	
  1. 
		<header> 
    2. 
	
  2. 
		    ...  
    3. 
	
  3. 
		</header> 
    4. 
	
  4. 
		<footer> 
    5. 
	
  5. 
		    ...  
    6. 
	
  6. 
		</footer> 
    7. 




	要注意不要将这两个标签和网站的头部和页脚混淆起来，它们只是代表它们的容器。



	11. IE对HTML 5的支持



	IE浏览器目前对HTML 5的支持并不好，也是阻碍HTML5的更快普及的一大绊脚石，不过，IE9对HTML 5的支持度还是很不错的。IE把HTML 5新增的标签都解析成内联元素，而实际上它们是块级元素，所以有必要为它们定义一个样式：



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




    
	
  1. 
		header, footer, article, section, nav, menu, hgroup {  
    2. 
	
  2. 
		   display: block;  
    3. 
	
  3. 
		} 
    4. 




	尽管如此，IE还是不能解析这些新增的HTML 5标签，这个时候就需要借助Javascript来解决这个问题：




    
	
  1. 
		document.createElement("article");  
    2. 
	
  2. 
		document.createElement("footer");  
    3. 
	
  3. 
		document.createElement("header");  
    4. 
	
  4. 
		document.createElement("hgroup");  
    5. 
	
  5. 
		document.createElement("nav");  
    6. 
	
  6. 
		document.createElement("menu"); 
    7. 




	你可以借助这一段Javascript代码来修复IE更好的解析HTML 5，


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


    
	
  1. 
		<script mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    2. 
	
  2. 
		 
    3. 



			

			

					 标签：网站建设(5654)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机