Kompx.com or Compmiscellanea.com

Lynx. Извлечение данных из веб-страниц

Операционные системы : Linux

Помимо просмотра / отображения веб-страниц, Lynx может выводить форматированный текст содержания веб-документа или его HTML источник на стандартный вывод. И это затем может быть обработано с помощью некоторых инструментов, имеющихся в Linux, таких как gawk, Perl, sed, grep, и т.д. Некоторые примеры:

Работа с внешними ссылками

Подсчитать количество внешних ссылок

Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы), wc подсчитывает число извлеченных внешних ссылок и отображает его:

lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | wc -l

Найти внешние ссылки и сохранить их в файл

Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы) и сохраняет их в файл:

lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" > file.txt

Найти внешние ссылки, опустить повторяющиеся записи и сохранить результат в файл

Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы), sort сортирует их, а uniq удаляет повторяющиеся записи. Результат сохраняется в файл:

lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | sort | uniq > file.txt

Работа с внутренними ссылками

Подсчитать количество внутренних ссылок

Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки), wc подсчитывает число извлеченных внутренних ссылок и отображает его:

lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" | wc -l

Найти внутренние ссылки и сохранить их в файл

Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки) и сохраняет их в файл:

lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" > file.txt

Найти внутренние ссылки, опустить повторяющиеся записи и сохранить результат в файл

Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки), sort сортирует их, а uniq удаляет повторяющиеся записи. Результат сохраняется в файл:

lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" | sort | uniq > file.txt

Смысл использования "lynx -dump -listonly" вместо просто "lynx -dump" состоит в том, что могут попасться веб-страницы с простыми текстовыми строками, выглядящими как ссылки (содержащие "http://", к примеру) в тексте содержания, как это имеет место на странице http://www.kompx.com/ru/elinks.htm. "Lynx -dump" вывел бы на стандартный вывод форматированный текст, где настоящие ссылки и ссылкоподобные простые текстовые строки выглядели бы одинаково и grep не смог бы их различить. "Lynx -dump -listonly" выдает только список ссылок, так что не случается путаницы с выглядящими как ссылки простыми текстовыми строками.


Aliosque subditos et thema

 

CSS только для Firefox

 

CSS только для браузера Firefox: В Firefox этот текст красного цвета HTML / XHTML. Код: <p>В Firefox этот текст красного цвета</p> CSS. Код: @-moz-document url-prefix() {p {color: #f00;}} В отличии от способа применения CSS только для Opera, по существу является хаком - поскольку правило изначально предназначалось для другой цели. Однако отсутствие поддержки в других браузерах позволяет изолировать код для использования только веб браузером Firefox. [ 1 ] Другие браузеры с движком Gecko, как SeaMonkey 1.0+ или более старый Netscape 9.0, так же поддерживают данный CSS хак. [ 2 ] Разные версии Internet Explorer, Google Chrome, Opera, Safari реагируют на хак так, как им и полагается - эти браузеры игнорируют весь код хака. [ 3 ] Есть еще один браузер, где текст становится красным - ELinks, текстовый веб браузер с некоторой поддержкой CSS.

CSS ролловер. Изменение положения фонового изображения

 

CSS ролловер. Изменение положения фонового изображения. Пример: CSS ролловер. Изменение положения фонового изображения HTML / XHTML. Код: <div class="example"> <a href="css-rollover-izmenenie-polozhenija-fonovogo-izobrazhenija.htm">CSS ролловер. Изменение положения фонового изображения</a> </div> CSS. Код: .example {position: relative; top: 0px; left: 0px; height: auto; width: 100%; white-space: nowrap; padding: 10px 20px 10px 20px;} .example a {height: 35px; width: 100%; font-size: 24px; line-height: 35px; color: #006; text-decoration: none; text-align: right; display: block; background: url("bgimg.png") no-repeat left top;} .example a:hover {color: #c00; background: url("bgimg.png") no-repeat left bottom;} Фоновое изображение: CSS ролловер Изменение положения фонового изображения Общая идея : 1. Создается ссылка с явно указанными width, height (в данном случае 674px и 35px) и display: block - это образует прямоугольник размером 674px на 35px, вся область которого представляет собой гиперссылку. line-height так же указывается в явном виде, со значением равным высоте прямоугольника (в данном случае 35px) - это способствует тому, что бы вертикальное выравнивание текста ссылки было одинаковым в разных браузерах. text-align: right добавляется, что бы поместить текст ссылки в правую часть блока. (Область блока с ссылкой выделена зеленым цветом для большей наглядности) CSS ролловер. Изменение положения фонового изображения 2. Создается изображение для фона блока с ссылкой высотой в две высоты этого блока. У изображения две части, верхняя и нижняя, каждая высотой равная высоте области блока с ссылкой; в данном случае 35px. 3. URL фонового изображения добавляется к CSS свойству фона псевдоклассов :link, :visited, :active ссылки. CSS значения no-repeat и left свойства background позиционируют фоновое изображение в левой части блока с ссылкой. CSS значение top свойства background помещает верхнюю часть фонового изображения на один уровень с текстом ссылки. 4. URL фонового изображения добавляется к CSS свойству фона псевдокласса :hover ссылки. CSS значения no-repeat и left свойства background псевдокласса :hover ссылки позиционируют фоновое изображение в левой части блока с ссылкой. CSS значение bottom свойства background псевдокласса :hover ссылки помещает нижнюю часть фонового изображения на один уровень с текстом ссылки, когда пользователь наводить курсор мыши на область блока с ссылкой. Таким образом, когда курсор мыши не наведен на область блока с ссылкой, верхняя часть фонового изображения находится на одном уровне с текстом. Когда курсор мыши наводится на область блока с ссылкой, нижняя часть фонового изображения перемещается на одним уровень с текстом. Mouse out - отображается верхняя часть фонового изображения, mouse over - отображается нижняя часть фонового изображения. И нет необходимости в предзагрузке дополнительных рисунков. CSS ролловер.