IT-Security Step-by-step

HTML5 » 1.9. Спецсимволы HTML

Джерело: https://html5book.ru/specsimvoly-html/


1. Полезные знаки и символы

Вид	HTML-код	CSS-код	Описание
🖂	🖂	\1F582	Обратная сторона конверта
☃	☃	\2603	Снеговик
☦	☦	\2626	Православный крест
⚓	⚓	\2693	Якорь
✆	✆	\2706	Знак телефона
☎	☎	\260E	Телефон
☕	☕	\2615	Горячие напитки
✎	✎	\270E	Карандаш, направленный вправо-вниз
✏	✏	\270F	Карандаш
✐	✐	\2710	Карандаш, направленный вправо-вверх
✑	✑	\2711	Незакрашенное острие пера
✒	✒	\2712	Закрашенное острие пера
⚜	⚜	\269C	Геральдическая лилия
⛑	⛑	\26D1	Шлем с белым крестом
⚝	⚝	\269D	Начерченная белая звезда
❄	❄	\2744	Снежинка
❤	❤	\2764	Закрашенное жирное сердце
❅	❅	\2745	Зажатая трилистниками снежинка
❆	❆	\2746	Жирная остроугольная снежинка
★	★	\2605	Закрашенная звезда
☆	☆	\2606	Незакрашенная звезда
✪	✪	\272A	Незакрашенная звезда в закрашенном круге
✫	✫	\272B	Закрашенная звезда с незакрашенным кругом внутри
✯	✯	\272F	Вращающаяся звезда
❉	❉	\2749	Звёздочка с шарообразными окончаниями
❋	❋	\274B	Жирная восьмиконечная каплеобразная звёздочка-пропеллер
✲	✲	\2732	Звёздочка с незакрашенным центром
☀	☀	\2600	Закрашенное солнце с лучами
☁	☁	\2601	Облака
☂	☂	\2602	Зонтик
☑	☑	\2611	Галочка в квадрате
☒	☒	\2612	Крестик в квадрате
☹	☹	\2639	Нахмуренный смайлик
☺	☺	\263A	Улыбающийся смайлик
☻	☻	\263B	Закрашенный улыбающийся смайлик
☭	☭	\262D	Серп и молот
⚑	⚑	\2691	Закрашенный флаг
⚐	⚐	\2690	Незакрашенный флаг
☰	☰	\2630	Триграмма
✿	✿	\273f	Закрашенный цветок
❀	❀	\2740	Незакрашенный цветок
✾	✾	\273E	Цветок с шестью лепестками
❁	❁	\2741	Закрашенный обведённый цветок
❂	❂	\2742	Цветок из точек
✉	✉	\2709	Конверт
❦	❦	\2766	Сердце в виде цветка
❶	❶	\2776	Номер 1
❷	❷	\2777	Номер 2
❸	❸	\2778	Номер 3
❹	❹	\2779	Номер 4
❺	❺	\277A	Номер 5
❻	❻	\277B	Номер 6
❼	❼	\277C	Номер 7
❽	❽	\277D	Номер 8
➒	➒	\2792	Номер 9
➓	➓	\2793	Номер 10
✖	✖	\2716	Жирный знак умножения
✘	✘	\2718	Жирный крестик
✔	✔	\2714	Жирная отметка галочкой
✚	✚	\271A	Жирный крест
⚛	⚛	\269B	Символ атома
♺	♺	\267A	Символ переработки
❑	❑	\2751	Незакрашенный квадрат с правой нижней тенью
❒	❒	\2752	Незакрашенный квадрат с правой верхней тенью
◈	◈	\25C8	Алмаз в оправе
◐	◐	\25D0	Круг с левой закрашенной половиной
◑	◑	\25D1	Круг с закрашенной правой половиной
⁂	⁂	\2042	Три звездочки

( Read more... )
 

HTML. Примеры для DreamWidth & LiveJournal

color: rgb(20,103,178); - цвет заголовка блога
color: rgb(120,137,104); - цвет заголовка блога
color: rgb(131,24,18); - цвет заголовка блога

Не секрет, что DreamWidth & LiveJournal понимают не все команды (Tag/Tags), которые есть в HTML.
Но кое-что можно использовать:

<span style="font-family: 'Calibri light';">
<span style="font-size: 1.2em;">
Джерело:
<a href=" " target="_blank" style="text-decoration: underline dashed; color: rgb(20,103,178);">
<a href=" " target="_blank" style="text-decoration: underline dashed; color: rgb(120,137,104);">
<a href=" " target="_blank" style="text-decoration: underline dashed; color: rgb(131,24,18);">
→ <span style="color: rgb(248, 104, 35);">→ </span>

<video width="720" height="240" controls>
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<div style="width: 98%; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
<table style="border-collapse: collapse; width: 98%;">

</table></div>


<div class="gtx-trans-icon"> </div>

• ☺ & # 9786;
• Знак ударения над любой буквой - & #769; Пример: в́
• Знак табуляции - & emsp;
• — &# 8212; - широкое тире (em-тире), широко используется в текстах
• ­ ­ &# 173; - мягкий перенос
• ­± ± &# 177; - знак «плюс/минус»

<s>зачёкнутый текст</s>

Padding: top, right, bottom, left

The SD-WAN Leader in Execution

Код с градиентным фоном:

<table style="background:linear-gradient(to right, rgb(44,14,20), rgb(212,52,39)); color: rgb(255,255,255); width: 100%; padding:10px;"><tr style=""><td style="border: 0px;"><span style="font-size: 28px;"><strong>The SD-WAN Leader
in Execution</strong></span></td></tr></table>

<ul style="margin-left: -15px;"><li style="list-style-type: disc;">Основний DNS-сервер: <code style="padding: 1px; padding-left: 5px; padding-right: 5px; background-color: rgb(236,236,236); border-radius: 2px;">8.8.8.8</code></li></ul>

• Основний DNS-сервер: 8.8.8.8

<ol style="margin-left: -15px;"><li style="text-indent: -15px;">Клацніть правою кнопкою миші на вашому мережевому підключенні та оберіть <em>Властивості</em>.</li></ol>

1. Клацніть правою кнопкою миші на вашому мережевому підключенні та оберіть Властивості.

<div style="margin-left: 25px; background-color: rgb(255,201,101); padding-left: 10px; font-size: 0.8em; border-left: 3px solid rgb(187,48,50); padding-top: 5px; padding-bottom: 5px;"><b>Install-WindowsFeature -Name RSAT-AD-PowerShell</b></div>



<div style="margin-left: 25px; background-color: rgb(255,255,255); padding-left: 10px; font-size: 0.8em; border-left: 3px solid rgb(20,103,178);"> • Upgrade to PowerShell 5.1 or later</div>



HTML-colors
→ https://bga68comp.dreamwidth.org/724055.html

HTML-символы
→ https://symbl.cc/ru/html-entities

HTML-CSS
→ https://html-css.co.ua/css/image-rendering/

HTML5. Примеры для DreamWidth & LiveJournal. Спецсимволы → https://bga68comp.dreamwidth.org/739026.html

HTML5. → Учебники, различные примеры тегов и спецсимволов

⚠️ - знак внимания
• & lt; - <
• & gt; - >
• & #47; - /

<div id=1 style="border: dashed 1px red; padding: 10px; margin: 5px;"><span style="font-size: 0.85em; font-stretch: ultra-condensed; font-style: italic; ">
Креслення, в основному, з періодичних видань та знайдені у вільному доступі до мережі Інтернет. По можливості вказую джерело звідки було взято креслення чи опис тієї чи іншої операції з виготовлення. Якщо автора не вказав, буду радий вказати, пишіть у лічку.</span></div>

Как этот div будет выглядеть:



• неправильный текст, перечеркнутый - <s> </s>
• подстрочный текст, т.е. _индекс - 
• текст над строкой, т.е. ^{степень} - <sup> <sup>
• подчеркнутый текст - <u> </u>
• акроним - текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово. К акронимам, например, можно отнести следующие слова: СПИД, ликбез, замполит, США, DOS -
<acronym style="border-bottom: 1px dashed rgb(0,103,182);"> </acronym>

🐶🐕🐎🦌🐕‍🦺🦮🐩🐘🦣🦕🦍🦧🐼🫎🐏🐏🐑🐑🐿️🦨🦉🐥🐠🦈🐬🐳🦀🕸️🐜🦗🐌🐝🐞🦋🪼🍓🍒🍎🍉🍌🍋🍐🍇🥕🌶️🍅🌽🧅🫛🫘🧄🥐🥯🥞🍔🥪🍟🥣🫕🎂🍩🫙☕🍺🍻🍽️🚧🚨⛽🧭🛟🚲⚓🛟🚚🚑🚓🚕🚂🚎🚋🛬🛫🗽🎂🧨⚾⚽🏐🏀🥎🥋🎸🎻🎧🎤🎥📽️📺☎️📠🔋🪫🖥️💻🧮🧱🛁🧸⛑️👑💄👠🩻🩺🩹💊💉🌡️📡🔬🛰️🧯🪓🪜🧰🪛🪚🔧🔨🪣⚒️🛠️⛏️⚙️📎🖇️📏📐🖋️✒️📝📝📌🪪📍🗑️✂️✉️📧📩📨🕛🕧🕐🕜🕑🕝🕒🕞🕓🕟🕔🕠🕕🕡🕖🕢🕗🕣🕘🕤🕙🕥🕚🕦⏱️⏳⏰📢📣🔔🔍🔎⚔️🗡️🛡️🗝️🔒🔓🔐🔞📵🚷🚱🚯🚭🚳🔕🔇🔊🚻🚹🚺☯️👁️‍🗨️🇩🇪🇨🇳🇨🇦🇨🇰🇦🇺🏴‍☠️🇬🇧🇫🇮🇱🇷🇺🇦🇺🇲🏴󠁧󠁢󠁥󠁮󠁧󠁿🏴󠁧󠁢󠁳󠁣󠁴󠁿📌

😂😜🙊🙂🙃👍🙈😁🚴‍♂️😊😉😳🥲😇😎🤬🤡👁👀👣👂💋🫀👓🕶🐶🐼🦁🐯🦊🐻🐵🙈🙉🙊🐒🐝🦋🐞🐕🐩🦮🐕‍🦺🦩🦢🦨🐁🐀🦔🍄🍁🌙🌔🌓🌘🌖🔥🌈⛈🌧☔️🎠🇺🇦

Синтаксис


W3 schools → https://www.w3schools.com/

Tags for Dreamwidth → color: rgb(248, 104, 35);

Расположить div's на одной строке:

<div style="
display: flex;
align-items: center; ">
<div id=1 style="border: dashed 1px red; padding: 10px; margin: 5px;"> blob1</div>
<div id=2 style="border: dashed 1px blue; padding: 10px; margin: 5px;">blob2</div>
<div id=3 style="border: dashed 1px green; padding: 10px; margin: 5px;">blob3</div>
</div>

Выглядеть будет так:


Примеры написания шрифтов
(параметры: font-size: 0.7; font-weight: 400; font-stretch: ultra-condensed;):

Ink Free:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Monotype Corsiva:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Mistral:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Без засечек

Verdana:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Arial:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

"Segoe UI" - & quot; :
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Verdana:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Tahoma:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

sans-serif:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Helvetica:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Consolas:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

'Cascadia Code':
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

monospace:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

С засечками

"Times New Roman":
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

'Segoe WP' - &# 39; :
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

"Helvetica Neue":
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

'Courier New':
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

SegoeUI:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Segoe:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Cascadia:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

