Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。
1. 新的Doctype声明
XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。
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标签组合起来，代码就更具语义化了。
2 |
<img src="path/to/image" alt="About image">
|
4 |
<h6>This is an image of something interesting. </h6>
|
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;
分享到：
Global site tag (gtag.js) - Google Analytics
|
相关推荐
以下是一些HTML5的初级技巧，适合初学者掌握： 1. **新的Doctype声明**：HTML5的Doctype声明简洁明了，只需要`<!DOCTYPE html>`，这使得所有现代浏览器和较旧的IE6/7/8都能进入标准模式，简化了开发者的工作。 2. ...
### HTML5初级技巧详解 随着Web技术的飞速发展，HTML5已经成为网页设计与开发领域不可或缺的一部分。HTML5不仅简化了许多传统标记语言的复杂性，还引入了一系列新特性以提高网页的表现力和交互性。本文将详细介绍...
在本项目示例中，"Accp初级程序员Html5开心网开发总结项目示例"是一个旨在帮助初学者理解和应用HTML5技术的实践项目。这个项目的主要目标是通过使用HTML5和CSS来创建一个类似开心网的网页应用，展示网页设计与开发的...
这个初级入门教程主要涵盖了Canvas的基本概念、使用方式以及一些基本的绘图操作。 首先，Canvas是一个HTML标签，通过`<canvas>`元素在网页中创建一个可绘制的区域。例如： ```html <!-- 向后兼容的内容 --> ``` ...
这个"网页设计必备——html初级教程"包含两个CHM文件：HTML入门与提高.CHM和HTML基础教程.chm，它们将帮助初学者理解并掌握HTML的基本概念和语法。 HTML入门与提高.CHM可能涵盖以下内容： 1. HTML简介：解释HTML的...
【标准HTML5贷款页面】是面向初级前端工程师的学习资源，旨在教授如何利用HTML5技术构建一个完整的贷款服务网站。这个项目包含了贷款首页、列表页、详情页和轮播图等关键元素，是学习Web开发实战技能的理想实例。...
标题中的"Ch5 初级爬虫.rar"表明这是一个关于初级网络爬虫的学习资源，可能包含了一章或一个课程的第五部分的内容。这个压缩包很可能提供了理论知识的讲解以及实践代码示例，帮助初学者理解并掌握网页数据抓取的基本...
这份"web前端开发教材初级源代码.rar"压缩包提供了一套初级学习资源，旨在帮助初学者掌握基本的前端开发技能。下面我们将深入探讨这些模块及其在实际开发中的应用。 01. HTML基础 HTML（HyperText Markup Language...
这个“HTML初级教程”专为入门者设计，旨在帮助初学者快速理解并掌握HTML的基础知识和实践技巧。 首先，HTML的基本结构是由一系列的标签组成的，这些标签告诉浏览器如何呈现网页内容。例如，`<html>`标签定义了整个...
通过这个微课版的PPT课件，学习者不仅可以深入理解HTML5和CSS3的基础知识，还能通过实例掌握实际开发中的技巧和最佳实践，从而成为一名出色的Web前端开发者。这份教学资料是自学或课堂教学的理想资源，帮助学习者...
"1+x 证书 Web 前端开发初级实操考试"是一个针对初学者设计的实践考核，旨在检验学习者在Web前端开发领域的基础技能和理解程度。这个考核可能包括HTML、CSS、JavaScript等核心技术的运用，以及对网页布局、响应式...
本教程旨在为初学者提供一个全面且深入的PHP学习指南，帮助你们掌握这个强大的编程工具。 第一本教程《PHP初级入门热门教程.chm》可能涵盖以下内容： 1. **PHP基础**：介绍PHP的历史、特点以及安装配置环境，如...
《Web初级项目：构建超市管理系统》 ...通过这个"Web初级项目"，学习者不仅可以掌握Web开发的基本流程，还能在实践中提升问题解决能力和团队协作技巧，为后续的深入学习和项目开发打下坚实的基础。
这个初级教程针对初学者，旨在帮助他们快速理解和掌握ASP的核心概念与实践技能，实现从入门到精通的转变。 首先，ASP技术的基础是HTML、CSS和JavaScript，但它的优势在于服务器端处理能力。在ASP页面中，可以嵌入...
《雅奇880初级教程_rar - 迅载网盘.htm》这个文件名表明，这是一份以HTML格式存储的在线教程资源，可能包含了文字说明、图片示例和交互式演示。下载并解压后，你可以按照其中的步骤逐步学习，提高你的编程技能。 总...
"电脑技巧3000招"是一个集合了大量计算机操作技巧的资源，它包含了许多用户可能未曾注意到但非常实用的小窍门。这个资源以`.chm`格式提供，这是一种由微软开发的帮助文件系统，名为"Compiled HTML Help"，它可以方便...