HTML5的新特性(1) _html5教程技巧

WBOY
Release: 2016-05-16 15:45:39
Original
1713 people have browsed it

HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML [1](标准通用标记语言下的一个应用)标准版本;现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。

1. 新的文档类型声明
HTML4规定的三种文档类型声明:

XML/HTML Code 复制内容到剪贴板
  1. nbsp;HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http:/www.w3.org/TR/html4/strict.dtd”>
  2. nbsp;HTML PUBLIC “-//W3C//DTD HTML4.01//EN””http://www.w3.org/TR/html4/loose.dtd”>
  3. nbsp;HTML PUBLIC “-//W3C//DTD HTML4.01//EN””http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 规定的三种文档类型声明:

XML/HTML Code 复制内容到剪贴板
  1. nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  2. nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  3. nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1文档严格定义类型,等同于XHTML1.0文档过渡定义类型

XML/HTML Code 复制内容到剪贴板
  1. nbsp;html PUBLIC “-//W3C//DTD XHTML 1.1//EN””http://www.w3.org/TR/xhtml11/DTD/xhtml1.dtd”>

HTML 5的文档类型声明

XML/HTML Code 复制内容到剪贴板
  1. nbsp;html>

2. script和link里不需要写type

XML/HTML Code 复制内容到剪贴板
  1. linkrel=”stylesheet”href=”path/to/stylesheet.css”type=”text/css”/>==》linkrel=”stylesheet”href=”path/to/stylesheet.css”/>
  2. scriptsrc=”path/to/script.js”type=”text/javascript”>script>==》scriptsrc=”path/to/script.js”>script>

3. 语义化header和footer标签
在HTML4或XHTML里,我们定义网页的页眉或页脚时会这样:

XML/HTML Code 复制内容到剪贴板
  1. divid=”header”>
  2. div>
  3. divid=”footer”>
  4. div>

而在HTML5里有直接定义上面元素块的标签,可以使代码更加的简洁和语义化

XML/HTML Code 复制内容到剪贴板
  1. header>
  2. header>
  3. footer>
  4. footer>

4. hgroup标签,它主要是表明标题的集合。如果有主标题、副标题,可以用这个来包裹一下。但是这个标签没什么大的用处,在最新的HTML5.1版中被废除了。我们如果想声明主标题和对应副标题说明,可以向下面这样。
使用标点符号分割,一般适合于文章标题,不太适合网站标题。

XML/HTML Code 复制内容到剪贴板
  1. h1>前端试题:HTML5的新特性h1>

使用span标签标注副标题说明

XML/HTML Code 复制内容到剪贴板
  1. h1>前端试题
  2. span>HTML5的新特性span>
  3. h1>

使用header标签包裹标题和描述

XML/HTML Code 复制内容到剪贴板
  1. header>
  2. h1>前端试题h1>
  3. p>HTML5的新特性p>
  4. header>

5. 标记元素 mark

XML/HTML Code 复制内容到剪贴板
  1. Themark>element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

可以把它当做高亮标签,被它包起来的字符以高亮显示。
6. 图形元素figure
在HTML4或XHTML中,下面的这些代码被用来修饰图片的注释。

XML/HTML Code 复制内容到剪贴板
  1. imgsrc=”path/to/image”alt=”About image”/>
  2. p>Image of Flowerp>

上面代码并没有将文字和图片内存联系起来,不过HTML5添加的figure和figcaption组合可以为图文完美联系起来。

XML/HTML Code 复制内容到剪贴板
  1. figure>
  2. imgsrc=”path/to/image”alt=”About image”/>
  3. figcaption>
  4. p>beautiful flowerp>
  5. figcaption>
  6. figure>

7. 重新定义了small标签
HTML5里标签将旁注呈现为小型文本,负责声明、注意事项、法律限制或版本声明的特征通常都是小型文本。
在HTML4或XHTML里已经定义过small,不过对它的使用却没有一个完整的说明。在HTML里,它主要用于网页下方的版本声明,邮箱等小型文本。
8.占位符 placeholder
在HTML4或XHTML里,如果我们想实现输入框为空时显示提示信息,输入框字段获得焦点时该提示消失的效果,只能用js写这种效果。而在HTML5添加的placeholder则直接实现了这种效果.
placeholder属性适用于以下的类型:text,search,url,telephone,email以及password.

XML/HTML Code 复制内容到剪贴板
  1. inputplaceholder=”text”>
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!