你必须知道的28个HTML5特征、窍门和技术

Jeffrey Way曾发表过一篇博文《28 HTML5 Features, Tips, and Techniques you Must Know 》讲述了28个HTML5特征、窍门和技术,张鑫旭将本文进行了翻译,现转载于此,全文如下:

前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。

一、新的Doctype

(译者注:“doctype”中文意思指“文档类型”)

仍在使用麻烦的,不可能记得住的XHTML文档类型?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

如果是,为什么还在用呢?使用新的HTML5文档类型代替吧。你会活得更久的——正如Douglas Quaid说的

  1. <!DOCTYPE html> 

我就琢磨着,为了HTML5搞个这厮代码,您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心,如今这是可行的,只有老的浏览器需要一个特定的doctype(文档类型)。浏览器如果不知道doctype,就会很简单的以标准模式对包含的标签进行渲染。所以,妹妹你大胆的向前冲,把小心谨慎都抛到九霄云外,去拥抱新的HTML5文档类型吧。

二、图形元素(The Figure Element )

看看下面给图片添加的标示:

  1. <img src="path/to/image" alt="About image" /> 
  2. <p>Image of Mars. </p> 
  3.  

文字裹在p标签里,与img标签各行其道,很难让人联想到这就是标题。HTML5通过采用<figure>元素对此进行了改正。当合<figcaption>元素组合使用时,我们就可以语义化地联想到这就是图片相对应的标题

  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> 

三、<small>重新定义

还在不久前,<small>元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素,但是,现在,这种用法可能就不正确了。<small>元素已经被重新定义了,指小字,因而更具可用性。试想下你网站底部的版权状态,根据对此元素新的HTML5定义,<small>可以正确地包裹这些信息。

small元素专指“小字”。

四、脚本(scripts)和链接(links)无需type

您可能现在仍在给link和script标签增加type属性。

  1. <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> 
  2. <script type="text/javascript" src="path/to/script.js"></script> 

这已经是老黄花菜,非必需品了。这意味着,这些标签都各自指向样式表和脚本。因此,我们可以把type属性一起干掉。

  1. <link rel="stylesheet" href="path/to/stylesheet.css" /> 
  2. <script src="path/to/script.js"></script> 

五、引号还是不要引号

…这确实是个问题。记住,HTML5不是XHTML,要是你不愿意,你没有必要非得用引号标记包裹你的属性,没有必要非得闭合元素。换句话说,只要你自己觉得舒服,就没有什么对错之分。对于我自己来说就是如此。

  1. <p class=myClass id=someId> Start the reactor. 

对此取舍你还得自己拿主意。如果你更倾向于结构化的文档,就算天塌下来,也要把引号牢牢拽在怀里。

六、内容可编辑

最新的浏览器有个很赞的新属性可以应用到元素上,叫做contenteditable。顾名思意,就是允许用户编辑元素内容包含的任意文本,包括子元素。类似的用途还有很多,像是简单的待办事项清单应用程序,可大大利用其本地存储的优势。

  1. <ul contenteditable="true"> 
  2.     <li>悼念遇难香港同胞 </li> 
  3.     <li>深圳特区30周年</li> 
  4.     <li>伊春空难</li> 
  5. </ul> 

或者,根据前面所学到的一些技巧,我们可以把它写成:

  1. <ul contenteditable=true> 

您可以狠狠地点击这里:HTML5内容可编辑demo

七、Email输入(Inputs)

如果我们给表单输入框应用名为”email”的type属性,我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错,内置表单验证即将到来,由于一些显而易见的原因,我们还不能100%依赖内置验证,较旧的浏览器不认识这个”email”型,它们会简单地退回到普通文本框。

  1. <form action="" method="get"> 
  2.     <label for="email">邮箱:</label><input id="email" name="email" type="email" /> 
  3.     <button type="submit">确定</button> 
  4. </form> 

您可以狠狠地点击这里:HTML5邮箱内置验证demo

(译者注:经我小测了下,貌似仅在Chrome浏览器下有效果(xp系统),当输入内容不是合法邮箱格式,点击“确定”按钮是没有反应的;当输入为合法邮箱,点击“确定”按钮才会提交刷新页面。)

还应当指出,当谈到哪些元素和属性支持和不支持时,当前所有的浏览器都有点靠不住的。例如,Opera似乎支持电子邮件验证,但仅在name属性被指定的时候。而且,它不支持占位符属性,这个我们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它!

八、占位符(Placeholders)

(译者注:此处内容非直译,有删改)

Placeholders什么意思呢,就是文本框/文本域空间默认会有个文字提示,获得焦点时,此提示文字消失;失去焦点时如果内容为空,提示文字又出现。如下图所示:

这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法,我们需要使用一点JavaScript代码实现占位符效果,例如我之前的“文本框/域文字提示自动显示隐藏jQuery小插件”一文所展示的。当然,你需要设定一个初始的默认的value值,然后根据输入内容进行判断,从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性,一切就轻松了。

  1. <label for="email">邮箱:</label> 
  2. <input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" /> 

