Я занимаюсь фронтенд-разработкой уже почти 3 года. Сегодня я хотел бы поговорить с вами о моем личном опыте в области веб-фронтенд-разработки (конечно, это все мое личное понимание. Пожалуйста, включите и поправьте меня, если таковое есть). все, что я говорю, является неуместным или неправильным). Позвольте мне начать с веб-стандартов.
Что такое WEB-стандарты?
Ха-ха, говорят, что это WEB-стандарт, но здесь я в основном суммирую некоторый опыт использования XHTML1.1 и CSS2.1. Поскольку WEB охватывает очень большой объем контента, «WEB-стандарты» — это общее название ряда стандартов, включая HTML4.0, XHTML1.1, CSS2.1, XML1.0, RSS2.0, ECMAScript1.1 и DOM1 0. и так далее. Итак, я хочу указать вам, что WEB-стандарт — это не то, что мы называем DIV+CSS.
Только что упомянутое выше — DIV+CSS, хаха, позвольте мне объяснить, это на самом деле неверно. Точный термин DIV+CSS (личное понимание) должен быть следующим: использование XHTML1.1 в веб-стандарте, рекомендованном W3C, в сочетании с таблицей стилей CSS2.0 для создания страницы. DIV должен относиться к тегу XHTML, а отображение CSS — к тегу XHTML. Таблица стилей CSS.
Преимущества разработки с использованием WEB-стандартов
Так почему же W3C рекомендует такой метод создания страниц? Давайте вкратце рассмотрим преимущества использования стандартной WEB-разработки (личное понимание) по сравнению с предыдущей разметкой TABLE?
1. Экономьте эксплуатационные расходы и экономьте деньги!
Ха-ха, интересно ли вам что-нибудь, что поможет вам сэкономить деньги? Конечно, мне очень интересно. Посмотрите, как достигается наш стандартный метод производства WEB?
Используя WEB-стандарты для создания, мы можем добиться очень формального разделения выражений. Мы используем XHTML для выражения (данных) и CSS для управления формой (представлением элементов страницы). На хорошо написанной странице код XHTML в основном содержит данные, которые хотят видеть пользователи, а также другие декоративные элементы, и все это контролируется нашим CSS. Таким образом, размер нашей (XHTML) страницы будет значительно уменьшен, что снизит затраты на пропускную способность. Как это уменьшить? Вы можете себе представить, что домашняя страница YAHOO имеет размер 1 КБ, и ее посещают 1 000 000 человек. сколько полосы пропускания экономится? И полоса пропускания может быть использована более полно.
Наш CSS контролирует стили всех элементов страницы. Теперь, если вы хотите изменить общий стиль веб-сайта, вам нужно потратить всего несколько минут на изменение CSS-файла, и вы легко сможете это сделать. Затраты на техническое обслуживание также снизились, что позволило сэкономить много денег, не так ли? Кроме того, вы откроете эту страницу намного быстрее. Страница, которая заставляет вас ждать полминуты. Если информация внутри не очень полезна для вас, у нас практически нет времени ждать.
2. Он более удобен для пользователя и дает возможность привлечь больше пользователей.
Теперь поговорим об удобстве использования. Сначала я хочу классифицировать наших пользователей по категориям.
Категория 1: Обычные пользователи (все, кто посещает наш сайт);
Категория 2: Поисковые системы;
Страницы, разработанные с использованием WEB-стандартов, имеют четкую структуру, небольшой размер и хорошую совместимость с браузерами. Когда обычные пользователи обращаются к ней, страница открывается быстро, и независимо от того, какой браузер использует пользователь, они могут получить доступ (отобразить) страницу в обычном режиме, структура страницы понятна, и данные, которые они ищут, можно легко просмотреть.
Для поисковых систем хорошая страница, разработанная с использованием веб-стандартов, оптимизирована для SEO. Ее очень удобно посещать, и легко понять, где на вашей странице находится заголовок (теги H1 ~ H6), а где заголовок (p. тег), где в абзаце следует выделить контент (сильный тег) и т. д., его можно легко проанализировать. Как мы все знаем, сайт с хорошим SEO имеет больше шансов быть проиндексированным поисковыми системами. Это также означает, что ваш сайт будет посещать больше обычных пользователей, что приведет на ваш сайт больше пользователей.
Это может помочь нам сэкономить много денег и повысить эффективность работы. В то же время он может улучшить скорость просмотра страниц, быть удобным для пользователя и даже привлечь больше пользователей, не тратя денег на рекламу. Как вы думаете, вы бы использовали его? Ха-ха, это также причина, по которой наш W3C рекомендует использовать WEB-стандарты для открытых веб-сайтов. Эта технология также получила признание наших пользователей, поэтому теперь вам необходимо изучить WEB-стандарты. ^-^!
Ха-ха, я закончил обзор базовых курсов и теперь официально начинаю говорить о навыках XHTML и CSS.
Разумная планировка
Некоторые друзья начнут спрашивать, почему мы начинаем говорить о разумном макете с самого начала. Ха-ха, мы уже упоминали некоторые моменты ранее: «Четкая структура, SEO-оптимизация, небольшой размер страницы и XHTML-код в основном содержит все требования пользователя. Посмотрите». данные». Эти вещи являются результатом нашей разумной планировки. И я лично считаю, что все, что мы создаем с использованием WEB-стандартов, начинается с этой точки знаний, поэтому сначала я расскажу об этой теме.
Тогда все начнут спрашивать, какую страницу считать разумным макетом? Что ж, это хороший вопрос. Это также один из наиболее часто задаваемых вопросов, когда мы только начинаем учиться использовать WEB-стандарты. Меня часто беспокоит этот вопрос. Здесь я расскажу о своем понимании разумной компоновки. .
Прежде чем мы начнем говорить об элементах, которыми должна обладать правильно скомпонованная страница, нам было бы более интуитивно понятно использовать пример для объяснения этого. Давайте сначала посмотрим на эту картинку:
http://www.yaohaixiao.com/samples/myblog/index.htm
Да, это страница с подробными сведениями о статье, здесь нет макета левого и правого столбцов, но здесь я хочу сосредоточиться на разумном макете. Я подробно расскажу о плавающих элементах в следующей статье. Хорошо, вернемся к теме, все видели эту страницу.