Atributos Globais HTML – O que são?

Atributos globais HTML é o tópico de discussão hoje. Em HTML , atributos globais podem ser usados ​​em qualquer elemento. Os atributos globais HTML são propriedades que são transportadas por todos os elementos HTML; no entanto, eles podem não ter impacto em componentes específicos. Em elementos padrão e não padrão, são dadas propriedades globais.

Os elementos não padrão devem permitir esses atributos, mesmo que utilizá-los torne sua página não compatível com HTML5.

Exemplo:
navegadores compatíveis com HTML5, conteúdo oculto identificado como <foo hidden>…conteúdo…</foo>, apesar do fato de que <foo> não é um elemento HTML legítimo.

Índice-

Lista de Atributos Globais HTML

A seguir está a lista dos Atributos Globais:

Atributo Visão geral
chave de acesso Para ativar/focar um elemento, indique uma tecla de atalho.
aula Este atributo atribui um ou mais nomes de classe a um elemento. (refere-se a uma classe de folha de estilo)
conteúdo editável Indica a disponibilidade do conteúdo de um elemento para ser editado.
dados-* Projetado para conter dados personalizados privados para a página ou aplicativo em atributos globais Html .
dir Fornece a direção na qual o texto deve ser exibido em um elemento.
arrastável Determina se um elemento pode ser arrastado.
escondido Este atributo indica que um elemento não é mais relevante ou que ainda não foi considerado.
eu ia Fornece a identificação exclusiva de um elemento em atributos globais Html .
idioma Esta propriedade indica o idioma que exibirá o conteúdo do elemento.
verificação ortográfica Determine se você deve ou não verificar a ortografia e a gramática do elemento.
estilo Fornece um elemento com um estilo CSS embutido.
tabindex Determina a hierarquia tabular de um elemento.
título Fornece detalhes adicionais sobre um elemento.
traduzir Determine se o conteúdo de um elemento precisa ou não ser traduzido.
capitalizar automaticamente Ele coloca em maiúsculas as informações que foram inseridas ou alteradas pelo próprio usuário.
auto-foco Quando uma página é carregada, um elemento pode receber foco usando o atributo autofocus em HTML. Ele carrega o atributo booleano.
menu contextual O menu de contexto para este elemento é especificado pelo id do <menu> que o contém.
enterkeyhint Ele sugere qual rótulo ou ícone exibir ao pressionar as teclas em uma palavra-chave virtual.
modo de entrada O objetivo principal dessa tag é dar aos navegadores uma dica sobre as configurações do teclado virtual a serem usadas ao modificar esse elemento ou seu conteúdo.
é Ele afirma que um elemento interno personalizado registrado tem o mesmo comportamento que o HTML convencional.
id do item É a identificação universalmente reconhecida de um item específico.
itemprop Dá a um item novas propriedades.
itemscope Ele usa tipos de itens para garantir que o HTML de um bloco esteja relacionado a um determinado item.
Tipo de item O vocabulário de URL usado para definir itemprops é descrito.
nonce Uma política de segurança de conteúdo usa um nonce digital para verificar se uma determinada busca pode continuar.
papel É uma lista dos nomes dos componentes do elemento que é dividida por espaços.
slot Ele é utilizado para fornecer a um elemento um ponto em uma árvore de sombra shadow DOM.

Benefícios dos Atributos Globais HTML

Os atributos globais do HTML oferecem inúmeras vantagens, algumas delas são fornecidas abaixo:

  • Código simplificado: o uso de atributos globais pode ajudar os desenvolvedores a criar um código mais simplificado, legível e sustentável.
  • Acessibilidade aprimorada: os atributos globais podem aprimorar os recursos de acessibilidade, como leitores de tela, tornando o conteúdo da Web mais inclusivo para pessoas com deficiências.
  • Maior flexibilidade: os atributos globais são versáteis e podem ser aplicados a qualquer elemento HTML, proporcionando maior flexibilidade no design e estilo de páginas da web.
  • SEO aprimorado: o uso adequado de atributos globais pode melhorar a otimização do mecanismo de pesquisa (SEO), fornecendo informações adicionais sobre o conteúdo da página.
  • Consistência: o uso consistente de atributos globais em um site garante uma experiência de usuário uniforme para os visitantes.

Atributo HTML editável:

Independentemente de o elemento HTML ser inserido ou não, ele é usado para especificar se o conteúdo pode ser alterado pelo usuário. Como resultado, o navegador personaliza seus widgets e permite a edição de HTML.

Existem dois valores para esta variável: Verdadeiro e Falso

true: Isso significa que o conteúdo pode ser editado

false: Isso significa que o conteúdo não pode ser editado

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<p contenteditable="true">This paragraph is contenteditable.</p>
<p contenteditable="false">This paragraph is not contenteditable.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Chave de acesso do atributo HTML:

Uma tecla de acesso é empregada para atribuir um atalho para focar em qualquer elemento HTML, como uma tecla do teclado.

Contém uma lista de caracteres separados por espaços.

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<a href="https://www.mrexamples.com/html/" accesskey="h">HTML Tutorial</a>
<a href="https://www.mrexamples.com/python/" accesskey="c">Python Tutorial</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Dependendo do navegador, há uma maneira diferente de usar o atributo accesskey .

Por exemplo, no Chrome, Safari, etc, ALT + tecla de acesso é pressionada para focar no elemento HTML, enquanto no Firefox, ALT + SHIFT + tecla de acesso é usada.

O uso de ALT + h também focará o texto do hiperlink no Curso Interativo HTML dentro do código HTML acima.

Diretório do atributo HTML:

O atributo dir é usado para especificar a direção do texto em elementos HTML como <div> , <span> , <p> e muitos mais.

Há também alguns valores associados a ele, listados abaixo:

ltr: O atributo ltr é usado para identificar idiomas escritos da esquerda para a direita, como o inglês.

rtl: O atributo rtl é usado para identificar idiomas escritos da direita para a esquerda, como o árabe.

auto: Nesse caso, o aplicativo (navegador) toma a decisão. Para aplicar essa direcionalidade a todo o elemento, ele analisa os personagens dentro do elemento até encontrar um com direcionalidade significativa.

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p dir="ltr">This text will appear left to right on browser.</p>
<p dir="rtl">This text will appear right to left on browser.</p>
<p dir="auto">This text will appear whatever the browser indicates it to be.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Classe de atributo HTML:

O atributo class é um dos atributos globais mais comumente usados, usado para especificar seletores de classe ao usar classes de estilo CSS. Também é usado ao lidar com eventos JavaScript.

Para ilustrar como o atributo class é usado em tags HTML, aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<div class="class1">This div has a class named class1.</div>
<p class="class2">This paragraph has class named class2.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Dados do atributo HTML-*:

Com base nesse atributo, você pode criar um atributo personalizado chamado atributos de dados personalizados, que podem ser utilizados para descrever quaisquer dados úteis em tags HTML .

Para um melhor entendimento, vejamos o seguinte exemplo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<p>Choose a Car:
<select>
<option data-vehicle-type="SUV" value="GLE350">Mercedes GLE 350</option>
<option data-vehicle-type="Coupe" value="E450">Mercedes E 450</option>
<option data-vehicle-type="AMG" value="GT53">Mercedes GT 53</option>
</select>
</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo HTML tabindex:

Se a navegação sequencial do teclado for necessária, ela identifica em qual posição um elemento deve tomar parte na obtenção do foco de entrada.

Esses valores estão contidos nele:

negativo: Isso nos diz que o elemento pode ser focado, mas inacessível por meio da navegação sequencial do teclado em atributos globais Html .

0: Nesse valor, os elementos focalizáveis ​​também podem ser acessados ​​por meio da navegação sequencial do teclado.

positivo: implica que o elemento deve ser focalizável e alcançável usando a navegação sequencial do teclado.

Na mesma sequência em que os elementos são focados está o valor crescente do tabindex .

Considere o seguinte exemplo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<div tabindex="1">Mr Examples</div><br>
<div tabindex="-1">Tesla</div><br>
<div tabindex="0">Walmart</div>
<script>
document.getElementsByTagName('div')[0].focus();
</script>
<p tabindex="4"><b>Advice:</b> Use your keyboard's "Tab" button to navigate the elements.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo HTML arrastável:

O atributo arrastável determina se o elemento pode ser arrastado ou não quando se trata de atributos globais Html .

Existem dois valores para esta variável: Verdadeiro e Falso

true: Isso implica que os elementos podem ser arrastados.

false: Isso implica que os elementos não podem ser arrastados.