根据我的测试,目前仅webkit核心的浏览器支持placeholders属性,像是Chrome5,Safari4,结果如下所示:

 

您可以狠狠地点击这里:HTML5占位符Demo

九、本地存储(Local Storage)

多亏了本地存储(非正式的HTML5,本着方便归纳的目的),我们可以让高级浏览器记住我们的编辑后的内容,即使浏览器被关掉或是页面刷新。

您可以狠狠地点击这里:HTML5本地存储Demo

IE8浏览器已经支持了本地存储,如下截图所示:

尽管显然不支持所有的浏览器,我们可以在Internet Explorer8时,Safari 4和Firefox 3.5下期待此工作方式。请注意,为了弥补旧的浏览器将无法识别本地存储,你应该先测试,以确定window.localStorage是否存在。

十、语义的Header和Footer

那些过往的日子:

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

div嘛,很自然的,没有语义化的结构——即使在应用了id后。现在,通过HTML5,我们可以使用<header>和<footer>元素。以上的代码可以替换成:

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

它完全适合您有多个页眉和页脚的项目。

尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此,将博客底部的,例如,元信息放在footer元素内部是说得通的。这同样也适用于header。

更多内容请见:http://www.zhangxinxu.com/wordpress/?p=1058

原文链接:http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

译文链接:http://www.zhangxinxu.com/wordpress/?p=1058

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/303300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一起读懂传说中的经典:受限玻尔兹曼机

尽管性能没有流行的生成模型好&#xff0c;但受限玻尔兹曼机还是很多读者都希望了解的内容。这不仅是因为深度学习的复兴很大程度上是以它为前锋&#xff0c;同时它那种逐层训练与重构的思想也非常有意思。本文介绍了什么是受限玻尔兹曼机&#xff0c;以及它的基本原理&#xf…

NET问答: 发布 asp.net core 时如何修改 ASPNETCORE_ENVIRONMENT 环境变量?

咨询区 Dario&#xff1a;当我把 asp.net core web 发布到本地文件时&#xff0c;我发现程序读的是 appsettings.Production.json ,也就说明当前的 ASPNETCORE_ENVIRONMENT Production。请问如何动态修改 ASPNETCORE_ENVIRONMENT 的值&#xff0c;这样的话在 调试 和 发布 阶段…

oracle 如何筛选重复,求sql--筛选A字段相同,B字段不同且不重复的记录

测试数据&#xff1a;create table PRICE(ID VARCHAR2(10),PRICE NUMBER,SYSID VARCHAR2(10));insert into price (ID, PRICE, SYSID)values (10, 1000, 1);insert into price (ID, PRICE, SYSID)values (10, 1000, 2);insert into price (ID, PRICE, SYSID)values (20, 200…

注释里的诅咒:哪种语言遭受最多的咒骂?

导读&#xff1a;原文作者Scott Gilbertson在webmonkey.com发表一篇《Cussing in Commits: Which Programming Language Inspires the Most Swearing?》&#xff0c;由外刊IT评论整理翻译《注释里的诅咒&#xff1a;哪种语言遭受最多的咒骂&#xff1f;》。内容如下:任何一个程…

php tp3 操作绑定到类,操作绑定到类 · ThinkPHP3.2.3完全开发手册 · 看云

## 定义ThinkPHP3.2版本提供了把每个操作方法定位到一个类的功能&#xff0c;可以让你的开发工作更细化&#xff0c;可以设置参数**ACTION_BIND_CLASS**&#xff0c;例如&#xff1a;~~~ACTION_BIND_CLASS > True,~~~设置后&#xff0c;我们的控制器定义有所改变&#xff0c…

怎样快速掌握深度学习TensorFlow框架?

TensorFlow是Google基于DistBelief进行研发的第二代人工智能学习系统&#xff0c;其命名来源于本身的运行原理。Tensor&#xff08;张量&#xff09;意味着N维数组&#xff0c;Flow&#xff08;流&#xff09;意味着基于数据流图的计算&#xff0c;TensorFlow实际上就是张量从流…

牛X,.NET6又双叒叕新版本,这是要起飞吗?

.NET6又双叒叕出新版本了&#xff0c;2月17号Preview1、3月11号Preview2、4月8号又Preview3了&#xff0c;密集的版本发布&#xff0c;各种新技术和改进优化&#xff0c;不禁要问一句&#xff0c;.NET6是要起飞吗&#xff1f;下面给大家科普下.NET6将带来的几大核心变化&#x…

外媒:谷歌攻击码由中国作者发布

英国金融时报&#xff08;The Financial Times&#xff09;报导&#xff0c;一名中国的自由安全顾问&#xff0c;撰写了利用IE6浏览器的攻击代码&#xff0c;而后被用来攻击谷歌等美国公司。 根据金融时报的报导&#xff0c;这名身份尚未曝光的程序设计师&#xff0c;将部分攻击…

