Поддерживаемый HTML для настройки веб-сайта

Вы можете использовать HTML на портале ArcGIS Enterprise, когда добавляется редактор форматированного текста, например, страницы элемента, описания групп, всплывающие окна карты и настраиваемые приложения.

HTML-теги и атрибуты

Ниже приведена таблица поддерживаемых HTML-тегов и атрибутов, которые вы можете использовать.

Тег	Атрибут
a	href, style
abbr	title
article	style
aside	style
audio	autoplay, controls, loop, muted, preload
b, strong, i, em, u, ul, ol, li, tbody, br, hr
blockquote	style
code	style
dd, dl, dt	style
del	style
details	style, open
div	style, align, aria-label, aria-hidden
figcaption	style
figure	style
font	size, color, style
footer	style
h1, h2, h3, h4, h5, h6	style
header	style
img	src, width, height, border, alt, style
main	style
mark	style
nav	style
p	style
pre	style
section	style
source	media, src, type
span	style, aria-label, aria-hidden
sub	style
summary	style
sup	style
table	width, height, cellpadding, cellspacing, border, style
td, th	height, width, valign, align, colspan, rowspan, nowrap, style
time	style
tr	height, valign, align, style
video	autoplay, controls, height, loop, muted, poster, preload, width

Советы по HTML

Необходимо учитывать следующее:

• Теги HTML, не перечисленные в таблице выше, не поддерживаются и будут отфильтрованы.
• Разрешенными протоколами для href и src являются https, http, tel и mailto.
• Теги закрываются автоматически, если они не закрыты.
• <>&"s извлекаются из разрешенных тегов, если они не извлечены с использованием &lt;&gt;&amp;&quot.
• Ссылки типа UNC не поддерживаются.
• Если используется тег a, целевой URL href всегда открывается в новой вкладке браузера.

Свойства CSS

Таблицы ниже отображают поддерживаемые свойства CSS.

Примечание:

ArcGIS Enterprise поддерживает только встраиваемый CSS. CSS должен быть определен в атрибуте стиля.

Свойства фона

Ниже приведена таблица поддерживаемых свойств фона.

Свойства
background	background-color	background-position
background-attachment	background-image	background-repeat
background-clip	background-origin	background-size

Свойства рамки

Ниже приведена таблица поддерживаемых свойств рамки.

Свойства
border	border-image-repeat	border-right-style
border-bottom	border-image-slice	border-right-width
border-bottom-color	border-image-source	border-spacing
border-bottom-left-radius	border-image-width	border-style
border-bottom-right-radius	border-left	border-top
border-bottom-style	border-left-color	border-top-color
border-bottom-width	border-left-style	border-top-left-radius
border-collapse	border-left-width	border-top-right-radius
border-color	border-radius	border-top-style
border-image	border-right	border-top-width
border-image-outset	border-right-color	border-width

Свойства блока

Ниже приведена таблица поддерживаемых свойств блока.

Свойства
box-decoration-break	box-sizing	box-suppress
box-shadow	box-snap

Свойства перерыва

Ниже приведена таблица поддерживаемых свойств перерыва.

Свойства
break-after	break-before	break-inside

Свойства отображения

Ниже приведена таблица поддерживаемых свойств отображения.

Свойства
display	display-inside	display-list	display-outside

Свойства Flex

Ниже приведена таблица поддерживаемых свойств Flex.

Свойства
flex	flex-direction	flex-grow	flex-wrap
flex-basis	flex-flow	flex-shrink

Свойства шрифта

Ниже приведена таблица поддерживаемых свойств шрифта.

Свойства
font	font-size-adjust	font-variant-caps
font-family	font-stretch	font-variant-east-asian
font-feature-settings	font-style	font-variant-ligatures
font-kerning	font-synthesis	font-variant-numeric
font-language-override	font-variant	font-variant-position
font-size	font-variant-alternates	font-weight

Свойства сетки

Ниже приведена таблица поддерживаемых свойств сетки.

Свойства
grid	grid-column	grid-row-start
grid-area	grid-column-end	grid-template
grid-auto-columns	grid-column-start	grid-template-areas
grid-auto-flow	grid-row	grid-template-columns
grid-auto-rows	grid-row-end	grid-template-rows

Свойства выравнивания

Ниже приведена таблица поддерживаемых свойств выравнивания.

Свойства
justify-content	justify-items	justify-self

Свойства списка

Ниже приведена таблица поддерживаемых свойств списка.

Свойства
list-style	list-style-image	list-style-position	list-style-type

Свойства поля

Ниже приведена таблица поддерживаемых свойств поля.

Свойства
margin	margin-left	margin-top
margin-bottom	margin-right

Свойства отступов

Ниже приведена таблица поддерживаемых свойств отступов.

Свойства
padding	padding-left	padding-top
padding-bottom	padding-right

Свойства текста

Ниже приведена таблица поддерживаемых свойств текста.

Свойства
text-align	text-emphasis-style
text-align-last	text-height
text-combine-upright	text-indent
text-decoration	text-justify
text-decoration-color	text-orientation
text-decoration-line	text-overflow
text-decoration-skip	text-shadow
text-decoration-style	text-space-collapse
text-emphasis	text-transform
text-emphasis-color	text-underline-position
text-emphasis-position	text-wrap

Свойства слов

Ниже приведена таблица поддерживаемых свойств слов.

Свойства
word-break	word-spacing	word-wrap

Прочие свойства

Ниже приведена таблица других поддерживаемых свойств CSS.

Свойства
align-items	gap	max-width
align-self	height	min-height
clear	letter-spacing	min-width
color	lighting-color	overflow
color-interpolation-filters	line-height	width
float	max-height

Устаревший баннер

По умолчанию, организации ArcGIS Enterprise, которые были обновлены до 10.9 с предыдущей версии, содержат устаревшую конфигурацию главной страницы.

Примечание:

Поддержка устаревших настроек домашней страницы будет прекращена в будущих обновлениях. Поэтому рекомендуется существующим организациям перейти на новоую главную страницу как можно скорее.

Устаревшая главная страница включает баннер, расположенный вверху страницы, шириной 960 пикселов и высотой 180 пикселов. Вы можете выбрать для баннера стандартное изображение либо загрузить файл со своего компьютера. Можно также создать индивидуальный проект с использованием обогащенного текста или HTML. Настройте баннер как часть параметров устаревшей главной страницы.

Выбрав опцию Индивидуальный проект, вы увидите текстовый редактор, в котором вы сможете скомпоновать графику и текст по принципу "что видите, то и получите" (WYSIWYG). Удалите существующее содержание баннера и замените его вашим собственным. Для большей гибкости нажмите кнопку Показать исходный HTML в редакторе, чтобы ввести или вставить собственный код HTML.

Если вы просто выбираете для вашего баннера изображение, внутри него отображается ваш логотип. Если вы используете для баннера вашей главной страницы индивидуальный проект, логотип не отображается (если только вы не включили его в ваш проект).

Подсказка:

Если в организации используется только HTTPS, доступ ко всем ссылкам на изображения в проекте должен осуществляться по протоколу HTTPS, иначе изображения в баннере не появятся.

Примеры

Ниже представлены несколько примеров баннеров, созданных с помощью HTML. Каждый пример включает код, который был использован для создания баннера. Можно заменить URL-адреса изображений своими собственными.

Эта главная страница включает баннер, созданный с использованием HTML.

Код ниже включает HTML и CSS, использованные для создания баннера организации Generic Environment Organization.

<div style="width: 960px; font-family: futura, helvetica, arial; 
background: url(https://imagesite/generic_env.png); height: 180px">
<div style="width:680px; margin-left: 220px; margin-top: 60px; float: left;">
<span style="font-size:24px; color:#fdf77d;
 font-weight:bold; text-transform:uppercase; text-shadow: 2px 2px 2px #085a00;">
Generic Environment Organization</span><br/>
<p style="color:#ffffff; font-size:14px;">Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. Donec ullamcorper lorem pulvinar libero ultricies.</p></div> </div>

Пример главной страницы с баннером, созданным с использованием HTML.

Код ниже включает HTML и CSS, использованные для создания баннера Government Home.

<div style="width: 960px; font-family: futura;
 background: url(https://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="https://www.esri.com/industries/federal/index.html/" style="background: #65a9d7;
 background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
 background: -webkit-linear-gradient(top, #3e779d, #65a9d7); 
background: -moz-linear-gradient(top, #3e779d, #65a9d7); 
background: -ms-linear-gradient(top, #3e779d, #65a9d7); 
background: -o-linear-gradient(top, #3e779d, #65a9d7);
border-bottom:#fff 1px solid; border-left: #fff 1px solid; padding-bottom: 7px;
 padding-left: 15px; padding-right: 15px; font-family: helvetica, arial, sans-serif;
 color: white; font-size: 14px; vertical-align: middle; 
border-top: #fff 1px solid; border-right: #fff 1px solid; text-decoration: none;
 padding-top: 7px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
 border-radius: 3px; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0" target="_blank">Government Home</a></div></div>

Пример главной страницы с баннером, созданным с использованием HTML.

Можно использовать баннер большего размера, чем рекомендуемые 960 пикселов в ширину и 180 пикселов в высоту, но имейте в виду, что в таком случае оно может закрыть некоторые области домашней страницы, например, названия ресурсов на главной странице. Чтобы текст выделялся, задайте для нижней части баннера контрастный цвет, по сравнению с темно-синим цветом надписей, который используется по умолчанию, или добавьте эффект проявления.

<div id="banner-html" style="left: 0px; top: 0px; position: absolute;"><div>
<img src="https://downloads.esri.com/Blogs/learn-arcgis/ago-banner/cartography-banner.png?" 
style="-webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; 
border-radius:0 0 10px 10px; margin-top:0; width:960px; height:470px;"></div></div>