В html link: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <link> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента <head>. Чаще всего тег <link> используется для подключения внешних таблиц стилей:


<link href="style.css" rel="stylesheet" type="text/css">

Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css".

Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут

type указывать не требуется: 


<link href="style. css" rel="stylesheet">

Предварительная загрузка страниц

Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется «предварительное получение страницы». Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch", а также указывается целевая страница, которая будет заранее загружена на компьютер.

<link rel="prefetch" href="httр://www.puzzleweb/html/tag_p.php">

Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег <link> для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.

Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).

Атрибуты

href:
Указывает месторасположение (URL) внешнего файла (путь к файлу может быть указан с помощью абсолютного или относительного адреса).
hreflang:
Указывает двухбуквенный код языка, определяющий язык документа, на который ведет ссылка. Атрибут hreflang используется только совместно с атрибутом href.
media:
Определяет под какие устройства оптимизирован файл. Главным образом он используется с файлами таблиц стилей, для определения различных стилей под разные типы носителей. Атрибут media может принимать сразу несколько значений, разделяемых между собой пробелами.
rel:
Указывает связь между текущим документом и документом, на который ведет ссылка.
  • alternate — ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
  • author — определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
  • canonical — позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег <link> с атрибутом rel="canonical".

    Атрибут href, в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной: 

    <link rel="canonical" href="httр://www.puzzleweb/html/tag_p.php">
  • first
    — указывает ссылку, ведущую на первый документ из последовательности документов.
  • help — ссылка на документ со справкой.
  • icon — определяет путь к иконке, которая будет использована для текущего документа.
  • last — указывает ссылку, ведущую на последний документ в последовательности документов.
  • licence — ссылка на сведения об авторских правах для документа.
  • next — указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
  • prefetch — указывает, что следует заранее кэшировать файл, на который ведет ссылка.
  • prev — указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
  • search — ссылка на поиск для документа.
  • stylesheet — определяет внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
sizes:
Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", может принимать следующий значения:
type:
Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка, используется только совместно с атрибутом href.

Тег <link> так же поддерживает Глобальные атрибуты

Стиль по умолчанию


link {
    display: none;
}

Пример


<head>
  <link rel="stylesheet" href="style.css">
</head>

Результат данного примера в окне браузера:

HTML и CSS с примерами кода

Тег <link> (от англ. link — ссылка, связь) устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

Элемент <link> обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a>.

Метаданные документа
  • base
  • link
  • meta
  • style
  • title

Синтаксис

<head>
  <link href="<адрес>" />
</head>

Закрывающий тег не требуется.

Атрибуты

href
Путь к связываемому файлу.
media
Определяет устройство, для которого следует применять стилевое оформление.
rel
Определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes
Указывает размер иконок для визуального отображения.
type
MIME-тип данных подключаемого файла.

Также для этого элемента доступны универсальные атрибуты.

href

Путь к файлу, на который делается ссылка.

Синтаксис

<link href="<адрес>" />

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

media

Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати.

Допускается писать несколько значений через запятую.

Синтаксис

<link media="all | print | screen | speech" />

Значения

all
Все устройства.
print
Печатающее устройство вроде принтера.
screen
Экран монитора.
speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию

all

rel

Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.

Синтаксис

<link rel="<тип>" />

Значения

alternate
Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
author
Указывает ссылку на автора текущего документа или статьи.
help
Указывает ссылку на контекстно-зависимую справку.
icon
Адрес картинки, которая символизирует текущий документ или сайт.
license
Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
next
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
prefetch
Указывает на предварительно кэшированный ресурс текущей страницы или сайта целиком.
prev
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
search
Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
stylesheet
Определяет, что подключаемый файл хранит таблицу стилей (CSS).

Значение по умолчанию

Нет.

sizes

Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).

Синтаксис

<link rel="icon" />
<link
  rel="icon"
  any"
/>

Значения

Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

Значение по умолчанию

Нет.

type

Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Синтаксис

<link type="<MIME-тип>" />

Значения

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

Значение по умолчанию

text/css

Спецификации

  • Preload, определение <link rel="preload">
  • Subresource Integrity, определение атрибута integrity
  • WHATWG HTML Living Standard
  • HTML 5
  • HTML 4.01 Specification
  • Resource Hints, определение dns-prefetch, preconnect, prefetch и prerender

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>LINK</title>
    <link rel="stylesheet" href="ie. css" />
    <link
      rel="alternate"
      type="application/rss+xml"
      title="Статьи с сайта xsltdev.ru"
      href="http://xsltdev.ru/rss.xml"
    />
    <link
      rel="shortcut icon"
      href="http://xsltdev.ru/favicon.ico"
    />
  </head>
  <body>
    <p>...</p>
  </body>
