Aprendizagem básica de pré-requisito para o desenvolvimento de APP híbrido-HTML1

1) HTML (HyperText Markup Language) é uma linguagem de marcação de hipertexto, uma linguagem de texto simples e uma linguagem de marcação usada para projetar páginas da web.

2) Documentos escritos neste idioma devem ter como sufixo .html ou .htm.

3) Interpretado e executado pelo navegador.

4) HTML é uma linguagem altamente extensível, você pode aninhar segmentos de programa escritos em linguagens de script, como: VBScript, JavaScript. A incorporação de código JavaScript pode obter efeitos dinâmicos, e você também pode usar CSS para definir estilos.

1.2 Navegador da web

1) Funções principais:

① Envie a solicitação em nome do visitante.

②Como interpretador de HTML e executor de programa de script embutido.

③Exibir documentos HTML de forma gráfica.

2) Principais produtos de navegador da web

IE 、 Firefox 、 Chrome 、 Opera 、 Safari

2. Sintaxe HTML básica

2.1 Sintaxe de marcação

1) Os símbolos HTML usados para descrever funções são chamados de "marcas", como <p>, <h1>, etc.

2) As marcas devem ser colocadas entre colchetes angulares quando usadas, e algumas marcas também devem aparecer aos pares.

2.2 Marcação de tipo fechado: marcação dupla

1) Sintaxe:

<tag> conteúdo </tag>

<tag attribute 1 = "value" attribute 2 = "value"> conteúdo </ tag>

2) A declaração do atributo deve estar na tag de abertura.

3) Uma tag pode ter mais de um atributo e vários atributos são separados por espaços.

u Questões que requerem atenção:

v Os marcadores de tipos fechados devem aparecer em pares.

v Se uma marca que deveria ser fechada não for fechada, ocorrerá um erro inesperado.

2.3 Marca de tipo não fechada: marca única ou marca vazia

1) Sintaxe:

2) Nenhuma tag final é necessária, o conteúdo não pode ser incluído e os atributos podem ser definidos.

例如： hello word <br> hello word

olá palavra <br /> olá palavra

u Questões que requerem atenção:

v <br /> é o padrão atual e <br> é a versão anterior.

v Para marca única, recomenda-se escrever <br /> em vez de <br>.

2.4 Elementos e atributos

1) Elemento: A parte delimitada por cada par de colchetes angulares, como a parte delimitada por <body> </body>, é chamada de elemento do corpo.

2) Atributos: usados para decorar elementos, cada atributo tem um valor, e o atributo é colocado na tag de abertura.

2.5 Notas

Adicionar comentários apropriados ao código é uma boa prática de codificação.

1) O comentário só fica visível durante a edição do documento e não será exibido quando o navegador exibir a página.

2) Sintaxe para adicionar comentários:

<! - O conteúdo do texto do comentário ->

u Questões que requerem atenção:

v Qualquer conteúdo entre "<! -" e "->" não será exibido no navegador.

v Os comentários não podem ser aninhados em outros comentários.

2.6 Estrutura padrão de documentos HTML

1) Estrutura:

Versão informação

</html>

2) Por exemplo:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html>

</html>

Informações da versão 2.7

1) Use DOCTYPE para declarar a versão e estilo especificados no início do documento, para que o navegador seja claro sobre a versão, tipo e estilo do documento. As informações de versão são divididas em três tipos: tipo estrito, tipo tradicional (tipo de transição) e tipo de quadro.

2） DTD estrito ：

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3) DTD de transição: (comumente usado)

<! DOCTYPE html>

4) Frameset DTD: (não é mais comumente usado)

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Frameset // EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

u Nota: O tipo tradicional não requer um namespace e o tipo estrito requer um namespace.

2.8 elemento <head>

1) O elemento <head> é usado para definir informações globais para a página

① Um contêiner para todos os outros elementos principais. ②Siga a tag inicial <html>.

2) Defina as informações relacionadas a todo o documento, muitas vezes incluindo os seguintes subelementos:

① <title>: Título.

② <meta>: Elemento de metadados, que define o formato de codificação ou a frequência de atualização da página.

③ <script>: script JavaScript (ou introduza Ajax, script jQuery, etc.).

④ <style>: Defina a folha de estilo interna.

⑤ <link>: Introduzir outros recursos (como folhas de estilo externas) para a página atual.

2.9 elemento <body>

O corpo principal do documento, que contém todo o conteúdo a ser exibido.

2.10 Elemento de cabeçalho: <title>

O elemento de título <title> </titile> é usado para definir um título para o documento.

1) O conteúdo do elemento de título aparece na parte superior do navegador.

2) Sem atributos.

3) Deve aparecer no elemento <head>.

4) Um documento pode ter apenas um elemento de título.

Por exemplo: <head>

<title> Primeira página </title>

</head>

2.11 Elemento de cabeçalho: <meta>

O elemento de metadados <meta /> é usado para definir as informações básicas da página da web.

1) É uma tag vazia.

2) Os atributos comuns são: conteúdo, http-equiv

Por exemplo: <head>

<title> Primeira página </title>

<! - O conteúdo do documento é: html em formato de texto e o conjunto de caracteres adota utf-8 ->

</head>

2.12 Caso: Crie um documento HTML com uma estrutura padrão e crie um elemento principal.

<! - Informações da versão ->

<! DOCTYPE html>

<! - elemento html, representando todo o documento ->

<html>

<! - Elemento de cabeçalho: descreve as informações relevantes de todo o documento ->

<head>

<title> Primeira página </title>

</head>

<! - Corpo do documento: exibição ->

<body>

</body>

</html>

u Nota: Se você não quiser aparecer truncado, o código físico durante o armazenamento deve ser o mesmo que o código quando visualizado; se estiver truncado, por favor, olhe o código ao salvar e especifique o código para visualização.

3. Marca de texto

3.1 A função da marca de texto

1) O texto é o ingrediente básico de uma página da web.

2) O texto escrito diretamente será exibido no estilo padrão do navegador.

3) O texto contido na marca será exibido como o estilo da marca: caracteres especiais, comentários, elementos de título, elementos de parágrafo, elementos de quebra de linha e elementos de partição.

3.2 Texto e caracteres especiais

1) Dobra de espaço: vários espaços ou guias são compactados em um único espaço, ou seja, apenas um espaço é exibido.

2) Caracteres especiais (como espaços) podem ser caracteres de escape, que também são chamados de entidades de caractere.

3.3 Elemento de título <hn>

1) O elemento de título permite que o texto seja exibido de maneira atraente e é frequentemente usado no título de um artigo.

2) Sintaxe básica: <h #> …… </ h #>, #: pode ser 1, 2, 3, 4, 5, 6

De <h1> a <h6>, a saber, título 1 a título 6

u Nota: <h1> é o maior e <h6> é o menor.

3.4 Elemento de parágrafo <p>

1) O elemento <p> fornece uma maneira de estruturar o texto.

2) O texto no elemento <p> será exibido em um parágrafo separado:

① Está separado do texto antes e depois (ou seja, o conteúdo em p estará em sua própria linha).

②Adicione um espaço em branco vertical extra como espaço de parágrafo (em comparação com <br />, o espaço é maior).

Atributos comuns: align (os valores disponíveis são: left, right, center)

例如： <p> O primeiro parágrafo. </p>

<p align = "right"> O primeiro parágrafo. </p>

3.5 Elemento de quebra de linha <br>

Use o elemento <br> para criar uma quebra de linha manual em qualquer lugar, este elemento é uma tag vazia, a sintaxe é: <br />. É equivalente a um retorno de carro, com um pequeno intervalo.

3.6 Particionar elementos <span> e <div>

1) Elementos de partição são usados para agrupar elementos e geralmente são usados no layout de página. Isso é para fazer algumas configurações unificadas para certos elementos.

2) <span> Texto </span>: Não afeta o layout e é frequentemente usado para alguns elementos na mesma linha.

3) <div> Texto </div>: ocupa apenas uma linha, geralmente usado no caso de várias linhas.

3.7 Bloco e elementos inline

1) Elementos de nível de bloco: Por padrão, os elementos de nível de bloco ocuparão uma linha por conta própria, ou seja, eles serão quebrados automaticamente antes e depois, como: <div>, <p>, <hn>, <li >