Aqui está o exemplo detalhado do arrastável em que uma imagem pode ser arrastada para dentro da caixa:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html>
<head>
<style>
#firstDiv{
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
margin: 10px 0;
}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="firstDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag-image-1" src="https://mrexamples.com/wp-content/uploads/html_images/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Título do atributo HTML:

Além disso, mais detalhes sobre o elemento HTML a que ele se refere podem ser encontrados no texto deste atributo.

Passar o mouse sobre qualquer elemento HTML com o atributo title exibirá o texto especificado no atributo title .

Tomando o seguinte exemplo:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<h2 title="It is employed to assign a shortcut to focus on any HTML element.">Accesskey</h2>
<p>Using ALT + h will also focus the hyperlink text in the HTML Interactive Course within the above HTML code.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tradução do atributo HTML:

O valor do atributo de um elemento e seu valor de texto podem ser traduzidos ou não usando este atributo

Este atributo tem dois valores:

Uma string vazia e sim implicam que um elemento será traduzido.

Não significa que o elemento não será traduzido.

Aqui está um exemplo básico do atributo translate :

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<p translate="no">I don't want this translated!</p>
<p>You can translate this into any language you want.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo HTML auto capitalizar:

Com este atributo, você pode controlar se o texto do usuário será capitalizado automaticamente ou que tipo de capitalização será implementado.

Os seguintes valores predefinidos estão disponíveis para configurar sua funcionalidade:

desligado ou nenhum: Isso demonstra que não houve capitalização.

caracteres: Especifica que, neste caso, todos os caracteres devem ser maiúsculos por padrão.

palavra: Isso implica que a primeira letra de cada palavra é maiúscula e todas as outras letras são minúsculas.

em ou frases: Isso demonstra que a primeira letra de uma frase estará em maiúscula e todas as outras letras em minúsculas.

Muitos navegadores atualmente não aceitam esse atributo.

Aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<input type="text" autocapitalize="words" name="subject" value="John Smith">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Verificação ortográfica do atributo HTML:

Uma verificação ortográfica pode ser realizada em um elemento usando este atributo como se trata de atributos globais Html .

Abaixo seus valores:

true: especifica que os erros de ortografia devem ser verificados nos elementos.

false: especifica que os erros de ortografia não devem ser verificados nos elementos.

Aqui está o exemplo básico do atributo spellcheck :

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<p contenteditable spellcheck="true">Thie spellung will be checkd fur thsi exampull when you try to edit it.</p>
<p contenteditable spellcheck="false">Thie spellung will be nto checkd fur thsi exampull when you try to edit it.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

ID do atributo HTML:

ID s são identificadores exclusivos atribuídos a documentos HTML inteiros com o atributo id .

Serve principalmente para identificar um elemento ao vincular, criar scripts ou estilizá-lo. Assim como o atributo global de classe , este é um dos atributos globais HTML mais amplamente usados .

Aqui está o exemplo básico do atributo id:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>
Example of Id attribute with CSS
</title>
<style>
#Companies {
padding: 40px;
background-color: rgb(183, 183, 183);
color: rgb(71, 18, 18);
text-align: center;
}
</style>
</head>
<body>
<p> Use CSS to style an element with the id: </p>
<h1 id="Companies"> Companies</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo HTML oculto:

Quando o atributo oculto é atribuído a um elemento, significa que o navegador não deve exibi-lo.

Elementos HTML como form , tokens CSRF ou outros elementos HTML importantes que não devem ser visíveis aos usuários podem ser ocultados com este atributo.

Aqui está o exemplo básico do atributo oculto:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<p hidden>This will be hidden.</p>
<p dir="rtl">This text will appear right to left on browser.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Idioma do atributo HTML:

Lang é definido para elementos HTML editáveis ​​e não editáveis ​​usando este atributo .

O valor de um idioma é composto de dois elementos, primeiro a definição do idioma e, em seguida, a definição do sub-idioma.

Por exemplo, en-GB é uma abreviação de inglês britânico e en-US é uma abreviação de inglês americano.

Aqui está uma lista completa de referência de código Lang .

Aqui está o exemplo básico do atributo lang :

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p lang="en-GB">This is British English.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilo do atributo HTML:

Usando esse atributo, você pode especificar as regras de estilo para qualquer elemento usando código CSS implícito.

Os atributos de estilo podem ser especificados em um elemento HTML, mas é recomendável fazê-lo em um arquivo CSS separado.