serif:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Roboto:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Menlo:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Monaco:
В ПОСЛЕДНЕЕ время уделяется большое внимание развитию крупной промышленности и энергетики в районах Сибири, Дальнего Востока и Крайнего Севера.

Убрать траурные рамки у аватарки Dreamwidth - color: rgb(0,103,182); →
https://norian.dreamwidth.org/670170.html

<div style="margin-left: 30px; padding: 1px 30px; border-left: 3px solid rgb(0,103,182); color: rgb(23, 23, 23); background-color: rgb(255, 255, 255);">выбираем Organize, Customize Style, </div>

... и будет выглядеть как показано ниже:



<img style="padding: 2px; width: 95%; border-style: solid; border-width: 1px; border-radius: 16px; border-color: rgb(187,48,50);" src="">

<img style="padding: 2px; width: 95%; border-style: solid; border-width: 1px; border-radius: 16px; border-color: rgb(187,48,50);" src="" title="7">

<img style="padding: 2px; width: 95%; border-style: solid; border-width: 1px; border-radius: 16px; border-color: rgb(187,48,50);" src="" title="5" vertical-align: middle; margin-top: 0; />


Для div цікаві такі стилі:
justify-content: center !important;
grid-template-columns: repeat(3, minmax(300px, 1fr));
gap: 25px; (row-gap и column-gap)

background-color: rgb(247, 245, 245);

Функція clamp() фіксує середнє значення в діапазоні значень між визначеною мінімальною межею та максимальною межею.

Функція приймає три параметри: мінімальне значення, бажане значення та максимально допустиме значення.

Використання clamp() для розмірів шрифту дозволяє встановити розмір шрифту, який зростає разом із розміром вікна перегляду, але не опускається нижче мінімального розміру шрифту або перевищує максимальний розмір шрифту.


Функція calc() дозволяє виконувати обчислення під час визначення значень властивостей CSS

<h2 style="font-family: Ink Free; font-size: 18pt;">Магічний псто</h2>

<div style="margin-left: 15px; font-family: Monotype Corsiva; Mistral; font-size: 14.5pt;">

<span style="font-size: 0.75em;">Джерело:
<a target="_blank" href="https://manmachine13.livejournal.com/132979.html"><span style="color: rgb(248, 104, 35);">ⓘ</span> Live Journal manmachine13 →</a></span>

Допис команди:

<div style="border-style: solid; border-width: 1px; border-color: rgb(44,143,209); width: 250px; line-height: 0.5em; margin-left: 50px;">
<center>wmic cpu get name</center>
& nbsp;
</div>

Допис команди виглядає так:

Шрифт Cascadia Code командної строки:

<div style="background-color: black; left-margin: 2px; max-width: 650px; border-radius: 6px; border-style: solid; border-width: 2px; border-color: rgb(181,181,181);"><div style="padding: 10px;"><span style="font-family: &# 39;Cascadia Code&# 39;; font-size: 7.5pt; color: rgb(210,210,210);">Microsoft Windows [Version 10.0.22621.2134]
(c) Корпорація Майкрософт (Microsoft Corporation). Всі права захищені.
</span></div></div>

Командна строка шрифтом Cascadia Code і розміром 7.5pt виглядає так:

Посилання:

<a href="https://docs.microsoft.com/en-us/windows-server/get-started/kmsclientkeys" target="_blank"><span style="color: rgb(0,103,182);">https://docs.microsoft.com/en-us/windows-server/get-started/kmsclientkeys</span></a>
<a href="https://docs.microsoft.com/ru-ru/windows-server/get-started/kmsclientkeys" target="_blank"><span style="color: rgb(0,103,182);"<https://docs.microsoft.com/ru-ru/windows-server/get-started/kmsclientkeys</span></a>

Посилання такого кольору виглядає так:

https://docs.microsoft.com/en-us/windows-server/get-started/kmsclientkeys
https://docs.microsoft.com/ru-ru/windows-server/get-started/kmsclientkeys

Примітка, яка відноситься до чогось:

<div style="margin-left: 30px; padding: 1px 30px; border-left: 3px solid rgb(0,103,182); color: rgb(23, 23, 23); background-color: rgb(255, 255, 255);"><span style="font-family: & quot;Segoe UI& quot;, SegoeUI, & quot;Helvetica Neue& quot;, Helvetica, Arial, sans-serif; font-size: 14px;">Область применения: Windows Server 2022, Windows Server 2019, Windows Server 2016, Windows Server Semi-Annual Channel, Windows 10</span></div>

Примітка тоді виглядає так:

Саме - примітка:

<div style="border-radius: 10px; background-color: rgb(0,103,182); padding: 10px; margin-left: 90px; max-width: 70%; color: rgb(255,255,255);"><span style="font-size: 1.4em">ⓘ</span> <b> Примечание</b>

<div style="margin-left: 25px;">В приведенных далее таблицах LTSC означает Long-Term Servicing Channel,
а LTSB — Long-Term Servicing Branch
</div>
</div>

Примітка виглядає так:

<div style="margin-left: 20px; margin-top: -10px;">
<span style="font-family: Helvetica; font-size: 11pt;">
<pre>Сокращения 
AAA     – Authentication, Authorisation, Accounting
ACI     – (Cisco) Application Centric Infrastructure

</pre></span>
</div>

<div style="padding: 0px;
height: 360px;
display: block;
width: 800px;
overflow: hidden;
border: 0px solid red;
outline: 1px solid #CCCCCC;
"><img src="https://blogs.windows.com/wp-content/uploads/prod/sites/2/2023/02/W11-PC-with-Bloom-hero.png" style="width: 101%; padding: 0px; margin-top: -50px; border-width: 0px; border: -solid; border-color: -red; " title="Ноутбук на кухонном столе с начальным экраном Windows 11"></div>

Цей <div> виглядає так:



<raw-code>: Temporarily turns off auto-formatting </raw-code>

This paragraph includes a <q>short quote</q>, but

<blockquote>longer quotes are displayed in their own paragraph block</blockquote>

