`
wjlgryx
  • 浏览: 297926 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

22个HTML5的初级技巧

HTML5CSSChromeJavaScriptIE 
阅读更多

Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。

1. 新的Doctype声明

XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。

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

HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

1 <!DOCTYPE html>

HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合 这种格式，都会进入标准模式。

2. <figure>标签

看看下面一段简单的代码：

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

遗憾的是，这里的h6标签和img标签好像没有什么关系，语义不够明确。HTML5意识到了这一点，于是就采用了<figure>标签。当<figure>结合<figcaption>标签的使用，可以让h6标签和img标签组合起来，代码就更具语义化了。

1 <figure>
2    <img src="path/to/image" alt="About image"> 
3 <figcaption>
4 <h6>This is an image of something interesting. </h6>
5 </figcaption>
6 </figure>

3. 重新定义<small>

不久前，我使用了<small>标签来创建与logo相关的副标题。但是在HTML5中重新定义了<small>标签，使之更能表现语义化，在<small>的字号都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

4. 去掉了Javascript和CSS标签的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>

在HTML5中，不再需要type属性了，因为这显得有点多余，去掉之后可以让代码更为简洁。

1 border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 2px !important; border-top-style: none; border-right-style: none; border-bottom-style: none;
分享到：
| Html5
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5的初级技巧.doc

    html5入门了，看一下这些技巧会对html5有更深的理解。分享给大家了~

    初学者必知的HTML 5入门级技巧

    因此，为了应对即将到来的HTML 5，本文总结了11个HTML 5的初级技巧，希望能对你进一步学习好HTML 5会有所帮助。 1. 新的Doctype声明 XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。 &lt;!...

    关于HTML5的22个初级技巧(图文教程)

    因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。 复制代码...

    Firebug 调试器Web开发者应掌握12个初级使用技巧

    本文选取了12个Web开发者应该掌握的Firebug的初级使用技巧，介绍给大家。 1、使用Firebug可以找到页面中的任何内容 不知道各位有无遇到过这样的情况，在一个复杂的HTML页面中，当你想找某个页面元素的实际对应的...

    30个初级常用python实现脚本 中文pdf高清版

    资源包含新手必备的Python三十个常见的脚本汇总，包括冒泡算法之类，帮助您了解python中可用的各种技巧，需要的朋友可下载试试！ 1、冒泡排序 2、计算x的n次方的方法 3、计算aa + bb + c*c + …… 4、计算阶乘 n! 5...

    JAVA精华讲解(JavaScript初级知识)

    本教程为未接触过 JavaScript 的读者提供了比较完善的初级知识，但只限于初级知识 JavaScript 是一种新的描述语言，此一语言可以被箝入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form ...

    HTML_Dog - HTML和CSS网页标准指南

    &lt;br&gt;总共六个指南，基本上覆盖了HTML和CSS的范围。初级指南是按部就班的，你应该按顺序逐个学习。而中级和高级指南相对比较独立，包含各种技巧和技术，你可以按照你的需求选择性地学习。

    HTML和CSS网页标准指南

    用符合Web标准的HTML和CSS构建你...总共六个指南，基本上覆盖了HTML和CSS的范围。初级指南是按部就班的，你应该按顺序逐个学习。而中级和高级指南相对比较独立，包含各种技巧和技术，你可以按照你的需求选择性地学习。

    java面试题以及技巧

    │ 164个完整Java代码.zip │ J2EE综合－－Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题（上海释锐）.pdf │ MIME简介.txt │ SCJP试题详解.pdf │ SQL面试题_心灵深处.htm │ Struts+...

    Vue.js双向绑定操作技巧(初级入门)

    vue.js最重要的一个特点就是双向数据绑定也就是我们常说的MVVM：Model-View-ViewModel。我们要实现双向绑定首先当然要有“双向”，这里vue.js为我们提供了View层和Model层。View层就是在HTML中的代码，Model层则是...

    HTML知识整理、网页制作基础教程 CHM.rar

    　了解最基本的网页基础知识——HTML非常重要，同时也需要学习一些制作技术，有时候一个小小技巧也可以让你事半功倍。 　详细了解Anchor标记 　HTML文件HEAD内部标记浅析 　实现HTML自动排版的法则 　快速精通...

    java面试题目与技巧1

    │ 164个完整Java代码.zip │ J2EE综合－－Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题（上海释锐）.pdf │ MIME简介.txt │ SCJP试题详解.pdf │ SQL面试题_心灵深处.htm │ Struts+...

    java面试题及技巧4

    │ 164个完整Java代码.zip │ J2EE综合－－Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题（上海释锐）.pdf │ MIME简介.txt │ SCJP试题详解.pdf │ SQL面试题_心灵深处.htm │ Struts+...

    java面试题及技巧3

    │ 164个完整Java代码.zip │ J2EE综合－－Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题（上海释锐）.pdf │ MIME简介.txt │ SCJP试题详解.pdf │ SQL面试题_心灵深处.htm │ Struts+...

Magicbox
Global site tag (gtag.js) - Google Analytics