O que é um site
O site é composto de muitas páginas da web.
Processo de construção do site:
1. Nome do domínio (URL)
2. Espaço de concessão (servidor)
3. Construção do site (1. Determine o tema do site, 2. Colete informações, 3. Planeje o site, 4. Crie a página)
4. Promoção do site
5. Manutenção do site
2. O que é uma página da web?
Padrões da Web (composição de páginas da Web): estrutura (html) + desempenho (css) + comportamento (js)
1. HTML: implementar estrutura de página da Web (conteúdo da página da Web)
2. CSS: implementar decoração e desempenho de página da Web
3. JS: implementar é Efeito interativo, pode fazer a página se mover
3. História do HTML
html Hyper Text Markup Language (Linguagem de marcação de hipertexto) www. linguagem descritiva da World Wide Web, hipertexto refere-se à página da Web que contém texto, imagens, caixas de entrada, áudio e vídeo, etc., portanto, não é texto puro, mas hipertexto; Hipertexto é um hiperlink e tags são rótulos
A estrutura básica do H5
1. Duas áreas 1. Área de descrição do cabeçalho 2. Área de conteúdo Bady
2. Tags HTML 1. Rótulo único "Rótulo vazio" 2. Rótulo duplo "Emparelhado"
Descrição da sintaxe HTML
1. A primeira palavra após o canto agudo é o nome do
rótulo 2. Após o rótulo, o espaço é separado pelo atributo
3. O atributo e o valor do atributo são conectados a um sinal de igual
4. O valor do atributo é colocado Dentro das aspas (as aspas simples e duplas são aceitáveis)
5. Se um rótulo tiver vários atributos, os atributos serão separados por espaços
Tags comuns
1; tags de título
Diferença: ter seu próprio tamanho padrão, o texto é em negrito e exclusivo: h1 pode aparecer apenas uma vez em uma página,
h2-h6 pode ser o título da seção da página da web, não há exclusividade
2: texto em negrito Distinga forte e enfatize o papel do tom
3: marca de inclinação do texto
4: Marca de sublinhado
5: quebras de linha forçadas
Características: Enquanto o conteúdo encontros navegador por trás do partido para a próxima br linha
6: marca horizontal
7: Marcas para cima e para baixo (superior) (Abaixo)
8: Marca de parágrafo
9: representa um parágrafo curto de texto após um único texto Use CSS para obter a mudança de cor da fonte
10: caracteres de escape & (espaço) & gt; & lt; (cantos angulares esquerdo e direito) & copy; version symbol (record icon)
11: div Função: especificamente para o layout da página da web
lista
ordenada html
Lista não ordenada
Lista personalizada
-
（
- Coloque as fotos em geral ） （
- Coloque para explicar a imagem ）
Expansão: Altere o estilo do símbolo da lista: type = "attribute value" Valor do atributo: a / A i / I
altere o símbolo do início do símbolo da lista: start + "attribute value" O valor do atributo refere-se a um número, e o número é o número do primeiro Iniciar
Hiperlink
O atributo href = "endereço de salto" começa com http: // URL
target = "value value" O valor do atributo é _self (valor padrão: aberto na página atual) _blank (aberto em uma nova janela)
title = "" As informações do prompt também podem ser usadas como legenda da imagem (a maioria das tags suporta o atributo title)
Aplicação da
tag O atributo src = "caminho da imagem" na tag img
alt = "imagem de substituição de texto" (o valor do atributo está vazio e não pode ser excluído) Nota: quando a imagem não pode ser carregada, o texto na alt substitui a
largura da imagem = "" A largura da imagem = "" A altura da borda da imagem = "" A borda da
imagem Encontre o local da imagem (caminho relativo) O
destino e você está no mesmo arquivo no mesmo nível. Encontre o mesmo nível. /
Pai do caminho atual encontre o filho. / Nome da imagem
Encontre o pai da criança ... / Volte ao nível anterior / Nome da imagem
Largura da linha e coluna da tabela = "" largura alta = "" borda alta = "" borda bordercolor = "" cor da borda
cellpacing = "" espaçamento entre as bordas adjacentes da célula
cellpadding = "" espaçamento do conteúdo entre as bordas
align = "propriedades Valor "Valor do atributo de alinhamento horizontal: centro esquerdo valor à direita
=" "Valor do atributo" Valor do atributo de alinhamento vertical: parte superior inferior central
células mescladas: linhas mescladas são todas linhas mescladas e não linhas da coluna cruzada são colunas
mescladas atributos da linha mesclada: coluna de mesclagem de linhas de linhas: colspan Nota: Não importa mesclar linhas ou colunas, mesclar linhas nas colunas primeiro na operação td
Atributo tag de formulário (campo de tag) action = “url (path)” Caminho para o
método de envio de formulário = método de transmissão de dados “get / post”
maxlength = "" Comprimento máximo dos caracteres de entrada
name = "name of form"
Controle de formulário: rótulo
atributo de entrada : type = "" especifica o tipo de geração de entrada (caixa de entrada, botão enviar, botão vazio etc.)
value = "" De acordo com o tipo de tipo, a função é diferente
name = "" O nome do elemento de formulário atual
size = "" Em unidades de caracteres, controla o tamanho dos elementos do formulário
(caixa de texto (caixa de entrada)
(botão enviar)
(caixa da senha)
botão de redefinição (retorna o formulário atual ao estado inicial)
botão vazio
sintaxe css: seletor {atributo: valor do atributo;} Nota: todos os códigos css devem ser colocados na folha de estilo
css Descrição da sintaxe css 1: o seletor oscila e diz tags html
2: todas as declarações css devem ser colocadas entre chaves
A declaração 3: css inclui atributos e valores de atributo
4: atributos css e valores de atributo são conectados usando dois pontos
5: cada instrução é seguida por um ponto e vírgula no final
6: se um atributo tiver vários valores, atributos e valores de atributo Separado por espaços
folha de estilo css 1: folha de estilo interna <style type = "test / css" Nota: folha de estilo interna, tente colocá-la na área de descrição do cabeçalho
2: Existem duas maneiras de folha de estilo externa
(1) primeiro criar um sufixo chamado .css O arquivo
hrel = "" caminho da conexão rel = "stylesheet" para estabelecer a relevância
(2)
a diferença entre os dois: o link da diferença essencial pertence ao html uma tag @import pertence a um método fornecido pelo css
2: carregando o link de pedido import css e html A estrutura é carregada ao mesmo tempo. @import Carregue a estrutura primeiro e depois carregue o estilo
3: Diferença de compatibilidade A compatibilidade do link é melhor
4: Limpe o estilo DOM de js #import O css importado não pode ser modificado dinamicamente por js
3: Folha de estilos em linha (linha Estilo, estilo embutido) <tag style = "estilo embutido"> </ tag>
A relação
de peso da folha de estilos : 1. O peso da folha de estilos embutida é o maior!
2. O peso dos estilos interno e externo está relacionado à ordem da escrita!
(Os colocados na parte de trás substituem os estilos colocados na frente, apenas os estilos com os mesmos atributos serão substituídos e os estilos com atributos diferentes continuarão sendo executados.)
! Importante-> A declaração atual tem o maior peso! Sintaxe: fundo: vermelho! Importante;
sintaxe css:
seletor {atributo: valor do atributo;}
seletor: seletor deve nomear o rótulo.
一：类型选择符（标签选择符）
所有的html标签可以直接当作选择符进行应用。
比如：div\p\em\i\b\strong.............
特点：能选中当前结构里面全部同名标签。
应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候
.
Dois: seletor de id
Sintaxe:
Nome: <tag id = "name"> </ tag>
Escreva estilo com o nome: #NAME {attribute: attribute value}
Recursos: exclusividade! Na mesma página, um nome de ID pode ser usado apenas uma vez.
Aplicação: para dividir a estrutura periférica de uma página da web
三: 类选择符(class选择符)
语法:
其名称: <标签 class="名称1 名称2 名称3 名称4..."></标签>
用类名写样式 .名称{属性:属性值;}
特点:
1:一个元素可以有多个类名,类名可以重复出现
2:可以制定一类样式.
Convenção de nomenclatura (Id, classe):
tente começar com letras minúsculas.
Uma combinação de matrizes, letras, sublinhados e hífens.
Você não pode usar nomes de palavras-chave (todas as tags e atributos pertencem a palavras-chave) para
nomear o máximo possível para refletir o conteúdo da seção ou a estrutura de reação (semântica).
Pode ser Pinyin, mas caracteres chineses e caracteres especiais não podem aparecer.
四: 群组选择符
语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
比如:.名称1，.名称2，.名称3.....
五: 包含选择符(子代选择器\后代选择符) ( 通过父元素找子元素 )
语法:
父元素 子元素{ 属性:属性值; }
六: 伪类选择器
a:link {color: red;} 未访问的链接状态
a:visited {color: green;} 已访问的链接状态
a:hover {color: blue;} 鼠标滑过链接状态
a:active {color: yellow;} 鼠标按下去时的状态
比如a：lingk{
color:red
} 就会显示未访问的连接状态颜色为红色
七：通配符
*{ }
* 选择页面中所有的元素！
*{
margin:0; 盒子外围间距清零
padding:0; 盒子内部的距离清零
}
relação selectores peso:
id> classe> tag
quatro números representam peso:
folha de estilo alinhado -> 1000
ID -> 100
classe -> 10
Etiqueta -> 1
Selector de Classe Pseudo -> 10
Wildcard -> 0
selector compreendendo O peso é a soma dos pesos,
por exemplo:
classe de identificação {} 100 + 10 == 110
tag da classe de identificação de id {} 100 + 100 + 10 + 1 == 211 Quando os
pesos são iguais, o estilo escrito a seguir será atribuído ao estilo escrito antes Substituir.
! O peso importante é o mais alto, como no fundo: vermelho! importante
Atributos de texto:
1： font-size:; 控制文本大小
1:为了消除系统之间显示差异，规定：16px 为标准字体大小。
2:文本大小设置，设置为偶数。
3:PC端项目，设置最小尽量别低于12px ;
4:从ps中获取文本大小，汉字量取文本高度。
5:文本单位： px \ em \ pt(磅)【常用在印刷领域】
12px == 9pt
em ( 相对大小单位，相对于父元素的font-size值而定 ) (默认情况下， 1em == 16px)
6:
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
2：color:; 控制网页中的文本颜色
颜色值：
a：十六进制表示颜色值：
16进制数字：0 - 9 a - f
颜色值： #ff0000
6个数字：
前两位 红色
中间两位 绿色
最后两位 蓝色
b: RGB(255,0,0) 模式
拓展： rgba(255,0,0,0.5)0.5 指定文字透明度
3：font-family:;控制的是网页中字体类型。
默认的字体类型："微软雅黑"
系统能支持的字体：web安全字体：微软雅黑、宋体、楷体...
英文默认的字体：Arial
语法：font-family:字体1,字体2,字体3,......
注：
1:中文字体必须放在引号里面
2:如果一个字体多个单词组成 也要放在引号里面
3:如果字体是一个单词 不需要引号。
4:先写英文字体，后写中文字体。
4：font-weight:;控制文本是否加粗
属性值：
bold 加粗
bolder 加粗
normal 清除加粗，恢复常规文本
100 - 900
100 - 500:不加粗
600 - 900:加粗的状态
5: font-style:;控制文本的倾斜
属性值：
italic 倾斜
oblique 倾斜（倾斜幅度更大，但是一般不会有明显变化）
normal 恢复常规文本
6: line-height:; 控制文本的行高。
a: 从ps设计图上：怎么获取行高:从第一行开始量到第二行开始。
b:
单行文本：
如果让单行文本在容器里面上下居中，line-height设置容器高度即可
显示状态：
小于容器高度的时候：文本往上移动
大于容器高度的时候：文本往下移动
7：text-align:; 控制文本的水平对齐方式
属性值：
center 居中对齐
left 左对齐
right 右对齐
justify 两端对齐
8:text-decoration:; 文本修饰（下划线、上划线、删除线）
属性值：
none 清除下划线
underline 添加下划线
overline 添加上划线
line-through 添加删除线
9: text-indent:;
text-indent:2em；首行缩进：
text-indent能设置负值：文字往左走。（悬挂式缩进）
10：字间距、词间距
letter-spacing:; 字间距
word-spacing:; 词间距
11: text-transform:; 控制文本大小写。
属性值：
uppercase 大写
lowercase 小写
capitalize 每个单词的首字母大写
Atributo flutuante :
valor do atributo flutuante :
esquerdo
direito
nenhum
Recursos:
1: Após adicionar o flutuador, o elemento não ocupa espaço.
2: Se vários elementos forem organizados horizontalmente, todos os elementos organizados deverão ser adicionados para flutuar.
3: Se o elemento filho for adicionado ao flutuante e a largura for maior que o elemento pai, os seguintes elementos serão espremidos para a próxima linha.
