Да започнем с най-очевидният пример.
Лошите код семантика
Добри код семантика
Но не всичко е добре представена маркери на HTML5. Нека да разгледаме набор от имената на класовете и да се справят с това, дали те отговарят на изискванията на семантика.
Не е семантичен код. Това е класически пример за това. Всяка работна среда за CSS модулна мрежа използва този вид имената на класовете да се определят елементите на мрежата. Дали това ще "Юи-б", "решетка-4" или "spanHalf" - такива имена по-близо до оформлението на работа, отколкото да се опише съдържанието. Въпреки това, тяхната употреба често е неизбежно, когато се работи с шаблони модулни мрежи.
Ако сте се преместили на използването на HTML5, най-добре е да се използва елемент
Семантичната код. В този случай това е елемент за определяне на степента на важност в интерфейса на приложение (например, раздел или бутон). Елемент с по-високо ниво може да има по-живи цветове и размери, както и елементите, с ниска степен могат да съдържат повече съдържание. Но точното определение на стилове в този случай не е, така че кодът е семантичен. Тази ситуация е много подобен на използването на тагове
. . . и така нататък, но с други елементи от интерфейса.
. и така нататък, но с други елементи от интерфейса.
Не е семантичен код. В този случай става дума за определяне на стила на първия параграф на страницата. Този метод се използва, за да привлече вниманието на читателите към материала. По-добре е да се използва името "интро", в която не съществува по отношение на елемент. Но дори и по-добре да се използва за избор на тези параграфи, като статия р: първо-на-тип или h1 + стр.
Семантичната код. Класът е много добро описание на състоянието на съдържанието. Например, съобщение за успешното приключване на операцията може да има съвсем различен стил на съобщението за грешка.
Не е семантичен код. В този пример, има опит да се създаде определянето на формата на съдържанието, а не по предназначение. "Plain-Джейн" е много подобен на "нормална" или "нормална". Идеален CSS код трябва да е написан така, че не е било необходимо в имената на класа като "нормална", които описват формат на съдържанието.
Не е семантичен код. Този тип клас обикновено се използва за определяне на елементите на сайта, които не следва да бъде включен във веригата на връзки. В този случай е по-добре да се използва нещо като относителен = Nofollow за връзки, но не и на класа за цялото съдържание.
Не е семантичен код. Тук е опит да се опише формата на съдържанието, а не по предназначение.
Не е семантичен код. Самата Link таг я определя. Ако в този случай е имало опит да се подчертае връзката между другото, най-добре е да се използва описанието на типа "защо", например, "книга-връзка" или "бутон".
Да приемем, че имате уеб сайт, има две статии. И искам да попитам различни стилове. "Movie Reviews" ще има син фон и "Горещи новини" - червен фон и шрифт по-голям.
Един от начините за решаване на проблема, както следва:
Друг начин е:
Разбира се, ако ви задам няколко разработчиците за това какво кода по-последователно с семантиката на изискванията, повечето ще сочи към първия вариант. Тя напълно съответства на материала на урока: описание на назначаването без позоваване на форматиране. Вторият вариант показва формата ( "blueBg" - името на класа, който се формира от две думи на английски език, което означава "син фон"). Ако изведнъж се реши да промени дизайна на филм преглед - например, да се направи зелен фон, името на класа "blueBg" ще се превърне в кошмар за програмисти. А името на "филм преглед" ще позволи абсолютно лесно да се промени стилове при запазване на отлично ниво на подкрепа на кода.
Но никой не твърди, че първият пример е по-добре във всички случаи без изключение. Да приемем, че на определен нюанс на синьото използва на много места в сайта. Например, това е на фона на някои от областите, долната част на страницата и в страничния панел. Можете да използвате следната селектора:
Ефективно решение, тъй като цветът се определя от само едно място. Но този код става трудно да се подкрепи, защото тя има дълга селектор трудно за визуалното възприятие. Също така изисква и други селектори за определяне на уникални стилове, които ще доведат до повторение на кода. Или можете да използвате по-различен подход и да ги оставите отделени:
Този стил спомага за CSS файл по-организирано (различни области са определени в различни секции). Но на борда е да се повтаря определенията. За по-големи обекти, определението на един и същи цвят може да бъде до няколко хиляди пъти. Ужасно! Едно от решенията може да бъде да се използва един клас от тип "blueBg", за да се определи цвета веднъж и го поставете в HTML кода, когато искате да използвате този дизайн. Разбира се, че е по-добре да се обадя "mainBrandColor" или "secondaryFont", за да се отърве от формата за описание. Можете да дарите семантиката на кода в полза на опазването на ресурсите.
5 урока от последната колона "HTML и DHTML"
Когато пишете или отстраняване на грешки PHP скриптове, ние често използваме var_dump () и print_r (), за да изведете разнообразни разширени данни и обекти. В този пост искам да ви разкажа за функция var_export (), който може да конвертирате масив във формат, подходящ за PHP код.
Няколко безплатно шаблони администраторския панел.
Създаване на шаблон за писане не е просто въпрос. Предлагаме Ви избор от 30 места, където можете да изтеглите тези шаблони, за да задоволят всички вкусове.
Например, имате поле за търсене, които се обработват при всяко натискане на клавиш на клавиатурата. Ако някой иска да напише думата Windows, искане AJAX ще бъде изпратено на следния фрагмент: W, Wi, Win, Wind, Windo, Window, Windows. Проблемът?.
Селекция от 15 нови сайтове, където можете да изтеглите безплатни снимки за запълване на техните сайтове.
Рамазан Умаров
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!
Свързани статии