zoukankan      html  css  js  c++  java
  • HTML/CSS基础知识(二)

    Q:HTML5是什么?为什么要用HTML5?有什么新特性?移除了哪些元素

    1. HTML5是HTML的最新版本,2014年10月由万维网联盟(W3C)完成标准制定。目标是替换1999年制定的HTML4.01和XHTML1.0标准,以期望能在互联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求。HTML5指的是包括HTML,CSS和Javascript在内的一套技术组合。它希望能够减少网页浏览器对基于插件的网络应用服务(Plug-in-Based Rich Internet Application,RIA),例如:Adobe Flash、MicroSoft Silverlight和Oracle JavaFX 的需求,并且提供更多能有效加强网络应用的标准集。
    2. HTML4过于陈旧,不能满足日益发展的互联网需要,特别是移动互联网。此外,flash等插件由于种种原因不适合在移动端使用。HTML5增强了浏览器的原生功能,减少了web应用对插件的依赖。
    3. HTML5新增了27个元素,废弃了16个元素。根据现有的标准规范,把HTML5的元素按照优先级定义为结构性元素、块级元素、行内语义性元素和交互性元素4大类。
      • 结构性元素主要负责web上下文结构的定义
        • section:在web页面应用中,改元素也可以用于区域的章节描述

        • header:页面主题上的头部,header元素往往在一对body元素中

        • footer:页面的底部(页脚),通常会标出网站的相关信息

        • nav:专门用于菜单导航、链接导航的元素,是navigator的缩写

        • article:用于表现一篇文章的主题内容,一般为文字几种显示的区域

      • 块级元素主要完成web页面区域的划分,确保内容的有效分割
        • aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容
        • figure:是对多个元素进行组合并展示的元素,通常与ficaption联合使用
        • code:表示一段代码
        • dialog:用于表达人与人之间的对话,该元素包含dt和dd这两个组合元素,dt表示用于说话者,dd表示说话内容
      • 行内语义性元素主要完成web页面具体内容的引用和描述,丰富内容展示
        • meter:表示特定范围内的数值,可用于工资、数量、百分比
        • time:表示时间值
        • progress:用来表示进度条,可通过对其使用max、min、step等属性进行控制,完成对进度条的表示和监视
        • video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预加载和多种音频、视频媒体格式
        • audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预加载和多种音频媒体格式
      • 交互性元素只要用于功能性的内容表达,会有一定的内容和数据关联,是各种事件的基础
        • details:用于表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与legend交互才会显示出来
        • daragrid:用来控制客户端数据与显示,可以由动态脚本及时更新
        • menu:主要用于交互菜单
        • command:用来处理命令按钮

       4. 移除的元素

      • 纯表现型元素
        • <basefont>默认字体,不设置字体
        • <font>字体标签
        • <center>水平居中
        • <u>下划线
        • <strike>中横线
        • <tt>文本等宽
      • 框架集
        • <frameset>
        • <noframes>
        • <frame>

    Q:HTML(含H5)块级元素、内联元素和空元素

    • 块级元素特点:display:block
      • 总是在新行开始;
      • 高度、行高以及内外边距都可控制
      • 宽度缺省为容器的100%
      • 可以容纳内联元素和其他元素
    • 内联元素特点:display:inline
      • 可以和其他元素显示在同一行
      • 高度、行高以及内外边距部分可改变
      • 宽度为内容宽度
      • 只能容纳其他内联元素和文本 
    不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,
    只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用

     块级元素:
    • <address> 标签定义文档或文章的作者/拥有者的联系信息。
      <address>
      Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
      Visit us at:<br>
      Example.com<br>
      Box 564, Disneyland<br>
      USA
      </address>
    • <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。注释:所有主流浏览器都支持 <area> 标签。
      <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
      
      <map name="planetmap" id="planetmap">
        <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
        <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
        <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
      </map>
    • <article> 标签规定独立的自包含内容。注释:Internet Explorer 8 以及更早的版本不支持 <article> 标签。H5新

      <article>
        <h1>Internet Explorer 9</h1>
        <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
      </article>
    • <aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。注释:Internet Explorer 8 以及更早的版本不支持 <aside> 标签。H5新

      <p>Me and my family visited The Epcot center this summer.</p>
      <aside>
      <h4>Epcot Center</h4>
      The Epcot Center is a theme park in Disney World, Florida.
      </aside>
    • <audio> 标签定义声音,比如音乐或其他音频流。注释:Internet Explorer 8 以及更早的版本不支持 <audio> 标签。H5新
      <audio src="someaudio.wav">
      您的浏览器不支持 audio 标签。
      </audio>
    • <blockquote> 标签定义块引用。

      <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。注释:所有主流的浏览器均支持 <blockquote> 标签,没有浏览器能够正确地显示 cite 属性(引用的来源)。

      <blockquote>
      Here is a long quotation here is a long quotation here is a long quotation 
      here is a long quotation here is a long quotation here is a long quotation 
      here is a long quotation here is a long quotation here is a long quotation.
      </blockquote>
    • body 元素定义文档的主体。
      <html>
      
      <head>
        <title>文档的标题</title>
      </head>
      
      <body>
        文档的内容... ...
      </body>
      
      </html>
    • <br> 换行符。空标签——没有结束标签,应该把结束标签和开始标签写在一起,记做<br />
    • <canvas> 标签定义图形,比如图表和其他图像。<canvas> 标签只是图形容器,必须使用脚本来绘制图形。H5新

      <canvas id="myCanvas"></canvas>
      
      <script type="text/javascript">
      
      var canvas=document.getElementById('myCanvas');
      var ctx=canvas.getContext('2d');
      ctx.fillStyle='#FF0000';
      ctx.fillRect(0,0,80,100);
      
      </script>
    • <caption> 元素定义表格标题。<caption> 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

      <table border="1">
        <caption>Monthly savings</caption>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
      </table>
    • <col> 标签为表格中一个或多个列定义属性值。空标签
      <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <tr>
          <th>ISBN</th>
          <th>Title</th>
          <th>Price</th>
        </tr>
        <tr>
          <td>3476896</td>
          <td>My first HTML</td>
          <td>$53</td>
        </tr>
      </table>
    • <colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。

      <colgroup> 标签只能在 table 元素中使用。两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式(注意第一个 colgroup 元素横跨两列)

      <table width="100%" border="1">
        <colgroup span="2" align="left"></colgroup>
        <colgroup align="right" style="color:#0000FF;"></colgroup>
        <tr>
          <th>ISBN</th>
          <th>Title</th>
          <th>Price</th>
        </tr>
        <tr>
          <td>3476896</td>
          <td>My first HTML</td>
          <td>$53</td>
        </tr>
      </table> 
    • command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。注释:目前没有浏览器支持。H5新

      <menu>
      <command onclick="alert('Hello World')">
      Click Me!</command>
      </menu>
    • <datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。(id要与input中list属性值绑定),H5新

      <input id="myCar" list="cars" />
      <datalist id="cars">
        <option value="BMW">
        <option value="Ford">
        <option value="Volvo">
      </datalist>
    • dl:列表 dt:列表项目 dd:项目描述
      <dl>
         <dt>计算机</dt>
         <dd>用来计算的仪器 ... ...</dd>
         <dt>显示器</dt>
         <dd>以视觉方式显示信息的装置 ... ...</dd>
      </dl>
    • <del> 定义文档中已被删除的文本;<ins>标签定义已经被插入文档中的文本,组合使用!
      a dozen is <del>20</del> <ins>12</ins> pieces
    • <details> 标签用于描述文档或文档某个部分的细节。<summary> 标签包含 details 元素的标题。注释:目前只有 Chrome 和 Safari 6 支持 <details> 标签。H5新
      <details>
      <summary>Copyright 2011.</summary>
      <p>All pages and graphics on this web site are the property of W3School.</p>
      </details>
    • <div>定义文档中的分区或节(division/section)
      <div></div> 
    • <dialog> 标签定义对话框或窗口。注释:目前只有 Chrome 和 Safari 6 支持 <dialog> 标签。
      <table border="1">
      <tr>
        <th>一月 <dialog open>这是打开的对话窗口</dialog></th>
        <th>二月</th>
        <th>三月</th>
      </tr>
      <tr>
        <td>31</td>
        <td>28</td>
        <td>31</td>
      </tr>
      </table>
    • fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

      <form>
        <fieldset>
          <legend>health information</legend>
          height: <input type="text" />
          weight: <input type="text" />
        </fieldset>
      </form>
    • <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。注释:Internet Explorer 8 以及更早的版本不支持 <figure> 标签。H5新

      <figure>
        <p>黄浦江上的的卢浦大桥</p>
        <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
      </figure>
    • <figcaption> 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。注释:Internet Explorer 8 以及更早的版本不支持 <figure> 标签。H5新

      <figure>
        <figcaption>黄浦江上的的卢浦大桥</figcaption>
        <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
      </figure>
    • <footer> 标签定义文档或节的页脚。<footer> 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个 <footer> 元素。注释:Internet Explorer 8 以及更早的版本不支持 <footer> 标签。H5新

      <footer>
        <p>Posted by: W3School</p>
        <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
      </footer>
    • <form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menustextareafieldsetlegend 和 label 元素。表单用于向服务器传输数据。

      <form action="form_action.asp" method="get">
        <p>First name: <input type="text" name="fname" /></p>
        <p>Last name: <input type="text" name="lname" /></p>
        <input type="submit" value="Submit" />
      </form>
    • <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

      <h1>这是标题 1</h1>
      <h2>这是标题 2</h2>
      <h3>这是标题 3</h3>
      <h4>这是标题 4</h4>
      <h5>这是标题 5</h5>
      <h6>这是标题 6</h6> 
    • <head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

      文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

      下面这些标签可用在 head 部分:<base><link><meta><script><style>, 以及 <title>(title必不可少)。

      <html>
      <head>
        <title>文档的标题</title>
      </head>
      <body>
        文档的内容... ...
      </body>
      </html>
    • <header> 标签定义文档的页眉(介绍信息)。H5新
      <header>
      <h1>Welcome to my homepage</h1>
      <p>My name is Donald Duck</p>
      </header>
    • <hr> 标签在 HTML 页面中创建一条水平线。<hr />空标签

      <h1>This is header 1</h1>
      <hr />
      <p>This is some text</p>
    • <html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义,而主体由 <body> 标签定义。
    • <iframe> 元素会创建包含另外一个文档的内联框架(即行内框架)。提示:把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。
    • <legend> 元素为 fieldset 元素定义标题(caption)。
      <form>
        <fieldset>
          <legend>health information</legend>
          height: <input type="text" />
          weight: <input type="text" />
        </fieldset>
      </form>
    • <li> 标签定义列表项目。<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

      <ol>
         <li>Coffee</li>
         <li>Tea</li>
         <li>Milk</li>
      </ol>
      
      <ul>
         <li>Coffee</li>
         <li>Tea</li>
         <li>Milk</li>
      </ul>  
    • <link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。

      <head>
      <link rel="stylesheet" type="text/css" href="theme.css" />
      </head>  
    • <map>定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
      <map name="planetmap" id="planetmap">
        <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
        <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
        <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
      </map> 
    • <menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。注释:目前所有主流浏览器都不支持 <menu> 标签。

    • <menuitem> 标签定义用户可以从弹出菜单调用的命令/菜单项目。注释:Firefox 8.0 以及更高的版本支持 <menuitem> 标签。H5新
      <menu type="context" id="mymenu">
        <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
        </menuitem>
        <menu label="Share on...">
          <menuitem label="Twitter" icon="ico_twitter.png"
          onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
          </menuitem>
          <menuitem label="Facebook" icon="ico_facebook.png"
          onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
          </menuitem>
        </menu>
        <menuitem label="Email This Page"
        onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
      </menu> 
    • <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

    • <nav> 标签定义导航链接的部分。H5新
      <nav>
      <a href="index.asp">Home</a>
      <a href="html5_meter.asp">Previous</a>
      <a href="html5_noscript.asp">Next</a>
      </nav>
    • <ol> 标签定义有序列表。
      <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
    • <optgroup> 标签定义选项组。optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

      <select>
        <optgroup label="Swedish Cars">
          <option value ="volvo">Volvo</option>
          <option value ="saab">Saab</option>
        </optgroup>
      
        <optgroup label="German Cars">
          <option value ="mercedes">Mercedes</option>
          <option value ="audi">Audi</option>
        </optgroup>
      </select>
    • option 元素定义下拉列表中的一个选项(一个条目)。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。

      <select>
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>  
    • <p> 标签定义段落。
      <p>This is some text in a very short paragraph</p>
    • pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。

      输出结果:

      <pre>
      <html>
      
      <head>
        <script type="text/javascript" src="loadxmldoc.js">
      </script>
      </head>
      
      <body>
      
        <script type="text/javascript">
          xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");
          document.write("xmlDoc is loaded, ready for use");
        </script>
      
      </body>
      
      </html>
      </pre>
    • <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
      <section>
        <h1>PRC</h1>
        <p>The People's Republic of China was born in 1949...</p>
      </section>
    • <source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。H5新

      <audio controls>
         <source src="horse.ogg" type="audio/ogg">
         <source src="horse.mp3" type="audio/mpeg">
       Your browser does not support the audio element.
      </audio>   
    • <summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。H5新
      <details>
      <summary>HTML 5</summary>
      This document teaches you everything you have to learn about HTML 5.
      </details>
    • <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

      更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

    • <tr> 标签定义 HTML 表格中的行。<th>定义表格内的表头单元格。<td> 标签定义 HTML 表格中的标准单元格。

      <table border="1">
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
      </table>
    • <tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。<thead> 标签定义表格的表头。<tfoot> 标签定义表格的页脚(脚注或表注)。
      <table border="1">
        <thead>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td>Sum</td>
            <td>$180</td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
        </tbody>
      </table>
    • <title> 元素可定义文档的标题。不可或缺!
    • <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。H5新

      <video width="320" height="240" controls="controls">
        <source src="forrest_gump.mp4" type="video/mp4" />
        <source src="forrest_gump.ogg" type="video/ogg" />
        <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
        <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
      </video>
    • <ul> 标签定义无序列表。
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
    • <video> 标签定义视频,比如电影片段或其他视频流。H5新
      <video src="movie.ogg" controls="controls">
      您的浏览器不支持 video 标签。
      </video>

      内联元素:

    • <a> 标签定义超链接,用于从一张页面链接到另一张页面。注释:所有浏览器都支持 <a> 标签。
      <a href="http://www.baidu.com">百度</a>  
    • <abbr> 标签指示简称或缩写,比如 "WWW" 或 "NATO"。注释:IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签
      The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
    • <address> 标签定义文档或文章的作者/拥有者的联系信息。注释:所有浏览器都支持 <address> 标签。
      <address>
      Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
      Visit us at:<br>
      Example.com<br>
      Box 564, Disneyland<br>
      USA
      </address>
    • <bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。注释:目前只有 Firefox 和 Chrome 支持 <bdi> 标签。H5新
      <ul>
      <li>Username <bdi>Bill</bdi>:80 points</li>
      <li>Username <bdi>Steve</bdi>: 78 points</li>
      </ul>
      
    • <bdo> 元素可覆盖默认的文本方向。注释:所有浏览器都支持 <bdo> 标签。
      <bdo dir="rtl">Here is some text</bdo>
    • <button> 标签定义一个按钮。在 button 元素内部,可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。请为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。注释:所有浏览器都支持,如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

      <button type="button">Click Me!</button>
    • <embed> 标签定义嵌入的内容,比如插件。H5新
      <embed src="helloworld.swf" />  
    • img 元素向网页中嵌入一幅图像。<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。<img> 标签有两个必需的属性:src 属性 和 alt 属性空标签
      <img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />  
    • <input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。空标签

      <form action="form_action.asp" method="get">
        First name: <input type="text" name="fname" />
        Last name: <input type="text" name="lname" />
        <input type="submit" value="Submit" />
      </form>
    • <keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。空标签

      <form action="demo_keygen.asp" method="get">
      Username: <input type="text" name="usr_name" />
      Encryption: <keygen name="security" />
      <input type="submit" />
      </form> 
    • <label> 标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
      <form>
        <label for="male">Male</label>
        <input type="radio" name="sex" id="male" />
        <br />
        <label for="female">Female</label>
        <input type="radio" name="sex" id="female" />
      </form> 
    • <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。注释:Internet Explorer 8 以及更早的版本不支持 <mark> 标签。H5新
      <p>Do not forget to buy <mark>milk</mark> today.</p>
    • <meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

      例子:磁盘用量、查询结果的相关性,等等。注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。注释:IE不支持。H5新

      <meter value="3" min="0" max="10">十分之三</meter>
      
      <meter value="0.6">60%</meter>  
    • <output> 标签定义不同类型的输出,比如脚本的输出。注释:IE不支持。H5新
      <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
         <input type="range" id="a" value="50">100
         +<input type="number" id="b" value="50">
         =<output name="x" for="a b"></output>
      </form>  
    • <progress> 标签标示任务的进度(进程)。H5新
      <progress value="22" max="100"></progress> 
    • <ruby> 标签定义 ruby 注释(中文注音或字符)。在东亚使用,显示的是东亚字符的发音。与 <ruby> 以及 <rt> 标签一同使用:

      ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。H5新                <rt> 标签定义字符(中文注音或字符)的解释或发音。<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

      <ruby>
      漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
      </ruby> 
    • <span> 标签被用来组合文档中的行内元素。
      <p><span>some text.</span>some other text.</p>
    • <sub> 标签可定义下标文本。<sup> 标签可定义上标文本。提示:无论是 <sub> 标签还是和它对应的 <sup> 标签,在数学等式、科学符号和化学公式中都非常有用。
      <sub>下标</sub>
      <sup>上标</sup> 
    • <time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。H5新
      <p>我们在每天早上 <time>9:00</time> 开始营业。</p>
      
      <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
    • Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

      提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。

      <p>
      如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
      </p>
    • <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签

      <em>	把文本定义为强调的内容。
      <strong>	把文本定义为语气更强的强调的内容。
      <dfn>	定义一个定义项目。
      <code>	定义计算机代码文本。
      <samp>	定义样本文本。
      <kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
      <var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
      <cite>	定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。
    • <tt> <i> <b> <big> <small> 标签

      <tt>	呈现类似打字机或者等宽的文本效果。
      <i>	显示斜体文本效果。
      <b>	呈现粗体文本效果。
      <big>	呈现大号字体效果。
      <small>	呈现小号字体效果。
  • 相关阅读:
    mysql nulls first nulls last解决方案
    解决Incorrect integer value: '' for column 'id' at row 1的方法
    Centos 7.4忘记密码的情况下,修改root密码
    解决pom文件第一行报错(unknown)-亲测有效
    快慢指针应用总结
    gRPC 小记
    [3D跑酷] DataManager
    [3D跑酷] GameManager
    发布资源到Asset Store
    真人动作捕捉系统 for Unity
  • 原文地址:https://www.cnblogs.com/bestchenyan/p/9296937.html
Copyright © 2011-2022 走看看