В настоящее время поддерживаются следующие форматы изображений: .gif, .jpg и .png.

У всех пользователей есть квота на объем дискового пространства, который они могут использовать.
Бесплатные аккаунты могут загружать 500 МБ изображений,
платные аккаунты — 1,5 ГБ,
а платные премиум-аккаунты — 3 ГБ.

https://www.dreamwidth.org/file/new

View all images - https://www.dreamwidth.org/file/list

Manage your images - https://www.dreamwidth.org/file/edit

Tags in Dreamwidth - https://girlrock.dreamwidth.org/20874.html#css

<span style="font-family: &# 39;Segoe UI&# 39;, Segoe, &# 39;Segoe WP&# 39;, Tahoma, Verdana, Arial, sans-serif, & quot;Times New Roman& quot;,serif;">

<img src="http://www.mediafire.com/convkey/3456/xkospwi994bjdw9zg.jpg?size_id=2" alt="ok-hand" width="35" />
либо
< <span style="font-family: &# 39;Wingdings 2&# 39;; font-size: 20pt;">&# 60;</span>

<link rel="shortcut icon" href="https://ic.pics.livejournal.com/bga68/68022014/1192182/1192182_original.png" type="image/png">

<img src="http://www.mediafire.com/convkey/0948/39npou2abw9xob2zg.jpg?size_id=6" alt="ZiS logo" width="120" align="middle" />
<img src="https://www.mediafire.com/convkey/8927/3eb4zuqazlt5qfqzg.jpg?size_id=c" title="ZiS logo-red1" width="60" align="middle" />
<img src="http://www.mediafire.com/convkey/3e40/m0nc4a24xq17br4zg.jpg?size_id=4" alt="GAZ logo 1932" width="110" />
<img src="http://www.mediafire.com/convkey/30fb/ippdvrr63b2fodyzg.jpg?size_id=5" alt="GAZ logo 1960 / 5 зубцов - после 1981" width="100" />
<img src="http://www.mediafire.com/convkey/416d/xgm5z6smhypu2eizg.jpg?size_id=7" alt="ZiL logo" width="120" />
<img src="http://www.mediafire.com/convkey/2031/8w0hns41uvj1cnkzg.jpg?size_id=2" alt="ZiL logo поздняя" width="120" />
<img src="http://www.mediafire.com/convkey/f9dd/ffxpmqtr4w3ipnozg.jpg?size_id=3" alt="КрАЗ эмблема" width="120" />
<img src="http://www.mediafire.com/convkey/bc58/qnk4ijb3nki188rzg.jpg?size_id=5" alt="МАЗ-500 эмблема" width="100" />
<img src="http://www.mediafire.com/convkey/ff90/te1v8irzj5d3ga9zg.jpg?size_id=3" alt="МАЗ-200 эмблема" style="float: bottom; vertical-align: middle; margin-top: 0; /* Отступ сверху */ margin-right: 10px; width: 100px;" />

<iframe src="http://docs.google.com/viewer?url=http://maz.by/media/14356/каталог-шасси-евро5.pdf&embedded=true" width="700" height="520"
style="border: none;"></iframe>






****


Как создать сайт. Некоторые тонкости



Facebook:
<figure class="aentry-post__figure aentry-post__figure--media"><div class="fb-post" data-href="https://www.facebook.com/kochetkov.vladimir/posts/1075139016174699" data-width="500"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/kochetkov.vladimir/posts/1075139016174699">Facebook post</a></div></div></figure>



<figure><div style="width: 500px; padding: 20px; border-radius: 16px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px; border-style: solid; border-width: 1px; border-color: # 922704; text-align: justify; "><a target="_blank" href="https://www.securitylab.ru/blog/personal/offtopic/"><img style="max-width: 50px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%; padding: 10px;" src="http://www.mediafire.com/convkey/86e1/fmocj2xwg8x5tlezg.jpg?size_id=2" alt="Сергей Гордейчик" align="left" /> <span style="font-size: 1em">Сергей Гордейчик</span></a>
<span style="font-size: 1.4em; ">Черно-белая «статика» или динамический анализ исходных кодов</span>

Краткое содержание: как модно искать уязвимости приложений; почему SAST и статический анализ, и DAST и динамический анализ не синонимы; в чем
</div></figure>


Смайлик: <img src="http://ic.pics.livejournal.com/bga68/68022014/488927/488927_original.jpg" alt="" title="" width="17" style="float: bottom; margin-top: 0; /* Отступ сверху */
margin-bottom: -5px; /* Отступ снизу */" >
Глазик: <img src="http://zabaka.ru/images/eye.png" width="20" align="middle" />
👋 <span style="font-size: 2.2em; color: red;"> 👋 </span>
Иконка сторонних ресурсов:
   <img src="http://ic.pics.livejournal.com/bga68/68022014/316506/316506_original.jpg" alt="" title="Сторонние ресурсы" width="20" >

Отступы:

<p style="text-indent: 2em;">

indent = 2em

Висячая строка:

<div style="margin-left: 60px; text-indent: -60px;"><span style="color: # 875757; font-weight: bold;">Программист</span>: ну представь, что ты писатель и поддерживаешь проект “Война и мир”. </div>









Выбор шрифта: <span style="font-family: Verdana, Arial, Helvetica, sans-serif;"> Текст </span>



Интересные примеры на странице рекламы форума 3D SOLIDWORKS RUSSIA 2018 – Dassault Systèmes®


Абзацный отступ / Табуляция: <span style="margin-left: 50px;"> Текст </span>



Параметры текста: overflow-wrap: break-word; text-align: justify;
http://htmlbook.ru/css/word-wrap

Рамка вокруг рисунка: style="border-style: dotted;"
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Расстояние от края рисунка до текста: hspace=" "


Обтекание рисунка текстом: align="left" align="justify" align="right"

Центрирование текста или рисунка: <center> Текст </center>




Таблица








