HTML5全部标识汇总及标识实际意义解释

日期:2020-09-17 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

构造标识:(块状元素) 成心义的div

<article>    标识界定1篇文章内容
<header>     标识界定1个网页页面或1个地区的头顶部
<nav>        标识界定导航栏连接
<section>    标识界定1个地区
<aside>      标识界定网页页面內容一部分的侧面栏
<hgroup>     标识界定文档中1个区块的有关信息内容
<figure>     标识界定1组新闻媒体內容和它们的题目  
<figcaption> 标识界定 figure 元素的题目。
<footer>     标识界定1个网页页面或1个地区的底部
<dialog>     标识界定1个会话框(对话框)相近手机微信

多新闻媒体互动标识

<video>  标识界定1个视頻
<audio>  标识界定声频內容
<source> 标识界定新闻媒体資源
<canvas> 标识界定照片
<embed>  标识界定外界的可互动的內容或软件 例如flash

Web运用标识

<menu>指令目录
<menuitem>menu指令目录标识 FF(嵌入系统软件)
<command> menu标识界定1个指令按钮
<meter>情况标识(即时情况显示信息:气压、气温)C、O
<progress>情况标识 (每日任务全过程:安裝、载入) C、F、O
<datalist> 为input标识界定1个往下拉目录,相互配合option F、O
<details> 标识界定1个元素的详尽內容 ,相互配合dt、dd   C

注解标识

<ruby> 标识界定 注解或音标
<rp> 告知那些不适用 Ruby元素的访问器怎样去显示信息
<rt> 标识界定对ruby的注解內容文字

别的标识

<keygen> 标识界定表单里1个转化成的键值(数据加密信息内容传输)O、F
<mark> 标识界定有标识的文字 (黄色选定情况)
<output> 标识界定1些輸出种类,测算表单結果相互配合oninput事

删掉的HTML标识

纯主要表现的元素:
basefont,big,center,font, s,strike,tt,u;

对能用性造成负面危害的元素:
frame,frameset,noframes;

造成搞混的元素:
acronym ,applet,isindex,dir

再次界定的HTML标识

<b>  意味着内联文字,一般是粗体,沒有传送表明关键的意思
<i>  意味着内联文字,一般是斜体,沒有传送表明关键的意思
<dd> 能够同details与figure1同应用,界定包括文字,dialog也能用
<dt> 能够同details与figure1同应用,汇总细节,dialog也能用
<hr> 表明主题完毕,而并不是水平线,尽管显示信息同样
<menu> 再次界定客户页面的菜单,相互配合commond或menuitem应用
<small> 表明小字体样式,比如复印注解或法律法规条款
<strong> 表明关键性而并不是强调标记

示例编码:

XML/HTML Code拷贝內容到剪贴板
  1. <xmp>  
  2. <!doctype html>  
  3. <html>  
  4.     <head>  
  5.         <style>  
  6.               
  7.               
  8.             header{height:150px;background:#ABCDEF}   
  9.             nav{height:30px;background:#ff9900;margin-top:100px}   
  10.             nav ul li{width:100px;height:30px;float:left;line-height:30px}   
  11.               
  12.             div{margin-top:10px;height:1000px;}   
  13.             section{height:1000px;background:#ABCDEF;width:70%;float:left}   
  14.             article{background:#F90;width:500px;margin:0 auto;text-align:center}   
  15.               
  16.             aside{height:1000px;background:#ABCDEF;width:28%;float:right}   
  17.               
  18.             footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}   
  19.         </style>  
  20.     </head>  
  21.     <body>  
  22.         <header>  
  23.             <p>这是1个header标识</p>  
  24.             <nav>  
  25.                 <ul>  
  26.                     <li>主页</li>  
  27.                     <li>起夜</li>  
  28.                     <li>论坛</li>  
  29.                     <li>商城</li>  
  30.                     <li>小区</li>  
  31.                 </ul>  
  32.             </nav>  
  33.         </header>  
  34.         <div>  
  35.             <section>  
  36.                 <p>这是1个section标识</p>  
  37.                 <article>  
  38.                     <h2>春晓</h2>  
  39.                     <p>  
  40.                     春眠不觉晓,<br />  
  41.                     随处蚊子咬,<br />  
  42.                     打上敌敌畏,<br />  
  43.                     不至死是多少。<br />  
  44.                     </p>  
  45.                   
  46.                 </article>  
  47.                 <hr />  
  48.                 <article>  
  49.                     <h2>念书歌</h2>  
  50.                     <p>  
  51.                     太阳当空照,<br />  
  52.                     花儿对我笑,<br />  
  53.                     小鸟说早早早,你为何背上小书包?<br />  
  54.                     我要炸院校老师不知道道,1拉线,赶紧跑,<br />  
  55.                     轰的1声,院校炸没了。<br />  
  56.                     </p>  
  57.                   
  58.                 </article>  
  59.                 <hr />  
  60.                 <figure>  
  61.                     <figcaption>UFO</figcaption>  
  62.                     <p>不明航行物 Unknown Flying Object</p>  
  63.                 </figure>  
  64.                 <figure>  
  65.                      <dt>DDS</dt>  
  66.                      <dd>大屌丝</dd>  
  67.                 </figure>  
  68.                 <hr />  
  69.                 <dialog>  
  70.                     <dt>唐僧:悟空,你又顽皮了,观音姐姐的月光宝盒如何能乱扔呢?</dt>  
  71.                     <dd>悟空:...(看着)</dd>  
  72.                     <dt>唐僧:乱扔是不对的,砸到小盆友如何办?即使砸不到小盆友,砸到小编草草也是不太好的嘛</dt>  
  73.                     <dd>悟空:...(纠结)</dd>  
  74.                     <dt>唐僧:悟空你要想么?要想你就告知我呀,你不告知我如何了解你要想呢?。。。。</dt>  
  75.                     <dd>悟空:我靠!(1木棍抡上去!)</dd>  
  76.                 </dialog>  
  77.                 <hr />  
  78.                 <menu>  
  79.                     <li>点一下</li>  
  80.                     <li>右键点击</li>  
  81.                 </menu>  
  82.                 <hr />  
  83.                 <span contextmenu="candan">右键点击我试试</span>  
  84.                 <menu type="context" id="candan">  
  85.                     <menuitem label="菜单1" onclick="alert('我是1个孤单')" icon="http://www.baidu.com/img/baidu_sylogo1.gif"></menuitem>  
  86.                 </menu>  
  87.                 <hr />  
  88.                 <meter min="0" max="10" value="5" low="3" high="7" ></meter>  
  89.                 <progress max="100" value="0" id="pro"></progress>  
  90.                 <script>  
  91.                     var pro =document.getElementByIdx_x_x_x('pro');   
  92.                     setInterval(function(){   
  93.                         pro.value+=1;   
  94.                     },100);   
  95.                 </script>  
  96.                 <hr />  
  97.                 <details>  
  98.                     <dt>这是1个难题?</dt>  
  99.                     <dd>to be or not to be</dd>  
  100.                     <dt>这是1个难题?</dt>  
  101.                     <dd>to be or not to be</dd>  
  102.                     <dt>这是1个难题?</dt>  
  103.                     <dd>to be or not to be</dd>  
  104.                 </details>  
  105.                 <hr />  
  106.                 <ruby><rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>  
  107.                 <hr />  
  108.                 女性<mark>最喜爱做的事儿</mark>便是逛街。。。吃零食。。逛街。。吃零食,有时候还会呜呜的哭,   
  109.                 因而总结了下女性:逛吃逛吃逛吃逛吃。。。呜呜呜~·   
  110.             </section>  
  111.             <aside>  
  112.                 <p>这是1个aside标识</p>  
  113.                 <hgroup>  
  114.                     <h3>女生寝室为什么不断被盗</h3>  
  115.                     <h3>两百头母猪为什么深夜惨死</h3>  
  116.                     <h3>是人的本性的歪曲?</h3>  
  117.                     <h3>還是社会道德的沦丧!</h3>  
  118.                 </hgroup>  
  119.             </aside>  
  120.         </div>  
  121.         <footer>  
  122.             <p>这是1个footer标识</p>  
  123.             <hr />  
  124.             <small>法律法规条文</small>  
  125.             <small>联络大家</small>  
  126.             <small>顾客建议</small>  
  127.             <small>商户协作</small>  
  128.         </footer>  
  129.     </body>  
  130. </html>  
  131. </xmp>