新闻资讯
记录首创点滴进步 见证远行
我们一直紧跟时代前沿,聚焦行业实时动态,发布公司最新资讯,欢迎您的关注
您目前的位置:网站首页 > 新闻资讯 > 网站常识 >

11.27日音讯,七个HTML5网站实际应用大全

发布日期:2013-11-27文章来源:首创网络浏览次数:930次
    11.27日音讯,七个HTML5网站实际应用大全。当今科技发展的速度真惊人,稍不留神,就可能无法跟上它的步伐。新一代的HTML-HTML5的发展也不停的带给我们新的惊喜,我们将通过这篇文章向大家介绍一些HTML技巧。 1.新的文档类型......
    本文关键字:11.27日,音讯,七个,HTML5,网站,实际,应用,大全,
  
  11.27日音讯,七个HTML5网站实际应用大全。当今科技发展的速度真惊人,稍不留神,就可能无法跟上它的步伐。新一代的HTML-HTML5的发展也不停的带给我们新的惊喜,我们将通过这篇文章向大家介绍一些HTML技巧。
  1.新的文档类型(Doctype)
  <!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  上面这个既麻烦又难记的XHTML文档类型你还在使用吗?如果还是这样的话,现在该切换到新的HTML5文档类型了。
  <!DOCTYPEhtml>
  现在只要这么简单的15个字符就可以了。(注意:你的doctype的申明需要出现在你html文件的第一行。)
  2.图形(Figure)元素
  你还在考虑用下面的代码来标记图片吗?
  <mgsrc=”path/to/image”alt=”Aboutimage”/>
  <p>ImageofMars.</p>
  上面的代码它不能以简单而且富有语义关联的方式与图形的标题关联,因为它仅仅是用段落标记以及图片元素包裹,而HTML5通过引进<figure>元素,改进了这一点。当结合<figcaption>元素使用时,我们就可以将图形标题与图形配对起来。代码如下:
  <figure>
  <imgsrc=”path/to/image”alt=”Aboutimage”/>
  <figcaption>
  <p>Thisisanimageofsomethinginteresting.</p>
  </figcaption>
  </figure>
  3.重新定义<small>
  原来你可以利用<small>元素来创建与logo密切相关的副标题。不过,现在HTML5修改了这个用法,<small>元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注(如,网站底部的版权声明)。
  4.不再需要脚本、链接类型
  很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
  <linkrel=”stylesheet”href=”path/to/stylesheet.css”type=”text/css”/>
  <scripttype=”text/javascript”src=”path/to/script.js”></script>
  在HTML5中,这已经不再需要了。意味着说这两个标签分别代表着样式和脚本。因此,我们可以将它们的类型属性都删除掉。代码如下:
  <linkrel=”stylesheet”href=”path/to/stylesheet.css”/>
  <scriptsrc=”path/to/script.js”></script>
  5.使用还是不使用引号
  记住,HTML5与XHTML不同,如果你不喜欢的话你不必用引号将属性包裹起来。不过,要是你觉得用引号会让你觉得更加舒服的话,当然也不会有任何问题。
  <pclass=myClassid=someId>Startthereactor.
  6.使你的内容可编辑
  HTML5其中一个非常强大的功能就是"contenteditable",顾名思义它将允许用户编辑元素(包括他的子元素)内包含的任何文本内容。它的用途非常广,如,简单的任务清单或是基于wiki的站点也非常实用,此外,它还有一个优势就是利用了本地的存储。
  <!DOCTYPEhtml>
  <htmllang=”en”>
  <head>
  <metacharset=”utf-8″>
  <title>untitled</title>
  </head>
  <body>
  <h2>To-DoList</h2>
  <ulcontenteditable=”true”>
  <li>www.hdscwl.com</li>
  <li>Drivetoabandonedfactory
  <li>Watchvideoofself</li>
  </ul>
  </body>
  </html>
  或者,按照第五条技巧所说的,你也可以将第九行的代码写成这样(不用引号):
  <ulcontenteditable=true>
  7.电子邮件输入
  如果我们应用"电子邮件"类型来指定输入的形式,我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来,但是我们也不能完全依靠这个。比较旧的浏览器不理解这种"电子邮件"类型,它们只会简单地返回到普通的文本框。
  <!DOCTYPEhtml>
  <htmllang=”en”>
  <head>
  <metacharset=”utf-8″>
  <title>untitled</title>
  </head>
  <body>
  <formaction=”"method=”get”>
  <labelfor=”email”>Email:</label>
  <inputid=”email”name=”email”type=”email”/>
  <buttontype=”submit”>SubmitForm</button>
  </form>
  </body>
  </html>
  在说到浏览器所支持和不支持的元素以及属性时,你必需知道当前所有浏览器都不是那么可靠。例如,Opera只有在你指定name属性时才支持电子邮件验证。不过,它不支持占位符属性(下面即将要讲到的)。最后,虽然你可以使用这种形式的验证,不过不要过分依赖它。
    本文由邯郸网络公司首创网络整理编辑发布,请勿转载、复制、摘抄等!

+ 查看更多我们的客户 / Our client

0310-4559740
400-990-1661
    24小时报务热线
    18931045623
在线客服
首创网络邯郸公司
邯郸公司
电话:0310-4559740 / 18931045623  地址:邯郸市互联网大厦A座F层C区