/
ren4
/
simplt_html_editor
Обзор
Документация
Войти
/
ren4
/
simplt_html_editor
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
165 строк
7 KB
ren4
feat: Initial commit
21 июн 2025, 16:02
21 июн 2025, 16:02
4bdfeb9
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Демонстрация Vanilla CSS Framework</title> <link rel="stylesheet" href="vanilla-role.css"> </head> <body> <!-- Баннер (шапка) --> <header role="banner"> <h1>Vanilla CSS Framework</h1> <p>Минималистичный фреймворк с поддержкой ARIA-ролей</p> </header> <!-- Навигация --> <nav role="navigation"> <ul> <li><a href="#typography">Типографика</a></li> <li><a href="#elements">Элементы</a></li> <li><a href="#roles">ARIA-роли</a></li> <li><a href="#tables">Таблицы</a></li> <li><a href="#forms">Формы</a></li> </ul> </nav> <!-- Основное содержимое --> <main role="main"> <!-- Документ/статья --> <article role="document"> <h2 id="typography">Типографика</h2> <h3>Заголовки</h3> <h1>Заголовок 1 уровня</h1> <h2>Заголовок 2 уровня</h2> <h3>Заголовок 3 уровня</h3> <h4>Заголовок 4 уровня</h4> <h5>Заголовок 5 уровня</h5> <h6>Заголовок 6 уровня</h6> <h3>Текст</h3> <p>Обычный абзац текста. <strong>Жирный текст</strong>, <em>курсив</em>, <small>мелкий текст</small>, <sup>верхний индекс</sup>, <sub>нижний индекс</sub>.</p> <h3>Цитаты</h3> <blockquote> <p>Это цитата с красивым оформлением. Она выделяется на фоне основного текста.</p> <cite>Автор цитаты</cite> </blockquote> <h3>Код</h3> <p>Встроенный код: <code>console.log('Hello World');</code></p> <pre><code>// Блок кода function example() { return 'Это пример блока кода'; }</code></pre> <hr> <h2 id="elements">Элементы</h2> <h3>Списки</h3> <ul> <li>Неупорядоченный список 1</li> <li>Неупорядоченный список 2 <ul> <li>Вложенный пункт 1</li> <li>Вложенный пункт 2</li> </ul> </li> <li>Неупорядоченный список 3</li> </ul> <ol> <li>Упорядоченный список 1</li> <li>Упорядоченный список 2 <ol> <li>Вложенный пункт 1</li> <li>Вложенный пункт 2</li> </ol> </li> <li>Упорядоченный список 3</li> </ol> <h3>Описание</h3> <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> <dt>Термин 2</dt> <dd>Определение термина 2</dd> </dl> <h3>Изображения</h3> <figure> <img src="https://via.placeholder.com/600x200" alt="Пример изображения"> <figcaption>Подпись к изображению</figcaption> </figure> <hr> <h2 id="tables">Таблицы</h2> <table> <caption>Пример таблицы</caption> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tbody> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </tbody> </table> <hr> <h2 id="forms">Формы</h2> <form role="form"> <label for="name">Имя:</label> <input type="text" id="name" placeholder="Введите ваше имя"> <label for="email">Email:</label> <input type="email" id="email" placeholder="Введите ваш email"> <label for="message">Сообщение:</label> <textarea id="message" placeholder="Введите ваше сообщение"></textarea> <button type="submit">Отправить</button> </form> </article> <!-- Дополнительная информация --> <aside role="complementary"> <h3>Дополнительная информация</h3> <p>Это боковая панель с дополнительным контентом. Она выделяется цветом и имеет границу слева.</p> <div role="search"> <h4>Поиск</h4> <input type="search" placeholder="Поиск..."> <button>Найти</button> </div> </aside> </main> <!-- Подвал --> <footer role="contentinfo"> <p><small>© 2023 Vanilla CSS Framework. Все права защищены.</small></p> <p><time datetime="2023-11-15">15 ноября 2023</time></p> </footer> </body> </html>