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


110

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

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

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

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

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

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

Ответы:


244

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

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

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

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

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


29
Это не функция HTML, а функция URL / URI.
Gumbo

44
@Gumbo: Да, это функция URI, но я решил, что она достаточно хороша, чтобы нарушить правила и включить ее сюда. И я не ожидаю появления скрытых возможностей спецификации URI в ближайшее время. :)
Пол Айриш

2
одна косая черта относительна от доменной части, а не от протокольной
SztupY

2
IE такой невероятно Тупой! Какого черта он делает DL файл дважды?

5
Есть один серьезный недостаток: когда файл сохраняется на диск и к нему осуществляется доступ по file:протоколу, браузер не сможет найти ресурс (например, CDN или другого внешнего сервера).
Марсель Корпель,

138

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

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

24
да, удивительно, как мало сайтов активно этим пользуются. Я видел сайты, использующие js для этого ...
Борис Калленс

2
Обнаружил это совсем недавно.
Арнис Лапса,

4
cagdas, в HTML действительно нет скрытых функций, это определенный стандарт.
век 06

54
Чтобы развернуть ответ, можно также обернуть поле ввода меткой и опустить атрибут for: <label> Fiscal Year <input name = "fiscalYear" type = "text" /> </label>
век

32
Использование флажков и переключателей без этого должно быть преступлением.
Kornel

136

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

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


7
Вопрос требует функций, которые не представлены в HTML5
Квентин

15
Дэвид Дорвард, не совсем честно сказать, что он появился в HTML5, поскольку contentEditable был введен MS в IE 5.5, но да, он не был стандартизирован до HTML5; Тайсон и Стив, contentEditable был представлен в Safari в версии 2.0, но многие важные методы форматирования не были добавлены до 3.x; Виктор Х. Валле, зависит от вашего типа. HTML 4 должен расширить его до = "true" в свернутом виде.
век 06

2
ссылка "попробуй это" не приводит к подходящему примеру
Гордон Густафсон

4
@Binoj - Абсолютно нет. «Атрибут contenteditable - это перечислимый атрибут, ключевыми словами которого являются пустая строка, истина и ложь» - w3.org/TR/html5/editing.html
Квентин,

2
А еще лучше добавить следующий букмарклет, чтобы можно было редактировать любую веб-страницу, на которой вы находитесь: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void (0);
Amro

102

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

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

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

@staticsan. Я согласен, что это полезно для небольшой категоризации ряда пунктов.
RichardOD

5
@eyelidlessness: я все время вижу раскрывающиеся списки, в которых элементы отступают или используют какой-то текст «заголовка», например ---category---.
DisgruntledGoat

4
Это отличная функция, о которой я не знал!
Chrisb

100

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

48
Вы также можете просто использовать /images/image.png с ведущей косой чертой. :-)
molf 05

46
Базовый тег - это ядерный вариант - он эквивалент #define: если вы не отслеживаете его, сделайте его действительно понятным для будущих разработчиков и сделайте его действительно низкоуровневой частью архитектуры сайта, это может привести к разочарованию. неочевидные ошибки. Мне это никогда не было нужно , используйте с осторожностью.
annakata 05

2
Да, я также видел, как базовый тег мешает моему JavaScript при попытке динамически загрузить файлы CSS на страницу. Кроме того, ошибка в IE6 требует, чтобы вы явно закрыли тег (</base>), что недопустимо. В этом могут помочь условные комментарии.
avdgaag 05

4
Обратите внимание, что базовый URL-адрес применяется ко всем относительным URL-адресам, а не только к относительным URL-адресам. Таким образом, ссылка #topбудет разрешена на «начало» в корневом индексном документе и на «начало» в том же документе.
Gumbo

17
Я нахожу это чрезвычайно удобным в ситуациях, когда мне нужно «просмотреть исходный код» и загрузить HTML-код страницы для работы с ним. После загрузки источника вы можете добавить элемент BASE с соответствующим атрибутом href. Таким образом, вы можете работать локально после загрузки только исходного HTML ... нет необходимости загружать все javascript, css и изображения.
Энди Форд,

99
<img onerror="{javascript}" />

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

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

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


Ага ... если это то, что я думаю, я должен знать это раньше, когда мне это действительно нужно. : /
Арнис Лапса

Чтобы уточнить, onerror - это событие javascript (как и onclick), которое позволяет вам что-то делать, когда изображение не загружается.
Иехия

1
Даниэль Силвейра, не могли бы вы пояснить, что это действительно запускает код ошибки в случае неработающих (например, 404) изображений? Тем не менее, это функция DOM, а не функция HTML как таковая.
век 06

2
У меня было шаловливое использование этого, указывая на несуществующее изображение, рекурсивно кто-нибудь ???
Pharabus

96

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

Ctrl+ Alt+Del


Есть ли что-то особенное в <kbd>, кроме другого формата шрифта? если нет, то вот список других тегов форматирования? w3schools.com/tags/tag_phrase_elements.asp
Ваш друг Кен

Не особенно, просто не очень хорошо известно, я не думаю,
Расс Кэм

3
По умолчанию ничего, но проще пометить элемент с помощью CSS, как это делает SO.
Agent_9191,

1
Не знал, что это существует, это весело.
Kzqai

85
<blink>

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

<marquee>

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

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


62
Возможно, вопрос должен был бы уточнить , что вы не должны список функции , которые мы хотим оставаться скрытыми.
Бен Бланк,

12
... Я использовал <blink> как часть стиля псевдотерминала для кода отображения div (: before {content: "drthomas @ house: ~ $";}: after {content: "_"; текст -decoration: blink;} ... это было потрясающе. Наверное, мне стоит обратиться за помощью. =]
Дэвид говорит,

2
<marquee> <blink> САМЫЕ раздражающие теги HTML !!! </blink> </marquee> Они не скрыты, они просто не используются по какой-то причине.
Ваш друг Кен

2
Я оборачиваю всю свою страницу в Marquee и Blink, потому что я такой крутой
Sphvn

3
Пожалуйста. Единственное законное использование <blink>: кот Шредингера <blink> не </blink> мертв. (Я думал, что это было на xkcd, но сейчас не могу найти.)
Кристофер Кройтциг

84

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

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

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

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


Этого я не знал. Можно ли его использовать для "загрузочной" анимации?
Boris Callens

2
Я получаю предупреждение о мошенничестве в Opera по этой ссылке "использовать Hotmail". : o
jrista

2
Это сайт безопасности, он безопасен.
Джои Роберт,

27
Но этот атрибут фирменный. msdn.microsoft.com/library/ms534138(VS.85).aspx
Gumbo

17
Этот атрибут устарел с HTML4 - вы не должны использовать его на рабочих сайтах.
Бен Халл

67

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

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

10
Определенно недостаточно.
век 06

2
@eyelidlessness: просто не хватает ситуаций, когда пометка удаленного / вставленного текста так полезна.
DisgruntledGoat 09

2
Могу поклясться, что некоторое время назад StackOverflow использовал <ins>и <del>на страницах редакций, но теперь он использует <span class="diff-add">и <span class="diff-delete">. :(
система ПАУЗА

1
@DisgruntledGoat истории изменений вики? множество вариантов использования для этого
HorusKol

3
@Horus: конечно, вы можете найти применение, но, по большому счету, это все еще не так много ситуаций.
DisgruntledGoat

58

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

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

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


15
Жалко, что это не работает в IE <8. Можно обойти проблемы, но это может быть болезненно, и иногда вы сталкиваетесь с защитой безопасности, работающей между веб-сервером и средой программирования на стороне сервера.
Quentin

6
Но IE <8 отправит содержимое элемента, а не его значение. Я считаю, что некоторые версии всегда будут рассматривать его как успешный элемент управления (даже если он не был нажат).
Квентин

4
И если вы сделаете его <button contenteditable>, вы также можете изменить текст кнопки! Указывает на всех, кто сможет найти ему достойное применение. :)
Гэвин

4
Я никогда не понимал, почему существует «входной» тип отправки. Он ничего не вводит, просто отправляет то, что вы ввели в другие поля.
DisgruntledGoat 01

3
@DisgruntledGoat: его пара имя / значение будет отправлена. Полезно, если у вас есть более одной кнопки в форме (например, редактировать, удалить, переместить и т. Д.) И вы хотите различать нажатую кнопку. К сожалению, то же самое не работает buttonв IE <8, он удивительно отправляет пары имя / значение ВСЕХ buttonэлементов.
BalusC

56

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

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

1
Обнаружил это несколько недель назад
Дэниел Моура,

41
На самом деле не скрыто, имо.
Дмитрий Фарков,

Это обычное дело.
UpTheCreek

Если вы не сталкивались с этим раньше, я надеюсь, что вы раньше не
создавали

как это можно считать скрытым?
Marin

54

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

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

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

Кроме того, семантика dl / dt / dd подходит для подобных списков (например, структура рекомендована для диалогов).
век 06

2
Представление по умолчанию не так хорошо, но люди забывают, что элементы можно стилизовать разными способами с помощью CSS.
DisgruntledGoat 09

18
Более интересная вещь, о которой часто забывают, - это формат ключ / значение / значение / значение / значение / ключ / значение
Квентин

1
@D_N, я думаю, что несогласие кроется в том, что я считаю предлагаемые варианты использования частью определения и семантики, а не отдельными и противоречащими ему.
Без век 03

1
@D_N и @eyelidlessness - ознакомьтесь с примечанием Брюса Лоусона о семантической разметке беседы ... плюс еще не принято решение по
Fenton

52

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


1
boris callens, Да, tbody подразумевается, если нет ни thead, tbody и tfoot.
век 06

2
Если бы IE5 правильно реализовал TBODY, больше людей использовали бы его. Несколько лет назад это было главной проблемой. Mozilla и Opera поддерживали прокрутку TBODY, что было действительно круто; к сожалению, IE5 этого не сделал.
staticsan

9
Они полезны для печати, потому что они должны помещать theadи tfootвверху и внизу каждой страницы. Жалко, что theadв браузере нет механизма повторения , когда у вас длинные длинные таблицы.
DisgruntledGoat 09

1
Я знал, что эта тупица идет выше тела, и я думаю, что это довольно глупо. Я поместил свой tfoot ниже, где это имело смысл, получил ошибку валидатора, переместил tfoot над телом (запутанный, но всегда совместимый) и угадайте, что ?! Когда вы пытаетесь выделить таблицу, браузер (по крайней мере, FF) выделяет ступню ПЕРЕД телом, даже если она визуально находится ниже тела! А потом!!! когда вы копируете его в текстовый редактор, он визуально находится НАД телом. Совершенно произвольное правило.
Anthony

3
@Anthony: имеет смысл, если у вас медленное соединение, это означает, что вы можете видеть все верхние и нижние колонтитулы, пока содержимое таблицы все еще загружается.
me_and

50

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

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

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

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

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

Пример:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText


2
Будьте осторожны, потому что здесь плохая поддержка браузеров
Christophe Eblé

7
"IE8 as IE8" не поддерживает его, и он содержит ошибки в Safari 3.0 для Windows. В остальном поддержка довольно хорошая. См. Таблицу совместимости по ссылке.
aleemb 05

Хм, ссылка sitepoint пометила этот тег как устаревший и бесполезный, кто прав? reference.sitepoint.com/html/wbr
Кристоф Эбле 05

Он вполне может быть устаревшим как часть спецификации HTML, но он по-прежнему работает в браузерах. Если сомневаетесь, примите вердикт QuirksMode (таблицы совместимости теперь спонсируются Google).
aleemb 05

Похоже, это было бы очень полезно включить в следующий стандарт css!
Джеймс

43

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

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


Да, атрибут «title» весьма полезен, особенно для элементов, которые предназначены для щелчка.
Стив Харрисон,

6
Появляющаяся всплывающая подсказка зависит от браузера. Не все браузеры будут отображать атрибут заголовка одинаково. Но это хорошая функция, которую я, безусловно, использую.
Travis

8
Атрибут title полезен, но только при правильном использовании. Большинство браузеров отображают всплывающую подсказку только на несколько секунд, прежде чем она исчезнет. Я ненавижу, когда дизайнеры чувствуют необходимость заполнить атрибут заголовка 3 или 4 строками текста, из-за чего вам нужно навести курсор мыши, а затем снова навести указатель мыши, чтобы прочитать остальную часть.
priestc

Использование этого в сочетании с jQuery равносильно великолепию.
Леви Моррисон,

Леви - можешь привести несколько примеров?
belugabob

38

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

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

22
Это классы HTML, а не классы CSS. В CSS нет классов (есть селекторы классов). HTML-классы полезны не только для CSS.
Квентин

36
Вот Это Да! Я просто не могу смириться с тем фактом, что люди считают это «скрытой» функцией. Боже, я чувствую себя глупо из-за публикации некоторых «действительно скрытых» функций, потому что люди, проголосовавшие за это, вероятно, даже не приблизятся к пониманию того, что означает расширение DTD.
aleemb 05

5
d03boy, p.foo, p.var - это не то же самое, что p.foo.bar. Первый выбирает любой абзац с классом «foo» или «var», второй выбирает абзац с обоими классами.
век 06

5
То, что касается классов HTML, является хорошим моментом, потому что это подводит меня к мысли - html не должен быть осведомлен о css ... вы «должны» иметь возможность создавать html и передавать его дизайнеру, который может реализовать их дизайн без необходимо изменить html (пока не совсем так;)) .. так что это сводится к вашему именованию и способу использования классов .. не создавайте классы для целевых свойств css .. используйте классы, чтобы определить, что элемент ' '.
meandmycode 06

1
Технически "Foo Bar BlackBg" - это единственный класс, а p.foo - просто синтаксический сахар для p [class ~ = foo] (см. Спецификацию ). Однако легче представить себе, что у него несколько классов.
Tgr

34

Все мы знаем о 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 .


10
Конечно, это делает его «Действительным: ваш собственный язык разметки», а не «Переходным XHTML 1.0»
Квентин

3
+1. Я не знаю, почему это было -1. В любом случае следует отметить, что поддержка браузеров практически нулевая.
век 06

Я уверен, что Opera это поддерживает.
Rich Bradshaw

2
@eyelidlessness работает только в XHTML. Не работает в вымышленном XHTML, отправленном как текст / HTML.
Kornel

2
Ээш, не фанат этого. Для меня ценность HTML в том, что все на планете знают, что он означает (более или менее), потому что все мы используем одни и те же теги и атрибуты. Я не уверен, почему у classатрибута недостаточно расширяемости.
Пол Д. Уэйт,

28

Мы можем назначить закодированную строку 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


4
К сожалению, IE <8 не поддерживает это. Однако вместо этого вы можете использовать MHTML для этих браузеров: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Матиас

26

Недавно я узнал о тегах 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>

Пожалуйста, предоставьте образец использования этого.
Binoj Antony 05


Обнаружил набор полей на странице примера aspnet mvc. ^^
Арнис Лапса

2
Не знал об этом. Вот спецификация W3c: w3.org/TR/html401/interact/forms.html#h-17.10
MitMaro,

Полевые наборы и легенды великолепны. Действительно хороший способ разметить ваши формы.
Нил Эйткен

25

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

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

57
Что в конечном итоге работает почти так же, как iframe, за исключением того, что он менее хорошо поддерживается и имеет меньше функций.
Квентин

iframe устарел, надеюсь, мы скоро получим лучшую поддержку,
Гордон Густафсон,

12
iframe не является устаревшим в HTML 5.
Зак,

Предотвращает ли это XSS-атаки со встроенной страницы?
анонимный трус

1
Я считаю, что он использует SOP, так же, как и с iframe.
Zach

25

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

25

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

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


1
Привет .. Это, по-видимому, еще одна скрытая особенность HTML: /;)
BalusC

1
Если в форме есть несколько кнопок отправки, и пользователь нажимает одну, определенные версии Internet Explorer с радостью сообщают вашему серверу, что все они были нажаты. Чудесно.
Detly

1
@detly: только если вы используете <button type="submit">вместо <input type="submit">:)
BalusC

1
... бууууу разве у IE6 тоже нет проблем <input type="submit">? (Я плохо помню эту проблему - я давно убедил работодателей не беспокоиться о совместимости IE с внутренними веб-приложениями, так что это больше не моя проблема. Но я, кажется, припоминаю некоторые препятствия на пути решения этой проблемы в IE6. )
Detly 03

2
Это не очень удобно для i18n.
zneak 03

22

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

15
По моему опыту, поддержка colgroup в лучшем случае ненадежна.
век 06

поразительно похожа на WPF Grid
Биной ​​Энтони

18

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

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

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

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

4
Но он пользуется меньшей поддержкой браузером, чем атрибут for,
Квентин

4
@David - У вас есть документация, подтверждающая это? Не думаю, что когда-либо видел браузер, не поддерживающий такое использование. Я лично тестировал IE6 / 7, FF2 / 3, Safari 3 и Chrome 1/2. Я не тестировал себя в Opera, но был бы очень удивлен, если бы это не сработало. Такое поведение является частью исходной спецификации HTML 4.0, впервые опубликованной более одиннадцати лет назад: w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for
Бен Бланк,

