HTML5的新特点(1)

日期:2021-01-19 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

HTML5是用于替代1999年所制订的 HTML 4.01 和 XHTML 1.0 规范的 HTML [1](规范通用性标识語言下的1个运用)规范版本号;如今仍处在发展趋势环节,但绝大多数访问器早已适用一些 HTML5 技术性。

1. 新的文本文档种类申明
HTML4要求的3种文本文档种类申明:

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  要求的3种文本文档种类申明:

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标识,它关键是说明题目的结合。假如有主题目、副题目,能够用这个来包裹1下。可是这个标识没甚么大的用途,在全新的HTML5.1版中被废止了。大家假如想申明主题目和对应副题目表明,能够向下面这样。
应用标点标记切分,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,但是对它的应用却沒有1个详细的表明。在HTML里,它关键用于网页页面正下方的版本号申明,电子邮箱等小型文字。
8.占位符 placeholder
在HTML4或XHTML里,假如大家想完成键入框为空时显示信息提醒信息内容,键入框字段得到聚焦点时该提醒消退的实际效果,只能用js写这类实际效果。而在HTML5加上的placeholder则立即完成了这类实际效果.
placeholder特性可用于下列的<input>种类:text,search,url,telephone,email和password.

XML/HTML Code拷贝內容到剪贴板
  1. <input placeholder=”text”>