¿Qué es un sitio web?
El sitio web está compuesto por muchas páginas web.
Proceso de construcción del sitio web:
1. Nombre de dominio (URL)
2. Arrendamiento de espacio (servidor)
3. Construcción del sitio web (1. Determinar el tema del sitio web, 2. Recopilar información, 3. Planificar el sitio web, 4. Crear página)
4. Promoción del sitio web
5. Mantenimiento del sitio web
2. ¿Qué es una página web?
Estándares web (composición de páginas web): estructura (html) + rendimiento (css) + comportamiento (js)
1. HTML: implementar estructura de página web (contenido de página web)
2. CSS: implementar decoración y rendimiento de página web
3. JS: implementar es Efecto interactivo, puede hacer que la página se mueva
3. Historia de HTML
lenguaje de marcado de hipertexto html (lenguaje de marcado de hipertexto) www lenguaje descriptivo de la World Wide Web, el hipertexto se refiere a la página web que contiene texto, imágenes, cuadros de entrada, audio y video, etc., por lo que no es texto puro, sino hipertexto; El hipertexto es un hipervínculo, y las etiquetas son etiquetas
La estructura básica de H5
1. Dos áreas 1. Área de descripción del encabezado 2. Área de contenido Bady
2. Etiquetas HTML 1. Etiqueta simple "Etiqueta vacía" 2. Etiqueta doble "Emparejado"
Descripción de la sintaxis HTML
1. La primera palabra después de la esquina aguda es el nombre de
la etiqueta 2. Después de la etiqueta, el espacio está separado por el atributo
3. El atributo y el valor del atributo están conectados con un signo igual
4. El valor del atributo se coloca Dentro de las comillas (se aceptan comillas simples y dobles)
5. Si una etiqueta tiene múltiples atributos, los atributos están separados por espacios
Etiquetas comunes
1; etiquetas de título
Diferencia: tienen su propio tamaño predeterminado, el texto está en negrita y único: h1 solo puede aparecer una vez en una página,
h2-h6 puede ser el título de la sección de la página web, no hay unicidad
2: texto en negrita Distinga fuerte y enfatice el papel del tono
3: marca inclinada de texto
4: marca de subrayado
5: saltos de línea forzados
Características: Siempre y cuando el contenido del navegador encuentros detrás de la fiesta en la siguiente línea de ancho
6: marca horizontal
7: marcas arriba y abajo (superior) (Abajo)
8: marca de párrafo
9: representa un breve párrafo de texto después de un solo texto Use CSS para lograr el cambio de color de fuente
10: caracteres de escape & nbsp; (espacio) & gt; & lt; (esquinas angulares izquierda y derecha) & copia; símbolo de versión (icono de registro)
11: div Rol: específicamente para el diseño de la página web
lista
ordenada lista html
Lista desordenada
Lista personalizada
-
（
- Colocar fotos en general ） （
- Ponlo para explicar la imagen ）
Expansión: cambie el estilo del símbolo de la lista: tipo = "valor del atributo" Valor del atributo: a / A i / I
cambio el símbolo del inicio del símbolo de la lista: inicio + "valor del atributo" El valor del atributo se refiere a un número, y el número es el número del primero Inicio
Hipervínculo
El atributo href = "dirección de salto" comienza con http: // URL
target = "value value" El valor del atributo es _self (valor predeterminado: abrir en la página actual) _blank (abrir en una nueva ventana)
title = "" La información de solicitud también se puede usar como un subtítulo de la imagen (la mayoría de las etiquetas admiten el atributo de título)
Aplicación de la
etiqueta El atributo src = "ruta de la imagen" en la etiqueta img
alt = "imagen de reemplazo de texto" (el valor del atributo está vacío y no se puede eliminar) Nota: cuando la imagen no se puede cargar, el texto en la alternativa reemplaza el
ancho de la imagen = "" El ancho de la imagen = "" La altura del borde de la imagen = "" El borde de la
imagen Encuentra la ubicación de la imagen (ruta relativa) El
objetivo y tú estás en el mismo archivo al mismo nivel. Encuentra el mismo nivel. / La ruta actual de los
padres encuentra al niño. / Nombre de la carpeta / Nombre de la imagen
Encuentra el padre del niño ... / Regresa al nivel anterior / Nombre de la imagen
Ancho de fila y columna de tabla = "" ancho ancho = "" borde alto = "" borde bordercolor = "" color de borde
espacio de celdas = "" espacio entre bordes de celdas adyacentes
cellpadding = "" espacio de contenido entre bordes
alinear = "propiedades Valor "Valor del atributo de alineación horizontal: izquierda centro derecha
valign =" "Valor del atributo" Valor del atributo de alineación vertical:
celdas combinadas superiores inferiores centrales : las filas fusionadas son todas filas fusionadas y no las filas de columna cruzada son
atributos de fila fusionada de columna fusionada: columnas de combinación de filas en filas: colspan Nota: No importa combinar filas o columnas, primero debe combinar filas en columnas en la operación td
Etiqueta de formulario (campo de etiqueta)
atributo action = “url (ruta)” Ruta al
método de envío del formulario = método de transmisión de datos “get / post”
maxlength = "" Longitud máxima de caracteres de entrada
name = "nombre del formulario"
Control de formulario:
atributo de entrada de etiqueta : type = "" especifica el tipo de generación de entrada (cuadro de entrada, botón de enviar, botón vacío, etc.)
value = "" Según el tipo de tipo, el rol es diferente
name = "" El nombre del elemento de formulario actual
size = "" En unidades de caracteres, controla el tamaño de los elementos del formulario
(cuadro de texto (cuadro de entrada)
(botón de enviar)
(cuadro de contraseña)
botón de reinicio (devuelve el formulario actual al estado inicial)
botón vacío
sintaxis css: selector {atributo: valor de atributo;} Nota: todos los códigos css deben colocarse en la hoja de estilo
css Descripción de la sintaxis css 1: el selector cuelga y dice etiquetas html
2: todas las declaraciones css deben colocarse entre llaves
3: la declaración css incluye atributos y valores de atributo
4: los atributos css y los valores de atributo están conectados mediante dos puntos
5: cada declaración va seguida de un punto y coma al final
6: si un atributo tiene múltiples valores de atributo, valores de atributo y valores de atributo Separados por espacios
hoja de estilo css 1: hoja de estilo interna <style type = “test / css” Nota: hoja de estilo interna, intente ponerla en el área de descripción del encabezado
2: Hay dos formas de hoja de estilo externa
(1) primero crear un sufijo llamado .css El archivo
hrel = "" ruta de conexión rel = "hoja de estilo" para establecer la relevancia
(2)
la diferencia entre los dos: el enlace de diferencia esencial pertenece a html una etiqueta @import pertenece a un método proporcionado por css
2: carga de enlace de orden import css y html La estructura se carga al mismo tiempo. @import Cargue la estructura primero y luego cargue el estilo
3: Diferencia de compatibilidad La compatibilidad del enlace es mejor
4: Limpie el estilo DOM de js #import css importado no puede modificarse dinámicamente por js
3: Hoja de estilo en línea (fila Estilo, estilo en línea) <estilo de etiqueta = "estilo en línea"> </ etiqueta>
La relación
de peso de la hoja de estilo : 1. ¡El peso de la hoja de estilo en línea es el más grande!
2. ¡El peso de los estilos internos y externos está relacionado con el orden de escritura!
(Los que se colocan en la parte posterior sobrescribirán los estilos colocados en la parte frontal, solo se sobrescribirán los estilos con los mismos atributos, y los estilos con diferentes atributos continuarán ejecutándose)
. Importante-> ¡La declaración actual tiene el mayor peso! Sintaxis: fondo: rojo! Importante;
sintaxis css:
selector {atributo: valor de atributo;}
selector: selector es nombrar la etiqueta.
一：类型选择符（标签选择符）
所有的html标签可以直接当作选择符进行应用。
比如：div\p\em\i\b\strong.............
特点：能选中当前结构里面全部同名标签。
应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候
.
Dos: selector de id
Sintaxis:
Nombre: <tag id = "name"> </ tag>
Escribir estilo con nombre: #NAME {atributo: valor de atributo}
Características: ¡unicidad! En la misma página, un nombre de identificación solo se puede usar una vez.
Aplicación: para dividir la estructura periférica de una página web
三: 类选择符(class选择符)
语法:
其名称: <标签 class="名称1 名称2 名称3 名称4..."></标签>
用类名写样式 .名称{属性:属性值;}
特点:
1:一个元素可以有多个类名,类名可以重复出现
2:可以制定一类样式.
(Id, clase) convención de nomenclatura:
intente comenzar con letras minúsculas.
Una combinación de matrices, letras, guiones bajos y guiones.
No puede utilizar la denominación de palabras clave (todas las etiquetas y atributos pertenecen a palabras clave).
Nombre tanto como sea posible para reflejar el contenido de la sección o para reflejar la estructura (semántica).
Puede ser Pinyin, pero no pueden aparecer caracteres chinos y caracteres especiales.
四: 群组选择符
语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
选择符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; 盒子内部的距离清零
}
relación selectores de peso:
ID> clase> tag
cuatro números representan peso:
hoja de estilo en línea -> 1000
ID -> 100
clase -> 10
Label -> 1
Selector Clase Pseudo -> 10
Comodín -> 0
selector que comprende El peso es la suma de los pesos,
por ejemplo:
id class {} 100 + 10 == 110
id id class tag {} 100 + 100 + 10 + 1 == 211 Cuando los
pesos son los mismos, el estilo escrito después se asignará al estilo escrito antes Sobrescribir
! El peso importante es el más alto, como el fondo: ¡rojo! 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 flotante :
valor de atributo flotante :
izquierda
derecha
ninguno
Características:
1: Después de agregar el flotante, el elemento no ocupa espacio.
2: Si varios elementos están dispuestos horizontalmente, todos los elementos dispuestos deben agregarse al flotante.
3: Si el elemento secundario se agrega a flotante y el ancho es mayor que el elemento primario, los siguientes elementos se comprimen a la siguiente línea.
