Руководство по HTML5

Основы HTML1.1

<!DOCTYPE html>  
<html>
    <head>       
        <meta charset="utf-8">
        <title>Документ HTML5</title>
        <link rel="stylesheet" type="text/css" href="style.css"> 
        <script src="script.js"></script> 
    </head>
    <body>
        <div>Содержание документа HTML5</div>
    </body>
</html>

<!– Объявление формата документа –> Элемент Элемент Элемент  Элемент <meta> Элемент <style> Элемент <link> Элемент <script> Элемент <body> <file php myexample.php> <?php echo "hello world!"; ?> </file> :!: Read the [[wiki:syntax#embedding_html_and_php|syntax]] page((This section has been removed from the page and is only accessible through the page history.)) again: //"You can embed raw HTML code into your documents by using the HTML tags."// So to embed HTML you need to enclose the HTML with ''%%<html>'' (for inline HTML) or '' </p> <div class="htmlblock"> </div> <p> '' (for block HTML). A little example: <del>The [[:wiki:syntax#embedding_html_and_php|above syntax page]] has examples of what block vs inline look like.</del>((This section has been removed from the page and is only accessible through the page history.)) <html><strong>This is my bold text</strong></html> =====HTML-элементы1.2===== =====HTML-атрибуты1.3===== =====HTML-текст1.4===== Элементы для заголовков Элементы для форматирования текста Элементы для ввода «компьютерного» текста Элементы для оформления цитат и определений Абзацы, средства переноса текста =====HTML-ссылки1.5===== Структура ссылки Абсолютный и относительный путь Якорь Как сделать изображение-ссылку Как сделать ссылку на телефонный номер, скайп или адрес электронной почты Атрибуты ссылок =====HTML-изображения1.6===== Элемент <img> Адрес изображения Размеры изображения Форматы графических файлов Элемент <map> Элемент <area> Пример создания карты-изображения =====HTML-таблицы1.7===== Как создать таблицу Как создать строки (ряды) таблицы Как сделать ячейку заголовка столбца таблицы Как сделать ячейку тела таблицы Как добавить подпись (заголовок) к таблице Группирование строк и столбцов таблицы <colgroup> и <col> Группировка разделов таблицы <thead>, <tbody> и <tfoot> Как объединить ячейки таблицы Атрибуты элементов таблицы Пример создания таблицы =====HTML-списки1.8===== Маркированный список <ul> Нумерованный список <ol> Список определений <dl> Вложенный список Многоуровневый нумерованный список =====Спецсимволы HTML1.9===== Полезные знаки и символы Знаки пунктуации Стрелки Карточные масти Деньги Знаки зодиака =====HTML-генераторы1.10===== =====Семантические элементы HTML51.11===== =====Элемент документа1.11.1===== =====Метаданные документа1.11.2===== Элемент <head> Элемент <title> Элемент <base> Элемент <link> Элемент <meta> Элемент <style> =====Разделы документа1.11.3===== Элемент <body> Элемент <article> Элемент <section> Элемент <nav> Элемент <aside> Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6> Элемент <header> Элемент <footer> =====Группировка содержимого1.11.4===== Элемент <p> Элемент <address> Элемент <hr> Элемент <pre> Элемент <blockquote> Элемент <ol> Элемент <ul> Элемент <li> Элемент <dl> Элемент <dt> Элемент <dd> Элемент <figure> Элемент <figcaption> Элемент <main> Элемент <div> =====Семантика уровня текста1.11.5===== Элемент <a> Элемент <em> Элемент <strong> Элемент <small> Элемент <s> Элемент <cite> Элемент <q> Элемент <dfn> Элемент <abbr> Элемент <ruby> Элемент <rb> Элемент <rt> Элемент <rtc> Элемент <rp> Элемент <data> Элемент <time> Элемент <code> Элемент <var> Элемент <samp> Элемент <kbd> Элементы <sub> и <sup> Элемент <i> Элемент <b> Элемент <u> Элемент <mark> Элемент <bdi> Элемент <bdo> Элемент <span> Элемент <br> Элемент <wbr> =====Правки документа1.11.6===== Элемент <ins> Элемент <del> Атрибуты, общие для элементов <ins> и <del> =====Встраиваемое содержимое1.11.7===== Элемент <picture> Элемент <source> Элемент <img> Элемент <iframe> Элемент <embed> Элемент <object> Элемент <param> Элемент <video> Элемент <audio> Элемент <track> Элемент <map> Элемент <area> =====Ссылки1.11.8===== Ссылки, созданные элементами <a> и <area> Типы ссылок Примеры ссылок =====Табличные данные1.11.9===== Элемент <table> Элемент <caption> Элемент <colgroup> Элемент <col> Элемент <tbody> Элемент <thead> Элемент <tfoot> Элемент <tr> Элемент <td> Элемент <th> =====Формы1.11.10===== Элемент <form> Элемент <label> Элемент <input> Элемент <button> Элемент <select> Элемент <datalist> Элемент <optgroup> Элемент <option> Элемент <textarea> Элемент <output> Элемент <progress> Элемент <meter> Элемент <fieldset> Элемент <legend> Атрибут autocomplete =====Интерактивные элементы1.11.11===== Элемент <details> Элемент <summary> Элемент <dialog> Скрипты1.11.12 Элемент <script> Элемент <noscript> Элемент <template> Элемент <slot> Элемент <canvas> ====HTML5-аудио1.12==== Элемент <audio> Аудио кодеки Альтернативные медиа-ресурсы <source> Добавление субтитров и заголовков <track> Стилизованный пример аудио плеера ====HTML5-видео1.13==== Элемент <video> Встраиваемый интерактивный контент <embed> Видеокодеки Видеоконтейнеры Альтернативные медиа-ресурсы <source> Добавление субтитров и заголовков <track> Пример: размещаем видео на сайте Видеоконвертеры Необязательные теги HTML5-разметки1.14 =====HTML5-формы1.15===== Элемент <form> Группировка элементов формы <fieldset> Создание полей формы <input> Текстовые поля ввода <textarea> Раскрывающийся список <select> Надписи к полям формы <label> Кнопки <button> Флажки и переключатели в формах =====Контентная модель HTML51.16===== Мета содержимое Потоковое содержимое Секционное содержимое Заголовочное содержимое Текстовое содержимое Встроенное содержимое Интерактивное содержимое Явное содержимое Элементы, поддерживающие скрипт Корневое секционное содержимое Прозрачная модель содержимого \\ :!: Read the [[wiki:syntax#embedding_html_and_php|syntax]] page((This section has been removed from the page and is only accessible through the page history.)) again: //"You can embed raw HTML code into your documents by using the HTML tags."// So to embed HTML you need to enclose the HTML with '''' (for inline HTML) or '' </p> <div class="htmlblock"> </div> <p> %%'' (for block <abbr title="HyperText Markup Language">HTML</abbr>). A little example: <del>The <a href="/doku.php?id=wiki:syntax#embedding_html_and_php" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">above syntax page</a> has examples of what block vs inline look like.</del><sup><a href="#fn__1" id="fnt__1" class="fn_top">1)</a></sup> </p> <pre class="code"><html><strong>This is my bold text</strong></html></pre> </div> <div class="footnotes"> <div class="fn"><sup><a href="#fnt__1" id="fn__1" class="fn_bot">1)</a></sup> <div class="content">This section has been removed from the page and is only accessible through the page history.</div></div> </div> <div class="comment_form"> Только авторизованные участники могут оставлять комментарии. </div> <div id="toggle_button" class="toggle_button"> <input type="submit" id="discussion__btn_toggle_visibility" title="Toggle Visibiliy" class="button"value="Скрыть/Показать"> </div>  </div> <div class="docInfo"><bdi>software/development/ps_pycharm/html5/html5.1691507540.txt.gz</bdi> · Последнее изменение: 2023/08/08 18:12 — <bdi>vladpolskiy</bdi></div> <hr class="a11y" /> </div></main>  <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> <h3 class="a11y" id="dokuwiki__pagetools__heading">Инструменты страницы</h3> <div class="tools"> <ul> <li class="source"><a href="/doku.php?id=software:development:ps_pycharm:html5:html5&do=edit" title="Показать исходный текст [v]" rel="nofollow" accesskey="v"><span>Показать исходный текст</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m.12 13.5l3.74 3.74 1.42-1.41-2.33-2.33 2.33-2.33-1.42-1.41-3.74 3.74m11.16 0l-3.74-3.74-1.42 1.41 2.33 2.33-2.33 2.33 1.42 1.41 3.74-3.74z"/></svg></a></li><li class="revs"><a href="/doku.php?id=software:development:ps_pycharm:html5:html5&do=revisions" title="История страницы [o]" rel="nofollow" accesskey="o"><span>История страницы</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7v5.11l4.71 2.79.79-1.28-4-2.37V7m0-5C8.97 2 5.91 3.92 4.27 6.77L2 4.5V11h6.5L5.75 8.25C6.96 5.73 9.5 4 12.5 4a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5c-3.27 0-6.03-2.09-7.06-5h-2.1c1.1 4.03 4.77 7 9.16 7 5.24 0 9.5-4.25 9.5-9.5A9.5 9.5 0 0 0 12.5 2z"/></svg></a></li><li class="backlink"><a href="/doku.php?id=software:development:ps_pycharm:html5:html5&do=backlink" title="Ссылки сюда" rel="nofollow"><span>Ссылки сюда</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg></a></li><li class="show"><a href="/doku.php?id=wiki:donate&do=show" title="Оставить на чай" rel="nofollow"><span>Оставить на чай</span><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M13.5,3H7v9H5v2h2v2H5v2h2v3h2v-3h4v-2H9v-2h4.5c3.04,0,5.5-2.46,5.5-5.5C19,5.46,16.54,3,13.5,3z M13.5,12H9V5h4.5 C15.43,5,17,6.57,17,8.5S15.43,12,13.5,12z"/></g></svg></a></li><li class="export_pdf"><a href="/doku.php?id=software:development:ps_pycharm:html5:html5&do=export_pdf&rev=1691507540" title="Экспорт в PDF" rel="nofollow"><span>Экспорт в PDF</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14 9h5.5L14 3.5V9M7 2h8l6 6v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m4.93 10.44c.41.9.93 1.64 1.53 2.15l.41.32c-.87.16-2.07.44-3.34.93l-.11.04.5-1.04c.45-.87.78-1.66 1.01-2.4m6.48 3.81c.18-.18.27-.41.28-.66.03-.2-.02-.39-.12-.55-.29-.47-1.04-.69-2.28-.69l-1.29.07-.87-.58c-.63-.52-1.2-1.43-1.6-2.56l.04-.14c.33-1.33.64-2.94-.02-3.6a.853.853 0 0 0-.61-.24h-.24c-.37 0-.7.39-.79.77-.37 1.33-.15 2.06.22 3.27v.01c-.25.88-.57 1.9-1.08 2.93l-.96 1.8-.89.49c-1.2.75-1.77 1.59-1.88 2.12-.04.19-.02.36.05.54l.03.05.48.31.44.11c.81 0 1.73-.95 2.97-3.07l.18-.07c1.03-.33 2.31-.56 4.03-.75 1.03.51 2.24.74 3 .74.44 0 .74-.11.91-.3m-.41-.71l.09.11c-.01.1-.04.11-.09.13h-.04l-.19.02c-.46 0-1.17-.19-1.9-.51.09-.1.13-.1.23-.1 1.4 0 1.8.25 1.9.35M8.83 17c-.65 1.19-1.24 1.85-1.69 2 .05-.38.5-1.04 1.21-1.69l.48-.31m3.02-6.91c-.23-.9-.24-1.63-.07-2.05l.07-.12.15.05c.17.24.19.56.09 1.1l-.03.16-.16.82-.05.04z"/></svg></a></li><li class="top"><a href="#dokuwiki__top" title="Наверх [t]" rel="nofollow" accesskey="t"><span>Наверх</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg></a></li> </ul> </div> </nav> </div>  <footer id="dokuwiki__footer"><div class="pad"> <div class="license">Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: <bdi><a href="doku.php?id=public_domain_mark" rel="license" class="urlextern">Public Domain</a></bdi></div> <div class="buttons"> <a href="https://php.net" title="Powered by PHP" ><img src="/lib/tpl/dokuwiki/images/button-php.gif" width="80" height="15" alt="Powered by PHP" /></a> <a href="//validator.w3.org/check/referer" title="Valid HTML5" ><img src="/lib/tpl/dokuwiki/images/button-html5.png" width="80" height="15" alt="Valid HTML5" /></a> <a href="//jigsaw.w3.org/css-validator/check/referer?profile=css3" title="Valid CSS" ><img src="/lib/tpl/dokuwiki/images/button-css.png" width="80" height="15" alt="Valid CSS" /></a> <a href="https://dokuwiki.org/" title="Driven by DokuWiki" ><img src="/lib/tpl/dokuwiki/images/button-dw.png" width="80" height="15" alt="Driven by DokuWiki" /></a> <a> <style> .container { position: absolute; font-family: Georgia, 'Times New Roman', Times, serif; } .text-block { position: absolute; bottom: 0px; right: 4px; color: black; } </style> <a class="container"> <span><img src="/lib/tpl/dokuwiki/images/button-yandex.png" width="85" height="15" alt="yandex" / > <div class="text-block">4417</div> </span> </a> </a> </div> <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(96261112, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/96261112" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <meta name="description" content="HTML. HTML5. CSS. Java Script. SQL" />  </head> <body> </body> </html> </div></footer> </div></div> <div class="no"><img src="/lib/exe/taskrunner.php?id=software%3Adevelopment%3Aps_pycharm%3Ahtml5%3Ahtml5&1728116386" width="2" height="1" alt="" /></div> <div id="screen__mode" class="no"></div></body> </html>