Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Html Теги , обозначение, применение

Поддержи проект!!!

Теги html, использование тегов в html, названия тегов в html, обозначение и назначение тегов в html! Что такое html теги!? Все, что вы здесь видите, так или иначе обернуто в html теги! Страница без тегов - это простой текст. Страница начинается с тегов <html>, теги разделяются на два типа - это одинарные и двойные!
Самые распространенные html теги - на странице представлены наиболее часто встречаемые и используемые html теги. Я не ставил перед собой цель, написать справочник по тегам html, какие существуют!

Данная тема тегов начинали именно с той точки зрения, какие теги я использую.

Как искать нужный тег!?

Тегов стало слишком много... что теперь нужно искать по странице... нажимаем ctrl + F и вводим нужное название! Если поиск по тегам ничего не дал, то попробуйте изменить слово, словосочетание...
Навигация по странице :
  1. Тег <!DOCTYPE>
  2. Тег <html>
  3. Мета теги: атрибут name кодировки -> charset
  4. Мета теги: атрибут name описания -> description
  5. Мета теги: атрибут name ключевых слов -> keywords
  6. Мета теги: атрибут name мобильные -> viewport
  7. Заголовок страницы тег -> title
  8. Тег -> head
  9. Тег -> body
  10. Тег скрипта -> script
  11. Тег для подключения css -> link
  12. Тег для встраивания стилей на страницу -> style
  13. Тег -> div
  14. Тег абзаца -> p
  15. Тег переноса строки -> br
  16. Тег ссылки -> a
  17. Тег жирного текста -> b
  18. Тег жирного текста -> strong
  19. Тег текста под наклоном -> i
  20. Тег перечеркнутого текста -> s
  21. Тег заголовка -> h1,h2,h3,h4,h5
  22. Тег -> span
  23. Теги таблицы -> table,tbody,tr,td
  24. Тег цитата -> blockquote
  25. Теги списков -> ol li,ul li
  26. Теги картинки -> img
  27. Теги линия -> hr
  28. Теги кнопки -> button
  29. Тег шапки -> header
  30. Тег содержания -> article
  31. Тег содержания по центру -> center
  32. Теги подвала -> footer
  33. Тег форма -> form
  34. Тег поля ввода -> textarea
  35. Тег поля ввода -> input
  36. Теги для input -> label
  37. Тип/type для input -> radio
  38. Тип/type для input -> checkbox
  39. Тип/type для input -> file
  40. Тег фрейм -> iframe
  41. Тег плеера -> audio
  42. Тег плеера -> video
  43. Теги не индексирования (Яндекс) -> <noindex>
  44. Теги не индексирования (для всех) -> <!--noindex-->
  45. Теги шрифта(считается устаревшим) -> font
  46. Тег увеличивает размер шрифта -> big
  47. Тег уменьшает размер шрифта -> small
  48. Смешные глупые, тупые запросы, о тегах


    Начало страницы <!DOCTYPE>

  1. С чего начинается страница!?

    Страница начинается с <!DOCTYPE>
    Тег <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях
    Тег - является одинарным.


    Тег <html>

  2. Второй тег <html> - это двойной тег, что означает, что у этого тега должен быть начальный тег <html> и конечный </html>

    <html>

    Другие теги и содержание

    </html>

    Во внутрь первого тега ставят атрибут атрибут языка, например значение русского языка: lang="ru"

    <html lang="ru" >

    Другие теги и содержание

    </html>


    Мета теги: Тег кодировки <meta charset="UTF-8">

  3. Одинарный тег meta с атрибутом кодировки, кодировка может быть разной.
    <meta charset="UTF-8">


    Мета теги: атрибут description

  4. Одинарный тег мета -> description, используется для краткого описания страницы, ... 200 -250 знаков

    <meta name="description" content="Здесь описание">


    Мета теги: атрибут keywords

  5. Одинарный тег мета -> keywords, используется для вывода ключевых слов.

    <meta name="keywords" content="">


    Мета теги: атрибут viewport

  6. Одинарный тег мета -> viewport, предназначен для оптимизации сайта под мобильные устройства

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    Заголовок страницы тег title

  7. Двойной тег title, который ставится в теге head, заголовки - главный смысл страницы.

    <title>Пример простой страницы html</title>
    подробнее


    Тег head

  8. Двойной тег head, в котором находятся все теги мета, все скрипты, в общем вся информация для браузера!

    <head>

    Здесь вся техническая информация по странице

    </head>


    Тег body

  9. Двойной тег body , в котором находится, (должен находиться) основной контент страницы.

    <body >

    Здесь весь видимый контент страницы

    </body >


    Тег скрипта - script

  10. Двойной тег script , может использоваться двумя способами, для подключения внешнего скрипта:

    <script src="здесь путь до файла"></script>

    Либо прямо на странице, внутри тега будет находится исполнительный скрипт

    <script>

    здесь скрипт

    </script>

    Подробнее


    Тег link для подключения css

  11. Для подключения css стилей используется одинарный тег link
    1). с атрибутом rel и значением stylesheet _
    2). + атрибут type со значением text/css
    3). + атрибут href с адресом на фал css.

    <link rel="stylesheet" type="text/css" href="здесь путь до файла">


    Тег для встраивания стилей на страницу - style

  12. Двойной тег style используется для встраивания стилей прямо на странице!
    <style>Здесь стили</style>
    Если данное слово style находится внутри другого тега, то это атрибут!
    <p style='font-family:Arial;'>Пример шрифта Arial.</p>

    Если данное слово находится внутри треугольных скобок, то это тег!

    <style>
    здесь стили
    </style>


    Тег div

  13. Двойной тег div, чаще всего -> основной тег страницы, так сказать рабочая лошадка! По умолчанию display:block
    <div>Здесь контент</div>

    Тег абзаца <p></p>

  14. Тег абзаца <p></p> применяется для обозначения нового абзаца, каждая строка заключенная в данный тег, будет начинать с новой строки

    <p>

    Здесь текст

    </p>

    + Отдельная страница


    Тег переноса строки <br>

  15. Одинарный тег переноса строки -> <br>, применяется для перенсона строки. Ставится в конце строки.
    Здесь текст<br>
    Если у вас несколько строк текста, либо вы только начинаете делать сайт, то на каждую строку будете добавлять ручками, но когда вы продвинетесь, то скажите себе - надо же.., а можно было это делать автоматически...


    Тег ссылки a

  16. Двойной тег ссылки a , с атрибутом href и значением - путь до файла
    <a href="Путь до файла">Текст ссылки</a>

    Результат:


    Тег жирного текста b

  17. Двойной тег жирного текста b
    <b>Здесь текст</b>

    Результат:

    жирный_текст


    Тег жирного текста strong

  18. Двойной тег жирного текста strong
    <strong>Здесь текст</strong>

    Результат:

    жирный_текст

  19. Тег текста под наклоном i

    Двойной тег наклонного текста i
    <i>Здесь текст</i>

    Результат:

    наклонный текст
    + Отдельная страница посвященная и в том числе тегу i


    Тег перечеркнутого текста s

  20. Двойной тег перечеркнутого текста s
    <s>Здесь текст</s>

    Результат:

    перечеркнутый текст


    Тег заголовка h1,h2,h3,h4,h5

  21. Двойной тег заголовка h1,h2,h3,h4,h5

    Чем выше число в заголовке, тем выше ранг заголовка.

    <h2>Здесь текст заголовка </h2>

    Результат:

    Здесь текст заголовка


    Тег span

  22. Двойной тег span
    В отличии от div не имеет display:block и предназначен встраиваться в строку, выделять строку, но не быть блоком, если это не оговорено отдельно. Естественно в примере - вы никаих изменений и не увидите, потому, что к span не применено никаких свойств...
    <span>Здесь текст</span>

    Результат:

    Здесь текст


    Теги таблицы table,tbody,tr,td

  23. Двойные теги table,tbody,tr,td предназначены для создания таблиц

    <table> 

        <tbody>

            <tr><td>Строка 1 </td></tr>

            <tr><td>Строка 2 </td></tr>

            <tr><td>Строка 3 </td></tr>    

        </tbody> 

    </table>


    Цитата blockquote

  24. Двойной тег blockquote
    <blockquote>Здесь текст</blockquote>

    Результат:

    Здесь текст, который окружен тегом blockquote - это уже стилизованные blockquote


    Теги списков ol li,ul li

  25. Двойные теги списков нумерованные буквенные ol li,ul li

    <ol>

    <li>Здесь_текст</li>

    <li>Здесь_текст_2</li>

    </ol>

    <ul>

    <li>Здесь_текст</li>

    <li>Здесь_текст_2</li>

    </ul>


    Теги картинки -> img

  26. <img src="Путь до файла">

    Пример:

    <img src="https://dwweb.ru/__img/About_me/about_me.jpg" alt="'.$title.'" title="'.$title.'">
    Html Теги , обозначение, применение


    Теги линия hr

  27. Одинарный тег hr горизонтальной линии
    <hr>

    Пример:



    Теги кнопки button

  28. Двойной тег button
    <button>Нажми на меня</button>

    Пример:


    Теги header

  29. Двойной тег header Тег <header> задает «шапку» сайта или раздела, в которой обычно располагается заголовок.
    <header>Содержимое блока</header>

    Пример:

    Содержимое блока


    Теги article

  30. Двойной тег article Тег <article> задает содержание сайта вроде новости, статьи, записи блога, форума или др.
    <article>Содержимое блока</article>

    Пример:

    Содержимое блока


    Теги center

  31. Двойной тег center Тег <center> выравнивает содержимое контейнера по центру относительно родительского элемента.
    <center>Содержимое блока</center>

    Пример:

    Содержимое блока


    Теги footer

  32. Двойной тег footer Тег <footer> задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.
    <footer>Содержимое блока</footer>

    Пример:

    Содержимое блока


    Теги form

  33. Двойной тег form - форма для ввода данных
    <form>Содержание</form>
    1). Элементы form input type
    2). Форма Html код пример


    Теги textarea

  34. Двойной тег textarea Поле для ввода текста, обычно внутри тега form
    <textarea> здесь текст </textarea>

    Добавим немного стилей, а то совсем отстой...

    style="width: 87%;padding: 3%;margin: 20px;height: 80px;"

    Пример:

    Ещё о теге textarea: 1). textarea получить значение
    2). поле textarea ширина, высота
    3). растягиваемый резиновый по высоте autosize textarea


    Теги input

  35. Одинарный тег input Поле для ввода данных, обычно внутри тега form
    <input value="">

    Пример:

    + Страница о типах/видах input

  36. Теги label

    Двойной тег label Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>).

    <input id="идентификатор"><label for="идентификатор">Текст</label>

    <input type="..."> <label>Текст</label>

    Пример:

  37. Тип radio

    Хоть и это не тег, но по моему мнению, тип превращает тег input, с типом radio, в новый тег

    Код:

    <input type="radio">

    Пример:

    type="radio"
    + Подробнее -> радиоточка

  38. Тип checkbox

    Код:

    <input type="checkbox">

    Пример:

    type="checkbox"
    + Подробнее -> checkbox

  39. Тип file

    Тип file тега input предназначен для выбора файла с компьютера.

    Код:

    <input type="file">

    Пример:

    type="radio"


    Теги фрейм iframe

  40. Двойной тег iframe
    <iframe src="путь до файла" width="468" height="60" align="left">Ваш браузер не поддерживает плавающие фреймы!</iframe>
    У нас есть файл пример, который мы делали в теме создания файла

    Возьмем отутда наш адрес ->

    https://dwweb.ru/__a-data/__all_for_scripts/__examples/php/file/primer_file_put_contents/example_1.dat

    Вставляем вовнутрь ->

    <iframe src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/php/file/primer_file_put_contents/example_1.dat" width="468" height="60" align="left">Ваш браузер не поддерживает плавающие фреймы!</iframe>

    Результат:



    + Страница о фреймах


    Теги плеера audio

  41. Двойной тег audio Тег audio предназначен для воспроизведения файлов audio -> Немного не тему audio плеера
    <audio src="//dwweb.ru/__a-data/mp3/digital_emotion_get_up.mp3" controls=""></audio>

    Результат:


    Тег плеера video

  42. Двойной тег video -> Немного не тему video плеера

    <video width="100%" height="auto" src="//dwweb.ru/__a-data/video/prizrachnyiy_patrul.mp4" type="video/mp4" controls=""></video >

    Результат:

    Здесь я должен сказать своё "ФИ" Зачем тег video сделали двойным - вообще непонятно! Абсолютно такая же логика должна была быть, как и тег картинки! Тут как говорится ни прибавить и не убавить! И это же касается тега audio


    Тег noindex

  43. Двойной тег noindex Тег <noindex> – размещаемый в HTML-коде странички тег, который запрещает боту поисковой системы Яндекс индексировать часть текста (заключенную внутри него). Тег noindex Яндекс ввел по собственной инициативе, которую до сегодняшнего дня разделяет лишь Рамблер.
    <noindex>Здесь текст</noindex>

    Результат:

    Здесь текст


    Теги не индексирования (для всех) noindex

  44. Двойной тег noindex Тег noindex для всех роботов. Непонятно, почему все кучерявые не понравился тег от Яндекса..., как мне кажется очень удобно!
    <!--noindex-->Текст <!--/noindex-->

    Результат:

    Здесь текст


    Тег шрифта font

  45. Двойной тег font - считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
    <font size="5" color="red" face="Arial">Здесь текст</font>

    Результат:

    Здесь текст


    Тег big

  46. Двойной тег big Тег <big>
    <big>Содержимое блока</big> и другой текст

    Пример:

    Содержимое блока и другой текст


    Тег small

  47. Двойной тег small Тег <small>
    <small>Содержимое блока</small> и другой текст

    Пример:

    Содержимое блока и другой текст


    Смешные глупые, тупые запросы, о тегах

  48. Я обещал , если будут встречаться какие-то прикольные поисковые запросы, то буду отвечать на них в конце каждой страницы...

    какой тег используется для обозначения конца строки?

    С какой целью вы хотите обозначать конец строки тегом!? Чтобы что, произошло в конце строки!? Может все-таки вам нужно произвести какое-то действие в конце строки... например перенос...


Вас может еще заинтересовать список тем : #HTML | #HTML_TAGS | #HTML_BOOK |
Последняя дата редактирования : 2020-05-11 11:27
Теги:
Html Теги , обозначение, применение

Последние комментарии :
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb