`
wjlgryx
  • 浏览: 308520 次
  • 性别: 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的22个初级技巧(图文教程)

    以下是一些HTML5的初级技巧，适合初学者掌握： 1. **新的Doctype声明**：HTML5的Doctype声明简洁明了，只需要`&lt;!DOCTYPE html&gt;`，这使得所有现代浏览器和较旧的IE6/7/8都能进入标准模式，简化了开发者的工作。 2. ...

    HTML5的初级技巧.doc

    ### HTML5初级技巧详解 随着Web技术的飞速发展，HTML5已经成为网页设计与开发领域不可或缺的一部分。HTML5不仅简化了许多传统标记语言的复杂性，还引入了一系列新特性以提高网页的表现力和交互性。本文将详细介绍...

    Accp初级程序员Html5开心网开发总结项目示例

    在本项目示例中，"Accp初级程序员Html5开心网开发总结项目示例"是一个旨在帮助初学者理解和应用HTML5技术的实践项目。这个项目的主要目标是通过使用HTML5和CSS来创建一个类似开心网的网页应用，展示网页设计与开发的...

    HTML5canvas初级入门教程.pdf

    这个初级入门教程主要涵盖了Canvas的基本概念、使用方式以及一些基本的绘图操作。 首先，Canvas是一个HTML标签，通过`&lt;canvas&gt;`元素在网页中创建一个可绘制的区域。例如： ```html &lt;!-- 向后兼容的内容 --&gt; ``` ...

    网页设计必备——html初级教程

    这个"网页设计必备——html初级教程"包含两个CHM文件：HTML入门与提高.CHM和HTML基础教程.chm，它们将帮助初学者理解并掌握HTML的基本概念和语法。 HTML入门与提高.CHM可能涵盖以下内容： 1. HTML简介：解释HTML的...

    标准html5贷款页面

    【标准HTML5贷款页面】是面向初级前端工程师的学习资源，旨在教授如何利用HTML5技术构建一个完整的贷款服务网站。这个项目包含了贷款首页、列表页、详情页和轮播图等关键元素，是学习Web开发实战技能的理想实例。...

    Ch5 初级爬虫.rar

    标题中的"Ch5 初级爬虫.rar"表明这是一个关于初级网络爬虫的学习资源，可能包含了一章或一个课程的第五部分的内容。这个压缩包很可能提供了理论知识的讲解以及实践代码示例，帮助初学者理解并掌握网页数据抓取的基本...

    web前端开发教材初级源代码.rar

    这份"web前端开发教材初级源代码.rar"压缩包提供了一套初级学习资源，旨在帮助初学者掌握基本的前端开发技能。下面我们将深入探讨这些模块及其在实际开发中的应用。 01. HTML基础 HTML（HyperText Markup Language...

    HTML初级教程

    这个“HTML初级教程”专为入门者设计，旨在帮助初学者快速理解并掌握HTML的基础知识和实践技巧。 首先，HTML的基本结构是由一系列的标签组成的，这些标签告诉浏览器如何呈现网页内容。例如，`&lt;html&gt;`标签定义了整个...

    前端Web开发指南：HTML5+CSS3+移动端Web基础知识与技巧

    内容概要：本文详细介绍了前端Web开发的基础知识点和技术技巧，涵盖了HTML5、CSS3以及移动Web的相关内容。具体包括Visual Studio Code编辑器的安装配置、HTML的基本语法和结构、常见标签的使用方法及其应用，如标题...

    Web前端开发案例教程（HTML5+CSS3）（微课版）_PPT课件.zip

    通过这个微课版的PPT课件，学习者不仅可以深入理解HTML5和CSS3的基础知识，还能通过实例掌握实际开发中的技巧和最佳实践，从而成为一名出色的Web前端开发者。这份教学资料是自学或课堂教学的理想资源，帮助学习者...

    1+x 证书 Web 前端开发初级实操考试.zip

    "1+x 证书 Web 前端开发初级实操考试"是一个针对初学者设计的实践考核，旨在检验学习者在Web前端开发领域的基础技能和理解程度。这个考核可能包括HTML、CSS、JavaScript等核心技术的运用，以及对网页布局、响应式...

    PHP初级入门教程二本

    本教程旨在为初学者提供一个全面且深入的PHP学习指南，帮助你们掌握这个强大的编程工具。 第一本教程《PHP初级入门热门教程.chm》可能涵盖以下内容： 1. **PHP基础**：介绍PHP的历史、特点以及安装配置环境，如...

    web初级项目

    《Web初级项目：构建超市管理系统》 ...通过这个"Web初级项目"，学习者不仅可以掌握Web开发的基本流程，还能在实践中提升问题解决能力和团队协作技巧，为后续的深入学习和项目开发打下坚实的基础。

    ASP初级教程（从入门到精通）

    这个初级教程针对初学者，旨在帮助他们快速理解和掌握ASP的核心概念与实践技能，实现从入门到精通的转变。 首先，ASP技术的基础是HTML、CSS和JavaScript，但它的优势在于服务器端处理能力。在ASP页面中，可以嵌入...

    雅奇880初级教程

    《雅奇880初级教程_rar - 迅载网盘.htm》这个文件名表明，这是一份以HTML格式存储的在线教程资源，可能包含了文字说明、图片示例和交互式演示。下载并解压后，你可以按照其中的步骤逐步学习，提高你的编程技能。 总...

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