Скрытые функции HTML

Так как HTML был наиболее широко используемым языком (по крайней мере, как язык разметки), не получил его подлежащий выплате кредит.
Полагание, что это было вокруг в течение такого количества лет, вещей как ФОРМА / Элементы управления вводом, все еще осталось тем же без новых добавленных средств управления.

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

Конечно, этот вопрос вроде:

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

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

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

110
задан 23 revs, 6 users 71% 23 May 2017 в 12:18
поделиться

32 ответа

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

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

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

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

Для простого перенаправления!
(Спасибо @rlb)

13
ответ дан 24 November 2019 в 03:06
поделиться

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

например

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
10
ответ дан 24 November 2019 в 03:06
поделиться

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

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>
25
ответ дан 24 November 2019 в 03:06
поделиться

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

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

136
ответ дан 24 November 2019 в 03:06
поделиться
<blink>

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

<marquee>

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

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

85
ответ дан 24 November 2019 в 03:06
поделиться

Я недавно обнаружил о тегах 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>
26
ответ дан 24 November 2019 в 03:06
поделиться

Я думаю, что тег 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>
102
ответ дан 24 November 2019 в 03:06
поделиться

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

Например, валидатор W3C откажет для этой страницы из-за behavior = "mouseover" добавлено в тег

. Однако вы можете пропустить это, выполнив следующие действия:

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

Подробнее о Custom DTD в QuirksMode .

34
ответ дан 24 November 2019 в 03:06
поделиться

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

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

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

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

84
ответ дан 24 November 2019 в 03:06
поделиться

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

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

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

58
ответ дан 24 November 2019 в 03:06
поделиться

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

52
ответ дан 24 November 2019 в 03:06
поделиться

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

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />
56
ответ дан 24 November 2019 в 03:06
поделиться

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

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

43
ответ дан 24 November 2019 в 03:06
поделиться

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

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

 
getElements ByTagName ()

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

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

Пример:.

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

50
ответ дан 24 November 2019 в 03:06
поделиться

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

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
38
ответ дан 24 November 2019 в 03:06
поделиться

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

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
138
ответ дан 24 November 2019 в 03:06
поделиться

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

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

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

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

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

244
ответ дан 24 November 2019 в 03:06
поделиться

Тег 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>
22
ответ дан 24 November 2019 в 03:06
поделиться

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

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

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

<label for="alias">Alias:</label> <input name="alias" id="alias">
18
ответ дан 24 November 2019 в 03:06
поделиться
<img onerror="{javascript}" />

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

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

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

99
ответ дан 24 November 2019 в 03:06
поделиться

элементы

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

Они работают аналогично неупорядоченному списку (

    ), но вместо отдельных записей он больше похож на список ключей / значений.

    <dl>
      <dt>What</dt><dd>An Example</dd>
      <dt>Why</dt><dd>Examples are good</dd>
    </dl>
    
54
ответ дан 24 November 2019 в 03:06
поделиться

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

HTML <del>sucks</del> <ins>rocks</ins>!
67
ответ дан 24 November 2019 в 03:06
поделиться

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

Кнопка как ссылка, без 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>
15
ответ дан 24 November 2019 в 03:06
поделиться

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

HTML в теории является приложением SGML. Это, вероятно, самый короткий действительный документ HTML 4:

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

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

<!DOCTYPE html><title></title>
12
ответ дан 24 November 2019 в 03:06
поделиться

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