Суббота, 02 февраля 2019 20:17

HTML

Автор
Оцените материал
(0 голосов)

Язык гипертекстовой разметки текста

В языке HTML, на котором в сущности написаны все веб сайты в мире есть знаки, которых нет на клавиатуре, но они читаются браузерами. И некоторые символы яляются зарезервированными. Потому, что если начать писать на странице занаками больше или меньше браузер начнет воспринимать их как теги, для этого и существуют знаки, которыми можно из заменять.

 

 Результат      
 <  меньше чем  &lt;  &#60;
 >  больше чем  &gt;  &#62;
 &  амперсанд  &amp;  &#38;
   неразрывный пробел  &nbsp;  &#160;
 "  двойные кавычки  &quot;  &#34;
 '  одинарные кавычки  &apos;  &#39;

HTML теги и их значение

<!DOCTYPE html>  тег декларация HTML5, с него начинается любой документ написанный на HTML5.
<html></html>   Это корневой элемент, он определяет начало и конец документа. Включает в себя все остальные элементы документа. Открывающий тег помещается сразу после определения типа документа, Закрывающий тег
находится в конце документа. Этот элемент не имеет предков. В современном HTML является не обязательным, а в  XHTML всегда обязателен.
 <head></head>  Содержит информацию о  метаданных документа. Должен содержать в себе элемент title.Элемент head может выступать контейнером для таких элементов как: base, link, meta, noscript,
script и style, которые могут располагаться в произвольном порядке.
 <title></title>  является обязательным элементом определяющим заголовок документа, находится внутри элемента head, должен содержать буквы, цифры и стандартную пунктуацию. Заголовки обычно отображаются в браузере, использются поисковыми системами. Не может включать в себя другие элементы и может быть только один.
 <body></body>  обозначает тело документа, может быть только один, внутри него помещается весь видимый контент.
 <article></article>  автономная часть контента, которая может быть использована отдельно от остальной части
 <aside></aside>  в него помещается контент, который связан с окружающим содержимым, но сам будет находиться в стороне, как боковая панель.
 <audio></audio>  применяется для расположения звукового файла в веб странице, на текущий момент есть три поддерживаемых формата файлов: MP3, WAV и OGG;
При использовании с
autoplay происходит автоматическое воспроизведение мультимедийных файлов.
controls указывает на неоходимость отображения в браузере пользователя элементов управления аудио;
пример, как воспроизвести звук на веб странице:
<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
если код записать так <audio controls autoplay> аудио файл начнет воспроизводиться автоматически,
<audio controls loop> означает, что файл будет воспроизводиться снова после того как закончится
<audio controls muted> означает, что аудиовыход должен быть отключен
<audio controls preload="none"> в этом случае звук не будет загружаться автоматически при загрузке страницы, вместо "none" возможны значения : auto|metadata
src = "URL-cсылкa" указывает местоположение мультимедийного файла.

 <a></a>

 применяется в качестве определителя сслки, используется с атрибутом href, id,
Пример ссылки на локальный файл : <a href="/имя файла.html">...</a>
на внешний файл: <a href="http://cервер/путь/файл.html">...</a>
для отправки сообщения электронной почты: <a href="mailto:имя_пользователя@домен">...</a>
по id<a id="фрагмент">...</a>

<br> с его помощью формируется разрыв строки. Это пустой элемент. в html применение закрывающего тега не допускается. в xhtml для закрытия этого элемента применяется косая черта.
<button></button> с его помощью создается кнопка, используется в форме ввода данных. Есть глобальные атрибуты.
<canvas></canvas> тег контейнер для рисования графики на ходу. Для фактического рисования графики используется скрипты.
<caption> ... </caption> Элемент содерщаший информацию о таблице. Указывается после начального тега таблицы. В него нельзя поместить таблицу. Пример
<tablе>
<cation>Информация о таблице
</caption>
<tr>
<td>данные</td><td>данные</td>
</tr>
</tablе>
<cite> ...</cite> Применяется для обозначения заголовков работ, статей, или дает ссылку на другие издания.
Пример:  <p>Цитировано из <cite>Журнала "Риск"</cite>.</p>
<code> ... </code> выделяет компьютерный код, который пишется как встроенный контент, и выделяется браузером с применением отличительного шрифта.
Пример:
<р>Dom reference: <code>document.getElementByid</code></р>
<col> (XHTML: <col/> или <col />)  используется для создания столбцов в таблице, элемент пустой, используется только начальный тег. Может применяться со span, который в данном случае будет указывать количество столбцов на которые будет распространяться действие элемента col.
<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
 <colgroup> ... </colgroup>  определение группы столбцов в таблице, подробнее о элементе в разделе "Таблицы"
