Resumen de la interfaz web de la primera semana

Resumen de la primera semana

2021.1.11

La estructura de tres niveles del estándar web: marco (marco HTML), rendimiento (estilo de apariencia css), comportamiento (interacción javascript);
Significado del código de encabezado:

<!DOCTYPE html > 
 <!-- 按照html 5 版本规范解析 -->
<html lang="en">
    <!-- 语言英文 -->
     <head>
         <meta charset="UTF-8">
         <!-- 字符集编码的存储解析方式 -->
         <title>Document</title>

Etiqueta: etiqueta doble, etiqueta única;
Etiquetas de clasificación: etiquetas de encabezado h1 ~ h6, etiquetas de párrafo p, etiquetas de bloque div, etiquetas de intervalo en línea, etiquetas de línea divisoria hr (simple), etiquetas de salto de línea br (simple);
Etiqueta de formato de texto: negrita fuerte, tachado del, cursiva em, subrayado ins;
Etiquetas de imagen:

<h1>科比·布莱恩特</h1>
    <img src="科比.jpg"/>
    <h1>带有alt替换文本</h1>
    <img src="科比1.jpg" alt="科比湖人黄色球衣"/>
    <h1>带有title提示文本</h1>
    <img src="科比.jpg" title="科比斯台普斯中心"/>
    <h1>修改图片大小，宽度width,高度height，边框border</h1>
    <img src="科比.jpg" title="科比斯台普斯中心" width="1000" border="10"/>

Etiqueta de enlace:

<h1>外部链接：</h1>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.bilibili.com">哔哩哔哩</a>
    <h1>内部链接：</h1>
    <a href="demo.html" target="_blank">科比比</a>
    <h1>空链接：</h1>
    <a href="#">2021</a>
    <h1>图像链接：</h1>
    <a href="http://www.baidu.com" target="_blank"><img src="baidu.jpg"/></a>

Ruta: ruta relativa (referencia de imágenes de nivel superior, mismo nivel, nivel inferior ), ruta absoluta

<img src="詹姆斯.jpg"/>
    <!-- 上一级路径用../ ,有几个上级用几个../-->
    <img src="../詹姆斯.jpg"/>
    <!-- 绝对的网络地址 -->
    <img src="https://i0.hdslb.com/bfs/archive/63377ed8bdd05ce5d305cef8d3ec77bc5c7cf617.png"/>

Contenido expandido:
(1) La etiqueta única base puede establecer el estado abierto de la etiqueta general , preste atención para escribirlo en la cabeza <base target="_blank">
(2) Posicionamiento del punto de objetivo: <a href="#1">居民供热换热站运行全部正常</a><br />preste atención para agregar # , <h2 style="color: blue" id="1">居民供热换热站运行全部正常</h2>preste atención a que la identificación sea válida
( 3) etiqueta especial pre: pre El formato del contenido del texto se muestra directamente en la página web, lo que significa que los saltos de línea en pre son efectivos
Caracteres especiales: espacio —— & nbsp; <—— & lt;> —— & gt;

2021.1.12

Tabla y sus atributos: preste atención al reemplazo de celda de la fila tr y cada fila, especialmente td es la primera columna de la tabla; el título puede establecer el título de la tabla; el espacio entre celdas se refiere al espacio entre la celda y el borde de la celda ; cellpadding es Se refiere a la distancia entre el contenido de la celda y el borde de la celda;

<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="30">
        <caption>小说排行榜</caption>
        
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>30</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>25</td>
        </tr>

Estructura de la tabla: establezca la estructura de la tabla a través de thead, tbody, tfoot, haga clic con el botón derecho para ver la página y ver
Fusionar celdas: Tres pasos
(1) Primero, busque la primera celda que se fusionará;
(2) Especifique si fusionar por fila o por columna colspan (fila) / rowspan (columna) = "número de celdas que se fusionarán";
( 3) Eliminar las celdas redundantes fusionadas;

<table border="1" cellspacing="0" width="500" height="100">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td rowspan="2">30</td>
        </tr>
        <tr>
            <td colspan="2">李四</td>
            <!-- <td>男</td> -->
            <!-- <td>25</td> -->
        </tr>

Lista: lista ordenada ol, lista desordenada ul, lista personalizada dl;
Formulario:
entrada:
(1) Tipo de valor: texto del cuadro de texto, contraseña del cuadro de contraseña, botón de radio ridio, casilla de verificación, botón de botón común, botón de envío enviar, reinicio del botón de reinicio, botón de imagen: img (con src), dominio de archivo: archivo (seleccione el botón de archivo local)
(2) Valor de valor: el cuadro de texto indica el contenido de pantalla predeterminado, el botón indica el contenido del botón
(3) Valor de nombre: acoplado con el back-end, fácil de clasificar los datos de entrada
(4) marcado = "marcado" significa seleccionado por defecto