用python挖一挖知乎上宅男们最喜欢的1000个妹子

在文章开始前&#xff0c;先来一张图给大家热热身。这里是宅男们最喜欢的妹子中排名前200位的头像&#xff08;实际193张图&#xff0c;部分不规则的图已被二胖过滤&#xff09;。排名不分先后哈&#xff01;快来看看有没有你们熟悉的面孔。找到眼熟的人了吗&#xff1f;说不定…

在 .NET 6 Preview 3 ASP.NET Core 更新

.NET 6 Preview 3现在可用了&#xff0c;其中包括对ASP.NET Core的许多重大改进。这是此预览版本中的新增功能&#xff1a;更小的SignalR&#xff0c;Blazor Server和MessagePack scripts启用 Redis 分析会话HTTP/3 endpoint TLS配置初版的 .NET Hot Reload 支持Razor编译器不再…

matlab求滤波器的冲激响应,在TMS320C5410上用MATLAB实现有限冲激响应滤波器

在TMS320C5410上用MATLAB实现有限冲激响应滤波器许辉;许红【期刊名称】《计算机应用与软件》【年(卷),期】2003(020)007【摘要】介绍在TMS320C5410上尝试MATLAB语言编程实现FIR数字滤波器的方案,阐明其开发基本原理,并给出了具体程序实例.【总页数】3页(41-42,79)【关键词】数字…

单点登录在项目中的实现 转.

最近在做一个登录功能&#xff0c;纠结了好几天&#xff0c;一直在找一个能优雅的实现单点登录的功能。博客园有看到某人写了又臭又长的八股文式的文章&#xff0c;没看到有价值的东西。 其实单点登录最终要解决的是多个不同域名间共享cookie的问题。但是要在不同域名间共享coo…

趣图:程序员桌面对比,iOS vs 安卓

程序员桌面对比&#xff0c;iOS vs 安卓↓↓↓数据与算法之美用数据解决不可能长按扫码关注

如何在 ASP.Net Core 中使用 HTTP.sys WebServer ?

ASP.Net Core 是一个开源的&#xff0c;跨平台的&#xff0c;轻量级模块化框架&#xff0c;可用它来构建高性能的Web程序&#xff0c;大家都知道 Kestrel 是 ASP.Net Core 内置的跨平台web服务器&#xff0c;但是它有一定的局限性&#xff0c;比如不支持 端口共享 , WebSockets…

php图片上传 thinkphp5,thinkphp5图片上传接口

public function avatarUpload(){$file request()->file(‘file‘);$filePath ‘avatar‘;$width 200;$height 200;if($file){$filePaths ROOT_PATH . ‘public‘ . DS . ‘uploads‘ . DS .$filePath;if(!file_exists($filePaths)){mkdir($filePaths,0777,true);}$inf…

百度移动联盟(munion)-广告平台投放流程详细介绍 (绿色通道)

1. 百度平台官网介绍&#xff1a; http://hi.baidu.com/mobads/blog/ ... 1c7fc3bc3e1e2e.html2. AdView 官网介绍&#xff1a; 为开发者提供“AdView-百度” 绿色通道审核&#xff1b;提供除百度分成外额外AdView渠道分成&#xff1b;赚取更多&#xff0c;更稳定的广告费用&a…

linux命令查询邮件发送状态,Linux发邮件之mail命令详解

一、mail命令1.配置vim /etc/mail.rc文件尾增加以下内容set from1968089885qq.com smtp"smtp.qq.com"set smtp-auth-user"1968089885qq.com" smtp-auth-password"123456"set smtp-authlogin说明&#xff1a;from: 对方收到邮件时显示的发件人smt…

从一个骗局谈生活中的基础算法

曾经有一个著名的骗局&#xff1a;小明是一个赌马爱好者&#xff0c;最近他连续几次提前收到了预测赌马结果的邮件&#xff0c;从一开始由于不屑而错失良机&#xff0c;到渐渐深信不疑&#xff0c;直到最后给邮件发送方汇了巨款才发现上当。看过这个的人应该知道&#xff0c;骗…

用得最多的冒泡排序是不是少了个关键点?

前言冒泡排序应该是很多小伙伴的最爱&#xff0c;简单、直接、好理解&#xff1b;回顾以往参与和阅读的项目&#xff0c;凡是牵涉自定义排序的算法&#xff0c;很大一部分都在用冒泡&#xff0c;其中很多都忽略了一个关键点&#xff1b;来&#xff0c;咱们细细品…正文1. 冒泡排…

【POJ】【最小生成树】1789 Truck History

1 思路 题目链接。最小生成树&#xff08;MST&#xff09;问题。 2 代码 代码来自宇宙吾心博客。 #include <iostream> #include <limits> #include <cstring> using namespace std; const int N2001;char c[N][8]; // 保存字符串 int …