Для TD
padding: 5px; /* Поля вокруг текста */ Поочередно устанавливается поля от верхнего, правого, нижнего и левого края / border-color:# dbd7d7; border-style: solid; border-width: 1px;



Смайлики:

🙂 смайлик 🙂 -> &# 128578; / цвет смайлика поменять нельзя!

☺ &# 9786; смайлик ☺ цвет # F29D1D; размер style="font-size: 2.0em; color: rgb(242,157,29); font-weight: 900;"

☹ &# 9785; грустный смайлик ☹ цвет # ff6200, размер style="font-size: 1.4em"

☻ &# 9787; - черный смайлик. Цвет: ☻
☸ &# 9784; - паутинка


horizontal tab &# 9; - &# 9; / не работает
CR &# 13; 000D carriage return - возврат каретки

Спецсимволы:

✩ &# 10025; https://www.toptal.com/designers/htmlarrows/symbols/
⚙ &# 9881;
✬ &# 10028;
✭ &# 10029;
✮ &# 10030;
✯ &# 10031;
★ & starf; &# 9733;
☆ & star; &# 9734;
@ & commat;
℃ &# 8451;
℉ &# 8457;
℗ & copysr;
℠ &# 8480;
ℼ &# 8508;
⅀ &# 8512;
☀ &# 9728;
☁ &# 9729;
☂ &# 9730;
☉ &# 9737;
☊ &# 9738;
☋ &# 9739;

☎ & phone; &# 9742;
☏ &# 9743;
☑ &# 9745;
☒ &# 9746;
☘ &# 9752;
☠ &# 9760;
☢ &# 9762;
☣ &# 9763;
☤ &# 9764;
☪ &# 9770;
☭ &# 9773;
☮ &# 9774;
☯ &# 9775;
☰ &# 9776;
☷ &# 9783;
☺ &# 9786;
☸ &# 9784;
☻ &# 9787;
☾ &# 9790;
♀ & female; &# 9792;
♁ &# 9793;
♂ & male; &# 9794;


♔ &# 9812;
♕ &# 9813;
♖ &# 9814;
♗ &# 9815;
♘ &# 9816;
♙ &# 9817;
♚ &# 9818;
♛ &# 9819;
♜ &# 9820;
♝ &# 9821;
♞ &# 9822;
♟ &# 9823;
♠ &# 9824; & spades;
♡ &# 9825;
♢ &# 9826;
♣ &# 9827; & clubs;
♤ &# 9828;
♥ &# 9829; & hearts;
♦ &# 9830; & diams;
♧ &# 9831;
♩ &# 9833; QUARTER NOTE
♪ &# 9834; & sung; EIGHTH NOTE
♫ &# 9835; BEAMED EIGHTH NOTES
♬ &# 9836; BEAMED SIXTEENTH NOTES
♭ &# 9837; & flat; MUSIC FLAT SIGN
♮ &# 9838; & natural; MUSIC NATURAL SIGN
♯ &# 9839; & sharp; MUSIC SHARP SIGN


♲ &# 9842; UNIVERSAL RECYCLING SYMBOL

♳ &# 9843; RECYCLING SYMBOL FOR TYPE-1 PLASTICS

♴ &# 9844; RECYCLING SYMBOL FOR TYPE-2 PLASTICS

♵ &# 9845; RECYCLING SYMBOL FOR TYPE-3 PLASTICS

♶ &# 9846; RECYCLING SYMBOL FOR TYPE-4 PLASTICS

♷ &# 9847; RECYCLING SYMBOL FOR TYPE-5 PLASTICS

♸ &# 9848; RECYCLING SYMBOL FOR TYPE-6 PLASTICS

♹ &# 9849; RECYCLING SYMBOL FOR TYPE-7 PLASTICS

♺ &# 9850; RECYCLING SYMBOL FOR GENERIC MATERIALS

♻ &# 9851; BLACK UNIVERSAL RECYCLING SYMBOL

♼ &# 9852; RECYCLED PAPER SYMBOL

♽ &# 9853; PARTIALLY-RECYCLED PAPER SYMBOL

♾ &# 9854; PERMANENT PAPER SIGN

⚀ &# 9856; DIE FACE-1

⚃ &# 9859; DIE FACE-4

⚄ &# 9860; DIE FACE-5

⚅ &# 9861; DIE FACE-6

⚐ &# 9872; WHITE FLAG

⚑ &# 9873; BLACK FLAG

⚒ &# 9874; HAMMER AND PICK

⚔ &# 9876; CROSSED SWORDS

⚕ &# 9877; STAFF OF AESCULAPIUS

⚖ &# 9878; SCALES

⚚ &# 9882; STAFF OF HERMES

⚛ &# 9883; ATOM SYMBOL

⚜ &# 9884; FLEUR-DE-LIS

⚝ &# 9885; OUTLINED WHITE STAR

⚠ &# 9888; WARNING SIGN

⚢ &# 9890; DOUBLED FEMALE SIGN

⚣ &# 9891; DOUBLED MALE SIGN

⚤ &# 9892; INTERLOCKED FEMALE AND MALE SIGN

⚥ &# 9893; MALE AND FEMALE SIGN

⚦ &# 9894; MALE WITH STROKE SIGN

⚧ &# 9895; MALE WITH STROKE AND MALE AND FEMALE SIGN

⚨ &# 9896; VERTICAL MALE WITH STROKE SIGN

⚩ &# 9897; HORIZONTAL MALE WITH STROKE SIGN

✁ &# 9985; UPPER BLADE SCISSORS

✂ &# 9986; BLACK SCISSORS

✃ &# 9987; LOWER BLADE SCISSORS

✄ &# 9988; WHITE SCISSORS

✆ &# 9990; TELEPHONE LOCATION SIGN

✇ &# 9991; TAPE DRIVE

✈ &# 9992; AIRPLANE

✉ &# 9993; ENVELOPE

✎ &# 9998; LOWER RIGHT PENCIL

✏ &# 9999; PENCIL

✐ &# 10000; UPPER RIGHT PENCIL

✑ &# 10001; WHITE NIB

✒ &# 10002; BLACK NIB

✓ &# 10003; & check; CHECK MARK

✔ &# 10004; HEAVY CHECK MARK

✕ &# 10005; MULTIPLICATION X

✖ &# 10006; HEAVY MULTIPLICATION X

✗ &# 10007; & cross; BALLOT X

✘ &# 10008; HEAVY BALLOT X


✠ &# 10016; & malt; MALTESE CROSS

✡ &# 10017; STAR OF DAVID

✢ &# 10018; FOUR TEARDROP-SPOKED ASTERISK

✣ &# 10019; FOUR BALLOON-SPOKED ASTERISK

✤ &# 10020; HEAVY FOUR BALLOON-SPOKED ASTERISK

✥ &# 10021; FOUR CLUB-SPOKED ASTERISK

✦ &# 10022; BLACK FOUR POINTED STAR

✧ &# 10023; WHITE FOUR POINTED STAR

✩ &# 10025; STRESS OUTLINED WHITE STAR

✪ &# 10026; CIRCLED WHITE STAR

✫ &# 10027; OPEN CENTRE BLACK STAR

✬ &# 10028; BLACK CENTRE WHITE STAR

✭ &# 10029; OUTLINED BLACK STAR

✮ &# 10030; HEAVY OUTLINED BLACK STAR

✯ &# 10031; PINWHEEL STAR

✰ &# 10032; SHADOWED WHITE STAR

✴ &# 10036; EIGHT POINTED BLACK STAR

✵ &# 10037; EIGHT POINTED PINWHEEL STAR

✶ &# 10038; & sext; SIX POINTED BLACK STAR

✷ &# 10039; EIGHT POINTED RECTILINEAR BLACK STAR

✸ &# 10040; HEAVY EIGHT POINTED RECTILINEAR BLACK STAR

✹ &# 10041; TWELVE POINTED BLACK STAR

✺ &# 10042; SIXTEEN POINTED ASTERISK

✻ &# 10043; TEARDROP-SPOKED ASTERISK

✼ &# 10044; OPEN CENTRE TEARDROP-SPOKED ASTERISK

✽ &# 10045; HEAVY TEARDROP-SPOKED ASTERISK

✾ &# 10046; SIX PETALLED BLACK AND WHITE FLORETTE

✿ &# 10047; BLACK FLORETTE

❀ &# 10048; WHITE FLORETTE

❁ &# 10049; EIGHT PETALLED OUTLINED BLACK FLORETTE

❂ &# 10050; CIRCLED OPEN CENTRE EIGHT POINTED STAR

❃ &# 10051; HEAVY TEARDROP-SPOKED PINWHEEL ASTERISK

❄ &# 10052; SNOWFLAKE

❅ &# 10053; TIGHT TRIFOLIATE SNOWFLAKE

❆ &# 10054; HEAVY CHEVRON SNOWFLAKE

❇ &# 10055; SPARKLE

❈ &# 10056; HEAVY SPARKLE

❉ &# 10057; BALLOON-SPOKED ASTERISK

❊ &# 10058; EIGHT TEARDROP-SPOKED PROPELLER ASTERISK

❋ &# 10059; HEAVY EIGHT TEARDROP-SPOKED PROPELLER ASTERISK

❍ &# 10061; SHADOWED WHITE CIRCLE

❏ &# 10063; LOWER RIGHT DROP-SHADOWED WHITE SQUARE

❐ &# 10064; UPPER RIGHT DROP-SHADOWED WHITE SQUARE

❑ &# 10065; LOWER RIGHT SHADOWED WHITE SQUARE

❒ &# 10066; UPPER RIGHT SHADOWED WHITE SQUARE

❖ &# 10070; BLACK DIAMOND MINUS WHITE X

❘ &# 10072; & VerticalSeparator; LIGHT VERTICAL BAR

❙ &# 10073; MEDIUM VERTICAL BAR

❚ &# 10074; HEAVY VERTICAL BAR

❛ &# 10075; HEAVY SINGLE TURNED COMMA QUOTATION MARK ORNAMENT

❜ &# 10076; HEAVY SINGLE COMMA QUOTATION MARK ORNAMENT

❝ &# 10077; HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT

❞ &# 10078; HEAVY DOUBLE COMMA QUOTATION MARK ORNAMENT

❡ &# 10081; CURVED STEM PARAGRAPH SIGN ORNAMENT

❢ &# 10082; HEAVY EXCLAMATION MARK ORNAMENT

❣ &# 10083; HEAVY HEART EXCLAMATION MARK ORNAMENT

❤ &# 10084; HEAVY BLACK HEART

❥ &# 10085; ROTATED HEAVY BLACK HEART BULLET

❦ &# 10086; FLORAL HEART

❧ &# 10087; ROTATED FLORAL HEART BULLET

❴ &# 10100; MEDIUM LEFT CURLY BRACKET ORNAMENT

❵ &# 10101; MEDIUM RIGHT CURLY BRACKET ORNAMENT


❶ &# 10102; DINGBAT NEGATIVE CIRCLED DIGIT ONE

❷ &# 10103; DINGBAT NEGATIVE CIRCLED DIGIT TWO

❸ &# 10104; DINGBAT NEGATIVE CIRCLED DIGIT THREE

❹ &# 10105; DINGBAT NEGATIVE CIRCLED DIGIT FOUR

❺ &# 10106; DINGBAT NEGATIVE CIRCLED DIGIT FIVE

❻ &# 10107; DINGBAT NEGATIVE CIRCLED DIGIT SIX

❼ &# 10108; DINGBAT NEGATIVE CIRCLED DIGIT SEVEN

❽ &# 10109; DINGBAT NEGATIVE CIRCLED DIGIT EIGHT

❾ &# 10110; DINGBAT NEGATIVE CIRCLED DIGIT NINE

❿ &# 10111; DINGBAT NEGATIVE CIRCLED NUMBER TEN

⓫
⓬
⓭
⓮
⓯
⓰
⓱
⓲
⓳
⓴

➀ &# 10112; DINGBAT CIRCLED SANS-SERIF DIGIT ONE

➁ &# 10113; DINGBAT CIRCLED SANS-SERIF DIGIT TWO

➂ &# 10114; DINGBAT CIRCLED SANS-SERIF DIGIT THREE

➃ &# 10115; DINGBAT CIRCLED SANS-SERIF DIGIT FOUR

➄ &# 10116; DINGBAT CIRCLED SANS-SERIF DIGIT FIVE

➅ &# 10117; DINGBAT CIRCLED SANS-SERIF DIGIT SIX

➆ &# 10118; DINGBAT CIRCLED SANS-SERIF DIGIT SEVEN

➇ &# 10119; DINGBAT CIRCLED SANS-SERIF DIGIT EIGHT

➈ &# 10120; DINGBAT CIRCLED SANS-SERIF DIGIT NINE

➉ &# 10121; DINGBAT CIRCLED SANS-SERIF NUMBER TEN

➊ &# 10122; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT ONE

➋ &# 10123; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT TWO

➌ &# 10124; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT THREE

➍ &# 10125; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT FOUR

➎ &# 10126; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT FIVE

➏ &# 10127; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT SIX

➐ &# 10128; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT SEVEN

➑ &# 10129; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT EIGHT

➒ &# 10130; DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT NINE

➓ &# 10131; DINGBAT NEGATIVE CIRCLED SANS-SERIF NUMBER TEN

£ &# 163; & pound; POUND SIGN

€ &# 8364; & euro; EURO SIGN


÷ &# 247; & divide; DIVISION SIGN

≠ &# 8800; & ne; NOT EQUAL TO SIGN

¼ &# 188; & frac14; FRACTION ONE QUARTER

½ &# 189; & frac12; FRACTION ONE HALF

¾ &# 190; & frac34; FRACTION THREE QUARTERS

⅓ &# 8531; & frac13; VULGAR FRACTION ONE THIRD

⅔ &# 8532; & frac23; VULGAR FRACTION TWO THIRDS

⅛ &# 8539; & frac18; VULGAR FRACTION ONE EIGHTH

⅜ &# 8540; & frac38; VULGAR FRACTION THREE EIGHTHS

⅝ &# 8541; & frac58; VULGAR FRACTION FIVE EIGHTHS

µ &# 181; & micro; MICRO SIGN

⁂ &# 8258; ASTERISM

⁕ &# 8277; FLOWER PUNCTUATION MARK

∮ &# 8750; & conint; CONTOUR INTEGRAL

∲ &# 8754; & cwconint; CLOCKWISE CONTOUR INTEGRAL

∳ &# 8755; & awconint; ANTICLOCKWISE CONTOUR INTEGRAL

≤ &# 8804; & le; LESS-THAN OR EQUAL TO

≥ &# 8805; & ge; GREATER-THAN OR EQUAL TO

⊗ &# 8855; & otimes; CIRCLED TIMES

⁰ &# 8304; SUPERSCRIPT ZERO

© Copyright Sign - © / & copy; © - &# 169;
® Registered Sign - ® / & reg; ® - &# 174; -> https://www.w3schools.com/charsets/ref_utf_latin1_supplement.asp
± Plus-Minus Sign - ± / & plusmn;
÷ Division Sign
™ Trade Mark Sign - ™ / &# 153; либо ™ - & trade;
℠ Service Mark ℠ - &# 8480;
℗ Sound Recording Copyright - ℗ / &# 8471;
Ø диаметр - & Oslash;
₴ Hryvnia Sign
á Latin Small Letter A With Acute
Á Latin Capital Letter A With Acute

° Degree Sign - & deg;
℃ DEGREE CELSIUS - &# 8451;
℉ DEGREE FAHRENHEIT - &# 8457;
{ Left Curly Bracket
} Right Curly Bracket
~ Tilde
@ Commercial At
% Percent Sign
& Ampersand
€ Euro Sign - € / & euro;
● black circle либо • & bull; либо • / &# 149;
‣ ‣ - &# 8227; TRIANGULAR BULLET
◌ Dotted Circle
⋆ ⋆ STAR OPERATOR - &# 8902;
⋇ ⋇ DIVISION TIMES - &# 8903;
⋄ ⋄ DIAMOND OPERATOR - &# 8900;
☀ ☀ BLACK SUN WITH RAYS - &# 9728; -> ☀
☂ ☂ UMBRELLA - &# 9730; -> ☂
★ ★ BLACK STAR - &# 9733; -> ★
☆ ☆ WHITE STAR - &# 9734; -> ☆
☭ ☭ HAMMER AND SICKLE - &# 9773; -> ☭
☮ ☮ PEACE SYMBOL - &# 9774;
☯ ☯ YIN YANG - &# 9775; -> ☯
⚐ ⚐ WHITE FLAG - &# 9872; -> ⚐
⚑ ⚑ BLACK FLAG - &# 9873; -> ⚑
⛤ ⛤ PENTAGRAM - &# 9956; -> ⛤
⛥ ⛥ RIGHT-HANDED INTERLACED PENTAGRAM - &# 9957; -> ⛥
⛦ ⛦ LEFT-HANDED INTERLACED PENTAGRAM - &# 9958; -> ⛦
⛧ ⛧ INVERTED PENTAGRAM - &# 9959; -> ⛧
🕸 🕸 - &# 128376; -> 🕸
✉ - &# 9993; -> ✉
🚹 🚹 - &# 128697; -> 🚹
🚺 🚺 - &# 128698; -> 🚺
🚻 🚻 - &# 128699; -> 🚻
🚼 🚼 - &# 128700; -> 🚼
ⓘ ⓘ - &# 9432; -> ⓘ - Латинская строчная буква i в круге
🛈🛈 - &# 128712; -> 🛈 - Информация (знак в круге)
① Circled Digit One
≈ Almost Equal To
≠ Not Equal To
⅓ Vulgar Fraction One Third
⅔ Vulgar Fraction Two Third
○ white circle
◦ white bullet
▪ Black Small Square
▫ White Small Square

