HTML5技术的28个窍门.docx

HTML5技术的28个窍门摘要: 前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话，可以把本文的内容作为必须了解的热身课程。更多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=path/to/image alt=About image / pImage of Mars. /p文字裹在p标签里，与img标签各行其道，很难让人联想到这就是标题。HTML5通过采用figure元素对此进行了改正。当合figcaption元素组合使用时，我们就可以语义化地联想到这就是图片相对应的标题figure img src=path/to/image alt=About image / figcaption pThis is an image of something interesting. /p /figcaption /figure三、small重新定义还在不久前，small元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素，但是，现在，这种用法可能就不正确了。small元素已经被重新定义了，指小字，因而更具可用性。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，small可以正确地包裹这些信息。small元素专指“小字”。四、脚本(scripts)和链接(links)无需type您可能现在仍在给link和script标签增加type属性。link rel=stylesheet href=path/to/stylesheet.css type=text/css / script type=text/javascript src=path/to/script.js/script这已经是老黄花菜，非必需品了。这意味着，这些标签都各自指向样式表和脚本。因此，我们可以把type属性一起干掉。link rel=stylesheet href=path/to/stylesheet.css / script src=path/to/script.js/script五、引号还是不要引号…这确实是个问题。记住，HTML5不是XHTML，要是你不愿意，你没有必要非得用引号标记包裹你的属性，没有必要非得闭合元素。换句话说，只要你自己觉得舒服，就没有什么对错之分。对于我自己来说就是如此。p id=someId Start the reactor.对此取舍你还得自己拿主意。如果你更倾向于结构化的文档，就算天塌下来，也要把引号牢牢拽在怀里。六、内容可编辑最新的浏览器有个很赞的新属性可以应用到元素上，叫做contenteditable。顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。类似的用途还有很多，像是简单的待办事项清单应用程序，可大大利用其本地存储的优势。ul contenteditable=true li悼念遇难香港同胞 /li li深圳特区30周年/li li伊春空难/li /ul或者，根据前面所学到的一些技巧，我们可以把它写成：ul contenteditable=true七、Email输入(Inputs)如果我们给表单输入框应用名为”email”的type属性，我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错，内置表单验证即将到来，由于一些显而易见的原因，我们还不能100%依赖内置验证，较旧的浏览器不认识这个”email”型，它们会简单地退回到普通文本框。form action= method=get label for=email邮箱:/labelinput id=email name=email type=email / button type=submit确定/button/form//zxx:经我小测了下，貌似仅在Chrome浏览器下有效果(xp系统)，当输入内容不是