html - 包含所有标签的示例 HTML 文档

标签 html

有谁知道我在哪里可以找到 单例包含 HTML5 规范中每个非弃用标签示例的 HTML 文档?

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

如果你有(或可以找到)一个例子。请在您的答案中发布 html 以及指向其来源的链接。随着时间的推移,链接会变坏,因此粘贴 HTML 本身将随着时间的推移保留您的答案的有用性。

最佳答案

我认为最好的办法是自己制作一个。如果你懒得做这里,我做了一个: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>

关于html - 包含所有标签的示例 HTML 文档,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53648090/

相关文章:

jquery - 一组具有相同值的下拉列表 - 验证

html - 视差图像未填满宽度 - Materialise

jquery - 如何在 jquery 中将 data-spy ="affix"动态更改为 data-spy ="affix-top"

html - 在移动设备上,如何将按钮保持在屏幕右侧

html - 最大宽度图像不会扩展父容器

html - 如何在表格标题下放置水平线?

javascript - Shopify 特色产品 slider

javascript - 使用 jQuery 检查所有表单输入是否为空

javascript - 通过 CSS 删除内容属性周围的边框

javascript - 捕获父DIV的高度