Os atributos de estilo e todas as tags de estilos permitem que os usuários especifiquem parâmetros de estilo CSS em elementos e documentos HTML separadamente.

Considere o seguinte exemplo:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<h1 style="color:gray;">This heading is in gray color.</h1>
<p style="color:maroon;">This paragraph will be displayed in maroon color.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo HTML itemprop:

O atributo itemprop permite adicionar propriedades a um elemento. Todo elemento HTML possui um atributo itemprop ; onde um itemprop é um par nome-valor.

Os documentos HTML o utilizam para estruturar informações e especificar metainformações adicionais.

Aqui está um exemplo do itemprop :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<div itemscope itemtype="http://mrexamples.com/">
<h1 itemprop="name">Mr Examples</h1>
<span>Course:
<span itemprop="section">Python.</span>
</span>
<span itemprop="sex">Male</span>
<span itemprop="rollno">CS-489-41157</span>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Itemscope do atributo HTML:

Os atributos globais do itemscope Html definem quais metadados são anexados a um item.

Um novo item é criado quando o atributo itemscope é definido para um elemento, o que resulta em pares nome-valor.

Abaixo está o exemplo de itemscope com itemtype :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<div itemscope itemtype="http://mrexamples.com/">
<h1 itemprop="name">Mr Examples</h1>
<span>Course:
<span itemprop="section">Python.</span>
</span>
<span itemprop="sex">Male</span>
<span itemprop="rollno">CS-489-41157</span>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de item do atributo HTML:

Nos atributos globais Html , as estruturas de dados usam o atributo itemtype para identificar a URL do vocabulário que define as propriedades do item.

Em outras palavras, itemscope determina onde o vocabulário definido por itemtype estará ativo dentro da estrutura de dados.

Aqui está um exemplo do tipo de item:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<div itemscope itemtype="http://mrexample.com">
<span itemprop="lang" itemtype="http://mrexample.com/python">
Mr Examples is a website for people to learn.
</span><br><br>
Course:
<span itemprop="course">
Python and HTML
</span>
</div></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Foco automático do atributo HTML:

Em HTML, o atributo autofocus determina se o elemento deve ser focado quando a página é carregada. O atributo é um booleano .

Aqui está um exemplo do atributo autofocus :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<form action>
<select name="company" autofocus>
<option value="">Select a Company</option>
<option value="walmart"> Walmart </option>
<option value="cvs"> CVS Health </option>
<option value="alphabet"> Alphabet </option>
</select> <br>
<button type="submit">Submit</button>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Menu de contexto do atributo HTML:

Um atributo global contextmenu especifica o id de um menu para usar como o menu contextual.

Uma ocorrência de um menu de contexto ocorre quando o usuário interage com um programa, como clicar com o botão direito do mouse.

Abaixo está um exemplo do menu de contexto :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<style>
.menuclass {
background: maroon;
padding: 10px;
}
</style>
</head>
<body>
<div contextmenu="mymenu" class="menuclass">
<p>The context menu will appear when you right-click inside this box!
</p><menu type="context" id="mymenu">
<menuitem label="Mr Examples" onclick=""></menuitem>
<menuitem label="Google" onclick=""></menuitem>
<menuitem label="Walmark" onclick=""></menuitem>
<menuitem label="Etsy" onclick=""></menuitem>
</menu>
</div>
<p>You can only use this example with Firefox at the moment!</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo HTML enterkeyhint:

Em teclados de computador, o atributo enterkeyhint indica qual rótulo de ação exibir ao pressionar a tecla Enter.

Usando esses atributos globais Html , os autores podem modificar como a tecla enter é apresentada para torná-la mais amigável.

Enterkeyhint tem os seguintes valores:

done: Fechará quando não houver mais entrada a ser feita.

enter: Uma nova linha deve ser usada quando houver mais para escrever.

go: Depois de terminar de escrever o formulário, podemos passar para o próximo destino.

search: Será útil quando tivermos que procurar alguma coisa depois de digitar.

enviar: As mensagens são enviadas usando-o.

next: Leva o usuário para o próximo campo onde o texto pode ser inserido.

anterior: O usuário será redirecionado para o campo de texto anterior.

