O primeiro dia de aprendizado inicial --- 02

01

Hoje, aprendi principalmente alguns conhecimentos básicos de computador, endereço de URL, composição de sites e um pouco de gramática básica de html. Preste atenção especial ao aprendizado da gramática básica.

rede(*)

Site: várias páginas da web são combinadas para formar um site.

World Wide Web: Uma coleção de incontáveis ​​sites e páginas da web. world wide web, Também abreviado como 3wou wwwou web.

Qual é o front end (*)

O front-end e o back-end são como a relação entre uma TV e uma torre de TV. A torre de TV envia o sinal, a TV recebe o sinal e amplifica o sinal para mostrar o que há nele.

O back end enviará alguns dados e o front end dos dados enviados precisa ser exibido.

[Falha na transferência da imagem do link externo, o site de origem pode ter um mecanismo anti-leeching, é recomendado salvar a imagem e carregá-la diretamente

A importância do front end (*)

Combinado com o pano de fundo da era moderna, o front-end tem as seguintes funções:

• Perceba o design das páginas do site combinado com a estética das pessoas modernas (páginas dos anos 90, 2000 e 10).

  • Interface do site de 1989 (a interface da web original)

    

  • Interface do site em 2000:

    

  • Interface do site em 2010

    

• Combine o front-end do site no ambiente de big data.

  

  Os sites estão ficando cada vez maiores e os usuários cada vez mais. É necessário garantir a velocidade de acesso anterior sob uma grande quantidade de acesso e grande volume de dados.

Nome de domínio e endereço de URL (***)

Em que nossa rede depende para se acessar ( IP地址), mas o endereço IP não é fácil de lembrar, então há um nome de domínio e DNS

192.168.13.61 A

10.201.203.11 B

• nome do domínio

  • Nome de domínio (inglês: nome de domínio), abreviado como nome de domínio, nome de domínio, é o nome de um computador ou grupo de computadores na Internet composto por uma série de nomes separados por pontos, usados ​​para identificar a localização eletrônica do computador durante os dados transmissão (às vezes também se refere à localização geográfica).

    www.baidu.com

    O nome de domínio completo consiste em três partes:

    • Nome de domínio de nível superior: (nome de domínio de primeiro nível)

      • com, organização comercial
      • cn, China
      • rede, organização de rede
      • org, organização sem fins lucrativos
      • edu, educação
      • gov, agência nacional
      • mil, organização militar
      • tecnologia, aprenda

      https://wanwang.aliyun.com/domain/mobi/?spm=5176.76129.1001.14.2f0e554aTnXhJi

    • domínio secundário

      Nós mesmos compramos.

    • Nome da CPU

      www.baidu.com, Existe uma organização comercial chamada baidu. Visitando é a hospedagem de www no site da baidu, uma organização comercial.

  • O Sistema de Nomes de Domínio (DNS, um banco de dados distribuído que mapeia nomes de domínio e endereços IP entre si) é um serviço central da Internet. Ele serve como um banco de dados distribuído que pode mapear nomes de domínio e endereços IP entre si, permitindo que as pessoas possam acessar a Internet de forma mais conveniente, sem ter que lembrar o número de endereços IP que podem ser lidos diretamente pela máquina.

    www.baidu.com é um nome de domínio que corresponde ao endereço IP 14.215.177.38. DNS é como uma lista telefônica. Ele nos permite inserir diretamente o nome www.baidu.com em vez do endereço IP 14.215.177.38. Depois de inserirmos diretamente o nome de domínio do site, o DNS converterá o nome em um endereço IP que a máquina possa reconhecer.

• URL

  www.baidu.comChamado de endereço URL (Uniform Resource Locator), é utilizado para indicar o endereço específico do recurso a ser solicitado.

  http://www.ceshi.com:80/test/test.html?par1=var1&par2=var2#p

  • http: Nome do protocolo, que informa ao servidor qual convenção deve ser usada para se comunicar com o cliente. httpÉ opcional e httpserá adicionado automaticamente após inserir um endereço .

    http://localhost/

  • www.ceshi.com,endereço do servidor. Qual endereço deve ser especificamente solicitado.

  • :80,porta. Representa a janela da qual os dados devem ser inseridos. Opcional.

  • /test/test.html, Caminho do arquivo, você usa o caminho do arquivo para acessar o recurso especificado no diretório especificado no servidor, pode haver vários caminhos de arquivo.

    C:\xampp\htdocsPassamos a ser chamados de diretório raiz do site.

  • par1=var1&par2=var2, A string de consulta. Usado para passar valores para a linguagem de script do lado do servidor.

  • #p, O identificador do fragmento.

  https://www.baidu.com/

  https://www.baidu.com/s?
  ie=utf8&
  f=8&rsv_bp=1&
  rsv_idx=1&
  tn=baidu&
  wd=oaliyun&
  fenlei=256&
  oq=%25E9%2598%25BF%25E9%2587%258C%25E4%25BA%2591&
  rsv_pq=b8b7b03d00093b6a&
  rsv_t=7a80mEN03j6OQBWI75zBB6g%2FZwScCBnONj%2BDPdcJsw1ZaAfLpUwwc3cCLvA&
  rqlang=cn&rsv_enter=1&
  rsv_dl=tb&
  rsv_btype=t&
  inputT=2367&
  rsv_sug3=16&
  rsv_sug1=14&
  rsv_sug7=101&
  rsv_sug2=0&
  rsv_sug4=2367

  ​

Composição do software de rede (**)

A web também pertence ao software de rede.

• Qual é o cliente e qual é o servidor.

  • Cliente: a parte que inicia a solicitação e recebe a mensagem da porta do servidor. Na web, refere-se ao nosso navegador.
  • Servidor: receba a solicitação do cliente e dê uma resposta.

• Composição do site

  • Cliente-navegador: O navegador é o cliente do servidor www. Ele envia várias solicitações ao servidor www, interpreta as respostas retornadas pelo servidor e permite que os usuários interajam com esses conteúdos.

  • HTML (linguagem de marcação de hipertexto)

    A essência de uma página da web é HTML, que marca todas as partes da página da web para interpretação pelo navegador.

  • CSS (folha de estilo em cascata)

    HTML é usado para marcação, mas o conteúdo de cada parte da marcação é confuso e pobre em estética. Portanto, usamos CSS para embelezamento.

  • Linguagem de script do lado do cliente (JavaScript)

    • Script: Um programa que não pode ser executado de forma independente e deve ter uma portadora.
    • Cliente: navegador.
    • Linguagem de script do lado do cliente: um programa executado no navegador.

    Comportamento de controle, usado para interagir com o usuário.

    HTML, CSS, JavaScript: HTML é usado para marcação, CSS é usado para embelezamento e JavaScript é usado para interação. Sua divisão de trabalho é muito clara. HTML é como uma casa tosca, decoração CSS e JavaScript é como instalar alguns interruptores.

  • servidor web

    Também conhecido como servidor www, geralmente o que chamamos de lado do servidor se refere ao servidor da web, que é usado para fornecer feedback ao cliente solicitante.

    [Falha na transferência da imagem do link externo. O site de origem pode ter um mecanismo de link anti-leech. Recomenda-se salvar a imagem e carregá-la diretamente (img-6PLXC9v4-1614844662803) (_ v_images / 20210215173541201_23072.png)]

  • Linguagem de script do lado do servidor

    Uma linguagem que funciona no lado do servidor para ajudar o servidor da web a completar a lógica de negócios.

    Java PHP Python

  • base de dados

    Um warehouse para armazenar dados.

Como a web funciona hoje (**)

较为完整的webPode ser dividido em 浏览器, HTML, CSS, JavaScript, web服务器, 服务器端脚本语言, 数据库, e moderno Web é usado na maioria da parte frontal e traseira da separação de arquitetura.

As principais coisas que aprendemos no front end são HTML, CSS e JavaScript. Quanto aos frameworks de Vue e React mencionados mais tarde, eles são todos frameworks encapsulados no topo do JavaScript.

Navegador (*)

O navegador é a plataforma em que as páginas da Web são executadas. Navegadores comuns incluem IE, Firefox, Google (Chrome), Safari e Opera, etc. Normalmente os chamamos de cinco principais navegadores. O sexto é o navegador Edge, que é o IE aprimorado da Microsoft Novo navegador integrado

Os chamados cinco navegadores principais foram criados por causa da diferença no kernel.

O chamado kernel se refere ao mecanismo de renderização, que é responsável pela interpretação da sintaxe da página da web (como uma aplicação de HTML, CSS, JavaScript sob a linguagem de marcação universal padrão) e renderização (exibição) da página da web. Portanto, o chamado kernel do navegador é geralmente o mecanismo de renderização usado pelo navegador. O mecanismo de renderização determina como o navegador exibe o conteúdo da página da web e as informações de formato da página.

Diferentes núcleos de navegador têm interpretações diferentes da sintaxe de escrita de página da Web. Portanto, o efeito de renderização (exibição) da mesma página da Web em navegadores com núcleos diferentes também pode ser diferente. É também por isso que os criadores de páginas da Web precisam testar páginas da Web em navegadores com núcleos diferentes. Mostrar a razão para o efeito. Mas todos eles precisam seguir os padrões W3C (HTML5, CSS3, padrões ES, etc.), então haverá algumas diferenças entre navegadores e navegadores, mas a diferença não é grande.

• IE IE é o núcleo do Trident. Após o lançamento do Windows, após o lançamento do Windows 10, o IE nomeou seu navegador embutido como Edge. O recurso mais notável do Edge é o novo kernel.

• Firefox (Firefox) kernel Gecko, a característica do Gecko é que o código é completamente aberto, então o grau de desenvolvimento é muito alto, programadores em todo o mundo podem escrever código para ele, adicionar funções, mas infelizmente diminuiu nos últimos anos, como com velocidade de abertura lenta e atualizações frequentes, O companheiro de equipe pisca como um porco, o oponente cromo como um deus.

• O Safari usa o famoso WebKit. Muitas pessoas agora chamam incorretamente o webkit chrome (mesmo se o núcleo do Chrome já estiver piscando, o núcleo do webkit foi usado antes).

• O kernel Blink do Chrome (Google) desenvolveu o mecanismo de renderização do kernel Blink (ou seja, núcleo do navegador) no projeto Chromium, integrado ao navegador Chrome, o Blink é na verdade um ramo do Webkit, a maioria dos navegadores domésticos usa o kernel Blink na versão mais recente

• O kernel Opera Presto (obsoleto) é o kernel "predecessor" do navegador norueguês Opera. Por que ele é chamado de "predecessor"? Porque o último navegador Opera foi abandonado há muito tempo e investido no abraço do Google, usando o Blink.

• Outros navegadores domésticos adicionaram seus próprios shells de IU aos núcleos de navegadores estrangeiros e se tornaram seus próprios navegadores.

A maior parte do processo de desenvolvimento agora usa cromo. Mais de 90% do desenvolvimento usará cromo.

O que é HTML (Hypertext Markup Language) (*)

Linguagem de marcação de texto: a linguagem em que o texto é marcado com um logotipo.

Super: as calças vestem fora. A linguagem de marcação de hipertexto tem algo mais com base na linguagem de marcação de texto, que pode marcar fotos e vídeos.

Linguagem de marcação de hipertexto (Hyper Text Mark up Language), que usa símbolos de marcação para marcar e exibir várias partes de uma página da Web. HTML é um padrão e uma especificação.

História do HTML (*)

1. Foi em 1991 que Tim-Lee escreveu um documento chamado HTML, no qual ele usava mais de 20 tags para marcar o texto. Este é o lendário 1.0.
2. A especificação HTML oficial mais antiga é a HTML2.0 emitida pela IETF (Internet Engineering Task Force); na verdade, não há HTML1.0
3. Seguindo o IETF, o W3C (World Wide Web Consortium) tornou-se o fabricante do padrão HTMl. Após meados da década de 1990, o W3C atualizou o HTMl várias vezes até o lançamento do HTMl4.01 em 1999.
4. A versão revisada após HTMl4.01 é xhtml1.0 (x significa extensível). Na verdade, o conteúdo da especificação XHTML1.0 é exatamente o mesmo que HTML4.01, sem adicionar novos elementos ou novos atributos. As duas únicas especificações A diferença é que a gramática HTML tem regulamentações diferentes. O HTMl fornece aos desenvolvedores muita liberdade para escrever elementos e atributos de acordo com seus desejos. No entanto, o XHTML exige que os desenvolvedores cumpram as regras XML e as regras XHTML 1.0 exigem regras mais rígidas., todas as tags e atributos devem estar em minúsculas.
5. Posteriormente, para ser mais padronizado, o W3C lançou o xhtml1.1, mas muitos fabricantes de navegadores não cooperaram e não verificaram as especificações do xhtml
6. O W3C começou a desenvolver o XHTML2, mas o XHTML2 não é compatível com todo o conteúdo da web, mesmo com a versão anterior do HTML.
7. Nessa época, algumas pessoas começaram a se opor ao XHML 2.0, especialmente representantes de opera, apple e moailla. Eles queriam oferecer suporte à versão anterior e desenvolver alguns novos recursos, mas foram rejeitados.
8. Mais tarde, eles criaram a organização WHATWG e começaram a desenvolver algumas especificações, que foi o antecessor do HTML 5. Mais tarde, devido ao lento avanço do XHTML2.0, as pessoas ficaram relutantes em usá-lo. Assim, o W3C começou a negociar com a organização WHATWG para aceitar o HTMl5.
9. Em 28 de outubro de 2014, HTML 5.0, W3C lançou oficialmente Recomendações HTML 5.0

HTML5 é usado por padrão durante o desenvolvimento, e outros navegadores antigos são considerados apenas sob requisitos especiais.

Começar comHTML4，CSS2, -》 HTML5、CSS3

Sintaxe HTML (****)

1. Crie um arquivo de texto e altere o nome do sufixo paraxxx.html

2. Abra o arquivo html e escreva um parágrafo

3. Clique com o botão direito no editor- "Abrir no navegador (esta forma é para acessar através do servidor)

   http://localhost:52330/1.html

4. Além disso <marquee>是我要标记出来的内容</marquee>, o que está dentro é <marquee>chamado de rótulo. É a unidade mais básica e a parte mais importante do HTM.

5. <标签名></标签名>Este formato é denominado rótulo duplo. A frente <标签名>representa o início e </标签名>o fim. As duas letras inglesas entre o início e o fim deles são iguais. Eles apareceram em pares.

6. <标签名 />, Chama-se tag única (tag de fechamento automático), não aparece aos pares e o resultado final /pode ser adicionado ou não.

   <br />Etiqueta de nova linha.

7. htmlO rótulo não diferencia maiúsculas de minúsculas. No entanto, é recomendável usar letras minúsculas.

8. loop="3"Este tipo de atributo é usado para modificar e controlar o rótulo.Mesmo se você não escrever um determinado atributo, o atributo terá um valor padrão.

   O formato do atributo:属性名="属性的值"

   • Os atributos devem ser escritos no rótulo.
   • O valor do atributo pode ser colocado entre aspas simples, aspas duplas ou sem aspas. Recomenda-se usar aspas duplas.

9. Vários atributos podem ser usados ​​em um rótulo. E a ordem de vários atributos não é distinguida.

10. Como representar a cor:

    1. Use palavras em inglês diretamente.

    2. É representado por um valor hexadecimal de 6 dígitos.

       0~9

       0~9a~f

       Divida os 6 dígitos em três grupos e as subtabelas representam a proporção de vermelho, verde e azul.

       <MARQUEE width="50" loop="3" bgcolor="#FFCD43">李沛华</MARQUEE>

11. Tratamento HTML de espaços e retornos de carro:

    1. Um ou mais espaços em HTML serão tratados como um espaço.
    2. Um retorno de carro ou vários retornos de carro em HTML também serão tratados como um espaço.

12. entidade

    Existem alguns caracteres em HTML que são reservados pelo sistema ou não podem ser impressos, portanto, você precisa usar entidades para que esses caracteres sejam usados ​​normalmente.

    Entidade: uma sequência de números e caracteres especiais usados ​​para representar esses caracteres especiais.

    formato:&字母;

    Espaço: 

    <：<

    >：>

    &:&

    "："

    '：'

13. Aninhamento de rótulos

    Tags simples podem ser aninhadas dentro de tags duplas, ou tags duplas podem ser aninhadas. O código que escreveremos no futuro é todo aninhamento de rótulos.

14. Resumindo:

    <标签名 属性1="值1" 属性2="值2">要标记的内容</标签名>

    <标签名 属性1="值1" 属性2="值2" />

15. Comente

    <!-- 要注释的内容 -->

    Algumas coisas eu não quero, mas não quero excluí-las ainda. Você pode comentar neste momento.

    1. Explique o significado do código.
    2. Ao depurar o código.

    shift + alt + a

    ctrl + /

    ​

    ​

    ​

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<head>标签Conteúdo em (****)

<body>标签Conteúdo em ()