</html>

Ссылки

  • Тег <link> MDN (рус.)

Модуль BeautifulSoup4 в Python, разбор HTML.

Извлечение данных из документов HTML и XML.

BeautifulSoup4 (bs4) — это библиотека Python для извлечения данных из файлов HTML и XML. Для естественной навигации, поиска и изменения дерева HTML, модуль BeautifulSoup4, по умолчанию использует встроенный в Python парсер html.parser. BS4 так же поддерживает ряд сторонних парсеров Python, таких как lxml, html5lib и xml (для разбора XML-документов).

Установка BeautifulSoup4 в виртуальное окружение:

# создаем виртуальное окружение, если нет
$ python3 -m venv . venv --prompt VirtualEnv
# активируем виртуальное окружение 
$ source .venv/bin/activate
# ставим модуль beautifulsoup4
(VirtualEnv):~$ python3 -m pip install -U beautifulsoup4

Содержание:
  • Выбор парсера для использования в BeautifulSoup4.
    • Парсер lxml.
    • Парсер html5lib.
    • Встроенный в Python парсер html.parser.
  • Основные приемы работы с BeautifulSoup4.
    • Навигация по структуре HTML-документа.
    • Извлечение URL-адресов.
    • Извлечение текста HTML-страницы.
    • Поиск тегов по HTML-документу.
    • Поиск тегов при помощи CSS селекторов.
    • Дочерние элементы.
    • Родительские элементы.
    • Изменение имен тегов HTML-документа.
    • Добавление новых тегов в HTML-документ.
    • Удаление и замена тегов в HTML-документе.
    • Изменение атрибутов тегов HTML-документа.

Выбор парсера для использования в BeautifulSoup4.

BeautifulSoup4 представляет один интерфейс для разных парсеров, но парсеры неодинаковы. Разные парсеры, анализируя один и того же документ создадут различные деревья HTML. Самые большие различия будут между парсерами HTML и XML. Так же парсеры различаются скоростью разбора HTML документа.

Если дать BeautifulSoup4 идеально оформленный документ HTML, то различий построенного HTML-дерева не будет. Один парсер будет быстрее другого, но все они будут давать структуру, которая выглядит точно так же, как оригинальный документ HTML. Но если документ оформлен с ошибками, то различные парсеры дадут разные результаты.

Различия в построении HTML-дерева разными парсерами, разберем на короткой HTML-разметке: <a></p>.

Парсер
lxml.

Характеристики:

  • Для запуска примера, необходимо установить модуль lxml.
  • Очень быстрый, имеет внешнюю зависимость от языка C.
  • Нестрогий.
>>> from bs4 import BeautifulSoup
>>> BeautifulSoup("<a></p>", "lxml")
# <html><body><a></a></body></html>

Обратите внимание, что тег <a> заключен в теги <body> и <html>, а висячий тег </p> просто игнорируется.

Парсер
html5lib.

Характеристики:

  • Для запуска примера, необходимо установить модуль html5lib.
  • Ну очень медленный.
  • Разбирает страницы так же, как это делает браузер, создавая валидный HTML5.
>>> from bs4 import BeautifulSoup
>>> BeautifulSoup("<a></p>", "html5lib")
# <html><head></head><body><a><p></p></a></body></html>

Обратите внимание, что парсер html5lib НЕ игнорирует висячий тег </p>, и к тому же добавляет открывающий тег <p>. Также html5lib добавляет пустой тег <head> (lxml этого не сделал).

Встроенный в Python парсер
html.parser.

Характеристики:

  • Не требует дополнительной установки.
  • Приличная скорость, но не такой быстрый, как lxml.
  • Более строгий, чем html5lib.
>>> from bs4 import BeautifulSoup
>>> BeautifulSoup("<a></p>", 'html.parser')
# <a></a>

Как и lxml, встроенный в Python парсер игнорирует закрывающий тег </p>. В отличие от html5lib, этот парсер не делает попытки создать правильно оформленный HTML-документ, добавив теги <html> или <body>.

Вывод: Парсер html5lib использует способы, которые являются частью стандарта HTML5, поэтому он может претендовать на то, что его подход самый «правильный«.

Основные приемы работы с BeautifulSoup4.

Чтобы разобрать HTML-документ, необходимо передать его в конструктор класса BeautifulSoup(). Можно передать строку или открытый дескриптор файла:

from bs4 import BeautifulSoup
# передаем объект открытого файла
with open("index.html") as fp:
    soup = BeautifulSoup(fp, 'html.parser')
# передаем строку 
soup = BeautifulSoup("<html>a web page</html>", 'html. parser')

Первым делом документ конвертируется в Unicode, а HTML-мнемоники конвертируются в символы Unicode:

>>> from bs4 import BeautifulSoup
>>> html = "<html><head></head><body>Sacr&eacute; bleu!</body></html>"
>>> parse = BeautifulSoup(html, 'html.parser')
>>> print(parse)
# <html><head></head><body>Sacré bleu!</body></html>

Дальнейшие примеры будут разбираться на следующей HTML-разметке.

html_doc = """<html><head><title>The Dormouse's story</title></head>
<body>
<p><b>The Dormouse's story</b></p>
<p>Once upon a time there were three little sisters; and their names were
<a href="http://example.com/elsie">Elsie</a>,
<a href="http://example.com/lacie">Lacie</a> and
<a href="http://example.com/tillie">Tillie</a>;
and they lived at the bottom of a well. </p>
<p>...</p>"""

Передача этого HTML-документа в конструктор класса BeautifulSoup() создает объект, который представляет документ в виде вложенной структуры:

>>> from bs4 import BeautifulSoup
>>> soup = BeautifulSoup(html_doc, 'html.parser')
>>> print(soup.prettify())
# <html>
#  <head>
#   <title>
#    The Dormouse's story
#   </title>
#  </head>
#  <body>
#   <p>
#    <b>
#     The Dormouse's story
#    </b>
#   </p>
#   <p>
#    Once upon a time there were three little sisters; and their names were
#    <a href="http://example.com/elsie">
#     Elsie
#    </a>
#    ,
#    <a href="http://example.com/lacie">
#     Lacie
#    </a>
#    and
#    <a href="http://example.com/tillie">
#     Tillie
#    </a>
#    ; and they lived at the bottom of a well.
#   </p>
#   <p>
#    ...
#   </p>
#  </body>
# </html>

Навигация по структуре HTML-документа:

# извлечение тега `title`
>>> soup. title
# <title>The Dormouse's story</title>
# извлечение имя тега
>>> soup.title.name
# 'title'
# извлечение текста тега
>>> soup.title.string
# 'The Dormouse's story'
# извлечение первого тега `<p>`
>>> soup.p
# <p><b>The Dormouse's story</b></p>
# извлечение второго тега `<p>` и 
# представление  его содержимого списком
>>> soup.find_all('p')[1].contents
# ['Once upon a time there were three little sisters; and their names were\n', 
# <a href="http://example.com/elsie">Elsie</a>, 
# ',\n', 
# <a href="http://example.com/lacie">Lacie</a>, 
# ' and\n', 
# <a href="http://example.com/tillie">Tillie</a>, 
# ';\nand they lived at the bottom of a well.']
# выдаст то же самое, только в виде генератора
>>> soup.find_all('p')[1].strings
# <generator object Tag._all_strings at 0x7ffa2eb43ac0>

Перемещаться по одному уровню можно при помощи атрибутов . previous_sibling и .next_sibling. Например, в представленном выше HTML, теги <a> обернуты в тег <p> — следовательно они находятся на одном уровне.

>>> first_a = soup.a
>>> first_a
# <a href="http://example.com/elsie">Elsie</a>
>>> first_a.previous_sibling
# 'Once upon a time there were three little sisters; and their names were\n'
>>> next = first_a.next_sibling
>>> next
# ',\n'
>>> next.next_sibling
# <a href="http://example.com/lacie">Lacie</a>

Так же можно перебрать одноуровневые элементы данного тега с помощью .next_siblings или .previous_siblings.

for sibling in soup.a.next_siblings:
    print(repr(sibling))
# ',\n'
# <a href="http://example.com/lacie">Lacie</a>
# ' and\n'
# <a href="http://example.com/tillie">Tillie</a>
# '; and they lived at the bottom of a well.'
for sibling in soup. find(id="link3").previous_siblings:
    print(repr(sibling))
# ' and\n'
# <a href="http://example.com/lacie">Lacie</a>
# ',\n'
# <a href="http://example.com/elsie">Elsie</a>
# 'Once upon a time there were three little sisters; and their names were\n'

Атрибут .next_element строки или HTML-тега указывает на то, что было разобрано непосредственно после него. Это могло бы быть тем же, что и .next_sibling, но обычно результат резко отличается.

