На исходном коде предыдущей страницы я часто видел такие заявления:
<li>Some text here.<li>Some new text here.<li>You get the idea.Возможно, в прошлом мы могли терпеть такие не закрытые метки HTML, но в сегодняшних стандартах это очень нежелательно и следует избегать на 100%. Обязательно обратите внимание на закрытие ваших тегов HTML, в противном случае он не пройдет проверку и может вызвать некоторые непредвиденные проблемы.
Лучше всего использовать эту форму:
<ul><li>Some text here. </li><li>Some new text here. </li><li>You get the idea. </li></ul>Автор присоединился к многим форумам CSS раньше, где, если пользователь сталкивается с проблемами, мы бы предложили сначала сделать две вещи:
Обычно есть четыре типа документов на выбор :Doctype определяет, что до появления тега HTML он сообщает браузеру, содержит ли эта страница HTML, XHTML или смесь двух, так что браузер может правильно проанализировать тег.
1. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>2. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>3. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>4. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>Всегда были разные мнения о том, какую декларацию типа документов использовать. Обычно считается, что самое строгое утверждение является лучшим выбором, но исследования показывают, что большинство браузеров будут нормально анализировать такие утверждения, поэтому многие люди предпочитают использовать стандарт HTML4.01. Суть в выборе заявления заключается в том, что оно не подходит для вас, поэтому вы должны рассмотреть всесторонний выбор заявления, подходящего для вашего проекта.
Когда вы заняты написанием кода, вы часто можете добавлять небольшой встроенный код CSS случайно или ленивый, как это:
<p style=color: red;>武林网</p>Это выглядит удобно и не имеет проблем, но это вызовет проблемы в вашем коде.
Когда вы начинаете писать код, лучше всего начать добавлять код стиля после завершения структуры контента.
Этот метод кодирования похож на борьбу с партизанами, который является очень подходом. -Чрис Коййер
Лучшим подходом является определение стиля этого P в файле стилей:
someElement > p {color: red;}Теоретически, вы можете представить таблицы стилей CSS в любом месте, но HTML -спецификация рекомендует ввести их в тег на главе веб -страницы, которая может ускорить рендеринг страницы.
В процессе разработки Yahoo мы обнаружили, что внедрение листов в стиле в голове ускорит загрузку веб -страниц.
Потому что это позволяет отображать страницу шаг за шагом. - Юриская команда
<head><title>My Favorites Kinds of Corn</title><link rel=stylesheet type=text/css media=screen href=path/to/file.css /><link rel=stylesheet type=text/css media=screen href=path/to/anotherFile.css /></head>Один из принципов, который нужно помнить, - сделать страницу как можно быстрее представлена перед пользователями. Когда сценарий загружается, страница паузует загрузку, пока скрипт не будет полностью загружен. Так что это будет тратить больше времени для пользователей.
Если ваш файл JS просто хочет реализовать определенные функции (например, событие нажатия кнопки), то вы можете безопасно представить его в нижней части тела, что, безусловно, является лучшим способом сделать это.
Например : <p>And now you know my favorite kinds of corn. </p><script type=text/javascript src=path/to/file.js></script><script type=text/javascript src=path/to/anotherFile.js></script></body></html>Много лет назад был способ напрямую добавить код JS к тегам HTML. Особенно очень распространено в простых фотоальбомах. По сути, событие OnClick прилагается к тегу, и его эффект эквивалентен некоторым коду JS. Нет необходимости обсуждать слишком много, этот метод не должен использоваться, код должен быть перенесен во внешний файл JS, а затем AddEventListener / AttachEvent к прослушивателю времени. Или используйте структуру, такую как jQuery, которая требует использования его метода часов.
$('a#moreCornInfoLink').click(function() {alert('Want to learn more about corn?');});Многие люди не совсем понимают значимость и ценность стандартной проверки. Автор подробно проанализировал этот вопрос в блоге. Одним словом, стандартная проверка для вас, а не для вас, чтобы вызвать проблемы.
Если вы только начинаете работать в производстве веб -страниц, настоятельно рекомендуется загрузить эту панель инструментов веб -разработки и использовать стандартную проверку HTML и стандартную проверку CSS в любое время в процессе кодирования. Если вы думаете, что CSS является очень простым в изучении языка, он заставит вас умереть. Ваш замысловатый код будет постоянно наполнена лазейками и проблемами. Хороший способ - проверить, проверить, а затем проверить.
Firebug-лучший лучший плагин для веб-разработки. Это не только отлаживает JavaScript, но и позволяет интуитивно понимать свойства и местоположение тегов страниц. Само собой разумеется, скачать его!
Согласно наблюдению автора, большинство пользователей используют только 20% функций Firebug, что действительно является пустой тратой. С таким же успехом вы можете потратить несколько часов, изучая этот инструмент в системе, и я считаю, что это сделает вас вдвое больше результата с половиной усилий.
Учебник Firebug :Теоретически, вы можете написать оценки случайно, как это:
<DIV><P>Here's an interesting fact about corn. </P></DIV>Лучше всего не писать таким образом. Бесполезно вставлять больше букв, и это сделает код безобразным, что хорошо:
<div><p>Here's an interesting fact about corn. </p></div>Автор рекомендует вам использовать все шесть из этих тегов на ваших веб -страницах. Хотя большинство людей будут использовать только первые четыре, наиболее используемые H будет иметь много преимуществ, таких как удобные для устройства, удобные для поисковых систем и т. Д. Вы также можете заменить свой P-тег H6.
Сегодня автор инициировал дискуссию в Twitter: должно быть определено H1 на логотипе или на названии статьи, 80% людей выбрали последнее.
Конечно, как использовать его, зависит от ваших потребностей, но я предлагаю, чтобы при настройке блога вы должны установить название статьи как H1, что очень полезно для поисковой оптимизации (SEO).
За последние несколько лет команда Yahoo проделала большую большую работу в области развития. Не так давно они выпустили расширение Firebug под названием YSLOW, которое проанализирует вашу веб -страницу и вернет стенограмму, которая тщательно анализирует все аспекты этой веб -страницы и предлагает области, которые нуждаются в улучшении. Хотя это немного резко, это определенно поможет вам. Настоятельно рекомендуется - YSLOW!
Обычно на веб -сайте есть меню навигации, вы можете определить его таким образом:
<div id=nav><a href=#>Home </a><a href=#>About </a><a href=#>Contact </a></div>Если вы хотите написать красивый код, лучше не использовать этот метод.
Зачем использовать UL для меню навигации макета?
-Бо, если UL родился, чтобы подготовиться к списку определений
Лучше всего определить это так:
<ul id=nav><li><a href=#>Home</a></li><li><a href=#>About</a></li><li><a href=#>Contact</a></li></ul>Т.е. всегда был кошмаром для фронтальных разработчиков!
Если ваша таблица стилей CSS в основном завершена, вы можете создать отдельную таблицу стилей для IE, а затем это вступит в силу только для IE:
<!--[if lt IE 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->Значение этих кодов: если браузер пользователя составляет IE6 или ниже, то этот код вступит в силу. Если вы хотите включить IE7, измените [если IT IE 7] на [если LTE IE 7].
Независимо от того, являетесь ли вы пользователем Windows или Mac, есть много отличных редакторов для выбора:
Оглядываясь назад на первую страницу, которую большинство из нас пишет, мы обязательно найдем серьезные отрывы от Div. Обычно инстинкт начинающих состоит в том, чтобы обернуть абзац с DIV, а затем поставить больше DIV, чтобы контролировать позиционирование. - На самом деле, это неэффективный и вредный подход.
После написания веб -страницы вы должны много раз проверить ее, чтобы минимизировать количество элементов.
Если вы можете использовать макет UL, не используйте Div для макета списка.
Так же, как ключ к написанию статьи - уменьшить, уменьшить и сократить, написание страницы также должно следовать этому стандарту.
Преимущества добавления ALT -атрибута к изображениям являются самоочевидными - это позволяет пользователям, которые отключают изображения, или используют специальные устройства, чтобы получить доступ к информации о вашем принце, а также дружелюбны к поисковым системам.
Firefox не поддерживает отображение атрибута Alt Image, вы можете добавить атрибут заголовка:
<img src=cornImage.jpg alt=武林网title=武林网/>Я часто учусь и работаю до раннего утра, не зная об этом, и я думаю, что это хорошая ситуация.
Мои! Время (моменты Ах-ха, ссылаясь на моменты, когда свет неба или внезапное просветление) обычно происходит поздно ночью. Например, в данном случае я полностью понимаю концепцию закрытия в JavaScript. Если вы не пережили такой замечательный момент, попробуйте сейчас!
Ничто не может помочь вам учиться HTML быстрее, чем имитировать вашего идола. Сначала мы все должны были быть готовы сделать копир, а затем медленно развивать свой собственный стиль. Исследуйте код вашей любимой страницы веб -сайта и посмотрите, как они его реализуют. Это единственный способ для экспертов, вы должны попробовать это. Примечание: просто изучите и подражайте их стилю кодирования, а не копируйте и копируйте!
Обратите внимание на различные прохладные эффекты JavaScript в Интернете. Если вы, кажется, используете плагин, вы можете найти имя плагина на основе имени файла в теге головы в его исходном коде, а затем вы можете научиться использовать его для собственного использования.
Это особенно необходимо, когда вы создаете веб -сайты для других компаний. Разве вы не используете тег Blockquote? Тогда пользователи могут использовать его, разве вы сами не используете? Пользователи тоже могут. Найдите время, чтобы сделать страницу, которая отображает стили таких элементов, как UL, OL, P, H1-H6, Blockquotes и т. Д., И проверьте, есть ли какие-либо упущения.
Примечание переводчика: оригинальное английское название использует Twitter
Есть много API, которые могут быть добавлены на веб -страницы бесплатно, и эти инструменты очень мощные. Это может помочь вам реализовать множество умных функций, и, что более важно, это может помочь вам продвигать веб -сайт.
Photoshop является важным инструментом для инженеров фронт-эндов. Если вы уже опытны в HTML и CSS, вы можете узнать больше о Photoshop.
Хотя некоторые теги HTML редко используются, вы все равно должны их понимать. Например, ABBR, цитируйте и т. Д., Вы должны изучить их в случае чрезвычайных ситуаций.
В Интернете много отличных ресурсов, и в сообществе скрыты много экспертов. Здесь вы можете научиться самостоятельно и спросить опытных разработчиков.
Сброс CSS также сброшен CSS, что означает сброс некоторых стилей тегов HTML или стилей по умолчанию.
Существуют также жесткие дебаты о том, следует ли использовать CSS -сброс, и автор рекомендует это. Сначала вы можете выбрать несколько зрелых сбросов CSS, а затем медленно развиваться во что -то, что вам подходит.
Проще говоря, вы должны как можно больше выравнивать свои веб -элементы. Вы можете наблюдать за веб -сайтами, которые вам нравятся, и их логотипы, названия, диаграммы и абзацы определенно очень правильные. В противном случае это будет казаться хаотичным и непрофессиональным.
Теперь, когда вы освоили знания HTML, CSS и Photoshop, вам также нужно научиться преобразовать PSD в картинки и фон на веб -странице. Вот два хороших учебника:
Есть много отличных рамок для JavaScript и CSS, но если вы новичок, не спешите использовать их. Если вы не сможете умело освоить CSS, использование рамок путает вашу систему знаний.
Frameworks CSS предназначены для квалифицированных разработчиков, что сэкономит их много времени.