01. Introdução ao
desenvolvimento front-end da Web 1. Visão geral do desenvolvimento front-end da Web
1) O que é desenvolvimento Web?
O desenvolvimento front-end é o processo de criação de interfaces front-end, como páginas ou aplicativos da Web, e sua apresentação aos usuários.Por meio de HTML, CSS, JavaScript e várias tecnologias, estruturas e soluções derivadas, a interação da interface com o usuário dos produtos da Internet é realizada.
Ele evoluiu da produção de páginas da web, e o nome tem características óbvias da época. Na evolução da Internet, a produção de páginas da Web é um produto da era da Web 1.0. O conteúdo principal dos sites iniciais era estático, com imagens e texto como parte principal, e o uso do site pelos usuários também se baseava na navegação.
Com o desenvolvimento da tecnologia da Internet e a aplicação do HTML5 e CSS3, as páginas da web modernas são mais bonitas, com efeitos de interação significativos e funções mais poderosas.
A Internet móvel trouxe um grande número de dispositivos terminais móveis de alto desempenho e redes sem fio rápidas.O HTML5 e o node.jS são amplamente utilizados e várias bibliotecas de estruturas estão surgindo
2) Tecnologia principal de desenvolvimento front-end da Web
Linguagem HTML "1" (linguagem de marcação de hipertexto, equivalente a um quadro inteiro, muito importante)
O domínio de HTML é o núcleo de uma página da web, um idioma padrão para criação de páginas da web e um idioma usado pelos navegadores da web, que elimina as barreiras à troca de informações entre computadores diferentes. Portanto, é a linguagem mais usada na Internet e a principal linguagem que constitui documentos da Web. Aprender HTML é uma condição básica para se tornar um desenvolvedor da Web.
HTML é uma linguagem de marcação que pode implementar páginas da Web e exibi-las em um navegador. Como a versão mais recente do HTML, o HTML5 apresenta uma série de novas tecnologias, o que aprimora bastante a capacidade de oferecer suporte a aplicativos, para que a tecnologia da Web não fique mais limitada à apresentação de conteúdo da Web.
Com o desenvolvimento de CSS, JavaScript, Flash e outras tecnologias, o poder de processamento da Web para aplicativos aumentou gradualmente, e a experiência do usuário de navegar em páginas da Web foi bastante aprimorada. No entanto, várias novas tecnologias no HTML5 alcançaram avanços qualitativos, tornando a tecnologia da Web considerada pela primeira vez próxima à tecnologia de aplicativos nativa nativa, e o desenvolvimento de aplicativos da Web tornou-se realmente uma opção para os desenvolvedores.
O HTML5 pode simplificar bastante o trabalho dos desenvolvedores.Em teoria, um único desenvolvimento pode ser executado em diferentes plataformas com a ajuda de navegadores, reduzindo os custos de desenvolvimento.Esta também é uma das principais vantagens da tecnologia HTML5 que o setor geralmente acredita. AppMobi, Motorola, Sencha, Appcelerator e outras empresas lançaram ferramentas de desenvolvimento relativamente maduras para apoiar o desenvolvimento de aplicativos HTML5.
CSS "2" (folhas de estilo em cascata, usadas para decorar quadros HTML, equivalentes a maquiagem, decoração)
Aprender CSS é um aspecto importante da aparência da página da Web. O CSS pode ajudar a tornar a página da Web mais bonita.
JavaScript "3" (linguagem de programação front-end, usada para fazer a página interagir, exibir dinamicamente e deixar interativos os itens projetados)
Ao usar JavaScript, ele é de nível muito baixo e é muito lento para desenvolver.Para tornar a página de desenvolvimento mais rápida, ela realmente encapsula algumas estruturas de JS, semelhantes aos módulos em python, como jQuery, viewe.js, etc.
HTML, CSS e JavaScript são chamados de três espadachins para o desenvolvimento de front-end.
Sistema operacional "4"
Precisa entender o conhecimento básico de Unix e Linux.
Servidor Web "5"
Entenda o servidor da Web, incluindo a configuração básica do Apache, o domínio das habilidades de configuração do htaccess.
2. Origem da Web
Em 1984, Tim Berners Lee criou o primeiro site de navegação na World Wide Web, o primeiro site do mundo
Em 1989, a equipe liderada por Tim Berners-Lee, do CERN (Instituto Europeu de Física de Partículas), enviou um novo protocolo para a Internet e um sistema de documentos usando o protocolo. O objetivo é permitir que cientistas de todo o mundo usem a Internet para comunicar seus documentos de trabalho.
Este novo sistema foi projetado para permitir que qualquer usuário na Internet pesquise e recupere documentos do banco de dados de muitos computadores que servem documentos. No final de 1990, a estrutura básica deste novo sistema foi desenvolvida e implementada em um computador no CERN.Em 1991, o sistema foi transplantado para outras plataformas de computadores e lançado oficialmente.
3. Características da
Web A Web é uma Web gráfica e fácil de navegar
e não tem nada a ver com a plataforma. A
Web é uma estrutura distribuída. A Web
dinâmica
é interativa. Um
pouco de senso comum é adicionado aqui:
Estrutura C / S: Cliente / Servidor (cliente / servidor)
Geralmente, jogamos jogos, o pacote baixado é relativamente grande, requer uma série de ambientes, os requisitos de configuração do cliente são muito altos e plataformas diferentes precisam desenvolver software diferente.
Estrutura B / S:
Jogo online do navegador / servidor (navegador / servidor) , o cliente não precisa de muita configuração, apenas possui um navegador, você pode acessar o conteúdo compartilhado pelo servidor, agora o usa principalmente.
4. Como a Web funciona Por
exemplo, uma pergunta freqüente durante as entrevistas: Qual é o processo geral executado após a inserção de www.baidu.com no navegador?
O navegador envia uma solicitação ao servidor DNS para resolver o nome do domínio; o
servidor DNS resolve o nome do domínio para o endereço IP correspondente e o retorna ao cliente; o
navegador estabelece uma conexão TCP com o servidor (a porta padrão é 80); o
navegador envia uma mensagem de solicitação HTTP;
O servidor responde com a mensagem de resposta HTTP; o
navegador analisa a mensagem de resposta e a exibe na página da Web; após
receber e enviar a mensagem, a conexão TCP é liberada.
Os protocolos envolvidos são:
Camada de aplicação: HTTP (protocolo de acesso WWW), DNS (serviço de resolução de nomes de domínio)
Camada de transporte: TCP (fornece transmissão de dados confiável para HTTP), UDP (DNS usa transmissão UDP)
Camada de rede: IP (transmissão e roteamento de pacotes de dados IP ), ICMP (fornece detecção de erro durante a transmissão da rede), ARP (mapeia o endereço IP do host de destino para um endereço MAC)
5, URL de introdução ao
URL (localizador uniforme de recursos), localizador unificado de recursos, ou seja, o URL usado para acessar a página Conteúdo
Composição:
tipo de protocolo: // endereço do servidor (você pode escrever o IP ou o nome do host) (número da porta) / caminho / nome do arquivo Se você
não escrever o número da porta, é o número da porta padrão do protocolo.Por
exemplo: http://www.westos.org /bbs/index.html
Vamos revisar as portas comuns:
http: 80
https: 443
ssh: 22
mysql: 3306
redis: 6379
ftp: 21
02. Estrutura da página da Web em HTML
1. Introdução ao
HTML HTML (Hyper Text Mark-up Language) é uma linguagem de marcação de hipertexto.Uma linguagem que descreve a estrutura e a apresentação dos documentos da página usando tags de marcação, que são analisadas pelo navegador e depois Exiba os resultados na página da web.
Hipertexto refere-se a hiperlinks
Tags referem-se a tags
Editores e navegadores comuns:
Nota:
1) Os arquivos HTML abertos com um editor exibem texto, que podem ser editados em texto.
2) O arquivo HTML é aberto com um navegador e o navegador renderiza o arquivo em uma página da Web de acordo com o conteúdo da descrição do rótulo.A página da Web exibida pode ser saltada de um link de página da Web para outra página da Web.
2. A estrutura básica do HTML
Como mostrado na figura a seguir, é o conteúdo do quadro do HTML.Quando escrevemos documentos em HTML, os adicionamos de acordo com este modelo.
A seguir, criamos um arquivo .html relativamente simples de acordo com este modelo:
<!--注释在这里写，写完直接按ctrl+/ -->
<!--声明html-->
<!DOCTYPE html>
<!--表示是html文档-->
<html lang="en">
<!--html的头部，在页面中不会显示-->
<head>
<!-- 这里声明html文档的编码格式-->
<meta charset="UTF-8">
<!-- 编辑整个页面的标题-->
<title>标题示例</title>
</head>
<!--html的主体，在页面中真正显示的内容-->
<body>
<!-- <h1></h1>：是一级标题，里面还可以进行设置格式颜色等-->
<h1 style="color: crimson">标题一</h1>
</body>
</html>
Aqui apresenta um software dedicado ao WebStorm de desenvolvimento de front-end da Web, que pode ser baixado e instalado diretamente no site oficial. (A interface oficial do site é a seguinte), este software é mais conveniente no processo de desenvolvimento de front-end da Web e também é relativamente leve.
3. Tipos de documentos
Os dois tipos de documentos mais usados são: html5 e xhtml 1.0
Aqui, fale brevemente sobre a diferença entre XHTML1.0, HTML4.01 e HTML5:
XHTML1.0 é um estilo XML4.01 XML.
O XHTML1.1 é principalmente preliminarmente modularizado.
HTML5 é a próxima geração de HTML, substituindo o HTML4.01.
Antes da ascensão do XHTML, sua posição foi substituída pelo HTML5. O HTML5 estipula duas formas de serialização, uma no estilo HTML frouxo e a outra no estilo XML / XHTML estrito.
A maioria das empresas usa o html5, e as que usam o xhtml1.0 geralmente são as páginas de exibição dos departamentos governamentais relevantes.
A figura a seguir ilustra todo o processo de desenvolvimento de HTML:
4. Especificações e comentários
do documento O xhtml formulou as especificações de gravação do documento.O HTML5 pode ser observado parcial ou totalmente, dependendo dos requisitos de desenvolvimento.
Todas as tags devem estar em minúsculas.
Todos os atributos devem estar entre aspas duplas.
Todas as tags devem estar fechadas.
Img deve ser adicionado com o atributo alt (descrição da imagem)
. Você pode inserir comentários no código do documento HTML. O comentário é a descrição e explicação do código. O conteúdo do comentário Não será exibido na página, o método de inserção de comentários no código html é:
<! - Este é um comentário->
Por exemplo: Na figura abaixo, a primeira e a terceira linhas são comentários.
03, tags HTML
1, tags de texto
2. Etiqueta de quebra de linha
A exibição é a seguinte:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验效果</title>
</head>
<>
<body>
<h1 style="color: blueviolet">标题一</h1>
<h2 style="color: red">标题二</h2>
<h3 style="color: yellow">标题三</h3>
<h4 style="color: green">标题四</h4>
<h5 style="color: black">标题五</h5>
<h6 style="color: blue">标题六</h6>
<br>
<i>斜体</i>
<em>斜体</em>
<b>加粗字体</b>
<strong>加粗字体</strong>
<cite>引用</cite>
<sub>下标</sub>
<sup>上标</sup>
<tt>居中显示</tt>
<u>字体加下划线</u>
<s>字体加删除线</s>
<strike>字体加删除线</strike>
s<sub>1</sub> = pi * r<sup>2</sup>
原价：<del>$100</del>
现价:<b style="color:red">$50</b>
<i>斜体</i>
<br/>
<em>斜体</em>
<br/><hr>
<br>
<p>
总想在一场如酥如丝的春雨中，撑着油纸伞穿梭于江南。可能没有布满青苔的大石板，没有杨柳拂堤的断桥，没有一个且行且谈笑的好友。就一个人，静静的起行。在那里，我可以遇到破土而出、正展现着它勃勃生机的小草，遇到拂身而来、吹面不寒的二月春风，遇到一个促膝而谈、志同道合的友人。
有人说，遇见，不过是在一定的地点，一定的时间，遇到一定的人或物，或许还有事情。但是在茫茫人海中，无数次擦肩的人又有几个是隐隐约约还存留着记忆的呢?没有心灵上的刻印，或许算不上是遇见吧。西湖三月，白素贞一袭轻衣走过，邂逅了一个儒雅书生，从此写就了一段刻骨铭心的爱情。草桥之上，梁山伯遇见祝英台，从十八里相送，到坟前的双双化蝶，为他们的爱情点开凄美的涟漪。
最美的遇见，不过初见。我们之所以愿意去记忆那些初遇的一颦一笑，只是因为这是两颗陌生而又神秘的心在相互碰撞。如春风吹着云，又如蜻蜓点着水，青涩而又温馨。有多少人曾怀念着往昔，怀念的第一次相逢，第一次微笑，因为在各自心里，那里承载的是心的起点。人生若只如初见，最美的画面不会因为时间的推移而消散殆尽，反而会因此愈念愈浓，直至如梦如画，直至永恒。
最暖的遇见，不过偶遇。如果说每一次初遇是云与风的交汇，那么我会相信每一次偶遇便是流星划过。没有计划、不经商量的，就那么匆匆地到来，该是有多欢喜。人生最大的悲痛永远不过是未知，然而最大的快乐也是未知。我们不能预知下一秒将遇到哪个人，也不能预测到你想遇见的人在何时遇到。人海还不一定茫茫，但机会总是渺渺。于是乎，我们不再刻意，一切都托付与机缘。当有一天，我们不期而遇，我们会发现这比任何一次彩排、任何一次计划都来得随意简单，但却是最为温暖。
</p>
<p>
佛祖座下弟子阿难曾说：我愿化身石桥，受那五百年风吹，五百年日晒，五百年雨淋，只求她从桥上经过。 因为在他看来，每一次遇见都足以永恒，哪怕那时的他已经是一座沧桑的古桥。我收起伞，尽管天上还飘着雨丝。我纵身于雾汽之中，听着雨珠在发间流淌的声音。蓦然回首，仅莞尔一笑，愿我以最美的姿态遇见你。
</p>
</body>
</html>
Resultados da exibição da página da Web:
