Tecnologia de front-end: otimização de CSS do formulário H5

Revisão de conhecimento:

1) HTML 5.0 (h5) é muito mais poderoso do que a versão anterior, adicionando muitas novas tags

Animação de função aprimorada (vazamento de memória flash, ipad da Apple),
desenvolvimento de terminal móvel unificado (ios, Android) trabalho repetitivo, duas equipes de empresas de software

2) CSS 3.0 e H5 trabalham juntos para melhorar o desempenho de toda a página da web

Electron transforma páginas da web em aplicativos de desktop, word, excel, Baofengyingyin
ainda não está maduro o suficiente

3) Muitas tags, o conhecimento de front-end é de 10% para os engenheiros de back-end, escreva e mostre na página

Memórias provavelmente usadas

4) Estilize, pareça familiar e entenda o significado: tamanho da fonte, peso da fonte

Visualização

5) A animação é muito rica,

posição: relativa;
posicionamento: a animação geralmente é bastante posicionamento

6) Para desenvolvedores de back-end, coopere com a tecnologia de front-end

Conecte-se ao banco de dados (mysql) para consultar os dados na tabela de banco de dados do aluno em segundo plano
(java jdbc).
Após consultar os dados, exiba-os na página (h5 + css3)

Formulário
html para desenvolvedores

1) div, span, ul, li data display (site estático)

2） forma ， entrada （texto / rádio / caixa de seleção / botão） ， selecione

Os usuários preenchem suas próprias informações, podem interagir e podem ser diferenciados por diferentes usuários
(site dinâmico). Envie as informações do usuário para o plano de fundo springmvc + spring + mybatis

nome de exibição do rótulo

O primeiro pacote html
html + css
css, bootstrap

bootstrap3 (não usando 4 por enquanto, 3 agora é o mainstream no mercado, 4 e 3 não são compatíveis)
bootstrap3 é um monte de definições de estilo, predefinidos muitos estilos bonitos.
Como usar? De acordo com a análise desses casos, transforme nossa página existente

1) Adicione um rótulo para representar o formulário

2) A maioria dos divs adiciona uma modificação de estilo

<div class="form-group"> 大多文本框div修饰

    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>

3) Verifique a modificação div

<div class="checkbox">

4) Os estilos dos botões também são diferentes

<button class="btn btn-default"

Resumo: para usar o bootstrap, ele deve modificar os elementos na página e adicionar muita decoração de estilo de classe

Como introduzir o bootstrap, é chamado de arquivo de folha de estilo

Importando um arquivo de folha de estilo de fora. O arquivo de folha de estilo é, na verdade, para ser colocado na página

Estilo:
1) Adicione o atributo de estilo diretamente no elemento

<h1 style="color:red;">学生信息管理系统</h1>

2) Declare no rótulo da página

<style>
			body{
     
     
				width: 400px;
				margin: 30px;
			}
		</style>

3) tag de link, compartilhamento de múltiplos html

<link rel="stylesheet" href="css/bootstrap.min.css">

bootstrap.min.css Contanto que .min, comprima o arquivo, coloque todo o conteúdo em uma linha. A
compactação é formato, espaço, quebra de linha, guia de recuo (download rápido)
arquivo normal bootstrap.css (para desenvolvedores verem)

---