包含所有标记的示例HTML文档

时间:2018-12-06 09:20:34

标签: html html5

有人知道我可以在哪里找到一个单个 HTML文档,其中包含HTML5规范中每个未描述的标记的示例吗?

我想在所有浏览器中比较(此类文档的)默认样式。

如果有(或可以找到)一个示例。请在答案中张贴html以及其来源的链接。链接随着时间的流逝会变坏,因此粘贴HTML本身会随着时间的流逝保留答案的有用性。

2 个答案:

答案 0 :(得分:6)

我认为您最好的选择是自己做一个。如果您太懒了,这就是我所做的:https://pastebin.com/QU4kcJfz

<!DOCTYPE html>
<html>
<head>
    <title> TEST HTML PAGE </title>
    <meta charset="UTF-8">
    <meta name="description" content="Most of HTML5 tags">
    <meta name="keywords" content="HTML5, tags">
    <meta name="author" content="http://blazardsky.space">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
      <nav>
        <p>HEADER</p>
        <menu type="context" id="navmenu">
          <menuitem label="Home" icon="icon.png"> <a href="#">Home</a> </menuitem>
        </menu>
      </nav>
    </header>
    <main>
      <h1> Heading... </h1>
      <h2> Heading... </h2>
      <h3> Heading... </h3>
      <h4> Heading... </h4>
      <h5> Heading... </h5>
      <h6> Heading... </h6>
      <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae. <br>
        <span> span </span>
        <b>Bold word</b>
        <i>italic</i>
        <em>emphasis</em>
        <mark>mark</mark> 
        <small> small </small>
        <sub> sub </sub>
        <sup> sup </sup>
        <u> Statements... </u>
        <abbr title="National Aeronautics and Space Administration">NASA</abbr>
        <strike> strikethrough </strike>
        <span><del> deprecated info </del> <ins> new info </ins> </span>
        <s> not relevant </s>
        <a href="#link">link</a>
        <time datetime="2020-08-17 08:00">Monday at 8:00 AM</time>
        <ruby><rb>ruby base<rt>annotation</ruby>
        <br>
        <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>CANC</kbd>
      </p>      
    </main>
    
    <p> This is a <q>short quote</q> </p>
    <blockquote> This instead is a long quote that is going to use a lot of words and also cite who said that. —<cite>Some People</cite> </blockquote>

    <ol>
      <li><data value="21053">data tag</data></li>  
      <li><data value="23452">data tag</data></li> 
      <li><data value="42545">data tag</data></li>  
      <li>List item</li> 
      <li>List item</li>  
      <li>List item</li> 
    </ol>
    
    <ul>
      <li>List item</li>  
      <li>List item</li> 
      <li>List item</li>  
      <li>List item</li> 
      <li>List item</li>  
      <li>List item</li> 
    </ul>
    
    <hr>
    
    <template>
      <h2>Hidden content (after page loaded).</h2>
    </template>
    
    <video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls>
      <track kind="subtitles" src="subtitles_de.vtt" srclang="de">
      <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
      <track kind="subtitles" src="subtitles_ja.vtt" srclang="ja">
      Sorry, your browser doesn't support HTML5 <code>video</code>, but you can
      download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet Archive</a>.
    </video>

    <object data="flashmovie.swf" width="600" height="800" type="application/x-shockwave-flash">
    Please install the Shockwave plugin to watch this movie.
    </object>
    
    <pre>

                                       _,'/
                                  _.-''._:
                          ,-:`-.-'    .:.|
                         ;-.''       .::.|
          _..------.._  / (:.       .:::.|
       ,'.   .. . .  .`/  : :.     .::::.|
     ,'. .    .  .   ./    \ ::. .::::::.|
   ,'. .  .    .   . /      `.,,::::::::.;\
  /  .            . /       ,',';_::::::,:_:
 / . .  .   .      /      ,',','::`--'':;._;
: .             . /     ,',',':::::::_:'_,'
|..  .   .   .   /    ,',','::::::_:'_,'
|.              /,-. /,',':::::_:'_,'
| ..    .    . /) /-:/,'::::_:',-'
: . .     .   // / ,'):::_:',' ;
 \ .   .     // /,' /,-.','  ./
  \ . .  `::./,// ,'' ,'   . /
   `. .   . `;;;,/_.'' . . ,'
    ,`. .   :;;' `:.  .  ,'
   /   `-._,'  ..  ` _.-'
  (     _,'``------'' 
   `--''

    </pre>

    <code>
    // code tag
    #include <iostream>

    using namespace std;

    int main()
    {
        cout << "Hello World!" << endl;
        return 0;
    }
    </code>
    <p>
      <var> variable </var> = 1000;
      <samp>Traceback (most recent call last):<br>NameError: name 'variabl' is not defined</samp>
    </p>
    <table>
      <thead>
        <tr>
          <th>Numbers</th>
          <th>Letters</th>
          <th>Colors</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>123</td>
          <td>ABC</td>
          <td>RGB</td>
        </tr>
      </tfoot> 
      <tbody>
        <tr>
          <td>1</td>
          <td>A</td>
          <td>Red</td>
        </tr>
        <tr>
          <td>2</td>
          <td>B</td>
          <td>Green</td>
        </tr>
        <tr>
          <td>3</td>
          <td>C</td>
          <td>Blue</td>
        </tr>
      </tbody>
    </table>

    <p> A <dfn>definition</dfn> is an explanation of the meaning of a word or phrase. </p>

    <details>
      <summary>Summary of content below</summary>
      <p>Content 1</p>
      <p>Content 2</p>
      <p>Content 3</p>
      <p>Content 4</p>
    </details>
    <section>
      <h1>Content</h1>
      <p>Informations about content.</p>
    </section>

    <progress value="33" max="100"></progress>
    <meter value="11" min="0" max="45" optimum="40">25 out of 45</meter> 
    
    <p> 2+2 = <output>4</output> </p>

    <select>
     <optgroup label="Choice [1-3]">
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
     </optgroup>
     <optgroup label="Choice [4-6]">
       <option value="4">Four</option>
       <option value="5">Five</option>
       <option value="6">Six</option>
     </optgroup>
    </select>
    
    <div>
      <div> 
        <p> div > div > p </p>
      </div>
      
    <br>
    
    
    </div>
     <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg> 
    
    <br>
    
    <textarea id="textarea" name="textarea" rows="4" cols="50">
      Write something in here
    </textarea>
    
    <br>
    
    <audio controls>
      I'm sorry. You're browser doesn't support HTML5 <code>audio</code>.
      <source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.ogg" type="audio/ogg">
      <source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3" type="audio/mpeg">
    </audio>
    <p>This is a recording of a talk called <cite>Reclaim HTML5</cite> which was orinally delieved in Vancouver at a <a href="http://www.meetup.com/vancouver-javascript-developers/" taget="_blank">Super VanJS Meetup</a>. It is hosted by <a href="https://archive.org/details/ReclaimHtml5" target="_blank">The Internet Archive</a> and licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">CC 3.0</a>.</p>  
    
    <iframe src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A67HxeUADW4H3ERfaPW59ma?si=PogFcGg9QqapyoPbn2lVOw" width="300" height="380" frameborder="0" allowtransparency="true"></iframe> 
        
    <article>
      <header>
        <h2>Title of Article</h2>
        <span>by Arthur T. Writer</span>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat sollicitudin nisi, at convallis nunc semper et. Donec ultrices odio ac purus facilisis, at mollis urna finibus.</p>
      <figure>
        <img src="https://placehold.it/600x300" alt="placeholder-image">
        <figcaption> Caption.</figcaption>
      </figure>
      <footer> <dl> <dt>Published</dt> <dd>17 August 2020</dd> <dt>Tags</dt> <dd>Sample Posts, html example</dd> </dl> </footer>
    </article>
    
    <form>
     <fieldset>
      <legend>Personal Information</legend>
      <label for="name">Name</label><br>
      <input name="name" id="name"><br>
      <label for="dob">Date of Birth<label><br>
      <input name="dob" id="dob" type="date">
     </fieldset>
    </form>
    
    <aside>
      <p> P inside ASIDE tag </p>
    </aside>
    <map name="shapesmap"> <area shape="rect" coords="29,32,230,215" href="#square" alt="Square"> <area shape="circle" coords="360,130,100" href="#circle" alt="Circle"> </map> 
    
    <img src="https://placehold.it/100x100" alt="placeholder-image">
    
    <form action="" method="get">
      <label for="browser">Choose your browser from the list:</label>
      <input list="browsers" name="browser" id="browser">
      <datalist id="browsers">
        <option value="Edge">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
      <input type="submit">
    </form>
    
    <footer>
      <address> relevant contacts <a href="mailto:mail@example.com">mail</a>.</address>
      <div> created by <a href="https://blazardsky.space">@blazardsky</a></div>
    </footer>
    
</body>
</html>

答案 1 :(得分:1)

我发现this GitHub repository提供了一个相当完整且结构完善的网页。它仅缺少一些较长的段落来防弹您的样式(例如,如果您想使用它来设置网站的基本CSS)和一些嵌套在列表中(ulol和{{ 1}}中包含多个子级别。

如果您想尝试一下,也可以使用this one