Очистить от тегов html. Очистить текст от html тегов. Особое внимание следует уделить оптимизации тегов Title и Description
Текст данной статьи сфокусирован на различных путях форматирования CSS, что отличается от разных путей организации CSS. По сути, данные понятия схожи между собой, но лично мне кажется, что организация CSS отвечает больше за то, как сгруппированы и упорядочены элементы CSS, что позволяет быстро и удобно находить и редактировать нужные отрывки.
Форматирование не имеет ничего общего с функциями CSS. Это лишь придание эстетически привлекательного вида коду. Правда, это не значит, что форматирование вовсе не важно. Это все равно что сказать, что художнику нет разницы на каком полотне рисовать. Это влияет на удобство во время написания кода CSS, на легкость при просмотре кода, при его дальнейшем редактировании.
По причине того, что существует множество различных путей форматирования CSS, не существует каких-то жестких правил и рамок, касающихся интервалов и переноса строк. Например:
Div { width: 50px }
Это то же самое, что и:
Div{width:50px}
Как и:
}
Многострочное форматирование
Navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}
Держу пари, что такой вариант наиболее часто применимый. Его очень легко читать, потому что он предоставляется короткими отрывками, именно поэтому обучаемые статьи чаще всего отформатированы именно таким методом. В примере, предоставленном выше, нет пустой строки между закрытием скобки и следующим отрывком, и это на самом деле используется чаще всего.
Многострочное форматирование с расстановкой абзацев
Navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}
Выделенный блок означает, что данный отрывок является каким-то определенным и важным, нежели предыдущие отрывки, и также отображает дочерние элементы.
Форматирование в одну строку
Div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }
Это, наверное, наиболее экономичный вариант, потому как весь код сжат в один сплошной текст, без каких-либо пробелов и переносов на новые строки. Правда, такой метод потребует постоянного скроллинга, как вертикального, так и горизонтального, если вам захочется отредактировать код. К тому же, такой метод выглядит достаточно безобразно, и в случае, когда в дальнейшем потребуется отредактировать код, вам вероятно будет крайне сложно отыскать нужный отрывок.
Форматирование в одну строку с табуляцией
p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }
Форматирование в одну строку с расстановкой абзацев
Выделенный отрывок кода указывает на то, что в нем содержится информация, дочерняя информации с предыдущего абзаца.
Обычное форматирование в одну строку
Вообще, я предпочитаю форматирование в одну строку, но использую перенос строки в текстовом редакторе, чтобы эти длинные строки не продолжались вечно, а умещались в окно редактора. Правда, для особо длинных строк с множеством различных отрывков, я использую жесткий перенос строк, чтобы переключаться на новую строку с атрибутами.
H1, h2, h3 { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h2 a, h2 a:visited { color: #2e2e2e; }
h2 a:hover { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
margin: 0 0 15px 0; color: #5e5d5d; }
td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
text-align: left; }
Вариации
Форматирование в одну строку может быть выполнено посредством простого открытия последующей скобки на той же строке, что также часто наблюдается в коде PHP:
Div
{
padding: 10px;
}
В многострочном форматировании с табуляцией можно наблюдать открывающуюся скобку в роли разделителя:
#content-area ol { margin: 15px 0 0 25px; list-style: decimal; }
#content-area ol ol { list-style: lower-alpha; }
#content-area ul { margin: 0 0 0 5px; list-style: none; }
#content-area ul li { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
#content-area ul ul { margin: 15px 0 0 25px; list-style: disc; }
#content-area ul ul li { background: none; padding: 0; }
Комбинирование
Комбинирование многострочного и однострочного форматирования может привести только к группированию схожих атрибутов в одной строке:
Navigation_rss_icon {
position: absolute;
top: 10px; left: 10px; bottom: 10px; right: 10px;
font-size: 12px; font-weight: bold;
}
Читаемость vs. Скроллинга
Ваш выбор варианта форматирования должен основываться на читаемости кода. Вам требуется быстро и удобно перемещаться по коду, для того, чтобы срочно исправить тот или иной отрезок. Если вам кажется, что однострочное форматирование слишком тяжко для ваших глаз, и вам сложно понять, что и где находится в коде, то лучше, конечно, избегать данный вариант.
Вообще, я считаю многострочный вариант форматирования легким в поиске того или иного отрывка кода, но построчно такой документ занимает намного больше места, раз в 5-8. Но в общем счете, я считаю такие документы менее читаемыми, потому что появляется этот надоедливый вертикальный скроллинг, и вам приходится носиться от одного куска кода к другому. В то время как форматирование в одну строку иногда даже намного удобнее за счет того, что большая часть кода у вас на виду.
Лучший вариант форматирования для себя самого принято считать тот, который представляет большую читаемость и меньший скроллинг. А вообще, смотрите на собственные ощущения комфорта.
Преобразование и оформление текста 1. Трансформирование текста text-transformС помощью данного свойства можно преобразовать текст в верхний и нижний регистры, или превратить первые буквы каждого слова, которые были заглавными (прописными) в строчные. Наследуется.
Синтаксис
H2 {text-transform: none;}
h2 {text-transform: capitalize;}
h2 {text-transform: uppercase;}
h2 {text-transform: lowercase;}
Рис. 1. Преобразование текста с помощью свойства text-transform
Свойство задаёт направление написания текста, направление размещения столбца таблицы, направление, в котором блок заполняет содержимое по горизонтали и положение последней строки выровненного по ширине элемента. Рекомендуется использовать вместе со свойством unicode-bidi . Наследуется.
Синтаксис
P {direction: ltr;} p {direction: rtl;}
3. Направление написания слов в тексте unicode-bidiСвойство используется вместе со свойством direction для поддержки написания слов в двунаправленном тексте. Не наследуется.
Синтаксис
P {unicode-bidi: normal;} p {unicode-bidi: embed;} p {unicode-bidi: bidi-override;}
4. Декорирование текста text-decorationСвойство декорирует текст. Также убирает подчёркивание ссылок. Не наследуется.
Синтаксис
A {text-decoration: none;} span {text-decoration: underline;} span {text-decoration: overline;} span {text-decoration: line-through;} Рис. 2. Оформление текста с помощью свойства text-decoration
5. Форматирование первой буквы и первой строки абзацаCSS даёт возможность форматирование абзаца с использованием псевдоэлементов:first-letter и:first-line . Например, можно выделить первый символ каждого абзаца, имитируя буквицу или придать особое форматирование первому предложению абзаца. В качестве фона для:first-letter также можно устанавливать градиентую заливку.
/*первый абзац*/ p:first-letter { font-size: 2em; margin-right: 2px; color: #EE9966; font-weight: bold; text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99; } p:first-line { color: #EE9966; } /*второй абзац*/ p:first-letter { font-size: 1.2em; padding: 5px 10px; margin-right: 5px; background: #EE9966; color: #FAF4F4; float: left; border-radius: 50% 0; font-weight: bold; } /*третий абзац*/ p:first-letter { font-size: 1.2em; padding: 5px 10px; margin-right: 5px; margin-bottom: 2px; background: #EE9966; color: #FAF4F4; float: left; font-weight: bold; } /*четвертый абзац*/ p:first-letter { font-size: 1.2em; padding: 3px 10px; margin-right: 5px; background: #EE9966; color: #FAF4F4; float: left; font-weight: bold; border-radius: 50%; } /*пятый абзац*/ p:first-letter{ font-size: 1.5em; padding: 2px 10px; margin-right: 5px; background: #FAF4F4; border: 6px double; color: #EE9966; float: left; font-weight: bold; } /*шестой абзац*/ p:first-letter{ font-size: 1..png); border: 2px solid #EE9966; color: #544E3E; float: left; font-weight: bold; box-shadow: 1px 1px 1px #9E9D99; }
6. Форматирование кавычек quotesСвойство задаёт тип кавычек, используемых в документе для вложенных цитат. По умолчанию кавычками оформляется текст, заключенный в тег . Также кавычки можно сгенерировать помощью свойства content , задав ему значения open-quote и close-quote . В качестве значения используется специальный символ HTML или символ Юникода. Наследуется.
Синтаксис
P {quotes:"«" "»";} p {quotes: none;}
| Двойная кавычка | " | \0022 | " |
| Апостроф | " | \0027 | " |
| Открывающая одинарная кавычка | ‘ | \2018 | ‘ |
| Закрывающая одинарная кавычка | ’ | \2019 | ’ |
| Закрывающая двойная кавычка | “ | \201C | “ |
| Правая двойная кавычка | ” | \201D | ” |
| Двойная нижняя кавычка | ⹂ | \2E42 | ⹂ |
| Открывающая левая кавычка «ёлочка» | « | \00AB | « |
| Закрывающая правая кавычка «ёлочка» | » | \00BB | » |
| Нижняя одинарная открывающая кавычка | ‚ | \201A | ‚ |
| Верхняя одинарная обратная кавычка | ‛ | \201B | ‛ |
| Нижняя двойная открывающая кавычка | „ | \201E | „ |
| Двойная верхняя обратная кавычка | ‟ | \201F | ‟ |
| Одинарная открывающая (левая) французская угловая кавычка | ‹ | \2039 | ‹ |
| Одинарная закрывающая (правая) французская угловая кавычка | › | \203A | › |
Порой наш код не всегда бывает идеален. А так хочется, чтобы он был не только рабочий, но и красиво оформлен и отформатирован. Время - это наш главный враг, оно редко позволяет следить нам за правилами оформления кода. Мы стараемся побыстрее закончить верстку, или описать десяток css-стилей, и делаем это в ущерб читабельности. В этой статье я приведу список сервисов, которые помогут вам отформатировать ваш код так, чтобы на него было приятно смотреть.
Довериться программе или делать все ручками?Наверняка у вас возникал вопрос: как сделать код читабельным? Может ли программа грамотно расставить все отступы и переносы строк так, чтобы человеческий глаз получал он вида кода лишь эстетическое удовольствие? Конечно, может! Не стоит заблуждаться, что, раз работу за вас делает, по сути, робот, то сделана она будет "грязно". Сервисы, которые будут представлены в статье ниже, не раз спасали меня. Например, в ситуациях, когда необходимо было скопировать тот же html код с другого сайта, а теги при вставке оказывались просто в каком-то хаотическом порядке расставлены по строкам: куча табуляций, не логические переносы строк, абсолютно не видно никакой вложенности! Наверное, многим такое знакомо. И очень хочется, чтобы на своем сайте у вас было по-другому: аккуратно и хорошо читаемо. Ведь, в первую очередь, мы делаем это для себя, для удобства дальнейшей поддержки того или иного кода.
Давайте же отформатируем ваш кодМеньше слов, больше дела. Как показала практика, форматирование кода онлайн происходит достаточно просто. Вам нужно лишь скопировать ваш "грязный" код и вставить его в специальные текстовые поля на одном из указанных сайтов. Затем нажать кнопку, немного подождать и - вуаля! Вы получаете прекрасный, отформатированный и легко читабельный код.
Вот список всех известных мне "пурификаторов" кода для различных языков.
С задачей очистки html от лишних тегов сталкиваются абсолютно все.
Первое, что приходит на ум, это использовать php-функцию strip_tags():
string strip_tags (string str [, string allowable_tags])
Функция возвращает строку, очищенную от тегов. В качестве аргумента allowable_tags
передаются теги, которые не надо удалять
. Функция работает, но, мягко говоря, неидеально. По ходу, там нет проверки на валидность кода, что может повлечь за собой удаление текста, не входящего в тэги.
Инициативные разработчики сложа руки не сидели — в сети можно найти доработанные функции. Хорошим примером является strip_tags_smart .
Применять или не применять готовые решения — личный выбор программиста. Так сложилось, что мне чаще всего не требуется "универсального" обработчика и бывает удобнее почистить код регулярками.
От чего зависит выбор того или иного способа обработки?
1. От исходного материала и сложности его анализа.
Если вам нужно обрабатывать достаточно простые htmp-тексты, без какой-либо навороченной верстки, ясные, как день:), то можно использовать стандартные функции.
Если в текстах есть определенные особенности, которые надо учесть, то тут-то и пишутся специальные обработчики. В одних может использоваться просто str_replace
. Например:
$s = array("’" => "’", // Right-apostrophe (eg in I"m)
"“" => "“", // Opening speech mark
"–" => "—", // Long dash
"â€" => "”", // Closing speech mark
"Ã " => "é", // e acute accent
chr(226) . chr(128) . chr(153) => "’", // Right-apostrophe again
chr(226) . chr(128) . chr(147) => "—", // Long dash again
chr(226) . chr(128) . chr(156) => "“", // Opening speech mark
chr(226) . chr(128) . chr(148) => "—", // M dash again
chr(226) . chr(128) => "”", // Right speech mark
chr(195) . chr(169) => "é", // e acute again
);
foreach ($s as $needle => $replace)
{
$htmlText = str_replace($needle, $replace, $htmlText);
}
Другие могут быть основаны на регулярных выражениях . Как пример:
Function getTextFromHTML($htmlText)
{
$search = array (""]*?>.*?"si", // Remove javaScript
""]*?>.*?"si", // Remove styles
""]*?>.*?"si", // Remove xml tags
"""si", // Remove HTML-tags
""([\r\n])[\s] "", // Remove spaces
""&(quot|#34);"i", // Replace HTML special chars
""&(amp|#38);"i",
""&(lt|#60);"i",
""&(gt|#62);"i",
""&(nbsp|#160);"i",
""&(iexcl|#161);"i",
""&(cent|#162);"i",
""&(pound|#163);"i",
""&(copy|#169);"i",
""(\d);"e"); // write as php
$replace = array ("",
"",
"",
"",
"\\1",
"\"",
"&",
"",
" ",
chr(161),
chr(162),
chr(163),
chr(169),
"chr(\\1)");
Return preg_replace($search, $replace, $htmlText);
}
(В такие минуты как никогда радует возможность preg_replace работать с массивами в качестве параметров). Массив вы при необходимости дополняете своими регулярками. Помочь в их составлении вам может, например, этот конструктор регулярных выражений . Начинающим разработчикам может быть полезной статья "All about HTML tags. 9 Regular Expressions to strip HTML tags" . Посмотрите там примеры, проанализируйте логику.
2. От объемов.
Объемы напрямую связаны со сложностью анализа (из предыдущего пункта). Большое количество текстов увеличивает вероятность, что, пытаясь предусмотреть и почистить все регулярками, вы можете что-нибудь да упустить. В этом случае подойдет метод "многоступенчатой" очистки. То есть очистить сначала, допустим, функцией strip_tags_smart (исходники на всякий случай не удаляем). Потом выборочно просматриваем некоторое количество текстов на выявление "аномалий". Ну и "зачищаем" аномалии регулярками.
3. От того, что надо получить в результате.
Алгоритм обработки может быть упрощен разными способами в зависимости от ситуации. Случай, описанный мной в , хорошо это демонстрирует. Напомню, текст там находился в div-е, в котором кроме него был еще div с "хлебными крошками", реклама адсенс, список похожих статей. При анализе выборки статей обнаружилось, что статьи не содержат рисунков и просто разбиты на абзацы с помощью . Чтобы не чистить "главный" див от посторонних вещей, можно найти все абзацы (с Simple HTML DOM Parser это очень просто) и соединить их содержимое. Так что прежде чем составлять регулярки для чистки, посмотрите, нельзя ли обойтись малой кровью.
Вообще, между сторонниками парсинга html-кода, основанного чисто на регулярных выражениях, и парсинга, в основе которого лежит анализ DOM-структуры документа, в сети разгораются настоящие холивары. Вот, например, на оверфлоу. Невинный с первого взгляда
Приветствую друзья, из данной статьи вы узнаете - как очистить HTML код, как оптимизировать картинки, как правильно оформить и оптимизировать метатеги, как сделать сайт быстрее, узнаете для чего нужно оптимизировать скрипты находящиеся на сайте.
Одним из важных мероприятий по внутренней оптимизации сайта является оптимизация кода страниц . За счет этого можно улучшить общее качество ресурса, увеличить скорость загрузки страниц, повысить эффективность работы интерактивных функций.
Валидация и стандартизация HTMLПринципиально важно для поискового продвижения и обеспечения положительного пользовательского опыта, чтобы сайт мог одинаково хорошо работать в любых браузерах, на разных операционных системах, в мобильных и стационарных компьютерах.
Для достижения общей унификации все сайты разрабатываются на основе стандартных версий HTML. Наиболее актуальными сегодня являются версии HTML 4.1 и HTML5. Последняя хотя все еще и находится в стадии разработки, в сети уже опубликовано огромное количество таких сайтов.
Все самые популярные браузеры – Opera, Google Chrome, Mozilla Firefox в своих последних версиях используют поддержку нового гиперязыка HTML5. Важность использования HTML5 для создания сайтов еще и в том, что мобильные компьютеры на базе операционной системы Android не поддерживают технологию Flash и пользователи не смогут просматривать видео в формате SWF.
Сайты на основе HTML5 способны воспроизводить видео без необходимости загрузки и установки Adobe Flash Player. Тенденция к отказу от флеш расширяется, поэтому для нормальной работы сайтов полезно постепенно отказываться от использования флеш-видео и анимированных баннеров этого формата.
Проверить валидность HTML-кода сайта можно бесплатно на официальном сайте Консорциума Всемирной Паутины, вот например этот
validator.w3.org
Встроенные валидаторы имеются в хороших конструкторах сайтов и системах управления контентом.
Очистка HTML-кодаВ процессе создания и последующего редактирования веб-страниц программист второпях оставляет на страницах технические заметки, комментарии, забывает удалять лишние теги. Все это не только замедляет работу сайта, но и снижает функциональные возможности. За счет простого удаления HTML-мусора можно ускорить загрузку страниц сайта буквально на 35%.
К вредоносному мусору относятся также битые, неработающие ссылки, которые никуда не ведут, потому что реципиент был удален. Такие ссылки очень не нравятся поисковым системам. Наличие битых ссылок может негативно отражаться на поисковом провождении ресурса.
Поскольку битые ссылки имеют свойство время от времени возникать сами собой, необходимо регулярно проводить их поиск и удаление. Это относится как к внешним, так и внутренним ссылкам. Если система управления контентом не имеет опции поиска битых ссылок – можно воспользоваться бесплатными онлайн-сервисами.
http://creatingonline.com/site_promotion/broken_link_checker.htm
http://anybrowser.com/linkchecker.html
Оптимизация графического контентаВажно уделять внимание оптимизации графики, поскольку для публикации на страницах сайта все изображения должны быть соответствующим образом обработаны.
- Для публикации фотографий целесообразно использовать формат JPEG, поскольку этот тип файлов обеспечивает лучшее качество при минимальном весе.
- Для сохранения картинок, для которых качество не очень важно, можно выбрать формат PNG при весе файлов не более 100 или 200 КБ.
- Все графические файлы нужно, по современным стандартам, сохранять в сжатом виде и в отдельной директории на сервере, но не внедрять в веб-страницы.
После редактирования страницы, содержащей изображения, необходимо проверить скорость загрузки. Страница должна появиться в браузере не более чем в течение пяти секунд. Иначе показать отказов резко возрастает.
Все картинки и фотографии имеют метатеги, которые необходимо оптимизировать добавлением ключевых слов и этим улучшить их поиск в интернете. Основное требование к оптимизация метатегов изображений – уникальность. У всех картинок должны разные названия, всплывающие подсказки и альтернативные тексты.
Метатеги веб-страницыМетатеги для разных страниц сайта должны быть в обязательном порядке уникальными. При обнаружении дублированных тегов поисковая система их склеивает и часть страниц таким образом не будет проиндексирована. Эксперименты показали, что уникализация метатегов сайта улучшает ранжирование и повышает посещаемость примерно на 18%.
Особое внимание следует уделить оптимизации тегов Title и DescriptionЯ у себя например вообще удалил из самого движка часть кода который отвечает за метатеги.
Оптимизация программных элементов – скриптовПринципы оптимизации скриптов такие же, ка для графики – на странице не размещать, сохранять в сжатом виде в особой директории.
Ваша страница должна быть чистой, робот заходящий на ваш сайт должен видеть только чистую страницу, на которой будет только статья, ну и необходимые метатеги. Поэтому нужно все скрипты, счетчики и т.д. поместить в отдельный файл.
Оптимизация текстового контента
