Приховані функції 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, зберігаючи всі ваші запити активів в одному протоколі.

Caveat: Якщо використовується на <link> або @import для таблиці стилів, IE7 та IE8 завантажують файл двічі . Однак, всі інші види використання є просто чудовими.

Тег мітки логічно пов'язує мітку з елементом форми, використовуючи атрибут "для". Більшість браузерів перетворюють це на посилання, яке активує відповідний елемент форми.

<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>
    <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) недостатньо людей знає про теад, теді, ноги на мої смаки. І скільки з вас знало, що tfoot повинен з’являтися над tbody у розмітці?

wbrАбо слово-брейк тег. Від Quirksmode:

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

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

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

На ­цій же сторінці є також сутність HTML. Це те саме, що, wbrале коли вставлено перерву, -для позначення перерви додається hypen ( ). Начебто як це робиться в друку.

Приклад:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Значною мірою невикористаною особливістю є той факт, що майже кожен елемент, який забезпечує видимий вміст на сторінці, може мати атрибут "title".

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

Застосування декількох класів html / css до одного тегу. Той же пост тут

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

Ми всі знаємо про декларації типу DTD або Document (ті речі, які призводять до виходу з ладу сторінки з валідатором W3C). Однак DTD s можна розширити , оголосивши список атрибутів для користувацьких елементів.

Наприклад, валідатор 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 .

Ми можемо призначити кодований рядок базової 64 як атрибут image / href image, 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> пояснення

Приклад:

<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Атрибут не дуже добре відомі , але дуже корисно. Атрибут використовується для ідентифікації мови вмісту або у всьому документі, або в одному елементі. Коди багажу наведені в 2-літерному мовному коді 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">