Возьмем последний тег <a>, его .next_sibling является строкой: конец предложения, которое было прервано началом тега <a>:

last_a = soup.find("a",)
last_a
# <a href="http://example.com/tillie">Tillie</a>
last_a.next_sibling
# ';\nand they lived at the bottom of a well.'

Однако .next_element этого тега <a> — это то, что было разобрано сразу после тега <a> — это слово Tillie, а не остальная часть предложения.

last_a_tag.next_element
# 'Tillie'

Это потому, что в оригинальной разметке слово Tillie появилось перед точкой с запятой. Парсер обнаружил тег <a>, затем слово Tillie, затем закрывающий тег </a>, затем точку с запятой и оставшуюся часть предложения. Точка с запятой находится на том же уровне, что и тег <a>, но слово Tillie встретилось первым.

Атрибут .previous_element является полной противоположностью .next_element. Он указывает на элемент, который был обнаружен при разборе непосредственно перед текущим:

last_a_tag.previous_element
# ' and\n'
last_a_tag.previous_element.next_element
# <a href="http://example.com/tillie">Tillie</a>

При помощи атрибутов .next_elements и .previous_elements можно получить список элементов, в том порядке, в каком он был разобран парсером.

for element in last_a_tag. next_elements:
    print(repr(element))
# 'Tillie'
# ';\nand they lived at the bottom of a well.'
# '\n'
# <p>...</p>
# '...'
# '\n'

Извлечение URL-адресов.

Одна из распространенных задач, это извлечение URL-адресов, найденных на странице в HTML-тегах <a>:

>>> for a in soup.find_all('a'):
...     print(a.get('href'))
# http://example.com/elsie
# http://example.com/lacie
# http://example.com/tillie

Извлечение текста HTML-страницы.

Другая распространенная задача — извлечь весь текст со HTML-страницы:

# Весь текст HTML-страницы с разделителями `\n` 
>>> soup.get_text('\n', strip='True')
# "The Dormouse's story\nThe Dormouse's story\n
# Once upon a time there were three little sisters; and their names were\n
# Elsie\n,\nLacie\nand\nTillie\n;\nand they lived at the bottom of a well.\n..."
# а можно создать список строк, а потом форматировать как надо 
>>> [text for text in soup.stripped_strings]
# ["The Dormouse's story", 
# "The Dormouse's story", 
# 'Once upon a time there were three little sisters; and their names were', 
# 'Elsie', 
# ',', 
# 'Lacie', 
# 'and', 
# 'Tillie', 
# ';\nand they lived at the bottom of a well. ', 
# '...']

Поиск тегов по HTML-документу:

Найти первый совпавший HTML-тег можно методом BeautifulSoup.find(), а всех совпавших элементов — BeautifulSoup.find_all().

# ищет все теги `<title>`
>>> soup.find_all("title")
# [<title>The Dormouse's story</title>]
# ищет все теги `<a>` и все теги `<b>`
>>> soup.find_all(["a", "b"])
# [<b>The Dormouse's story</b>,
#  <a href="http://example.com/elsie">Elsie</a>,
#  <a href="http://example.com/lacie">Lacie</a>,
#  <a href="http://example.com/tillie">Tillie</a>]
# ищет все теги `<p>` с CSS классом "title"
>>> soup.find_all("p", "title")
# [<p><b>The Dormouse's story</b></p>]
# ищет все теги с CSS классом, в именах которых встречается "itl"
soup.find_all(class_=re.compile("itl"))
# [<p><b>The Dormouse's story</b></p>]
# ищет все теги с
>>> soup. b")):
    print(tag.name)
# body
# b
# ищет все теги в документе, но не текстовые строки
for tag in soup.find_all(True):
    print(tag.name)
# html
# head
# title
# body
# p
# b
# p
# a
# a
# a
# p

Поиск тегов при помощи CSS селекторов:

>>> soup.select("title")
# [<title>The Dormouse's story</title>]
>>> soup.select("p:nth-of-type(3)")
# [<p>...</p>]

Поиск тега под другими тегами:

>>> soup.select("body a")
# [<a href="http://example.com/elsie">Elsie</a>,
#  <a href="http://example.com/lacie" >Lacie</a>,
#  <a href="http://example.com/tillie">Tillie</a>]
>>> soup.select("html head title")
# [<title>The Dormouse's story</title>]

Поиск тега непосредственно под другими тегами:

>>> soup.select("head > title")
# [<title>The Dormouse's story</title>]
>>> soup.select("p > a:nth-of-type(2)")
# [<a href="http://example. com/lacie">Lacie</a>]
>>> soup.select("p > #link1")
# [<a href="http://example.com/elsie">Elsie</a>]

Поиск одноуровневых элементов:

# поиск всех `.sister` в которых нет `#link1`
>>> soup.select("#link1 ~ .sister")
# [<a href="http://example.com/lacie">Lacie</a>,
#  <a href="http://example.com/tillie" >Tillie</a>]
# поиск всех `.sister` в которых есть `#link1`
>>> soup.select("#link1 + .sister")
# [<a href="http://example.com/lacie">Lacie</a>]
# поиск всех `<a>` у которых есть сосед `<p>`

Поиск тега по классу CSS:

>>> soup.select(".sister")
# [<a href="http://example.com/elsie">Elsie</a>,
#  <a href="http://example.com/lacie">Lacie</a>,
#  <a href="http://example.com/tillie">Tillie</a>]

Поиск тега по ID:

>>> soup.select("#link1")
# [<a href="http://example.com/elsie">Elsie</a>]
>>> soup. select("a#link2")
# [<a href="http://example.com/lacie">Lacie</a>]

Дочерние элементы.

Извлечение НЕПОСРЕДСТВЕННЫХ дочерних элементов тега. Если посмотреть на HTML-разметку в коде ниже, то, непосредственными дочерними элементами первого <ul> будут являться три тега <li> и тег <ul> со всеми вложенными тегами.

Обратите внимание, что все переводы строк \n и пробелы между тегами, так же будут считаться дочерними элементами. Так что имеет смысл заранее привести исходный HTML к «нормальному виду«, например так: re.sub(r'>\s+<', '><', html.replace('\n', ''))

html = """
<div>
    <ul>
        <li>текст 1</li>
        <li>текст 2</li> 
        <ul>
            <li>текст 2-1</li>
            <li>текст 2-2</li>
        </ul>
        <li>текст 3</li>
    </ul>
</div>
"""
>>> from bs4 import BeautifulSoup
>>> root = BeautifulSoup(html, 'html. parser')
# найдем в дереве первый тег `<ul>`
>>> first_ul = root.ul
# извлекаем список непосредственных дочерних элементов
# переводы строк `\n` и пробелы между тегами так же
#  распознаются как дочерние элементы
>>> first_ul.contents
# ['\n', <li>текст 1</li>, '\n', <li>текст 2</li>, '\n', <ul>
# <li>текст 2-1</li>
# <li>текст 2-2</li>
# </ul>, '\n', <li>текст 3</li>, '\n']
# убираем переводы строк `\n` как из списка, так и из тегов
# лучше конечно сразу убрать переводы строк из исходного HTML
>>> [str(i).replace('\n', '') for i in first_ul.contents if str(i) != '\n']
# ['<li>текст 1</li>', 
# '<li>текст 2</li>', 
# '<ul><li>текст 2-1</li><li>текст 2-2</li></ul>', 
# '<li>текст 3</li>']
# то же самое, что и `first_ul.contents` 
# только в виде итератора
>>> first_ul.children
# <list_iterator object at 0x7ffa2eb52460>

Извлечение ВСЕХ дочерних элементов. Эта операция похожа на рекурсивный обход HTML-дерева в глубину от выбранного тега.

>>> import re
# сразу уберем переводы строк из исходного HTML
>>> html = re.sub(r'>\s+<', '><', html.replace('\n', ''))
>>> root = BeautifulSoup(html, 'html.parser')
# найдем в дереве первый тег `<ul>`
>>> first_ul = root.ul
# извлекаем список ВСЕХ дочерних элементов
>>> list(first_ul.descendants)
# [<li>текст 1</li>, 
# 'текст 1', 
# <li>текст 2</li>, 
# 'текст 2', 
# <ul><li>текст 2-1</li><li>текст 2-2</li></ul>, 
# <li>текст 2-1</li>, 
# 'текст 2-1', 
# <li>текст 2-2</li>, 
# 'текст 2-2', 
# <li>текст 3</li>, 
# 'текст 3']

Обратите внимание, что простой текст, который находится внутри тега, так же считается дочерним элементом этого тега.

Если внутри тега есть более одного дочернего элемента (как в примерен выше) и необходимо извлечь только текст, то можно использовать атрибут . strings или генератор .stripped_strings.

Генератор .stripped_strings дополнительно удаляет все переводы строк \n и пробелы между тегами в исходном HTML-документе.