HTML tags https://www.w3schools.com/charsets/ref_utf_arrows.asp  
https://www.w3schools.com/charsets/ref_utf_arrows.asp:
← ← ← LEFTWARDS ARROW - &# 8592; / & larr;
↑ ↑ ↑ UPWARDS ARROW - &# 8593; / & uarr;
→ → → RIGHTWARDS ARROW - &# 8594; / & rarr;
↓ ↓ ↓ DOWNWARDS ARROW - &# 8595; / & darr;
↔ ↔ ↔ LEFT RIGHT ARROW - &# 8596; / & harr;
↕ ↕ UP DOWN ARROW - &# 8597;
↖ ↖ NORTH WEST ARROW - &# 8598;
↗ ↗ NORTH EAST ARROW - &# 8599;
↘ ↘ SOUTH EAST ARROW - &# 8600;
↙ ↙ SOUTH WEST ARROW - &# 8601;


Внедрение видео с YouTube:
<lj-embed id="4"> - порядковый номер id выставляет автоматически сам LiveJournal
<iframe width="560" height="315" src="https://www.youtube.com/embed/XVfOe5mFbAE?wmode=opaque" frameborder="0" allowfullscreen="allowfullscreen"</iframe>
</lj-embed>

Внедрение видео с Facebook:
<object width="400" height="224"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://www.facebook.com/v/!!!!!!!!!!!!!!!" /><embed src="http://www.facebook.com/v/!!!!!!!!!!!!!!!!!!!" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="224"></embed></object>


Выравнивание рисунка относительно текста: align="middle"

Кат LJ: <lj-cut> Текст </lj-cut>


Верхний индекс: ^Текст

Нижний индекс: _Текст

Цитата: <blockquote> Текст </blockquote>

Тег <code> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.

Открывающий знак <: & l t ;

Закрывающий знак >: & g t ;

Открывающие кавычки &# 8220;: & # 8220;
Закрывающие кавычки &# 8221;: & # 8221;

Знак ®

<del>PGD67-JN23K-JGVWV-KTHP4-GXR9G</del>
PGD67-JN23K-JGVWV-KTHP4-GXR9G

Пример:
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:# ff0000;}
a.one:visited {color:# 0000ff;}
a.one:hover {color:# ffcc00;}

a.two:link {color:# ff0000;}
a.two:visited {color:# 0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:# ff0000;}
a.three:visited {color:# 0000ff;}
a.three:hover {background:# 66ff66;}

a.four:link {color:# ff0000;}
a.four:visited {color:# 0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:# ff0000;text-decoration:none;}
a.five:visited {color:# 0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>Mouse over the links and watch them change layout:

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b>
</body>
</html>



HTML5. → HTML Справочник всех тегов онлайн и примеры

Справочник по HTML http://htmlbook.ru/html
HTML tags https://www.w3schools.com/charsets/ref_utf_arrows.asp
HTML School https://zarabotat-na-sajte.ru/uroki-html/teg-img.html
Справочник по HTML http://www.w3schools.com/tags/tag_code.asp
Спецсимволы в HTML http://htmlbook.ru/samhtml/tekst/spetssimvoly
ШРИФТЫ
font-size http://htmlbook.ru/css/font-size
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 http://htmlbook.ru/css/font-weight
overflow: auto | hidden | scroll | visible | inherit http://htmlbook.ru/css/overflow

Названия цветов http://htmlbook.ru/html/value/colorname
Таблица «безопасных» цветов https://www.artlebedev.ru/colors/

Обработка событий onmouseover и onmouseout http://html-plus.in.ua/obrabotka-sobytiy-onmouseover-i-onmouseout/

Скруглённые уголки http://htmlbook.ru/css3-na-primerakh/skruglennye-ugolki
Значения стилевых свойств http://htmlbook.ru/samcss/znacheniya-stilevykh-svoystv
Как добавить иконку сайта в адресную строку браузера? http://htmlbook.ru/faq/kak-dobavit-ikonku-sayta-v-adresnuyu-stroku-brauzera
Как растянуть фон на всю ширину окна? http://htmlbook.ru/faq/kak-rastyanut-fon-na-vsyu-shirinu-okna
Как сделать обтекание картинки текстом? http://htmlbook.ru/faq/kak-sdelat-obtekanie-kartinki-tekstom
Как добавить фоновый рисунок на веб-страницу? http://htmlbook.ru/faq/kak-dobavit-fonovyy-risunok-na-veb-stranitsu
Как разместить элементы списка горизонтально? http://htmlbook.ru/faq/kak-razmestit-elementy-spiska-gorizontalno
Как выровнять фотографию по центру веб-страницы? http://htmlbook.ru/faq/kak-vyrovnyat-fotografiyu-po-tsentru-veb-stranitsy
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши? http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee
background-position http://htmlbook.ru/css/background-position

Обрезка картинок:
http://www.diary.ru/~diary-tips/p190133826.htm?oam#more2
https://artkiev.com/blog/css-image-crop-resize.htm
https://html5book.ru/kak-obrezat-yelement/

Изображения, которое служит в качестве маркера списка: http://htmlbook.ru/css/list-style-image
CSS list-style-image size https://stackoverflow.com/questions/7775594/css-list-style-image-size

Бесплатные иконки 700+ иконок для сайтов на Tilda.cc https://tilda.cc/ru/free-icons/ - Создайте впечатляющий сайт на Tilda для бизнеса и медиа https://tilda.cc/ru/