当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5的新特性(1)

HTML5的新特性(1)

2019年07月25日  | 移动技术网IT编程  | 我要评论

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”>  

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网