HTML5新特性解析：从Doctype到LocalStorage

76 浏览量更新于2024-08-28 收藏 67KB PDF 举报

"HTML5的新特性及技巧分享总结" 在HTML5中，许多旧有的规则得到了更新，同时也引入了一些新的功能和元素，使得网页开发变得更加高效和便捷。以下是一些主要的HTML5新特性及技巧： 1. **新的Doctype声明**：HTML5采用简洁的<!DOCTYPE html>声明，不再需要长长的DTD（文档类型定义），这使得文档更易读且浏览器会自动进入标准模式。 2. **Figure元素与figcaption**：<figure>和<figcaption>元素用于结构化地展示带有标题的多媒体内容，如图片、图表等。<figure>包裹内容，<figcaption>作为内容的标题或描述。 3. **重定义的元素**：在HTML5中，元素不再仅仅用于字体缩小，而是用于表示如版权信息这样的小版式内容。 4. **移除link和script的type属性**：HTML5中，link和script标签的type属性不再是必需的，因为浏览器默认已知道这些标签的作用。 5. **属性引用与闭合**：HTML5允许属性不加引号和不闭合，但为了代码的清晰性和一致性，推荐始终使用引号并闭合标签。 6. **contenteditable属性**：通过添加contenteditable属性，可以轻松地使任何元素变为可编辑区域，方便用户直接在页面上编辑内容。 7. **Email输入类型**：通过type="email"，输入框会自动进行电子邮件格式的验证，但这仅是前端验证，服务器端验证同样必不可少。 8. **Placeholders**：输入框的placeholder属性可以设置提示文字，用户在输入框内可见，输入内容时自动消失。 9. **LocalStorage**：HTML5的LocalStorage提供了一种在客户端持久存储大量数据的能力，数据在浏览器关闭后仍然保留，直到被明确删除。 10. **语义化的header和footer**：header和footer元素为页面的头部和尾部提供了语义化标记，帮助搜索引擎和辅助技术理解页面结构。 11. **更多HTML5表单特性**：HTML5新增了许多表单控件和属性，如range、date、color等输入类型，以及required、pattern等验证属性，提高了表单的交互性与可用性。 12. **IE与HTML5兼容**：Internet Explorer对于HTML5新元素的默认渲染方式为inline，可通过CSS将它们设置为block，如`header, footer, article, section, nav, menu, hgroup{ display: block; }`。对于不支持新元素的旧版IE，可以通过JavaScript库如Modernizr或者手动创建元素，如`document.createElement("article");`来实现兼容。以上特性不仅提高了开发者的工作效率，还提升了用户体验，使得HTML5成为现代网页开发的首选标准。

HTML5的新特性及技巧分享总结的新特性及技巧分享总结

1. 新的Doctype

尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染

2. Figure元素

用<figure>和<figcaption>来语义化地表示带标题的图片

This is an image of something interesting.

</figcaption>

</figure>

3. 重新定义的

4. 去掉link和script标签里面的type属性

5. 加/不加括号

HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签

6. 让你的内容可编辑，只需要加一个contenteditable属性

7. Email Inputs

如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相

应的校验

8. Placeholders

这个input属性的意义就是不必通过javascript来做placeholder的效果了

9. Local Storage

使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检

测一下window.localStorage是否存在

10. 语义化的header和footer

11. 更多的HTML5表单特性

12. IE和HTML5

默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让

其以block方式渲染

header, footer, article, section, nav, menu, hgroup {

display: block;

}

不幸的是IE会忽略这些样式，可以像下面这样fix:

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38565628

粉丝: 2
资源: 902

HTML5新特性解析：从Doctype到LocalStorage

分享最好的HTML5编码教程和参考手册

20个html5手机网站模板源码

web-doc:web 笔记，记录自己学习前端的历程，记录自己学习的代码，包含JavaScript、CSS、HTML 等；各种前端开发的小技巧及总结

HTML5实战技巧分享与动手操作指南

HTML学习文件整理技巧分享

前端学习笔记：JavaScript、CSS、HTML技巧与总结

mactaley.github.io网站的HTML压缩技巧分享

HTML5+CSS3精华总结：新标签与多媒体应用

构建新闻报道高级网页的HTML5与CSS3技巧

分享：北京公司PHP面试常见问题及技巧

最新资源