Давайте вернемся к основам для этого. Каждый, кто читает это, по крайней мере знает, что такое HTML. Я считаю, что независимо от того, какой уровень опыта у кого-то есть, проверка основ может помочь увеличить знания. Это также помогает оттачивать навыки, особенно благодаря постоянно развивающимся технологиям, которые управляют Интернетом.
Также было много разговоров об изменениях в HTML 5. Каждый упомянутый ниже тег поддерживается как в HTML 4.01, так и в HTML 5. Хотя некоторые из этих тегов уже широко используются; Я хотел бы оспорить некоторые способы, которыми мы пользуемся, и подумать о них.
1 <! — ->
Любая книга о программировании, которую вы читаете, скажет вам, что хорошо объяснить, что вы делаете. Почему комментарии хорошая идея? Именно по этой причине. Это помогает тем, кто смотрит на ваш код, знать, что происходит.
Для HTML комментирование может показаться излишним; тем не менее, он может использоваться для определения разделов и может помочь сохранить ваш код организованным и структурированным. Маркировка начала и конца раздела действительно помогает с рабочим процессом.
|
1
2
3
4
5
6
7
8
9
|
<!— Beginning of Nav —>
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
</ul>
<!— End of Nav —>
<!— Beginning of Main Content —>
<p>This is the main content.</p>
…
|
2 Табличные стили — <thead>, <tbody> и <tfoot>
Когда я вспоминаю более ранние дни веб-разработки, первое, что приходит мне в голову, это <таблица>. Я злоупотребил этим так сильно. При правильном использовании <table>, только для табличных данных, можно определить стили для заголовков столбцов, строк нижнего колонтитула и тела.
Как бы скучно это ни было, действительно хорошо создать хорошо отформатированную электронную таблицу. (Это говорит вне веб-разработки.) Почему бы нам не перенести эту простую задачу форматирования в великолепный дизайн? Каждый тег может быть легко стилизован в таблице стилей сайта.
Просто чтобы уточнить: все эти три тега влияют на строки таблицы.
| Вещь | Кол-во |
| сумма | 7 |
| # 1 | 3 |
| # 2 | 4 |
<THEAD>
Оберните строки таблицы с помощью <thead> </ thead>.
<TFOOT>
Оберните строки таблицы с помощью <tfoot> </ tfoot>. Строки <tfoot> также должны быть выше <tbody>. Это так, что строка нижнего колонтитула отображается перед оставшимися строками данных.
<TBODY>
Оберните строки таблицы с помощью <tbody> </ tbody>.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<table>
<thead>
<tr>
<td>Item</td>
<td>Qty</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>7</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>#1</td>
<td>3</td>
</tr>
<tr>
<td>#2</td>
<td>4</td>
</tr>
</tbody>
</table>
|
3 <OPTGROUP>
Выпадающие списки — отличный способ представить данные пользователю для выбора. Они не только осведомлены о недвижимости на экране, но и знакомы и просты в использовании. Самое замечательное в <optgroup>, это возможность создавать категории (или мы могли бы называть их заголовками) для ваших вариантов.
Детройт Тайгерс
Чикаго Кабс
Детройт Лайонс
Чикагские Медведи
|
01
02
03
04
05
06
07
08
09
10
|
<select>
<optgroup label=»Baseball Teams»>
<option value=»Detroit Tigers»>Detroit Tigers</option>
<option value=»Chicago Cubs»>Chicago Cubs</option>
</optgroup>
<optgroup label=»Football Teams»>
<option value=»Detroit Lions»>Detroit Lions</option>
<option value=»Chicago Bears»>Chicago Bears</option>
</optgroup>
</select>
|
4 Заголовки — <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
Я знаю, что все используют заголовочные теги. Но, честно говоря, я не помню, когда в последний раз я использовал <h3> или ниже. У меня нет хороших рассуждений, кроме того, что я не думал об этом и использовал что-то менее семантическое, например, стиль текста в <div>
Моя точка зрения здесь: не создавайте больше работы для себя. Не забудьте использовать все теги заголовков.
5. <fieldset> и <legend>
Мне нравятся сайты, на которых легко найти информацию с логически разделенными элементами. Я думаю, это выглядит гладко. <fieldset> группирует элементы формы, рисуя вокруг них рамку. Также можно добавить подпись к форме с помощью <legend>.
|
1
2
3
4
5
6
7
8
|
<form>
<fieldset>
<legend>General Information: </legend>
<label>Name: <input type=»text» size=»30″ /></label>
<label>Email: <input type=»text» size=»30″ /></label>
<label>Date of birth: <input type=»text» size=»10″ /></label>
</fieldset>
</form>
|
6. <ярлык>
Возможно, это один из моих любимых тегов HTML. Тег label ничего не делает для стилизации. Это добавляет функциональность.
<label> используется для определения метки для элемента ввода. Так в чем же дело? При использовании сама метка становится активной, что делает соответствующее поле ввода активным. Это работает для текстовых полей или переключателей.
Имя:
Мужчина:
Женский:
|
1
2
3
4
5
|
<form>
<label>Name: <input type=»text» size=»30″ /></label>
<label>Male: <input type=»radio» name=»sex» /></label>
<label>Female: <input type=»radio» name=»sex» /></label>
</form>
|
7. <blockquote>
Если вы хотите создать впечатляющий эффект, чтобы привлечь внимание к утверждению или предложению, вы можете использовать <blockquote>. Пробел вставляется до и после элемента по умолчанию. Поля также добавляются, чтобы сместить содержащийся текст от другого содержимого.
Это также отличный способ сделать такие вещи, как традиционная блочная цитата. (Я знаю, что это было ужасно очевидно.) В большинстве случаев, когда я пишу учебник, я беру прямую выдержку из другого сайта или источника. Я буду использовать <blockquote>, чтобы установить это отдельно.
Это то, что Nettuts + использует для стилевого оформления цитат.
8. <цитировать>
Я не хочу сказать, что <cite> относится к <blockquote>, но я знаю, что обычно я использую их вместе. </ P>
Подумайте о <cite>, когда вам нужно что-то процитировать. Если вы только что закончили колледж, подумайте о том, чтобы предоставить список ваших рекомендаций в конце своих работ. Помните, что в формате MLA названия книг и периодических изданий должны быть выделены курсивом.
«Мы любим красивую типографику и ценим усилия дизайнеров, которые придумывают великолепные типографские приемы и инструменты или просто делятся своими знаниями с коллегами-дизайнерами». — smashingmagazine.com
|
1
2
3
|
<blockquote>
<p>»…this is some great quote.»
</blockquote>
|
9. <dl>
Использование списков — отличный способ упорядочить информацию. Все знают о <ul>, но как часто используются <ol> и <dl>? Возможно, ссылка на «список определений» вводит некоторых начинающих программистов в заблуждение, что они могут использоваться только при вставке терминов и определений — однако на самом деле это не так.
Типы списков
- Ненумерованный список (ul)
- Упорядоченный список (ол)
- Список определений (дл)
Что они делают
- Ненумерованный список (ul) : маркированный список
- Упорядоченный список (ol) : нумерованный список
- Список определений (dl) : список с определениями для элементов
Причины использовать списки
- Последовательный стиль
- Легко создать
- Очень универсальный
Каждый тип списка отображает информацию ценным способом. Я не думаю, что мне нужно объяснять <ul> и <ol>, но давайте подробнее рассмотрим структуру списка определений.
|
1
2
3
4
5
|
<dl>
<dt>This is list item #1</dt>
<dd>This is the definition of list item #1</dd>
<dt>This is list item #2</dt>
<dd>This is the definition of list item #2</dd>
|
Вместо того, чтобы объявлять только тип списка (<ul> или <ol>) и каждый элемент списка (<li>), мы используем <dt> и <dd>. <dt> определяет каждый элемент списка, а <dd> описывает вышеуказанный элемент.
10. & # 39; (и другие символы ASCII)
Правильно использовать коды HTML ASCII при использовании любых символов. Это немного больше работы, но это гарантирует, что символы отображаются правильно, и не будут смущены браузером как часть строки или другой разметки. Вы когда-нибудь встречали какой-то текст на веб-странице, который выглядел неправильно? Может быть, что-то вроде этого: «Я не использовал HTML для отображения апострофа».
Приведенный выше пример является вынужденным, но я думаю, что он передает идею.
Наборы символов, используемые в современных компьютерах, HTML и Интернете, основаны на ASCII. — w3schools.com
На w3schools.com есть отличная справочная HTML- страница для символов ASCII. Я призываю всех проверить это и запомнить несколько наиболее часто используемых символов, таких как апостроф, кавычки, амперсанд и знак «на».
Спасибо за прочтение!