<p>用户名：
<input type="text" value="请输入用户名" name="username"><br/>
        密码：<input type="password" name="password"/></p>
    <p>性别：
        男<input type="radio" name="sex"/>
        女<input type="radio" name="sex" checked="checked"/>
    爱好：
        打篮球<input type="checkbox" name="hobby"/>
        跑步<input type="checkbox" name="hobby"/>
        敲代码<input type="checkbox" name="hobby"/></p>
        <!-- button必须有value值才能显示 -->
        <p><input type="button" value="获取短信验证码" name="sex"/>
            <input type="button"  />
            <input type="submit" value="获取短信验证码" />
            <input type="reset" value="重置所填" />
            <input type="image" src="images/微信登录.png" />

etiqueta:

<h2>label标签用法：</h2>
    <h2>1.label直接包含表单</h2>
    <label>用户名：<input type="text" /></label>
    <h2>2.通过for和id来控制</h2>
    <label for="nc">昵称：</label><input type="text" id="nc" />

textarea: área de texto, mensaje de usuario, el tamaño del cuadro es variable

<p>用户留言：
        <textarea></textarea>
    </p>

seleccionar: lista desplegable con múltiples opciones

<select>
        <option>--请选择省份--</option>
        <option selected="selected">北京</option>
        <option>山西</option>
        <option>河南</option>

Campo de formulario: un marco grande para enmarcar el formulario

<!-- 表单域 -->
    <!-- get可换做post -->
    <form action="" method="get">
        用户名：<input type="text" name="username" /><br />
        密码：<input type="password" name="pass" /><br />
        <input type="submit">
        <input type="reset">
    </form>

2021.1.13

selector de etiquetas CSS: div {}
Selector de clases:<div class="hellow">喜欢男生还是女生</div>

.hellow {
    
    
            width: 100px;
            height: 100px;
            background-color: red;

Selector de nombre de clase múltiple:<div class="box hellow">貂蝉</div>

.box {
    
    
            width: 150px;
            height: 100px;
            font-size: 30px;
        }
        .red {
    
    
            color: grey;
        }

selector de id:<div id="pink">科比·布莱恩特</div>

 #pink {
    
    
            color: yellow;
            background-color: purple;
        }

Selector de comodines:

* {
    
    
            font-size: 50px;
        }

Atributos de font:font-style font-weight font-size font-family;fuente : fuente: estilo inclinado, peso de fuente (números directamente), tamaño de fuente (píxeles), fuente (atributos compuestos, el orden no se puede invertir)font: italic 700 30px "Microsoft yahei";
Atributos del texto:
color: rgb(255,0,0);color color: valores de color predefinidos deepink, skyblue; notación hexadecimal # d617c6 (un par de dos, rojo, verde y azul); código RGB rojo (255, 0, 0).

text-align: center;对齐文本；/* center,left,right*/
text-decoration: underline;装饰文本/* line-through，overline，none*/
text-indent:2em;
line-height: 50px;/* 行间距：文本高度，上间距和下间距*/

Hoja de estilo: hoja de estilo en línea, hoja de estilo interna, hoja de estilo externa

<!-- 内部样式表：<style></style>中放样式，结构与样式相分离，适用于样式较少的情况-->
<!-- 行内样式表：直接在<div></div>中放简单样式，只能控制该标签-->
<!-- 外部样式表：适用于样式较多的情况，完全实现结构与样式相分离，另建一个单独的CSS样式文件 -->
<!-- 外部样式表 样式文件的引入-->
    <link rel="stylesheet" href="style.css">

2021.1.14

sintaxis de emmet:

`<!-- div*10+tab键 -->`
 `<!-- ul>li+tab键 包含关系 -->`
<!-- div+p+tab键 兄弟关系 -->
 <!-- .类名/#id名，可为div直接加类名（默认为div） -->
 <!-- p.a/li#grey,可为其他类型的标签加类名 -->
 <!-- .demo$*3表示同时添加多个按序递增的类名 $表示自增符号-->
 <!-- div{
    
    }表示默认在标签中添加文字 -->
 <!-- div{
    
    }*2表示添加多个相同标签内容 -->
 <!-- div{
    
    $}*3 -->

Emmet genera rápidamente estilos CSS: w100, h200;
Selector de compuestos:

/* 后代选择器 空格隔开，选择所有被包含的子选择器（儿子、孙子、干儿子（同名选择器的子集） */
        ol li {
    
    
            color: pink;
/* 用类名区分 */
        .nav li a {
    
    
            color: green;
        }
/* 子元素选择器，用>隔开，只能选择亲儿子 */
        .choose>li {
    
    
            color: #6868;
        }

Selector de unión:

/* 并集选择器，用逗号隔开，适用于所有类型的选择器（后代、子元素） */
        div,p,.she li {
    
    
            text-align: center;
        }

Selector de pseudo-clase:

/* 链接伪类选择器,用冒号隔开,注意LVHA的顺序不能颠倒*/
        /* a:link选择所有未被访问的链接 */
        /* a:visited选择所有已被访问的链接 */
        /* a:hover选择鼠标位于其上的链接 */
        /* a:active选择鼠标点击还未弹起的链接 */
        /* focus伪类选择器，为选中的表单加样式 */

estilo de visualización css: elemento de bloque; elemento en línea; elemento de bloque en línea;

<!-- html标签可分为块元素，行内元素 -->
    <!-- 块元素，常见块元素有h1~h6,p,div(最典型),ul,ol,li等 -->
        <!-- 特点：
        1.独占一行
        2.高度宽度外边距内边距都可以控制
        3.宽度默认是容器（父级宽度）的100%
        4.是一个容器及盒子，里面可放行内元素或块级元素 -->
        <!-- 注意：
        1.文字类元素内不能放块级元素
        2.p h标签（文字类标签）里面不放块级元素 -->
    <!-- 行内元素，常见行内元素a,strong,b,i,del,s,ins,u,span等 -->
        <!-- 特点：
        1.相邻元素一行显示
        2.宽和高直接设置是无效的
        3.默认宽度为它本身内容的宽度
        4.行内元素只能容纳文本或其他行内元素 -->
        <!-- 注意：
        1.链接中不能再放链接
        2.a中可以放块级元素 -->
    <!-- 行内块元素：常见的img,input,td同时具有块元素和行内元素的特点 -->
        <!-- 特点：
            1.同一行显示，中间有间隙
            2.默认为其本身内容的宽度和高度
            3.高度、宽度、外边距及内边距都可以控制 -->

Conversión del modo de visualización:display: block; display: inline; display: inline-block;

2021.1.15

fondo css:

div {
    
    
            width: 1000px;
            height: 2000px;
            /* 背景颜色不设置相当于默认transparent(透明) */
            background-color: pink;
            /* 背景图片，网页中logo或者超大的图片或者小的装饰图片 */
            /* 注意图片如果太大，与盒子宽高比例不符合的话是不会显示的 */
            background-image: url(images/zhu.jpg);
            /* 背景平铺 默认平铺*/
            /* background-repeat: repeat; */
            background-repeat: no-repeat;
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
            /* 背景颜色和背景图片可以同时添加，但图片会压盖图片 */
            /* 背景图片的位置 */
            /* 1.如果是方位名词与顺序无关 */
            /* 
            /* 垂直top,center,bottom
            水平right,center,left */
            /* background-position: center right;  */
            /* background-position: right center; */
            /* 如果只指定一个参数，那么另一个参数你默认垂直居中 */
            /* background-position: top; */

            /* 2.如果是精确单位 第一个一定是x,第二个一定是y */
            /* background-position: 10px 20px; */
            /* 只指定一个值，一定是x坐标 y默认垂直居中*/
            /* background-position: 10px; */

            /* 3.混合单位，精确单位和方位名词混合使用，第一个一定是x */
            background-position: 40px center;
        }

Fondo fijo:

/* 背景固定：scroll（滚动）/fixed（固定） 默认是随文字滚动*/
            background-attachment: fixed;

Fondo translúcido:

/* 背景颜色半透明写法 */
            background: rgba(0, 0, 0, 0.3);

Escritura compuesta de atributos de fondo:

/* 背景属性的复合写法 */
            background: pink url(images/rongyao1.jpg) no-repeat center top 14px fixed;

2021.1.17

Tres características de CSS: cascada, herencia, prioridad;
Cascada: el principio de proximidad, el primero se sobrescribirá cuando el atributo entre en conflicto, y las condiciones de uso: el mismo selector de atributo en conflicto
Herencia: heredado de la industria principal, solo se pueden heredar los estilos relacionados con el texto, lo que tiene el efecto de simplificar el código
Herencia de la altura de la fila:

body {
    
    
            font: 12px/1.5 'Microsoft yahei';
        }

div {
    
    
            /* 子元素继承了body的行高1.5 即当前文字大小的1.5倍 1.5*20=30*/
            font-size: 20px;
        }

Prioridad:! Important> Estilo en línea style = ""> Selector de ID> Selector de clase, selector de pseudo-clase> Selector de elementos> Herencia o * Nota: La prioridad de herencia es 0, aunque el padre tiene! Importante. Color propio
Prioridad del selector compuesto:

/* 复合选择器会有权重叠加的效果 */
        ul li {
    
    
            /* 权重为0,0,0,0,1+0,0,0,0,1=0,0,0,0,2 */
            color: purple;
        }

        li {
    
    
            /* 权重为0,0,0,1 */
            color: orange;
        }