28个HTML5特征、窍门和技术

2019-09-09 郑州网站建设  

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

一、新的Doctype

//zxx:”doctype”中文意思指“文档类型”

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

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

<!DOCTYPE html>

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

二、图形元素(The Figure Element )

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

<img src=http://www.divcss5.com/html5/"path/to/image" alt="About image" /> <p>Image of Mars. </p>  

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

<figure> <img src=http://www.divcss5.com/html5/"path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>

三、<small>重新定义

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

small元素专指“小字”。

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

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

<link rel="stylesheet" href=http://www.divcss5.com/html5/"path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src=http://www.divcss5.com/html5/"path/to/script.js"></script>

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

<link rel="stylesheet" href=http://www.divcss5.com/html5/"path/to/stylesheet.css" /> <script src=http://www.divcss5.com/html5/"path/to/script.js"></script>

五、引号还是不要引号

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

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

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

六、内容可编辑

HTML5内容可编辑 张鑫旭-鑫空间-鑫生活

HTML5内容可编辑 张鑫旭-鑫空间-鑫生活

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

<ul contenteditable="true"> <li>悼念遇难香港同胞 </li> <li>特区30周年</li> <li>伊春空难</li> </ul>

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

<ul contenteditable=true>

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

七、Email输入(Inputs)

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1446.html转载请标明出处,谢谢合作!
标签:
  • 前端
  • 发展
  • 28HTML5
  • 如此
  • 迅猛