广州做网站,广州建站_小燕子网络 广州网站制作热线:020-23318051广州建网站第一品牌! 点击添加QQ好友!广州网页设计 为什么大家都喜欢小燕子网络?
站内公告_小燕子网络
广州小燕子网络公司专业从事网站建设、域名注册、企业邮局、网站推广、网站改版、服务器/VPS/虚拟主机空间租用,小燕子网络(www.168xyz.com)以客户需求为出发点,以简洁实用为设计目标!“梦想所有企业都拥有一个自己的官方网站

搜索内容

搜索类别

广州做网站,广州建站_小燕子网络
 
用户名
密  码
 
泽泡网
百度
google
 
当前位置:HOME > 新闻资讯 > 网站建设

广州网站设计分享HTML5网页制作的5个实例技巧

来源:小燕子网络  发布时间 2013-08-15

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

1. 图形(Figure)元素
考虑用下面的代码来标记图片?
<mg src=”path/to/image” alt=”About image” /> <p>Image of Mars. </p> 很不幸,它不能用简单、富有语义关联的方式与图形的标题关联,因为它仅仅是用段落标记以及图片元素包裹着,而 HTML5通过引进<figure>元素,改进了这一点。当结合 <figcaption> 元素使用时,我们就可以将图形标题与图形配对起来。代码如下:
<figure> <img src=”path/to/image” alt=”About image” /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> 3. 重新定义<small>
原来你可以利用<small>元素来创建与logo密切相关的副标题。不过,现在HTML5修改了这个用法,<small>元素被重新定义了,或者更恰当地说,它现在用来代表小字或其他边注(如,网站底部的版权声明)。
2. 不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” /> <script type=”text/javascript” src=”path/to/script.js”></script> 在HTML5中,这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此,我们可以将它们的类型属性都删除掉。代码如下:
<link rel=”stylesheet” href=”path/to/stylesheet.css” /> <script src=”path/to/script.js”></script>
3. 使用还是不使用引号
记住,HTML5与XHTML不同,如果你不喜欢的话你不必用引号将属性包裹起来。不过,要是你觉得用引号会让你觉得更加舒服的话,当然也不会有任何问题。
<p class=myClass id=someId> Start the reactor.
4. 使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”,顾名思义它将允许用户编辑元素(包括他的子元素)内包含的任何文本内容。它的用途非常广,如,简单的任务清单或是基于wiki的站点也非常实用,此外,它还有一个优势就是利用了本地的存储。
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable=”true”> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html>
或者,按照第五条技巧所说的,你也可以将第九行的代码写成这样(不用引号):
<ul contenteditable=true>
5. 电子邮件输入
广州网站设计提醒如果我们应用“电子邮件”类型来指定输入的形式,我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来,但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型,它们只会简单地返回到普通的文本框。
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>untitled</title> </head> <body> <form action=”" method=”get”> <label for=”email”>Email:</label> <input id=”email” name=”email” type=”email” /> <button type=”submit”> Submit Form </button> </form> </body> </html> 在说到浏览器所支持和不支持的元素以及属性时,你必需知道当前所有浏览器都不是那么可靠。例如,Opera只有在你指定name属性时才支持电子邮件验证。不过,它不支持占位符属性(下面即将要讲到的)。最后,虽然你可以使用这种形式的验证,不过不要过分依赖它。

相关关键词:广州网站设计 广州网页设计 专业网站制作

    (网页编辑:李明)

[ 点击数:] [打印本网页] [关闭本窗口]
 

相关内容
  • 广州网站设计很糟糕的6个原因 2013-08-15
  • 广州网站设计教您如何书写安全的PHP代码 2013-08-29
  • 广州网站设计公司设计师李明跟大家分享
    标签的用法 2013-08-15
  • 广州网站设计公司教你如何更加正确书写网站title 2013-08-15
  • 广州网站设计公司消息新东方回购股票 俞敏洪私有化蓝图 2013-08-15
  • 广州网站设计公司消息360买搜狗下周公布是真是假 2013-08-15
  • 广州网站设计分享HTML5网页制作的5个实例技巧 2013-08-15
  • 广州网页设计分享网站打开慢的解决方法 2013-10-05
  • 广州网页设计论平面设计的基本功 2013-10-02
  •  
    小燕子简介 网站设计 诚聘英才 网站建设 常见问答 新闻资讯 网站制作 联系我们 网站推广 关注我们
    广州做网站,用微信扫一扫 小燕子网络 电话:020-23318051  手机:13076712935 邮箱:xyz#168xyz.com(#换成@)  
    地址:广州市番禺区石岗东村市莲路69号 邮编:511450

    Copyright © 2013 广州泽泡信息科技有限公司. All Rights Reserved   
    如果你喜欢本站,别忘了把本站告诉给你QQ上的朋友哦! 试试 Ctrl+D 有意外惊喜哦~

    泽泡公司旗下网站:小燕子网络

    警警广州网警察察






    法律顾问:广州道怡律师事务所
    安全认证
    中国软件网推荐企业
    广东中小企业发展促进会
    中国互闻网协会会员
    经营性网站备案信息
    可信网站