欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5的新特征(1)

发布时间:2016-12-02  编辑:杨雨个人博客网站   点击:   

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”>  
本文地址:http://itbyc.com/web/html5/14378.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1