Скрытые особенности HTML

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

Свойство 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>

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

Ответ 4

Я думаю, что тег 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>

Ответ 5

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

Ответ 6

<img onerror="{javascript}" />

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

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

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

Ответ 7

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

Ctrl + Alt + Del

Ответ 8

<blink>

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

<marquee>

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

Edit: Easy-up fellas, это была всего лишь попытка юмора

Ответ 9

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

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

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

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

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 12

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

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

Ответ 13

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

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

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

Ответ 14

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

Ответ 15

Тег wbr или word-break. Из Quirksmode:

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

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

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

Существует также объект HTML ­, упомянутый на той же странице. Это то же самое, что и wbr, но когда вставлен разрыв, добавляется hypen (-), чтобы обозначить разрыв. Как будто это делается в печати. ​​

Пример:

Текст и застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчивый; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчивый; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив; Текст & застенчив;р >

Ответ 16

Много недооцененной особенностью является тот факт, что почти каждый элемент, который предоставляет видимый контент на странице, может иметь атрибут title.

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

Ответ 17

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

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

Ответ 18

Мы все знаем о объявлениях 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.

Ответ 19

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

например.

<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

Ответ 20

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

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

Ответ 21

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

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

Ответ 22

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

Ответ 23

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

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

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

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

Ответ 24

Тег 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>

Ответ 25

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

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

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

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

Ответ 26

Кнопка как ссылка, без 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>

Ответ 27

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

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

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

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

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

Ответ 28

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

Ответ 29

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

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

У сайта есть несколько приятных объяснений атрибута lang.

Примеры

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

<html lang="en">

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

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

Ответ 30

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

например.

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