Skip To Content

用于配置网站的受支持 HTML

当项目页面、群组描述、地图弹出窗口以及可配置应用程序中包含富文本编辑器时,可在 ArcGIS Enterprise 门户中使用 HTML。

HTML 标签和属性

下表列出了您可使用的受支持 HTML 标签和属性。

标记属性

a

hrefstyle

abbr

title

article

style

aside

style

audio

autoplaycontrolsloopmutedpreload

bstrongiemuulollitbodybrhr

blockquote

style

code

style

dddldt

style

del

style

details

styleopen

div

stylealignaria-labelaria-hidden

figcaption

style

figure

style

font

sizecolorstyle

footer

style

h1h2h3h4h5h6

style

header

style

img

srcwidthheightborderaltstyle

main

style

mark

style

nav

style

p

style

pre

style

section

style

source

mediasrctype

span

stylearia-labelaria-hidden

sub

style

summary

style

sup

style

table

widthheightcellpaddingcellspacingborderstyle

tdth

heightwidthvalignaligncolspanrowspannowrapstyle

time

style

tr

heightvalignalignstyle

video

autoplaycontrolsheightloopmutedposterpreloadwidth

HTML 注意事项

请记住以下几点:

  • 不支持上表中未列出的 HTML 标签,并且会将其滤出。
  • hrefsrc 允许的协议包括 httpshttptelmailto
  • 未关闭的标签将自动关闭。
  • 如果未使用 &lt;&gt;&amp;&quot<>&"s 进行转义,则其将在合法标签外部进行转义。
  • 不支持 UNC 链接。
  • 当使用 a 标签时,href 目标 URL 始终在新的浏览器选项卡中打开。

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

旧版通栏

默认情况下,从更低版本升级到 10.9 的 ArcGIS Enterprise 组织具有旧版本主页配置。

注:

未来升级将不再提供对旧版本主页设置的支持。 因此,建议现有组织尽快过渡至新版主页

旧版主页在页面顶部含有一个宽 960 像素、高 180 像素的通栏。 您可以通过选择预定义的图像或从桌面上传文件为通栏区域选择图像,也可以使用富文本或 HTML 创建自定义设计。 将通栏作为旧版主页设置的一部分进行配置。

如果选择自定义设计选项,则将显示一个富文本编辑器,在其中可以加入图片和“所见即所得式”(WYSIWYG) 格式的文本。 删除现有通栏内容并替换为自己的通栏内容。 要获得更高的灵活性,请单击编辑器中的查看 HTML 源按钮,这样即可键入或粘贴您自己的 HTML 代码。

如果仅为通栏选择一个图像,则将在此通栏图像中显示徽标。 如果使用主页通栏的自定义设计,则不会显示徽标(除非将其包括在设计中)。

提示:

如果组织已设置为仅限 HTTPS,则为了在通栏上显示图像,必须通过 HTTPS 访问设计中的所有图像参考。

示例

以下为使用 HTML 创建通栏的示例。 每个示例均包含了创建通栏时使用的代码。 您可以使用自己的 URL 替换图像 URL。

使用 HTML 创建的通栏
此主页示例包括一个使用 HTML 创建的通栏。

下列代码包含了用于创建 Generic Environment Organization 通栏的 HTML 和 CSS。

<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 创建的通栏。

下列代码包含用于创建 Government Home 通栏的 HTML 和 CSS。

<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 创建的通栏的主页
此主页示例包含使用 HTML 创建的通栏。

您可以使用通栏区域大于 960 像素(宽)x 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>