HTML5入门

必须知道的22个学习html5的技巧(一)

字号+ 作者: 来源: 2014-11-16 20:49 我要评论( )

互联网科技发展的速度真可谓惊人的快,一个稍不留神,你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人,这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。 1. 新的

互联网科技发展的速度真可谓惊人的快,一个稍不留神,你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人,这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。

1. 新的文档类型(Doctype)

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

你还在使用上面这个既麻烦又难记的XHTML文档类型吗? 如果还是这样的话,现在该切换到新的HTML5文档类型了。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  

只要这么简单的15个字符就可以了。(注意:你的doctype的申明需要出现在你html文件的第一行。)


2. 图形(Figure)元素

考虑用下面的代码来标记图片?

XML/HTML Code复制内容到剪贴板
  1. <mg src="path/to/image" alt="About image" />    
  2. <p>Image of Mars. </p>  

很不幸,它不能用简单、富有语义关联的方式与图形的标题关联,因为它仅仅是用段落标记以及图片元素包裹着,而 HTML5通过引进<figure>元素,改进了这一点。当结合 <figcaption> 元素使用时,我们就可以将图形标题与图形配对起来。代码如下:

XML/HTML Code复制内容到剪贴板
  1. <figure>    
  2. <img src="path/to/image" alt="About image" />    
  3. <figcaption>    
  4. <p>This is an image of something interesting. </p>    
  5. </figcaption>    
  6. </figure>  

3. 重新定义<small>

原来你可以利用<small>元素来创建与logo密切相关的副标题。不过,现在HTML5修改了这个用法,<small>元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注(如,网站底部的版权声明)。

4. 不再需要脚本、链接类型

很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。

XML/HTML Code复制内容到剪贴板
  1. <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />    
  2. <script type="text/javascript" src="path/to/script.js"></script>  

在HTML5中,这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此,我们可以将它们的类型属性都删除掉。代码如下:

XML/HTML Code复制内容到剪贴板
  1. <link rel="stylesheet" href="path/to/stylesheet.css" />    
  2. <script src="path/to/script.js"></script>  

5. 使用还是不使用引号

记住,HTML5与XHTML不同,如果你不喜欢的话你不必用引号将属性包裹起来。不过,要是你觉得用引号会让你觉得更加舒服的话,当然也不会有任何问题。

XML/HTML Code复制内容到剪贴板
  1. <p class=myClass id=someId> Start the reactor.  

6. 使你的内容可编辑

HTML5其中一个非常强大的功能就是“contenteditable”,顾名思义它将允许用户编辑元素(包括他的子元素)内包含的任何文本内容。它的用途非常广,如,简单的任务清单或是基于wiki的站点也非常实用,此外,它还有一个优势就是利用了本地的存储

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title>untitled</title>    
  6. </head>    
  7. <body>    
  8. <h2> To-Do List </h2>    
  9. <ul contenteditable="true">    
  10. <li> Break mechanical cab driver. </li>    
  11. <li> Drive to abandoned factory    
  12. <li> Watch video of self </li>    
  13. </ul>    
  14. </body>    
  15. </html>  

或者,按照第五条技巧所说的,你也可以将第九行的代码写成这样(不用引号):

XML/HTML Code复制内容到剪贴板
  1. <ul contenteditable=true>  

7. 电子邮件输入

如果我们应用“电子邮件”类型来指定输入的形式,我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来,但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型,它们只会简单地返回到普通的文本框。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title>untitled</title>    
  6. </head>    
  7. <body>    
  8. <form action="" method="get">    
  9. <label for="email">Email:</label>    
  10. <input id="email" name="email" type="email" />    
  11. <button type="submit"> Submit Form </button>    
  12. </form>    
  13. </body>    
  14. </html>  

在说到浏览器所支持和不支持的元素以及属性时,你必需知道当前所有浏览器都不是那么可靠。例如,Opera只有在你指定name属性时才支持电子邮件验证。不过,它不支持占位符属性(下面即将要讲到的)。最后,虽然你可以使用这种形式的验证,不过不要过分依赖它。
 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5常用标签总结

    HTML5常用标签总结

    2016-03-23 14:02

  • html5学得好不好,看掌握多少标签

    html5学得好不好,看掌握多少标签

    2015-09-28 12:53

  • 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

    小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

    2015-06-02 14:32

  • 小强的HTML5移动开发之路(52)——jquerymobile中的触控交互

    小强的HTML5移动开发之路(52)——jquerymobile中的触控交互

    2015-06-02 14:34

网友点评