Aqui está um exemplo que descreve alguns dos atributos enterkeyhint :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<form>
<input placeholder="Next will replace Enter" enterkeyhint="next">
<input placeholder="Clicking the Enter button will change the state to previous" enterkeyhint="previous">
<input placeholder="Go will replace Enter" enterkeyhint="go">
<input placeholder="Send button will replace Enter button" enterkeyhint="send">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Modo de entrada do atributo HTML:

Indica o tipo de configuração do teclado virtual que se utiliza para editar o conteúdo de um elemento.

A tag é usada quando a entrada é editável pelo conteúdo e é mais comumente usada com a tag de entrada.

Aqui está um exemplo básico do atributo inputmode :

Example: 

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<h3>HTML inputmode Attribute</h3>
Name : <input type="text" id="text" inputmode="text"><br>
Phone No. : <input type="tel" id="phone" inputmode="tel"><br>
Email : <input type="email" id="email" inputmode="email"><br>
Age : <input type="number" id="age" inputmode="numeric"><br>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo HTML é:

Ele especifica o comportamento do elemento padrão da mesma forma que um elemento Javascript se comportaria se tivesse sido registrado como um elemento interno personalizado.

Itemid do atributo HTML:

Os itens podem ser identificados usando este atributo, pois é um identificador único e global.

Aqui está um exemplo do itemid :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<dl itemscope="" itemtype="https://www.mrexamples.com/python" itemid="urn:crn-01-2023">
<dt>Name </dt>
<dd itemprop="title">Python</dd>
<dt>Instructor </dt>
<dd itemprop="author">Mr example</dd>
<dt>Start date</dt>
</dl>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo HTML nonce:

A política de segurança de conteúdo usa o atributo global nonce para determinar se uma determinada busca será ou não permitida em um elemento específico, dependendo de um nonce criptográfico (“número usado uma vez”).

Vamos dar uma olhada no exemplo:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
// Trying to remove some inline code, but I'm having trouble
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Espaço de atributo HTML:

O slot de um elemento em uma árvore de sombra é determinado por este atributo.

Para vincular um elemento com um atributo de slot ao slot, adicione um elemento com um atributo de slot cujo atributo de nome corresponda ao valor do atributo de slot.

Aqui está um exemplo básico do atributo slot:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<body><template>
<h1><slot name="heading"></slot></h1>
<dl>
<dt><slot name="t-1"></slot></dt>
<dd><slot name="d-1"></slot></dd>
<dt><slot name="t-2"></slot></dt>
<dd><slot name="d-2"></slot></dd>
<dt><slot name="t-3"></slot></dt>
<dd><slot name="d-3"></slot></dd>
</dl>
</template>
<div>
<span slot="heading">Programming Languages</span>
<span slot="t-1">Javascript</span>
<span slot="d-1">JavaScript is a high-level programming language that is one of the core technologies of the World Wide Web.</span>
<span slot="t-2">Python</span>
<span slot="d-2">Python is one of the most popular programming languages today and is easy for beginners to learn because of its readability.</span>
<span slot="t-3">Go</span>
<span slot="d-3">Go was developed by Google in 2007 for APIs and web applications. Go has recently become one of the fastest-growing programming languages due to its simplicity, as well as its ability to handle multicore and networked systems and massive codebases.</span>
</div>
<script>
var dlTemplate = document.querySelector('template').content;
var divs = document.querySelectorAll('div');
divs.forEach(function(div){
div.attachShadow({ mode: 'open' }).appendChild(
dlTemplate.cloneNode(true))
});
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Parte do atributo HTML:

Os nomes das peças são listados no atributo global da peça, separados por espaços.

É possível selecionar e estilizar elementos particulares em uma árvore de sombra usando nomes de partes usando o pseudo-elemento ::part.

Aqui está um exemplo do atributo part:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
color: maroon;
}
tabbed-custom-element::part(tab) {
color: maroon;
border-bottom: solid 1px;
width: 300px;
}
</style>
</head>
<body>
<h1>Mr Examples</h1>
<strong>Part Attribute</strong>
<br><br>
<template id="tabbed-custom-element">
<div part="tab">Python</div>
<div part="tab active">MongoDB</div>
<div part="tab">Sql</div>
</template>
<tabbed-custom-element></tabbed-custom-element>
<script>
let template = document
.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
template.id, class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content);
}
});
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Se este artigo provou ser vantajoso o suficiente para aumentar suas habilidades educacionais, compartilhe-o com seus amigos para espalhar essas informações valiosas com eles também clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.