Стили кодирования для HTML - PullRequest
2 голосов
/ 30 марта 2010

Существует ли стандарт кодирования для HTML? Пожалуйста, предложите ссылки, которые имеют стили кодирования для HTML.

Например:

 <table>
 <tr>
     <td>
         Data
     </td>
 </tr>
 </table>

Ответы [ 5 ]

2 голосов
/ 07 апреля 2010

Вот несколько стандартов, которые нужно добавить в ваш список.

1. Отступы

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

<div><p>Hello <a href="http://somewebsite.com/">World</a></p><div><p>Hello World</p></div>

Это выглядит нормально, пока вы не сделаете отступ правильно и не обнаружите ошибку:

<div>
    <p>Hello <a href="http://somewebsite.com/">World</a></p>
    <div>
        <p>Hello World</p>
    </div>

Оригинальный div не был закрыт. По электронной почте Ой! Вот почему отступы могут быть отличным способом экономии времени.

2. Теги и атрибуты

В настоящее время общепринято, что все теги и атрибуты должны быть в нижнем регистре. Мы давно отказались от тегов ALL CAPS в HTML, а также от camelCasing для таких вещей, как onMouseOver и onClick, которые теперь являются строчными. Все значения атрибутов должны быть заключены в двойные кавычки. Например:

<div id="content">Hello</div>

Не

<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>

3. Только семантическая наценка

Не используйте теги для определения стиля или для управления стилем. Например ...

<font>
<b>

Или такие атрибуты, как ...

<table border="2">

Кроме того, не используйте такие вещи, как теги h1, просто чтобы получить больший шрифт.

Подумайте, что означает этот тег: «h1» - это заголовок верхнего уровня, «p» - абзац, «table» обозначает данные, представленные в табличном формате. Никогда не используйте тег для целей, отличных от предназначенных, и попытайтесь узнать, какие теги доступны. Например, используя списки вместо выкладывания списков вручную.

Не используйте таблицы для разметки. (я подчеркнул этот важный момент, используя семантический тег "em").

Не используйте слишком много тегов div для решения проблемы! (Div-И!)

1 голос
/ 31 марта 2010

Вы имели в виду стиль отступов? Вот стиль отступа de facto :

<table>
  <tr>
     <td>One line of text - no indent.</td>
     <td>
       <p>
         Multiple lines of text. <br />
         With line breaks - indent.<br />
         Inline: <b>no indent</b>
       </p>
     </td>
  </tr>
</table>

Однако вышеприведенный стиль занимает слишком много места, поскольку для некоторых стилей отступов HTML, HEAD и BODY не имеют отступов.

<html>
<head>
<title>Title</title>
</head>
<body>

<div>
  <h1>Title</h1>
  <p>Hello, world! The content begins here.</p>
</div>

</body>
</html>
1 голос
/ 30 марта 2010

Сначала выберите ваш doctype, а затем проверьте ваш html с помощью валидатора W3C для ошибок форматирования

Другие вещи, которые следует учитывать на макушке головы:

  1. Правильный отступ
  2. Сопротивление искушению добавить слишком много разметки, т.е. сделать разметку простой
  3. Структурируйте ваш HTML семантически так, чтобы, если вы выключили таблицы стилей, документ все еще имел смысл и был в правильном порядке
  4. Избегайте устаревших тегов, например <font>
  5. Выбор общих имен классов, например mainHeader вместо largeRedHeader
  6. Использовать классы для повторяющихся элементов и идентификаторы для элементов, которые появляются один раз
  7. Использовать классы и идентификаторы только для родительских элементов и стилизовать дочерние элементы, используя css, например. #intro> p вместо #intro .paragraph
1 голос
/ 30 марта 2010

HTML Tidy предоставляет довольно удобный для повторения стиль, который также поможет вам применить.

0 голосов
/ 30 марта 2010

Лично я следую стандартам xhtml (все открытые теги получают закрытый тег, чувствительность к регистру и т. Д.). Это облегчает следование коду и автоматическое форматирование. Я тоже вообще делаю отступ 1 от своих родителей:

<table summary="example table">
   <tr>
       <td>
           Data
       </td>
   </tr>
</table>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...