发表新帖
发表新帖

HTML page with (most) all elements, for styling

后端 未结
关注
3 1740
闹比i
闹比i 2021-01-31 11:30

Does anyone have or know of an HTML page containing all the elements (with lipsum text or whatever)? I could make one, but I figured someone must have already done this.

相关标签:
3条回答
  • 南笙
    2021-01-31 11:54

    https://github.com/mrmrs/html

    • All non-media elements in the HTML5 spec are included on one page and are ready to be styled.
    • Modular Structure - add your own patterns, or delete the ones you don't like.
    • Semantic and accessible markup examples for common design patterns.
    • Thoroughly commented code (notes and reference links for new HTML developers)
    0 讨论(0)
  • 无人共我
    2021-01-31 12:04

    A sample page with (almost) all HTML elements can be found at:

    http://www.cs.tut.fi/~jkorpela/www/testel.html

    I find the Yahoo base and reset stylesheets quite useful for this purpose. They are designed specifically to give you a clean slate and are based on w3 guide lines. It is also worth looking at their grid and font css tools.

    I hope this helps.

    0 讨论(0)
  • 感情败类
    2021-01-31 12:06

    I am not sure does my HTML contain all elements or not but this is I am currently in use for styling typo & form.

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>HTML for styling</title>
        <!--add your css here-->
    </head>
    <body>
        <h1>Typography</h1>
        <hr>
        <h1>Heading level 1</h1>
        <h2>Heading level 2</h2>
        <h3>Heading level 3</h3>
        <h4>Heading level 4</h4>
        <h5>Heading level 5</h5>
        <h6>Heading level 6</h6>


        <h2>Paragraph</h2>
        <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. In id risus quis purus mollis lobortis vel ac tellus. Nam pharetra lorem quis dui commodo dapibus. Curabitur aliquet sapien vitae ligula pretium sollicitudin. Sed sed magna eu risus placerat gravida non sit amet augue. Morbi volutpat lobortis imperdiet. Sed elit purus, commodo a mi in, condimentum sagittis urna. Etiam condimentum pharetra cursus. Aliquam erat volutpat. In vel diam nulla. Praesent faucibus augue quis dui vehicula, a consequat est fringilla. Sed nec nisi fermentum, maximus nunc ac, hendrerit lorem. Proin mollis metus in erat dictum egestas. Proin nec ipsum viverra, scelerisque nisi in, faucibus nulla.</p>
        <p>Aliquam erat volutpat. Donec sagittis libero ac justo suscipit laoreet. Suspendisse ut sem vel augue vulputate sodales blandit sit amet metus. Quisque porta consectetur efficitur. Duis venenatis nisl in mollis convallis. Pellentesque quis accumsan orci. Nulla porta arcu quis laoreet sagittis. Aliquam erat volutpat. Suspendisse sagittis, turpis vel posuere suscipit, dolor nunc sodales est, quis cursus dui elit vel nisl.</p>
        <p>Nunc accumsan molestie nisl non malesuada. In egestas tellus lectus, nec venenatis tellus pulvinar vel. Fusce consectetur sodales ante, sed vehicula mauris pulvinar non. Cras tempor ante nec nibh iaculis aliquet. In quis velit non dui dapibus tempus quis sed velit. Morbi a ornare sem. Maecenas ornare molestie ex, sed maximus lorem viverra at. In tincidunt vel purus et suscipit. Aenean aliquam neque et ipsum volutpat, eu laoreet justo vestibulum. Maecenas quam turpis, convallis id nibh efficitur, interdum volutpat elit. Suspendisse potenti. Nulla in vulputate massa.</p>
        <p>Quisque laoreet tincidunt massa, non pulvinar eros euismod sit amet. Maecenas non lorem vitae lorem condimentum posuere. Maecenas ac lectus elit. Nullam feugiat scelerisque interdum. Nullam volutpat tincidunt viverra. Suspendisse egestas venenatis orci. Nunc vehicula ut dolor aliquet finibus.</p>
        <p>Donec tempus vestibulum odio vel consectetur. Donec sed feugiat tortor. Mauris iaculis nunc in orci suscipit, vel egestas orci pulvinar. In dapibus tortor ornare, eleifend eros eu, suscipit neque. Morbi quis pellentesque turpis, sit amet imperdiet augue. Mauris porttitor congue imperdiet. Quisque aliquet id quam a placerat. Fusce maximus in nibh vel ultricies.</p>
        <p>Normal, <abbr title="Abbreviations">abbr</abbr>, <del>del</del>, <dfn>dfn</dfn>, <em>em</em>, <ins>ins</ins>, <mark>mark</mark>, <s>strike through</s>, <small>small</small>, <strong>strong</strong>, <sub>sub</sub>, <sup>sup</sup>, <u>u</u></p>
        <h3>Thai language</h3><!--for checking unicode/multi languages support-->
        <p>กาญจน์ ซังเตผลักดันม้ง แฟนซีอิ่มแปร้ นายพรานยูโร เมคอัพ แรงใจซัพพลายเจ็ต ลอจิสติกส์ คีตกวีแหวว งั้นวิก ฟีดม้งโปรโมทตัวเองแพนดา เวสต์เอนทรานซ์ บรรพชนแบล็คภควัมปติซูฮก ตัวตนโมเดิร์นอัลมอนด์คาแร็คเตอร์ เซลส์แมน ศึกษาศาสตร์เก๋ากี้เช็งเม้งกระดี๊กระด๊าซิง มาม่าโลโก้ฟาสต์ฟู้ดคอมพ์</p>
        <p>แอปเปิ้ลแมกกาซีนยาวี ไอซียูปัจเจกชนเป่ายิ้งฉุบไฮไลท์เตี๊ยม ซีรีส์กัมมันตะแม่ค้าโอเลี้ยงวิน เลิฟต่อยอดผลไม้ พงษ์ดิกชันนารีซูม นิรันดร์ไฟลต์โดมิโน คันธาระเทค ควีนแรงดูดโค้ชแมชชีน ก่อนหน้ารีสอร์ทฮ็อตด็อกเฝอเบลอ ราชานุญาตออร์เดอร์วอเตอร์รุสโซแซมบ้า ก๊วนเหมยโหลยโท่ยซินโดรมดยุค ซื่อบื้อมาร์จินสต๊อกแม่ค้าเฟรชชี่ เพรสโฮสเตสคลับลาเต้ ตัวเองแทคติคฟีเวอร์แอ๊บแบ๊วลิมิต เจล น้องใหม่ซีรีส์แบคโฮแอดมิชชั่นเบนโล</p>
        <p>เฟอร์รี่ เยอบีราแรงผลักเดบิต ราเม็งซีรีส์วาริชศาสตร์แจ๊สสามช่า บึมหน่อมแน้ม แรลลี ไฟต์คอรัปชั่น โมเดิร์นซิตี้เอ็นจีโอป๊อกเซลส์แมน เปปเปอร์มินต์ ไลฟ์พงษ์ศิลปวัฒนธรรมล็อบบี้เทียมทาน ฮ่องเต้หลวงตาบลอนด์ แรงใจแมชชีนเทวาป๋าเธค โพลารอยด์โกลด์สเตชันบอมบ์หมั่นโถว แฮนด์จูนแอลมอนด์ งี้ป๋อหลอสังโฆสี่แยกโพสต์ จูนคอมเพล็กซ์แฟนตาซีเนิร์สเซอรี่ ซานตาคลอสผลไม้เนอะ</p>
        <p>เตี๊ยมแพนดาโบว์ลิ่ง โนติสล้มเหลวแจมหมั่นโถวแจ็กเก็ต พลานุภาพแจ็กพอตโหงว เจ็ต เช็ก เทคโนแครตสุนทรีย์ ทิป จิ๊กซอว์เทียมทานสเตย์ทอล์คบาลานซ์ เพรียวบางเลคเชอร์โฟล์ค กรอบรูป พาสปอร์ตคอรัปชั่นเปโซแมชีนเกจิ มั้ย ยาวี โคโยตี้เลกเชอร์เรตถ่ายทำติ๋ม มั้ยแจ๊กพ็อต สปอร์ตเธค</p>
        <p>เมี่ยงคำ โรแมนติกโทรโข่งไคลแมกซ์เยลลี่ วิวรุมบ้า เดอะ พลานุภาพยิวเสือโคร่งเยนไฟต์ เพลซโครนาเวสต์โหลน สวีทระโงกช็อต จุ๊ยคอนโด สามแยกเอาต์เฝอ เทรลเล่อร์รอยัลตี้แอปเปิ้ลซีรีส์แจ็กพ็อต ทำงานโค้ช สต็อกศิลปวัฒนธรรมศากยบุตร รีโมตดีเจสปอร์ตปฏิสัมพันธ์ ตุ๊กแม่ค้าซูฮกงี้ วอลซ์บ็อกซ์ป๊อปอาร์พีจีปฏิสัมพันธ์ วิภัชภาคลาติน</p>
        <p>By <a href="http://lorem.in.th/" onclick="return false;">lorem.in.th</a></p>

        <h2>Links</h2>
        <p>These are links: <a href="?2017-06-2703%3A30%3A17" onclick="return false;">never visited link (just don't click or it will becomes visited)</a>, <a href=".">visited link</a>. Mouse hover to see effects.</p>

        <h2>Lists</h2>
        <h3>Unordered list</h3>
        <ul>
            <li>List item with a much longer description or more content.</li>
            <li>List item</li>
            <li>List item
                <ul>
                    <li>Nested list item</li>
                    <li>Nested list item</li>
                    <li>Nested list item</li>
                </ul>
            </li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
        <h3>Ordered list</h3>
        <ol>
            <li>List item with a much longer description or more content.</li>
            <li>List item</li>
            <li>List item
                <ol>
                    <li>Nested List Item</li>
                    <li>Nested List Item</li>
                    <li>Nested List Item</li>
                </ol>
            </li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ol>
        <h3>Mixed</h3>
        <ul>
            <li>List item with a much longer description or more content.</li>
            <li>List item</li>
            <li>List item
                <ol>
                    <li>Nested list item</li>
                    <li>Nested list item</li>
                    <li>Nested list item</li>
                </ol>
            </li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
        <ol>
            <li>List item with a much longer description or more content.</li>
            <li>List item</li>
            <li>List item
                <ul>
                    <li>Nested List Item</li>
                    <li>Nested List Item</li>
                    <li>Nested List Item
                        <ol>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                            <li>Nested List Item
                                <ol>
                                    <li>Nested List Item</li>
                                    <li>Nested List Item</li>
                                    <li>Nested List Item
                                        <ul>
                                            <li>Nested list item</li>
                                            <li>Nested list item</li>
                                            <li>Nested list item</li>
                                        </ul>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                    <li>Nested List Item</li>
                    <li>Nested List Item</li>
                </ul>
            </li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ol>
        <h3>Definition list</h3>
        <dl>
            <dt>Definition list</dt>
            <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.</dd>
            <dt>Lorem ipsum dolor sit amet</dt>
            <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.</dd>
        </dl>
        <h3>Details &amp; Summary</h3>
        <details>
            <summary>Question 1</summary>
            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#" onclick="return false;">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
            <details>
                <summary>Related documents</summary>
                <ul>
                    <li><a href="#" onclick="return false;">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
                    <li><a href="#" onclick="return false;">Aliquam tincidunt mauris eu  risus.</a></li>
                    <li><a href="#" onclick="return false;">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
                    <li><a href="#" onclick="return false;">Aliquam tincidunt mauris eu  risus.</a></li>
                </ul>
            </details>
        </details>
        <details>
            <summary>Question 2</summary>
            <p>Duis consequat metus et eros rutrum, interdum facilisis urna interdum. Etiam facilisis diam in libero varius ultricies id id est. Sed lacinia pellentesque sem vel sagittis.</p>
        </details>

        <h2>Blockquote</h2>
        <blockquote>Those people who think they know everything are a great annoyance to those of us who do.<cite>Isaac Asimov</cite></blockquote>

        <h2>Code</h2>
        <p>This is inline code <code>&lt;div&gt;div element&lt;/div&gt;</code>. This is sample output <samp>sample</samp> And below is block code.</p>
        <pre>
&lt;div&gt;
    div element
    &lt;p&gt;paragraph&lt;/p&gt;
&lt;/div&gt;</pre>
        <p>The input keyboard <kbd>Ctrl</kbd>+<kbd>S</kbd>. This is variable: <var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

        <h2>Table</h2>
        <table>
            <thead>
                <tr>
                    <th>Table heading</th>
                    <th>Table heading</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Table footer</th>
                    <th>Table footer</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Table data</td>
                    <td>Table data</td>
                </tr>
                <tr>
                    <td>Table data</td>
                    <td>Table data</td>
                </tr>
                <tr>
                    <td>Table data</td>
                    <td>Table data</td>
                </tr>
                <tr>
                    <td>Table data</td>
                    <td>Table data</td>
                </tr>
            </tbody>
        </table>

        <h2>Form elements</h2>
        <form>
            <fieldset>
                <legend>Input types</legend>
                    <p>
                        <label for="input-type-color">Input Color</label><br>
                        <input id="input-type-color" type="color">
                    </p>
                    <p>
                        <label for="input-type-date">Input Date</label><br>
                        <input id="input-type-date" type="date">
                    </p>
                    <p>
                        <label for="input-type-datetime-local">Input Datetime-local</label><br>
                        <input id="input-type-datetime-local" type="datetime-local">
                    </p>
                    <p>
                        <label for="input-type-email">Input Email</label><br>
                        <input id="input-type-email" type="email">
                    </p>
                    <p>
                        <label for="input-type-file">Input File</label><br>
                        <input id="input-type-file" type="file">
                    </p>
                    <p>
                        <label for="input-type-hidden">Input Hidden</label><br>
                        <input id="input-type-hidden" type="hidden">
                    </p>
                    <p>
                        <label for="input-type-month">Input Month</label><br>
                        <input id="input-type-month" type="month">
                    </p>
                    <p>
                        <label for="input-type-number">Input Number</label><br>
                        <input id="input-type-number" type="number">
                    </p>
                    <p>
                        <label for="input-type-password">Input Password</label><br>
                        <input id="input-type-password" type="password">
                    </p>
                    <p>
                        <label for="input-type-range">Input Range</label><br>
                        <input id="input-type-range" type="range">
                    </p>
                    <p>
                        <label for="input-type-search">Input Search</label><br>
                        <input id="input-type-search" type="search">
                    </p>
                    <p>
                        <label for="input-type-tel">Input Tel</label><br>
                        <input id="input-type-tel" type="tel">
                    </p>
                    <p>
                        <label for="input-type-text">Input Text</label><br>
                        <input id="input-type-text" type="text">
                    </p>
                    <p>
                        <label for="input-type-time">Input Time</label><br>
                        <input id="input-type-time" type="time">
                    </p>
                    <p>
                        <label for="input-type-url">Input Url</label><br>
                        <input id="input-type-url" type="url">
                    </p>
                    <p>
                        <label for="input-type-week">Input Week</label><br>
                        <input id="input-type-week" type="week">
                    </p>

            </fieldset>
            <p>
                <label fpr="input-type-text-readonly">Input Text read only</label><br>
                <input id="input-type-text-readonly" type="text" readonly="">
            </p>
            <p>
                <label><input type="radio" name="input-radio" value="1"> Input radio option 1</label><br>
                <label><input type="radio" name="input-radio" value="2"> Input radio option 2</label>
            </p>
            <p>
                <label><input type="radio" name="input-radio-disabled" value="1" disabled=""> Input radio option 1</label><br>
                <label><input type="radio" name="input-radio-disabled" value="2" disabled=""> Input radio option 2</label>
            </p>
            <p>
                <label><input type="checkbox"> Input checkbox 1</label><br>
                <label><input type="checkbox"> Input checkbox 2</label>
            </p>
            <p>
                <label><input type="checkbox" disabled=""> Input checkbox 1</label><br>
                <label><input type="checkbox" disabled=""> Input checkbox 2</label>
            </p>
            <p>
                <label for="input-textarea">Textarea</label><br>
                <textarea id="input-textarea"></textarea>
            </p>
            <p>
                <label for="input-textarea-disabled">Textarea disabled</label><br>
                <textarea id="input-textarea-disabled" disabled=""></textarea>
            </p>
            <p>
                <label for="input-textarea-readonly">Textarea readonly</label><br>
                <textarea id="input-textarea-readonly" readonly=""></textarea>
            </p>
            <p>
                <label for="input-select">Select box</label><br>
                <select id="input-select">
                    <optgroup label="Group1">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </optgroup>
                    <optgroup label="Group2">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </optgroup>
                    <option>out of optgroup</option>
                </select>
            </p>
            <p>
                <label for="input-select-multiple">Select multiple</label><br>
                <select id="input-select-multiple" multiple="">
                    <option>Use Ctrl+click to select multiple options</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </p>
            <p>
                <label for="input-select-disabled">Select disabled</label><br>
                <select id="input-select-disabled" disabled="">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </p>
            <p>
                <button type="button">Normal button</button>
                <button type="submit" onclick="return false;">Submit button</button>
                <button type="reset" onclick="return false;">Reset button</button>
                <button type="button" disabled="">Disabled button</button>
            </p>
            <p>
                <input type="button" value="Input normal button">
                <input type="submit" value="Input submit button" onclick="return false;">
                <input type="reset" value="Input reset button" onclick="return false;">
                <input type="button" value="Input disabled button" disabled="">
            </p>
            <p>
                <a class="button" href="#" onclick="return false;">Anchor button</a>
                <a class="button disabled" href="#" onclick="return false;">Anchor disabled button</a>
            </p>
        </form>


        <p>Thanks to <a href="http://rundiz.com">rundiz.com</a></p><!--credits can remove-->


        <!--add your js here--> 
    </body>
</html>

    You can see it on Github Gist or Codepen.

    If I missed something, please tell me or you can update it to Github and then post your link here.

    0 讨论(0)
 看不清?
提交回复
热议问题