<command> (XHTML: <command/> или <command />) используется с элементом меню, является интерактивным элементом, представляет дейсвие которое может немедленно вызываться. Не рекомендуется к использованию.
Примечание: вместо элемента comand в HTML5.l и в "живой" спецификации WНATWG используется элемент menuitem. 
< !-- ... --> комментарий, в основном применяется автором для разъяснения, напоминания.
<data>... </data> с помощью
атрибута value используется для обработки данных.
value = "значение, распознаваемое компьютером"
Например: <data value"12">Twelve</data>
<datalist>... </datalist> Используется для создания раскрывающегося меню с помощью элемента управления input. Пример:
<input type="text" list="flavors">
<datalist id="flavors">
<option value="Vanilla">
<option value
="Chocolate">
<option value="Mango">
</datalist>
<dd> ... </dd> Означает описание, определение. Применяется в паре "термин/описание".Может находиться только внутри элемента dl.
Например: <dl>
<dt><code>em</code></dt>
<d>Текст выделен курсивом.</d></dl>
<del> ... </del> этим тегом отмечается удаленный документ, в дополнение к нему может использоваться элемент ins (выделение вставленного текста).
<details> ...</details> Это сведения, которые пользователь может просмотреть, и у него есть функция открытия и закрытия.
<
details>

  <summary>Copyright 1999-2018.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<dfn> ...</dfn> применяется для выделения терминов.
<dialog> ... </dialog> представляет собой диалоговое окно, при работе которого остальная часть страницы не активна.
с помощью атрибута open, dialog открывается. Пример:<th>January <dialog open>This is an open dialog window</dialog></th>
<div> ... </div> блочный элемент, выступает в роли контейнера. Часто используется с class, id, для последующей стилизации.
<dl> ... </dl>

В этом элементе помещается список определений. Каждый элемент в списке является парой
"имя-значение': состоящей из имени (dt) и его значения (dd). Пример:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<dt>...</dt> В списке определений выделяет имя элемента. Пример смотри выше.
<em> ... </em> используется для выделения текста
 <embed>
 используется как контейнер для стороннего приложения и интерактивного содержимого.
height = "число"
Задает высоту объекта, выраженную в пикселях. Этот атрибут обязателен при внедрении некоторых типов мультимедийных файлов.
src = "URL-ссылка"
Задает местонахождение ресурса, помещаемого на странице.
type
= "тип МIМЕ мультимедийного объекта"
Задает тип MIME мультимедийного объекта, требуемый
при загрузке соответствующего подключаемого модуля.
Суффикс имени файла, предоставленный в качестве источника, также может использоваться для определения типа
подключаемого модуля.
width =
"число"
Указывает ширину объекта, выраженную в пикселях. Этот
атрибут требуется для некоторых типов мультимедийных
объектов.
<fieldset> ... </fieldset> Этот элемент используется для формирования групп связанных
элементов управления формой и меток в составе элемента form.

Пример
<form>
<fieldset id="custom">
<legend>Custorer contact inforration</legend>
</fieldset
</form>
<figure> ... </figure> Применяется для обозначения контента с автономным содержимым на который содержатся ссылки из основного контента.
 <figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
<figcaption> ...</figcaption> Применяется для обозначения заголовка элемента <figure>.
Пример:
figure>  
  img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  figcaption>  Fig.1 - Trulli, Puglia, Italy./figcaption>
/figure>
<footer> ... </footer> Используется для размещения связанной с основным содержимым информацией. Это нижняя секция документа, может быть не одна, если того требует семантический смысл документа. Обычно в нем содержится информация о защите авторского права, дате публикации, информации об авторе или список связанных ссылок.
Пример:
<hl>How to Etch Glass</hl>
<p>Start with clean glass ... </p>
. . . разметка
. .
<footer>copyright &сору; 2013 Jennifer Robbins
</footer>
</article>
<form> ... </form> Применяется для отображения интерактивной формы, в которой происходит сбор данных о пользователе.
Прочитано 479 раз Последнее изменение Пятница, 11 октября 2019 10:12

Оставить комментарий

Убедитесь, что Вы ввели всю требуемую информацию, в поля, помеченные звёздочкой (*). HTML код не допустим.