.png)
Вставка объектов
Элементы <embed> и <object></object>
Элементы
Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время устарел, PDF-файлы, как правило, лучше открывать по ссылке, а другой контент — такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнетесь с ними в определенных обстоятельствах, таких как интрасети или корпоративные проекты.
Iframe
Элементы
Есть несколько серьезных Проблем безопасности при использовании
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> Резервная ссылка для браузеров, которые не поддерживают фреймы </a> </p> </iframe>
Приемы полезные при использовании <iframe>
allowfullscreen если установлено,
<iframe> может быть помещен в полноэкранный режим с использованием полноэкранного API.-
frameborder если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя
border: none; в CSS. -
src этот атрибут, как и
<video> /<img> , содержит путь, указывающий на URL-адрес внедряемого документа. -
width and height эти атрибуты определяют ширину и высоту, в которых вы хотите использовать
iframe . -
sandbox этот атрибут, который работает в более современных браузерах, чем остальные функции
<iframe> .Он запрашивает повышенные настройки безопасности.
Точно так же, как и другие подобные элементы, такие как
Тема встраивания другого контента в web-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраиваний стороннего контента, помимо встроенных карт и видео на своих страницах.
Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например
Псевдоэлементы
Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент
/* Первая строка каждого элемента <p>. */
p::first-line {
color: blue;
text-transform: uppercase;
}
Синтаксис
selector::pseudo-element {
property: value;
}
В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.
Список стандартных псевдоэлементов
- ::after
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::selection
- ::slotted
- ::backdrop
- ::placeholder
- ::marker
Вложенные селекторы
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут вложенные селекторы. Например, задать стиль для тега
Проблемы безопасности
Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймете с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнете рассматривать использование
Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
width="100%" height="500" frameborder="0"
allowfullscreen sandbox>
<p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
Fallback link for browsers that don't support iframes
</a> </p>
</iframe>
Быстрый пример — попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github. На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение «Отказано в доступе» в связи с
Иногда имеет смысл вставлять сторонний контент — например, видео и карты, но вы избежите головной боли, если будете вставлять сторонний контент только тогда, когда это абсолютно необходимо. Хорошее эмпирическое правило для web-безопасности: «Вы никогда не можете быть слишком осторожным. Если вы что-то сделали, дважды проверьте это. Если кто-то другой сделал это, считайте, что это опасно, пока не будет доказано обратное».
Помимо безопасности, вы также должны знать об интеллектуальной собственности. Большинство контента находится под защитой авторских прав, даже тот, от которого вы не могли ожидать (например, большинство картинок на Wikimedia Commons). Никогда не выводите контент на свою страницу, если он вам не принадлежит или если нет однозначного письменного разрешения от правообладателя. Наказания за нарушения авторских прав строги. И, повторимся, вы никогда не можете быть слишком осторожными.
Используйте HTTPS
HTTPS это зашифрованная версия HTTP. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :
- HTTPS уменьшает вероятность того, что контент был изменен по пути;
- HTTPS запрещает доступ внедренного контента к контенту в вашем исходном документе и наоборот.
Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку. Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS во что бы то ни стало вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через