欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5的新特性(1)

程序员文章站 2023-01-11 09:54:35
这篇文章主要介绍了HTML5的新特性,需要的朋友可以参考下的相关资料... 16-03-03...

html5是用于取代1999年所制定的 html 4.01 和 xhtml 1.0 标准的 html [1]（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些 html5 技术。

1. 新的文档类型声明
html4规定的三种文档类型声明：

xml/html code复制内容到剪贴板
  1. <!doctype html public “-//w3c//dtd html 4.01//en””http:/www.w3.org/tr/html4/strict.dtd”>  
  2. <!doctype html public “-//w3c//dtd html4.01//en””http://www.w3.org/tr/html4/loose.dtd”>  
  3. <!doctype html public “-//w3c//dtd html4.01//en””http://www.w3.org/tr/html4/frameset.dtd”>  

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

xml/html code复制内容到剪贴板
  1. <!doctype html public “-//w3c//dtd xhtml 1.0 strict//en””http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd”>  
  2. <!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en””http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd”>  
  3. <!doctype 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. <!doctype html public “-//w3c//dtd xhtml 1.1//en””http://www.w3.org/tr/xhtml11/dtd/xhtml1.dtd”>  

html 5的文档类型声明

xml/html code复制内容到剪贴板
  1. <!doctype html>  

2. script和link里不需要写type

xml/html code复制内容到剪贴板
  1. <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />   ==》  <link rel=”stylesheet” href=”path/to/stylesheet.css”/>  
  2. <script src=”path/to/script.js” type=”text/javascript”></script>    ==》  <script src=”path/to/script.js”></script>  

3. 语义化header和footer标签
在html4或xhtml里，我们定义网页的页眉或页脚时会这样：

xml/html code复制内容到剪贴板
  1. <div id=”header”>  
  2. …   
  3. </div>  
  4. 或   
  5. <div id=”footer”>  
  6. …   
  7. </div>  

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

xml/html code复制内容到剪贴板
  1. <header>  
  2. …   
  3. </header>  
  4. 或   
  5. <footer>  
  6. …   
  7. </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. the <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.  

可以把它当做高亮标签，被它包起来的字符以高亮显示。<mark>…</mark>
6. 图形元素figure
在html4或xhtml中，下面的这些代码被用来修饰图片的注释。

xml/html code复制内容到剪贴板
  1. <img src=”path/to/image” alt=”about image”/>  
  2. <p>image of flower</p>  

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

xml/html code复制内容到剪贴板
  1. <figure>  
  2. <img src=”path/to/image” alt=”about image”/>  
  3. <figcaption>  
  4.     <p>beautiful flower</p>  
  5. <figcaption>  
  6. </figure>  

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

xml/html code复制内容到剪贴板
  1. <input placeholder=”text”>  

上一篇： 簋街有什么好吃的，这些美食你一定不能错过

下一篇： 阿胶怎么吃的？原来有这么多讲究

推荐阅读