2) Elementos in-line: podem estar na mesma linha que outros elementos, ou seja, não serão quebrados, como: <span>, <img>, <a>

3.8 Caso: use a marcação de texto para adicionar conteúdo à página

<! DOCTYPE html>

<html>

<head>

<title> Um documento HTML </title>

</head>

<body>

<h1 align = "center"> Noções básicas da linguagem Java <span style = "color: red;">

<h2> 1 Calculadora de imposto de renda pessoal </h2>

<h3> 1.1 Perguntas </h3>

<p> Calcule a tributação pessoal </p>

<h2> 1.2 Plano </h2>

<p> Use a instrução if para completar o programa </p>

<h2> 1.3 Implementação </h2>

<p> Use o Bloco de notas, o código é o seguinte: </p>

<p> classe pública IncomeTax <br />

{<br /> <br /> <br />}

</p>

</body>

</html>

4. Imagem e conexão

4.1 Elemento de imagem <img>

1) Use o elemento <img> para adicionar uma imagem à página. Este elemento é uma tag vazia e a sintaxe é <img />.

2) Atributos exigidos: src

3) Atributos comuns: largura, altura

4) Sintaxe: <img src = "o caminho da imagem" width = "wide" heigth = "high" />

例如： <img width = "100" src = "images / cat.jpg" />

u Questões que requerem atenção:

Não é recomendado definir largura e altura, porque você não sabe a proporção da imagem original, todas as configurações serão deformadas, defina apenas uma, o sistema irá automaticamente aumentar o zoom na proporção.

4.2 Elemento de link <a>

1) Use o elemento <a> para criar um hiperlink: clique para ir para outros recursos (geralmente vá para a página).

2) Sintaxe: <a href="" target=""> conteúdo clicado, texto ou imagem </a>

① atributo href: URL do link

Atributo ②target: target, os valores possíveis são: _self: valor padrão, substitui a página atual

_blank: Abra uma nova página em branco, exiba a página

4.3 URL

1) URL (Uniform Resource Locator): Uniform Resource Locator, usado para identificar qualquer recurso na rede. Tais como: texto, imagens, arquivos de áudio e vídeo, parágrafos ou outro hipertexto.

2) A composição do URL completo: protocolo, nome da máquina, nome do caminho e nome do arquivo.

3) O nome do caminho na URL significa: caminho relativo e caminho absoluto.

4.4 Âncora

1) Uma âncora é uma marca em uma linha do documento, usada para vincular a uma linha do documento. Isso é para perceber o salto entre as diferentes posições da página atual.

2) Como usar pontos de ancoragem:

Etapa 1: use a para definir um ponto de ancoragem no local de destino, <a name="link1"> </a>

Etapa 2: use a conexão a para vincular ao ponto de ancoragem (adicione # na frente do nome do ponto de ancoragem), href aponta para link1, <a href="#link1"> </a>

u Questões que requerem atenção:

v # representa que o seguinte não é uma página, mas um ponto de ancoragem.

v Saltar entre diferentes posições na página só é eficaz quando há uma barra de rolagem!

3) Vá diretamente para o topo da página

①Na versão anterior, você deve primeiro definir o ponto de ancoragem e depois definir o link.

② Como é muito usado, está simplificado agora, basta escrever um #, não há necessidade de definir o ponto de ancoragem primeiro:

<a href="#"> teste </a>

4.5 Caso: Usando imagens e tags de link

<! DOCTYPE html>

<html>

<head>

<title> Um documento HTML </title>

</head>

<body>

<h1 align = "center"> Noções básicas da linguagem Java <span style = "color: red;">

<h2> 1 Calculadora de imposto de renda pessoal </h2>

<h3> 1.1 Perguntas </h3>

<p> Calcule a tributação pessoal </p>

</a>

</div>

<h2> 1.2 Plano </h2>

<p> Use a instrução if para completar o programa </p>

</a>

</div>

<h2> 1.3 Implementação </h2>

<p> Use o Bloco de notas, o código é o seguinte: </p>

<p> classe pública IncomeTax <br />

{<br /> <br /> <br />}

</p>

</body>

</html>