HTML5编写小技巧
Posted 苜蓿草科技
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5编写小技巧相关的知识，希望对你有一定的参考价值。
html5编写小技巧(1)
1. 新的文档类型（Doctype）
<!DOCTYPE html>
3. 不再需要脚本、链接类型
4. 使你的内容可编辑
HTML5其中一个非常强大的功能就是contenteditable，它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。
<ul contenteditable=true>
5. 电子邮件输入
6. 占位符
此前，我们需要使用javascript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
<input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />
7. 本地存储
多亏了HTML5的 local storage ，我们可以让高级浏览器记住我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
8. IE和HTML5
IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：
header, footer, article, p, nav, menu, hgroup {display: block;}
就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：
document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
9. 群组标题（hgroup）
假设一个网站有名称、副标题分别用<h1><h2>标签来标记，在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。
<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>
10.必要（Required）属性
表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：
<input type=”text” name=”someInput” required>
或者，更严谨：
<input type=”text”name=”someInput” required=”required”>
上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话， 输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性：
<form method=”post” action=”> <label for=”someInput”> Your Name: </label> <input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required> <button type=”submit”>Go</button> </form>
如果输入是空的，表单将无法提交，突出显示文本框。
共抗疫情！
以上是关于HTML5编写小技巧的主要内容，如果未能解决你的问题，请参考以下文章