HTML5新特性：简化Doctype、<figure>标签与<small>重定义

html5基础

html5教程

60 浏览量更新于2024-09-01 收藏 138KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"这篇HTML5基础教程整理了一些常用技巧，包括新的Doctype声明、<figure>标签的使用、<small>标签的重新定义以及不再需要指定type的Javascript和CSS标签。这些变化旨在使HTML5代码更加简洁和语义化，提高网页的可读性和兼容性。" 在HTML5中，开发人员可以享受到更简洁、更易记忆的Doctype声明。传统的XHTML Doctype声明非常冗长，而HTML5只需简单地写为`<!DOCTYPE html>`。这样的改动不仅减少了打字错误的可能性，还确保了所有现代浏览器（包括旧版Internet Explorer）都能进入标准渲染模式。 `<figure>`标签是HTML5引入的一个重要语义元素，它用于组织图形、图片或其他多媒体内容，并且可以配合`<figcaption>`标签提供描述性文本。通过这两个标签的使用，代码的语义更加清晰，有助于屏幕阅读器和搜索引擎理解页面内容。例如，一个包含图片和标题的代码段可以这样表示： ```html <figure> <img alt="About image" src="path/to/image"> <figcaption> <h6>This is an image of something interesting.</h6> </figcaption> </figure> ``` HTML5还对`<small>`标签进行了重新定义，使其更加语义化。在过去，它可能被用来创建较小的文本，但在HTML5中，`<small>`更适合用来表示像版权信息这样的辅助性文本，因为它的字号会自动减小，为页面底部的法律条款或版权声明提供了一种整洁的呈现方式。此外，HTML5不再需要在`<script>`和`<style>`标签中指定`type`属性，因为JavaScript和CSS已经成为默认的语言。这意味着以下代码片段： ```html <script type="text/javascript" src="script.js"></script> <style type="text/css"> /* CSS code */ </style> ``` 可以简化为： ```html <script src="script.js"></script> <style> /* CSS code */ </style> ``` 这些改变简化了HTML5代码，提高了开发效率，并促进了更好的跨浏览器兼容性。了解并掌握这些HTML5的新特性，将有助于开发者编写出更加高效、语义明确的网页代码。

资源详情

资源推荐

html5基础教程常用技巧整理基础教程常用技巧整理

HTML5的一些新增属性和功能是让代码变得更简洁，这总归是一件好事，应该值得我们推崇，希望这篇HTML5

的文章对你有一些帮助

1. 新的新的Doctype声明声明

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

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

transitional.dtd">

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

明了。

<!DOCTYPE html>

HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪

IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合这种格式，都会进入标准模式。

2. <figure>标签标签

复制代码

代码如下:

<h6>Image of Mars.</h6>

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

遗憾的是，这里的h6标签和img标签好像没有什么关系，语义不够明确。HTML5意识到了这一点，于是就采用了<figure>标

签。当<figure>结合<figcaption>标签的使用，可以让h6标签和img标签组合起来，代码就更具语义化了。

复制代码

代码如下:

<h6>This is an image of something interesting. </h6>

</figcaption>

</figure>

3. 重新定义重新定义<small>

不久前，我使用了<small>标签来创建与logo相关的副标题。但是在HTML5中重新定义了<small>标签，使之更能表现语义

化，在<small>的字号都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

4. 去掉了去掉了Javascript和和CSS标签的标签的type属性属性

通常你会在<link>和<script>加上type属性：

复制代码

代码如下:

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

复制代码

代码如下:

5. 是否使用双引号是否使用双引号

这有点让人纠结，HTML5并不是XTHML，你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号，因为

这让代码看起来会更标准。不过，这可以根据你的个人喜好来确定是到底要不要双引号。

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

weixin_38693311

粉丝: 4
资源: 922

HTML5新特性：简化Doctype、<figure>标签与<small>重定义

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

《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

html5基础教程pdf

html5+css3网站设计基础教程

网站设计基础教程html5+css3pdf

html5与css3基础教程(第8版)pdf

html5+css3网站设计基础教程实验案例

python pyqt5基础教程

HTML5+CSS3网站设计基础教程

html5零基础入门教程pdf

html5+css3网站设计基础教程(第2版)动手实践源代码

电子技术基础教程pdf

html5语言教程pdf

树莓派基础教程包 zip

yolov5零基础教程

html5+css3网页设计基础教程阶段案例6代码图

web前端开发案例教程(html5+css3)(微课版)教学教案1

matlab基础教程pdf

python零基础教程视频

jsp基础教程pdf

最新资源