Кроме того, недопустимо помещать ввод внутри метки, и DOH вы не закрыли свой тег ввода ни в одном из примеров!
Энтони

5
Вы ошибаетесь в обоих пунктах: это допустимая практика, и конечный тег запрещен для входных элементов.
moo

15

Кнопка как ссылка, без 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
У Button не будет опции «Сохранить файл как», которая может понадобиться пользователям, которым не нравится, что Adobe Acrobat захватывает их браузер.
Kornel

При доступе к файлу PDF он будет вести себя с поведением браузера по умолчанию. Это может быть HTML-файл, текстовый файл, ZIP-файл или что угодно еще.
Wadih M.

В какой ситуации для тега привязки требуется событие onclick? и почему 3 строки HTML лучше, чем 1? Идея, что вы МОЖЕТЕ иметь кнопку вместо ссылки, так что это приятно и нравится кнопке? Несмотря на то, что меня это раздражает, на самом деле у меня есть страница, на которой используются кнопки вместо ссылок, потому что файл создается динамически, когда пользователь запрашивает его, поэтому мне не нужна ссылка на: blah.php? Stuff = "userdata" Несмотря на то, что я мог пойти по этому пути, я не хотел рисковать тем, что имя файла имеет сценарий создания файла в качестве имени вместо имени файла, которое сценарий дает файлу.
Энтони

1
Почему бы просто не оформить тег <a> как кнопку? Похоже, в вашей разметке много мусора.
UpTheCreek

2
@UpTheCreek некоторые веб-приложения хотят выглядеть так же, как ОС. Например, уродливая кнопка, когда пользователь использует Windows, и красивая кнопка, когда пользователь использует Mac OS X.

13

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

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

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

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

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


13
Конечно, определение того, какие элементы нуждаются в обновлении, а затем их обновление с помощью AJAX, приводит к гораздо более приятному взаимодействию с пользователем ...
Стив Харрисон,

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

11
/ me ненавидит страницы, которые так обновляются ... следует забанить = /
Свиш

3
Это также может быть полезно, если установлено значение немного меньше тайм-аута сеанса, чтобы уведомить пользователя о том, что его сеанс истек и был удален.
fforw

1
Короткие таймауты отключают кнопку возврата.
Kornel

12

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

4
Вы должны быть осторожны с тем, что рекламируете. Приведенный выше код пройдет проверку с 4 предупреждениями на валидаторе w3c, но DocType - это HTML 4.0. Довольно удобно, что HTML 4 является наследником SGML и, следовательно, поддерживает этот свободный стандарт проверки, но если вы измените этот DTD на XHTML 1.0 STRICT, он получит 15 ошибок, что почти равно количеству символов. XHTML был разработан потому, что HTML был таким ленивым (и, следовательно, небезопасным), поэтому мы больше не хотим этим пользоваться.
Энтони

3
Если вы измените DOCTYPE документа HTML / SGML на XHTML / XML, вы получите бессмысленную смесь. Это совершенно очевидно, и я не уверен, почему вы на это указываете.
Kornel

3
Технически этот пример может быть допустимым HTML 4, но браузеры не поддерживают этот сокращенный синтаксис SGML. Ниже приводится кратчайший действительный документ HTML 5, который фактически поддерживают браузеры:<!DOCTYPE html><title></title>
Брайан Кэмпбелл,

Есть идеи, насколько совместимо исключение head/ body, а не только с точки зрения проверки?
kibibu

@kibibu: У браузеров с этим нет проблем. Старые версии Opera <head>иногда пропускали в DOM, но содержимое заголовка было в DOM и все равно работало. Самая большая проблема, которую я обнаружил, заключается в том, что клиенты OpenID требуют <head>явного присутствия.
Kornel

11

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

10

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

например

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

10
И не говоря уже о том, что «обязательно для большинства современных языков разметки, и без него невозможно надежно проверить документ» ... validator.w3.org/docs/help.html#faq-doctype
Svish

Я не думаю, что это уже «малоизвестно». За время между IE 6 и IE 7 использование doctype увеличилось с ~ 1% до> 50%.
век 06

@eyelidlessness Большинство IDE включают этот тег, поэтому его использование увеличилось. Я думаю, этот тег малоизвестен.
Дэниел Моура,

6
А использование строгого doctype устраняет 95% несоответствий браузера.
DisgruntledGoat

3
Является частью стандарта и используется 99% разработчиков, но это не похоже на «скрытую функцию».
WhyNotHugo
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.