>>> list(first_ul.strings)
# ['текст 1', 'текст 2', 'текст 2-1', 'текст 2-2', 'текст 3']
>>> first_ul.stripped_strings
# <generator object Tag.stripped_strings at 0x7ffa2eb43ac0>
>>> list(first_ul.stripped_strings)
# ['текст 1', 'текст 2', 'текст 2-1', 'текст 2-2', 'текст 3']

Родительские элементы.

Что бы получить доступ к родительскому элементу, необходимо использовать атрибут .parent.

html = """
<div>
    <ul>
        <li>текст 1</li>
        <li>текст 2</li> 
        <ul>
            <li>текст 2-1</li>
            <li>текст 2-2</li>
        </ul>
        <li>текст 3</li>
    </ul>
</div>
"""
>>> from bs4 import BeautifulSoup
>>> import re
# сразу уберем переводы строк и пробелы 
# между тегами из исходного HTML
>>> html = re. sub(r'>\s+<', '><', html.replace('\n', ''))
>>> root = BeautifulSoup(html, 'html.parser')
# найдем теги `<li>` вложенные во второй `<ul>`,
# используя CSS селекторы
>>> child_ul = root.select('ul > ul > li')
>>> child_ul
# [<li>текст 2-1</li>, <li>текст 2-2</li>]
# получаем доступ к родителю
>>> child_li[0].parent
# <ul><li>текст 2-1</li><li>текст 2-2</li></ul>
# доступ к родителю родителя
>>> child_li[0].parent.parent.contents
[<li>текст 1</li>, 
<li>текст 2</li>, 
<ul><li>текст 2-1</li><li>текст 2-2</li></ul>, 
<li>текст 3</li>]

Taк же можно перебрать всех родителей элемента с помощью атрибута .parents.

>>> child_li[0]
# <li>текст 2-1</li>
>>> [parent.name for parent in child_li[0].parents]
# ['ul', 'ul', 'div', '[document]']

Изменение имен тегов HTML-документа:

>>> soup = BeautifulSoup('<p><b>Extremely bold</b></p>', 'html. parser')
>>> tag = soup.b
# присваиваем новое имя тегу
>>> tag.name = "blockquote"
>>> tag
# <blockquote>Extremely bold</blockquote>
>>> soup
# <p><blockquote>Extremely bold</blockquote></p>

Изменение HTML-тега <p> на тег <div>:

>>> soup = BeautifulSoup('<p><b>Extremely bold</b></p>', 'html.parser')
>>> soup.p.name = 'div'
>>> soup
# <div><b>Extremely bold</b></div>

Добавление новых тегов в HTML-документ.

Добавление нового тега в дерево HTML:

>>> soup = BeautifulSoup("<p><b></b></p>", 'html.parser')
>>> original_tag = soup.b
# создание нового тега `<a>`
>>> new_tag = soup.new_tag("a", href="http://example.com")
# строка нового тега `<a>`
>>> new_tag.string = "Link text"
# добавление тега `<a>` внутрь `<b>`
>>> original_tag. append(new_tag)
>>> original_tag
# <b><a href="http://example.com">Link text.</a></b>
>>> soup
# <p><b><a href="http://example.com">Link text</a></b></p>

Добавление новых тегов до/после определенного тега или внутрь тега.

>>> soup = BeautifulSoup("<p><b>leave</b></p>", 'html.parser')
>>> tag = soup.new_tag("i",)
>>> tag.string = "Don't"
# добавление нового тега <i> до тега <b>
>>> soup.b.insert_before(tag)
>>> soup.b
# <p><i>Don't</i><b>leave</b></p>
# добавление нового тега <i> после тега <b>
>>> soup.b.insert_after(tag)
>>> soup
# <p><b>leave</b><i>Don't</i></p>
# добавление нового тега <i> внутрь тега <b>
>>> soup.b.string.insert_before(tag)
>>> soup.b
# <p><b><i>Don't</i>leave</b></p>

Удаление и замена тегов в HTML-документе.

Удаляем тег или строку из дерева HTML:

>>> html = '<a href="http://example.com/">I linked to <i>example.com</i></a>'
>>> soup = BeautifulSoup(html, 'html.parser')
>>> a_tag = soup.a
# удаляем HTML-тег `<i>` с сохранением
# в переменной `i_tag`
>>> i_tag = soup.i.extract()
# смотрим что получилось
>>> a_tag
# <a href="http://example.com/">I linked to</a>
>>> i_tag
# <i>example.com</i>

Заменяем тег и/или строку в дереве HTML:

>>> html = '<a href="http://example.com/">I linked to <i>example</i></a>'
>>> soup = BeautifulSoup(html, 'html.parser')
>>> a_tag = soup.a
# создаем новый HTML тег
>>> new_tag = soup.new_tag("b")
>>> new_tag.string = "sample"
# производим замену тега `<i>` внутри тега `<a>`
>>> a_tag.i.replace_with(new_tag)
>>> a_tag
# <a href="http://example. com/">I linked to <b>sample</b></a>

Изменение атрибутов тегов HTML-документа.

У тега может быть любое количество атрибутов. Тег <b id = "boldest"> имеет атрибут id, значение которого равно boldest. Доступ к атрибутам тега можно получить, обращаясь с тегом как со словарем:

>>> soup = BeautifulSoup('<p><b>bolder</b></p>', 'html.parser')
>>> tag = soup.b
>>> tag['id']
# 'boldest'
# доступ к словарю с атрибутами
>>> tag.attrs
# {'id': 'boldest'}

Можно добавлять и изменять атрибуты тега.

# изменяем `id`
>>> tag['id'] = 'bold'
# добавляем несколько значений в `class`
>>> tag['class'] = ['new', 'bold']
# или
>>> tag['class'] = 'new bold'
>>> tag
# <b>bolder</b>

А так же производить их удаление.

>>> del tag['id']
>>> del tag['class']
>>> tag
# <b>bolder</b>
>>> tag. get('id')
# None

Тесты по HTML

Тесты на знание html с ответами

Правильный вариант ответа отмечен знаком +

1. О чем говорит тэг <p align=»right»> … </p>?

— Текст, заключенный в тэг, будет расположен по центру страницы

— Текст, заключенный в тэг, будет расположен по левому краю страницы

+ Текст, заключенный в тэг, будет расположен по центру страницы

2. Какие единицы измерения могут использоваться для атрибута ширины?

+ Пиксели и %

— Миллиметры и сантиметры

— Пиксели и миллиметры

3. Использование тэга … позволяет добавлять одну строку текста без начала нового абзаца.

— <line/>

+ <br/>

— <td/>

4. Объясните смысл кода, представленного ниже:

+ Будет создана таблица, состоящая из 1 ряда и 3 колонок

— Будет создана таблица, состоящая из 3 рядов и 1 колонки

— Будет создана таблица, состоящая из 2 рядов и 3 колонок

5. Напишите код HTML, который бы создавал кнопку отправки заполненной формы. Имя кнопки – ОК.

— <input type=»ОК» value=»Submit»/>

— <p> input type=»submit» value=»OK»< /p>

+ <input type=»submit» value=»ОК»/>

6. Какой тэг при создании страницы добавляет имя страницы, которое будет отображаться в строке заголовка в браузере пользователя?

+ <title> … </title>

— <header> … </header>

— <body> … </body>

7. Заполните поля, чтобы отобразить картинку “flower.jpg” с высотой 300 пикселей и шириной 750 пикселей:

— <img ref=”flower” format=.jpg

high=300 px

width=750 px />

— <src img=”flower.jpg”

height=”300%”

width=”750%”/>

+ <img src=”flower.jpg”

height=”300 px” alt=””

width=”750 px”/>

8. Что содержит в себе атрибут href?

+ URL страницы, на которую произойдет перенаправление

— Имя страницы, на которую произойдет перенаправление

— Указание на то, где будет открываться новая страница: в том же или новом окне

9. Какие из перечисленных тэгов относятся к созданию таблицы?

— <header> <body> <footer>

+ <table> <tr> <td>

— <ul> <li> <tr> <td>

тест 10. Укажите тэг, который соответствует элементу списка:

+ <li>

— <ul>

— <ol>

11. О чем говорит следующая запись: <form action=»url» method=»POST»>?

— Создается форма, при заполнении которой вводимые данные будут отображаться

+ Создается форма, при заполнении которой вводимые данные не будут отображаться

— Создается форма, которая будет служить для внесения информации, представленной в виде ссылки (URL)

12. Какое значение следует задать атрибуту type, чтобы оно превращало входной тэг в форму отправки?

+ Submit

— Checkbox

— Radiobutton

13. Для задания размеров тэгу <frameset> требуются следующие атрибуты:

— Высока и ширина

— Площадь и толщина границ

+ Строки и столбцы

14. Выберите верное утверждение.

+ В HTML цвета задаются комбинацией значений шестнадцатеричной системы исчисления: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, F

— В HTML цвета задаются комбинацией значений двоичной системы исчисления: 0 или 1

— В HTML цвета задаются комбинацией значений восьмеричной системы исчисления: 0, 1, 2, 3, 4, 5, 6, 7

