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

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

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

Конечно, этот вопрос имеет следующий характер:

Скрытые возможности JavaScript
Скрытые возможности CSS
Скрытые возможности C#
Скрытые возможности VB.NET
Скрытые возможности Java
Скрытые возможности классического ASP
Скрытые возможности ASP.NET
Скрытые возможности Python
Скрытые возможности TextPad
Скрытые возможности Eclipse

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

Пожалуйста, укажите одну функцию в ответе.

36 ответов

Используя независимый от протокола абсолютный путь:

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

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

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

Предостережение. При использовании в или @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/, ресурса, который команда stackru вообще не контролирует - хотя он и надежен. Если http://www.gravatar.com/ выйдет из строя, stackru может обойти это, используя onerror,

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

Ctrl+Alt+Del

<blink>

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

<marquee>

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

Редактировать: Easy-up ребята, это была просто попытка юмора

Не очень хорошо известно, но вы можете указать 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>
    <b>Click</b><br />
    Me!
</button>

Будет отображаться кнопка с двумя строками, первая из которых будет "Кликать" жирным шрифтом, а вторая - "Я!". Попробуй это здесь.

Укажите 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 должен появляться над тобой в разметке?

wbr или тег разрыва слова. Из Quirksmode:

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

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

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

Там также есть &shy; 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 Encoder / Translator

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

объяснение

Пример:

<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 to include another document in the page:

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

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

<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-взлома и обходных путей я также видел неоправданно сильную магию в коде на стороне сервера, чтобы различать проверенные элементы.

<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>

Тег 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. Однако самый короткий действительный HTML5 text/html Документ работает везде:

<!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">
Другие вопросы по тегам