Скрытые возможности HTML

HTML, являющийся наиболее широко используемым языком (по крайней мере, как язык разметки), не получил должного признания.
Учитывая, что он существует уже много лет, такие элементы, как элементы управления FORM / INPUT, остались прежними, без добавления новых элементов управления.

Итак, по крайней мере, из существующих функций, знаете ли вы какие-либо функции, которые не очень известны, но очень полезны.

Конечно, этот вопрос примерно такой:

Скрытые функции JavaScript
Скрытые функции CSS
Скрытые функции C #
Скрытые функции VB.NET
Скрытые функции Java
Скрытые функции классического ASP
Скрытые функции ASP.NET
Скрытые функции Python
Скрытые функции TextPad
Скрытые функции Eclipse

Не упоминать особенности HTML 5.0, так как он находится в рабочем проекте

Укажите одну функцию для каждого ответа .

Использование абсолютного пути, не зависящего от протокола:

<img src="//domain.com/img/logo.png"/>

Если браузер просматривает страницу в SSL через HTTPS, он запросит этот актив по протоколу https, в противном случае он запросит его по HTTP.

Это предотвращает появление ужасного сообщения об ошибке «Эта страница содержит как защищенные, так и незащищенные элементы» в IE, сохраняя все ваши запросы ресурсов в рамках одного протокола.

Предупреждение: при использовании в <link> или @import для таблицы стилей IE7 и IE8 загружают файл дважды . Однако все другие варианты использования вполне подходят.

Тег label логически связывает метку с элементом формы с помощью атрибута «for». Большинство браузеров превращают это в ссылку, которая активирует связанный элемент формы.

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>

Свойство contentEditable для (IE, Firefox и Safari)

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

Это сделает ячейки доступными для редактирования! Давай, попробуй, если не веришь мне.

Я думаю, что тег optgroup - это функция, которую люди используют не очень часто. Большинство людей, с которыми я разговариваю, не склонны осознавать, что он существует.

Пример:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Мой любимый бит - это базовый тег, который спасает жизнь, если вы хотите использовать маршрутизацию или перезапись URL ...

Допустим, вы находитесь по адресу:

www.anypage.com/folder/subfolder/

Ниже приведен код и результаты для ссылок с этой страницы.

Обычный якорь:

<a href="test.html">Click here</a>

Приводит к

www.anypage.com/folder/subfolder/test.html

Теперь, если вы добавите базовый тег

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

Якорь теперь ведет к:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror это событие JavaScript, которое будет запущено прямо перед отображением маленького красного креста (в IE).

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

На первый взгляд это может показаться совершенно бесполезным, потому что разве вы раньше не знали, было ли изображение вообще доступно? Но, если подумать, для этого есть прекрасные допустимые приложения; Например: предположим, что вы обслуживаете изображение со стороннего ресурса, который вы не контролируете. Как и наш граватар здесь, в SO ... он обслуживается с http://www.gravatar.com/ , ресурса, который команда stackoverflow вообще не контролирует, хотя он надежен. Если http://www.gravatar.com/ выйдет из строя, stackoverflow может решить эту проблему, используя onerror.

<kbd>Элемент для разметки ввода с клавиатуры

Ctrl+ Alt+Del

<blink>

Должен использоваться для чего-то важного на сайте. Самые важные сайты мгновенно переносят весь контент.

<marquee>

Создает реалистичный эффект прокрутки, отлично подходит для электронных книг и т. Д.

Изменить: Простые ребята, это была просто попытка юмора

Не очень хорошо известно, но вы можете указать lowsrcдля изображений, которые будут отображаться lowsrcпри загрузке srcизображения:

<img lowsrc="monkey_preview.png" src="monkey.png" />

Это хороший вариант для тех, кто не любит чересстрочные изображения.

Небольшая мелочь: в какой-то момент это свойство было настолько неясным, что оно использовалось для эксплуатации Hotmail примерно в 2000 году.

DELи INSотметить удаленное и вставленное содержимое:

HTML <del>sucks</del> <ins>rocks</ins>!

Кнопка тег новый input submitтег и много людей все еще не знакомы с ним. Текст на кнопке можно, например, стилизовать с помощью тега button.

<button>
    <b>Click</b><br />
    Me!
</button>

Будет отображена кнопка с двумя линиями, первая говорит « Click » жирным шрифтом, а вторая говорит «Me!». Попробуйте здесь .

Укажите css для печати

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />

<dl> <dt>и<dd> детали часто забывают , и они выступают за список определений, Определение термина и определения.

Они работают аналогично неупорядоченному списку ( <ul>), но вместо отдельных записей он больше похож на список ключей / значений.

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>

Не совсем скрыто, но (и это вина IE) на мой вкус не достаточно людей знает о thead, tbody, tfoot . И кто из вас знал, что tfoot должен появляться над tbody в разметке?

wbrИли слово-брейк тег. Из Quirksmode:

(разрыв слова) означает: «Браузер может вставить здесь разрыв строки, если пожелает». Если браузер не считает разрыв строки необходимым, ничего не происходит.

<div class="name">getElements<wbr>ByTagName()</div>

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

На ­той же странице упоминается также объект HTML. Это то же самое, wbrно когда вставляется разрыв (- , добавляется ) для обозначения разрыва. Вроде как в печати.

Пример:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Чрезвычайно малоиспользуемая особенность заключается в том, что почти каждый элемент, обеспечивающий видимый контент на странице, может иметь атрибут «заголовок».

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

Применение нескольких классов html / css к одному тегу. Тот же пост здесь

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>

Все мы знаем о DTD или объявлениях типов документов (те вещи, которые приводят к сбою страницы с валидатором W3C). Однако возможно продление DTD. , объявив список атрибутов для настраиваемых элементов.

Например, валидатор W3C откажет для этой страницы из-за behavior="mouseover"добавления к <p>тегу. Однако вы можете сделать это, выполнив следующие действия:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

Дополнительные сведения о пользовательских DTD см . На сайте QuirksMode .

Мы можем назначить закодированную строку base 64 как атрибут source / href для изображения, JavaScript, iframe, ссылки

например

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

Ссылки

Как я могу создавать изображения с использованием разметки HTML?

Двоичный файл в кодировщик / переводчик Base64

Недавно я узнал о тегах fieldset и label. Как указано выше, не скрыто, но полезно для форм.

<fieldset> объяснение

Пример:

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

Вы можете использовать objectтег вместо тега, iframeчтобы включить на страницу другой документ:

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

<optgroup>- отличный вариант, который люди часто упускают при составлении сегментированных <select>списков.

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

это то, что вы должны использовать вместо

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>

Большинство также не знают, что вы можете отличить нажатую кнопку формы, просто задав им пару имя / значение. Например

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

На стороне сервера можно получить фактическую нажатую кнопку, просто проверив наличие параметра запроса, связанного с именем кнопки. Если это не такnull , значит была нажата кнопка.

Я видел много из ненужных JS хаки / обходные путей для этого, например , изменения формы действия или изменение скрытого входного значения заранее в зависимости от нажатой кнопки. Это просто потрясающе.

Кроме того, я видел почти столько же JS-хаков / обходных решений для сбора отмеченных из нескольких флажков, как в строках таблицы. При каждом выборе / проверке строки таблицы JS будет добавлять индекс строки к некоторому значению, разделенному запятыми, в скрытом элементе ввода, который затем будет разделен / проанализирован на стороне сервера. Это результат незнания того, что вы можете дать нескольким элементам ввода одно и то же имя, но другое значение, и что вы все равно можете получить к ним доступ как к массиву на стороне сервера. Например

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

Незнание даст каждому флажку другое имя и опустит весь атрибут значения. В некоторых ситуациях без JS-взлома / обходного пути я также видел некоторую излишне подавляющую магию в коде на стороне сервера, чтобы различать отмеченные элементы.

Тег Colgroup .

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

Если forатрибут <label>тега не указан, он неявно устанавливается как первый дочерний элемент <input>, т.е.

<label>Alias: <input name="alias" id="alias"></label>

эквивалентно

<label for="alias">Alias:</label> <input name="alias" id="alias">

Кнопка как ссылка, без JavaScript :

Вы можете поместить любой файл в действие формы , и у вас есть кнопка, которая действует как ссылка. Нет необходимости использовать события onclick или что-то подобное. Вы даже можете открыть файл в новом окне, вставив «цель» в форму. Я не часто видел эту технику в применении.

Замените это

<a href="myfile.pdf" target="_blank">Download file</a>

с этим:

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>

Самый простой способ обновить страницу за X секунд - META Refresh

<meta http-equiv="refresh" content="600">

Значение в содержимом означает секунды, после которых вы хотите обновить страницу.
[Редактировать]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

Сделать простой редирект!
(Спасибо @rlb)

<html>, <head>и <body>теги необязательны. Если вы их опустите, они будут автоматически вставлены парсером в соответствующие места. Это вполне допустимо , чтобы сделать это в HTML (так же , как подразумеваемые<tbody> ).

HTML в теории - это приложение SGML. Вероятно, это самый короткий действующий документ HTML 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

Вышесказанное не работает нигде, кроме W3C Validator. Однако кратчайший действительный text/htmlдокумент HTML5 работает везде:

<!DOCTYPE html><title></title>

В langАтрибут не очень хорошо известны , но очень полезно. Атрибут используется для определения языка содержимого всего документа или отдельного элемента. Коды языка даны в двухбуквенном коде языка ISO (например, «en» для английского, «fr» для французского).

Это полезно для браузеров, которые могут настраивать отображение кавычек и т. Д. Программы чтения с экрана также могут воспользоваться этим lang атрибутом, как и поисковые системы.

Sitepoint имеет некоторые интересные объяснения изlang атрибута.

Примеры

Укажите английский язык для всего документа, если он не переопределен другим langатрибутом на более низком уровне в DOM.

<html lang="en">

В следующем абзаце укажите шведский язык.

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

В "! DOCTYPE" декларация . Не думайте, что это скрытая функция, но кажется, что она малоизвестна, но очень полезна.

например

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">