При відображенні текстових документів у браузері місце перенесення рядка в межах абзацу визначається автоматично залежно від розміру шрифтів та вікна перегляду. Перенесення рядка може здійснюватися лише за символами-розділювачами слів (наприклад, пробіли). Іноді в документах потрібно встановити примусовий переклад рядка, що реалізується незалежно від параметрів налаштувань браузера. Для цього є тег примусового перекладу рядка
, який не має відповідного тега, що закриває. Увімкнення тега
текст документа забезпечить розміщення наступного тексту з початку нового рядка. Наприклад, такий підхід можна використовувати для створення структур типу списків без використання спеціальних тегів розмітки списку. Або, наприклад, без цього тега не обійтися для відображення віршів тощо.
Наведемо приклад використання примусового переведення рядка (рис. 1.8):
Використання примусового перекладу рядкаНад затьмареним Петроградом
Дихав листопад осіннім холодом.
Плеска шумною хвилею
У краю своєї огорожі стрункою,
Нева металася, як хворий
У своєму ліжку неспокійною.
А.С.Пушкін. Мідний вершник
Рис. 1.8.Тег
можна використовувати для примусового перекладу рядка
На відміну від тега абзацу
При використанні тега
не буде утворено порожній рядок.
Використання тега
вимагає обережності - можлива ситуація, коли браузер вже зробив переклад рядка за одне-два слова перед тим, як зустрів ваш тег
. Це буває у випадку, якщо ширина вікна програми перегляду читача менша, ніж той самий параметр програми, за допомогою якої ви тестували ваш документ. У цьому може бути, що у рядку посеред абзацу залишиться лише одне слово, порушуючи цим красу компонування документа.
Примітка
При використанні тега
для розбивки тексту, що обтікає зображення або таблиці, можна задати параметр CLEAR, що припиняє обтікання тексту. Про це можна прочитати у розділах 3 та 4.
Теги u
Бувають ситуації, коли потрібно виконати операцію протилежного призначення – заборонити переведення рядка. Для цього існує тег-контейнер . Текст, розмічений цим тегом, буде гарантовано розміщуватися в одному рядку, незалежно від його довжини. Якщо рядок буде виходити за межі вікна перегляду браузера, то з'явиться горизонтальна смуга прокручування.
Примітка
Для забезпечення нерозривності тексту, що міститься в осередках таблиць, існує спеціальний параметр NOWRAP тега. Про це можна дізнатися у розділі 4.
Розмічаючи текст за допомогою тега нерозривного рядка можна отримати дуже довгі рядки. Щоб цього уникнути, можна вказати браузеру читача місце можливого перекладу рядка, що буде виконано лише за необхідності (так званий "м'який" переклад рядка). Це можна зробити, поставивши в потрібному місці тексту тег (Word BReak), який так само, як і тег
, не потребує закриває тег.
Примітка
Тег взагалі не підтримується браузером Netscape. Браузер Microsoft Internet Explorer розпізнає цей тег лише у тексті, розміченому тегами .
Вітаю вас. Звичайно, в HTML перенесення рядка можна зробити двома способами. Якщо ви користуєтеся візуальним редактором від WordPress, він автоматично додає переноси рядків, як це відбувається в програмі Microsoft Word або будь-якому іншому текстовому редакторі. Але іноді необхідно працювати з текстом у коді. Як зробити перенесення рядка в HTML-коді?
Переносимо рядок
Для цього в html є короткий одинарний тег.
(скорочено від break). Що він робить? Весь текст, який написано після цього тега буде виведено з нового рядка. Навіть якщо на поточному рядку залишається місце для його виведення, його все одно буде перенесено.
Використання br
Використовувати тег потрібно лише тоді, коли вам не потрібно розпочинати новий абзац, а вивести текст просто на новому рядку. Наприклад, вам треба записати вірш. Щоб не укладати кожен рядок вірша в абзацевий тег, можна просто в кінці кожного рядка писати тег
і тоді наступний рядок перенесеться вниз. Ось так усе просто.
Тег не слід використовувати як альтернативу абзацу. Варто пам'ятати, що між абзацами утворюється відступ, по висоті рівний одному порожньому рядку. При переносі з допомогою br відступ виходить менше.
Як зробити багато переносів?
А що робити, якщо вам потрібно зробити після якогось тексту, зробити великий відступ від подальшого вмісту. Є два варіанти, як це зробити. Можна написати багато тегів br . Так можна зробити безліч переносів.
Але краще зробити правильніше. Можна задати потрібному абзацу стильовий клас, а потім через css встановити великий відступ знизу.
Абзац
Abzac(
Margin-bottom: 100px;
}
У цьому випадку буде заданий відступ знизу 100 пікселів. Відповідно, відступ можна прописати будь-хто.
Часто виникає потреба додати новий абзац, але без порожнього рядка, який вставляє тег абзацу
Для деяких фрагментів тексту прийняті абзаци стандартні інтервали просто недоречні. Це можуть бути написи під картинками та в таблицях, вірші, цитати, виноски та примітки.
Для примусового перенесення рядків передбачено спеціальний тег, функція якого закладена у його назві br (break row - "розірвати рядок, рядок"). Тег
мови гіпертекстової розмітки html означає, що весь наступний за ним вміст повинен починатися з нового рядка. Якщо потрібно, можна проставити кілька тегів поспіль, щоб досягти необхідного інтервалу.
Тег
не чутливий до регістру і не вимагає тега, що закриває, тому що це порожній елемент, але краще звикати закривати всі теги. У XHTML тег розриву має бути "наглухо закритий" на зворотний слеш.
Приклад використання тегу розриву
Тег br у дії< /title></p><p><р>Прогул на службі</р></p><p><p>Ще ніде і ніколи <br></p><p>Я не був таким поганим <br></p><p>Початки жадібна орда <br></p><p>Гризе мене живим</р></p><p>Прогул на службі</p><p>Ще ніде і ніколи <br>Я не був таким поганим. <br>Початки жадібна орда <br>Гризе мене живим.</p><h2>Атрибут тега <br></h2><p>Єдиний атрибут, який має html тег <br>, називається Він вказує браузеру, як вчинити з рядком, що переноситься, якщо тексту доведеться обтікати так званий плаваючий елемент, яким може бути, наприклад, зображення з атрибутом вирівнювання align, що використовує значення right/left, або блок CSS, якому прописано властивість float.</p><p>У специфікаціях XHTML 1.0 / HTML 4.01 атрибут clear можна використовувати тільки з Transitional, Frameset і<!DOCTYPE>, інакше код буде неробочим.</p><h2>Властивості атрибуту тега</h2><p>Ефект від застосування атрибута clear залежить від його значення та розташування обтічного текстом плаваючого елемента. Атрибут може приймати 4 значення:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>Значення left забороняє обтікання елемента, вирівняного по лівому краю, тому текст, споткнувшись про тег <br>, розташується нижче зображення або іншого плаваючого елемента.</p><p>Такий результат вийде від використання аргументу all, який ні за що не дозволить ні праворуч, ні зліва.</p><p>Значення right забороняє тексту обтікання елемента, вирівняного праворуч, тому після тега <br>тексту не залишиться нічого іншого, як обійти зображення, обтікаючи його праворуч.</p><p>Значення none ("ні вашим, ні нашим") взагалі знімає всі повноваження з атрибуту clear, і тег <br>мовчки переносить рядок униз.</p><p>Значення за замовчуванням як таке у атрибута clear тега відсутнє.</p><h2>Тег <br>- це м'яке перенесення</h2><p>Тег розриву рядка дуже зручний для створення необхідних інтервалів між абзацами, всередині яких він використовується як м'яке перенесення, але не як засіб для поділу тексту на абзаци.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>Не слід занадто захоплюватися тегом перекладу рядків для форматування тексту, тому що результати його застосування не завжди відрізняються витонченістю.</p><p>Наприклад, якщо використовувати тег <br>для перекладу рядків всередині абзацу, це може призвести до появи "гребінки" у вікні користувача, якщо воно менше вікна, на яке орієнтувався веб-майстер.</p>
<p>Урок 5.</p><h1></h1>
<p>У цьому уроці ми: <br>1. Дізнаємося як зробити щоб html код був для нас більш зручний і легко читаємо. <br>2. Розберемо як правильно робити перенесення текстового рядка.</p>
<h2>Робимо html код зручним.</h2>
<p>Зараз наш код зрозумілий і легко читаємо, тому що в ньому мало тексту та практично немає тегів. Коли ми створимо складнішу сторінку, там буде багато тегів, відповідно знайти потрібний буде складно.</p>
<p>Щоб не було каші з тегів, потрібно спочатку розставляти теги та рядки так, щоб вони візуально сприймалися легше. Коли браузер зчитує інформацію з html сторінки, йому все одно скільки пробілів і скільки порожніх рядків у коді.</p>
<p>Я змінив текст у коді сторінки щодо тієї, яку ми створювали, але це не має значення. На лівому і правому малюнку зображено той самий код. Обидва варіанти відображатимуться браузером на екрані монітора абсолютно однаково. Погодьтеся, працювати з кодом зображеним праворуч буде набагато легше, ніж з тим, що зліва.</p>
<p>Розглянутий нами код дуже простий, але навіть зараз помітна різниця у візуальному сприйнятті. Будь-яких певних правил "наведення порядку" немає, кожен майстер сам вирішує як йому зручніше працювати.</p>
<h2>Перенесення рядка HTML. Тег <br>.</h2>
<p>Зверніть увагу на рисунок. У першому варіанті текст написаний на один рядок, у другому варіанті на два рядки.</p>
<br><img src='https://i2.wp.com/htmlboss.ru/image/lesson6-2.jpg' width="100%" loading=lazy loading=lazy><p>Браузер буде відображати обидва варіанти однаково. Текст буде написано в один рядок:</p>
<br><img src='https://i0.wp.com/htmlboss.ru/image/lesson6-3.jpg' width="100%" loading=lazy loading=lazy><p>Ви запитаєте чому так? Адже в одному з кодів частину тексту перенесено на інший рядок. Було б логічно, якби в браузері частина тексту теж перенеслася на інший рядок, але у html своя логіка в цьому відношенні. <u>Якщо ми в html коді робимо перенесення рядка, то для браузера це рівнозначно одному пропуску</u>(як звичайний пробіл між словами у тексті). Якщо ми перенесемо частину тексту не на один рядок вниз, а на 2 або 3 (будь-яку кількість), то браузер все одно вважатиме цю відстань за один звичайний пробіл між словами і при виведенні на екран текст буде писатися в один рядок.</p>
<h3>Тег <br></h3>
<p>Коли ми в третьому уроці знайомилися з тегами, я згадав, що бувають теги, які не вимагають закриття. Тег <b><br></b>один із них, служить він для перенесення рядка. <br>Давайте застосуємо його в коді:</p>
<img src='https://i2.wp.com/htmlboss.ru/image/lesson6-4.jpg' height="298" width="388" loading=lazy loading=lazy><p>Ми вставили тег <b><br></b>у наш html код і тепер при запуску файлу через браузер частина тексту буде перенесена на наступний сток. <br> * <i>Не забуваймо зберігати зміни в Notepad (Ctrl + S) та оновлювати сторінку в браузері (F5).</i></p>
<p>Усі або майже всі використовують у верстці. Чи багато з нас, поставивши у коді <br />замислюється: а чи справді потрібний він тут? Серед недосвідчених верстальників часто можна побачити верстку такого характеру: верстка меню</p>
<p>А ще можна зустріти такі чудові абзаци:</p>
<p><img src='https://i2.wp.com/xiper.net/assets/images/lessons/semantic/br-lamer-paragraph.png' width="100%" loading=lazy loading=lazy></p>
<p>Може виникнути питання: якщо на веб-сайті відображається все по дизайну, що тут не так? А не так тут - цей кошмарний, кривий, ламерський код, який говорить про дуже низьку кваліфікацію верстальника, який не спромігся навіть розібратися в призначеннях.</p>
<p>Застосовувати <br/>для формування абзаців - це все одно, що забивати цвяхи шуруповертом (це теж інструмент, чому б і не забити цвях, інший).</p>
<p><img src='https://i1.wp.com/xiper.net/assets/images/lessons/semantic/br-shurup.jpg' height="300" width="349" loading=lazy loading=lazy></p>
<h2>Навіщо призначений тег <br />?</h2>
<p>update 23.02.10 – з "фокусами" з white-space: pre потрібно бути уважними, т.к. при такому форматуванні рядки, які не вміщуються до блоку, автоматично не переносяться на новий рядок. Особливо це актуально для гумових дизайнів. У таких випадках все ж таки доводиться застосовувати <br />.</p>
<p>P ( white-space: pre; )</p>
<h3>Нотатка</h3>
<p>Спільнота фанатів семантичної верстки взагалі не включила <br>в.</p>
<h2>Де не повинно бути <br />?</h2>
<ul><li>використовувати теги за призначенням: для абзаців це< >, для списків та -< >, < >, < >і т.д.;</li>
<li>для форматування тексту та завдання відступів використовувати , такі як ;</li>
<li>використовувати окремі елементи для створення рядків (для цього найкраще підходять нейтральні елементи розмітки< >і< >).</li>
</ul><p>Розглянемо кілька практичних прикладів. Абзаци:</p>
<p><img src='https://i2.wp.com/xiper.net/assets/images/lessons/semantic/br-ex-p.png' width="100%" loading=lazy loading=lazy></p>
<p> <p>Високопродуктивне рішення має велику пропускну здатність - до 6.2 Gbps, і ідеально підходить не тільки для передачі голосу і відео, але так само і для нових додатків, вимогливих до смуги пропускання, таких як on-line ігри.</p>
<p>SGSN здатний підтримувати до 1,5 мільйона активних PDP сесій.</p></p>
<p>P ( margin-bottom: 12px; )</p>
<p>Декілька рядків номерів телефонів:</p>
<p><img src='https://i2.wp.com/xiper.net/assets/images/lessons/semantic/br-ex-phones.png' height="94" width="156" loading=lazy loading=lazy></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</article>
<section class="likes likes-default">
<h2 class="title-section"><span>Сподобалось?</span></h2>
<p>Натисніть кнопку, якщо стаття Вам сподобалася, це допоможе нам розвивати проект. Спасибі!</p>
<div>
<ul class="social-likes">
<li class="vkontakte"></li>
<li class="facebook"></li>
<li class="odnoklassniki"></li>
<li class="twitter"></li>
</ul>
</div>
</section>
</main>
<aside class="sidebar" role="complementary" data-mh="layout">
<div class="sticky">
<section class="widget popular_posts-2 widget_popular_posts"><h2 class="title-section"><span>Тренди</span></h2><div class="widget-body">
<article class="primary">
<a href="/protection/obnulenie-otstupov-v-css-sbros-stilei-s-pomoshchyu-css-reset-problemy-sbrosa/">
<div class="thumb"><img width="360" height="240" src="/uploads/6aafb7fb8c5043accd4340b687a008d6.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Скидання стилів за допомогою CSS Reset" sizes="(max-width: 360px) 100vw, 360px" / loading=lazy loading=lazy></div>
<h3>Скидання стилів за допомогою CSS Reset</h3>
<div class="summary">Усі HTML елементи сторінок за замовчуванням мають певні значення. І, на жаль, не...</div>
</a>
</article>
<!-- /next_post -->
<article class="secondary">
<a href="/protection/zagruzka-resursov-v-prilozhenii-sozdaem-otnositelnye-ssylki-otnositelno/">
<div class="row">
<div class="col col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/cdb14d50900dae63e9b66f282657fd10.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Створюємо відносні посилання щодо документа, з якого вони проставляються" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Створюємо відносні посилання щодо документа, з якого вони проставляються</h5>
</div>
</div>
</a>
</article>
<article class="secondary">
<a href="/boot-disk/razryv-stroki-v-html-ispolzuem-teg-br-razryv-stroki-v-html-ispolzuem-teg-br/">
<div class="row">
<div class="col col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/4a33581de4515c7c7fdd0fcfcacf6149.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Розрив рядка HTML: використовуємо тег br Властивості атрибута тега" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Розрив рядка HTML: використовуємо тег br Властивості атрибута тега</h5>
</div>
</div>
</a>
</article>
<article class="secondary">
<a href="/useful-tips/kak-vybrat-v-css-pervyi-element-roditelya-kak-rabotaet-nth-child-veb-standarty-pervyi-element-spi/">
<div class="row">
<div class="col col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/d915960ab8e465b6e2db36fe2b98a22c.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Як працює nth-child - Веб-стандарти Перший елемент списку css" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Як працює nth-child - Веб-стандарти Перший елемент списку css</h5>
</div>
</div>
</a>
</article>
<article class="secondary">
<a href="/tools-to-help/alert-javascript-parametry-operacii-alert-prompt-i-confirm-vzaimodeistvie-s/">
<div class="row">
<div class="col col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/d4726d9fac14220ffd3f486259a0611c.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Операції alert, prompt та confirm" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Операції alert, prompt та confirm</h5>
</div>
</div>
</a>
</article>
<article class="secondary">
<a href="/boot-disk/mozhno-li-snpch-stavit-vyshe-urovnya-printera-v-shleife-net/">
<div class="row">
<div class="col col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/c3d97b3e6629685db6c77ce8530c403d.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Чи можна снпч ставити вище за рівень принтера" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Чи можна снпч ставити вище за рівень принтера</h5>
</div>
</div>
</a>
</article>
</div></section><section class="widget recent_posts-2 widget_recent_posts"><h2 class="title-section"><span>Актуально</span></h2><div class="widget-body">
<article>
<a href="/peripherals/elektronnye-shtuchki-svoimi-rukami-poleznye-i-prostye-elektronnye/">
<div class="row">
<div class="col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/6aacea58fac471788ebb7661d8412b3f.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Корисні та прості електронні пристрої та саморобки своїми руками"
sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Корисні та прості електронні пристрої та саморобки своїми руками</h5>
</div>
</div>
</a>
</article>
<article>
<a href="/boot-disk/besprosvetnyi-inurl-contact-php-php-nasledovanie-kak-rabotaet-google/">
<div class="row">
<div class="col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/51d57f64c2ba03646d3facb45a1656f7.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Безпросвітний inurl contact php"
sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Безпросвітний inurl contact php</h5>
</div>
</div>
</a>
</article>
<article>
<a href="/useful-tips/shema-indikatora-vyhodnoi-moshchnosti-na-k155la3-ispolzovanie-mikroshemy-k155la3/">
<div class="row">
<div class="col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/bcee79fe7ef484970010a1aed482b93b.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Використання мікросхеми К155ЛА3"
sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Використання мікросхеми К155ЛА3</h5>
</div>
</div>
</a>
</article>
<article>
<a href="/useful-tips/kak-uluchshit-ohlazhdenie-noutbuka-dopolnitelnoe-ohlazhdenie-dlya-noutbuka/">
<div class="row">
<div class="col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/84e35919d8fbe91fe7ab3fc3fdf07ce8.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Додаткове охолодження для ноутбука: огляд, види, характеристики та відгуки Саморобна система охолодження для ноутбука замість штатного"
sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>Додаткове охолодження для ноутбука: огляд, види, характеристики та відгуки Саморобна система охолодження для ноутбука замість штатного</h5>
</div>
</div>
</a>
</article>
<article>
<a href="/peripherals/elektronnyi-termostat-w1209-w1209-termorele-termoregulyator/">
<div class="row">
<div class="col-xs-4">
<div class="thumb"><img width="100" height="75" src="/uploads/4d92e5757e20505e0ba71fb30390834a.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="W1209 Термореле (терморегулятор програмований) з герметичним датчиком Вольтметр з терморегулятора xh w1209 схема"
sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div>
</div>
<div class="col-xs-8">
<h5>W1209 Термореле (терморегулятор програмований) з герметичним датчиком Вольтметр з терморегулятора xh w1209 схема</h5>
</div>
</div>
</a>
</article>
</div></section> </div>
</aside>
</div>
</div>
<footer role="contentinfo">
<div class="row">
<div class="col col-sm-2">
<h3 class="title-footer">Розділи</h3><ul class="list-unstyled">
<li class="menu-den-svadby"><a href="/category/protection/">Захист</a></li>
<li class="menu-den-svadby"><a href="/category/solving-problems/">Вирішення проблем</a></li>
<li class="menu-den-svadby"><a href="/category/useful-tips/">Корисні поради</a></li>
<li class="menu-den-svadby"><a href="/category/peripherals/">Периферія</a></li>
</ul> </div>
<div class="col col-sm-2">
</div>
<div class="col col-sm-2">
<h3 class="title-footer">Ми у соцмережах</h3>
<ul class="list-unstyled">
<li>
<a href="https://vk.com/">Вконтакте</a>
</li>
<li>
<a href="https://facebook.com/">Facebook</a>
</li>
<li>
<a href="https://twitter.com/">Twitter</a>
</li>
</ul>
</div>
</div>
</footer>
<noscript></noscript>
<script type='text/javascript' src='https://crashbox.ru/wp-content/plugins/wp-postviews/postviews-cache.js?ver=1.68'></script>
<script type='text/javascript' src='https://crashbox.ru/wp-content/themes/alpha/dist/js/scripts.min.js?97dcb82ba08eedf6370ca2a8683cd79b'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.8'></script>
<div class="hidden">
</div>
</body>
</html>