15. Какие тэги делают шрифт текста жирным?

— <ins> и <del>

— <li> и <ul>

+ <b> и <strong>

16. Какие тэги используются для определения заголовков?

+ h2-h6

— Header

— Heading

17. Неотображаемые комментарии в HTML задаются следующим образом:

— <! — Your comment -!>

+ <! — — Your comment — -!>

— <!p> Your comment </!p>

18. Что означает код на картинке?

+ Переход по ссылке произойдет на новой странице

— Переход по ссылке произойдет на текущей странице

— На текущей странице появится текст «Learn Playing»

19. Перечислите основные модули контента, существующие в HTML 5.

— Image, Media, Metadata, Link, Heading, Color, Input Value

+ Metadata, Embedded, Interactive, Heading, Phrasing, Flow, Sectioning

— Flow, Static, Link, Header, Body, Footer, Processing, Chase

тест-20. Укажите, какой элемент HTML 5 отвечает за воспроизведение видео:

+ <video>

— <media>

— <movie>

21. Элемент <canvas> используется для:

— Прикрепления таблиц Excel

— Управления данными в базе данных

+ Прорисовки графики

22. Какой тэг содержит навигацию?

+ <nav>

— <geo>

— <metanav>

23. SessionStorage – это клиентское решение в HTML 5, которое позволяет:

— Извлекать и использовать данные предыдущих сессий при условии того, что не были очищены cash и cookie

— Создавать базу данных решений пользователей в памяти браузера

+ Извлекать и использовать данные только текущей сессии

24. Что создастся при исполнении следующего кода:

<svg>
<line x1=»50″ y1=»0″ x2=»50″ y2=»100″
style=»stroke:black» />
<line x1=»0″ y1=»50″ x2=»100″ y2=»50″
style=»stroke:black» />
</svg> ?

+ Знак «плюс»

— Знак «минус»

— Знак «равно»

25. Функция HTML 5 «

— Встроенную в основной функционал сайта карту мира

+ Данные о местонахождении пользователя

— Данные о местонахождении сервера

26. Заполните пропуски таким образом, чтобы получился валидный HTML документ. «First paragraph» — комментарий.

<___>

<body>

<! — — First paragraph ___>

<___> This is the first paragraph! </p>

<___>

</html>

— html/; — — ?; p; /body

— html v.5; — — !; /p; /body

+ html; — — !; p; /body

27. HTML – это

+ Язык разметки

— Библиотека гипертекста

— Скриптовый язык

28. Обязательно ли использование тэгов <html> … </html>?

+ Да, без них браузер не распознает HTML-документ

— Да, если HTML-документ создается в блокноте или другом текстовом редакторе. В специальном компиляторе HTML эти тэги можно не использовать

— Не обязательно

29. Какой атрибут позволяет объединить ячейки таблицы по вертикали?

— Union

— Colspan

+ Rowspan

тест_30. Допустимое число заголовков первого уровня в HTML-документе составляет:

+ 1

— 3

— 7

31. Текст, выделенный курсивом, представлен в следующей записи:

— <del> курсив </del>

+ <i> курсив </i>

— <hr> курсив </hr>

32. В HTML не существует … тэгов.

— Одиночных

— Парных

+ Тройных

33.

— ;

+ /

38. Список, в котором элементы перечисления отмечаются буллетами, позволяет создать тэг:

+ <ul>

— <ol>

— <bl>

39. Укажите корректную запись для создания чек-бокса:

— <input checkbox>

— <type input=”checkbox”>

+ <input type=”checkbox”>

тест*40. Укажите корректную запись для создания выпадающего списка:

+ <input type=”dropdown”>

— <input dropdown list>

— <dropdown list>

41. Какой атрибут HTML указывает альтернативный текст для изображения, если данное изображение не отобразится?

— imgalt

— imgvar

+ alt

42. Какой HTML-тэг используется для определения футера документа или раздела?

+ <footer>

— <bottom>

— <section>

43. HTML-тэг, позволяющий воспроизводить аудиозаписи – это:

— <music>

+ <audio>

— <sound>

44. В HTML 5, onblur и onfocus – это:

+ Атрибуты событий

— Атрибуты стиля

— Атрибуты подключения базы данных

45. Графика, определенная SVG, отображается в формате:

— CSS

— JSOM

+ XML

46. Что определяет тэг <aside>?

+ Дополнительное содержимое, т.е. то, что не включает основной документ

— Ссылку на подключенный документ

— Цветовое решение документа

Подготовка проекта CSS и HTML с помощью Visual Studio Code