Directorio de artículos

HTML
CSS (hojas de estilo en cascada)
javascript

HTML

Sitio web de aprendizaje: https://jquery.cuishifeng.cn/index.html

1. Conociendo HTML

HTML5+CSS3

1.1 ¿Qué es HTML?

Lenguaje de marcado de hipertexto - (Lenguaje de marcado de hipertexto)

Hipertexto: texto, imágenes, audio, vídeo, animación, etc.

W3C: World Wide Web Consortium - World Wide Web Consortium - Organismo neutral de normas técnicas

estándar W3C

Lenguajes estándar estructurados (HTML, XML)
Lenguaje estándar de presentación (CSS)
Estándares de comportamiento (DOM, ECMAScript)

2. Etiquetas básicas de páginas web

<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta: 描述性标签  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="音乐">
    <meta name="description" content="了解音乐">
    <!--   网页标题 -->
    <title>我的第一个界面</title>
</head>
<body>
<!--网页主体-->

</body>
</html>

2.1 Etiqueta de título

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

2.2 Etiquetas de párrafo

<!--段落标签-->
<p>《如果声音不记得》是郭敬明监制，落落执导，章若楠、孙晨竣领衔主演 。</p>
<p>该片根据落落的同名中篇小说改编，讲述了一个隐藏着秘密的男生喜欢上一个抑郁症女孩的故事。 </p>
<p>该片于2020年12月4日在中国大陆上映</p>

2.3 Etiquetas de nueva línea

<!--换行标签-->
《如果声音不记得》是郭敬明监制，落落执导，章若楠、孙晨竣领衔主演。<br/>
该片根据落落的同名中篇小说改编，讲述了一个隐藏着秘密的男生喜欢上一个抑郁症女孩的故事。<br/>
该片于2020年12月4日在中国大陆上映<br/>

2.4 Etiquetas de líneas horizontales

<!--水平线标签-->
<hr/>

2.5 Etiquetas de estilo de fuente

粗体：<stronger>wolves - singer：selena</stronger>
斜体： <em>wolves - singer：selena</em>

2.6 Comentarios y símbolos especiales

空格 
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
大于号：&gt; 
小于号：&lt; 
版权符号：&copy;版权所有吴青峰

3. Imágenes, hipervínculos, diseño de página.

3.1 Imagen

Formatos de imagen comunes

JPEG
PNG
GIF
BMP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<!--
src:图片地址
    相对地址(推荐地址)、绝对地址
    ../ - 上一级目录

alt:找不到图片，会显示的内容
title:鼠标悬停在图片上面，会显示的文字
-->
<img src="../resources/image/1.jpg" alt="如果声音不记得" title="悬停文字：《如果声音不记得》">

</body>
</html>

3.2 Etiquetas de enlace

enlace entre páginas

<body>
<!--a标签学习
href：必填，表示要跳转到哪个界面！
target：表示窗口在那里打开
    _blank：在新标签页中打开
    _self：在当前页面打开
-->
<a href="1第一个页面.html" target="_blank">自制一！</a>
<a href="https://baike.baidu.com/" target="_self">点击我- 百度百科</a>
<a href="1第一个页面.html">
    <img src="../resources/image/1.jpg" alt="如果声音不记得" title="悬停文字：《如果声音不记得》">
</a>
</body>

enlace de anclaje

<!--使用name作为标记！-->
<a name="top">顶部</a>
...
...
...
<!--锚链接
1.需要一个标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>

enlace funcional

<!--功能性链接
邮件链接：mailto
QQ链接：
-->
<a href="mailto:[email protected]">点击：联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1473888925:53" alt="加我，了解吴青峰" title="加我，了解吴青峰"/></a>

3.3 Diseño de página web

elemento de bloque

No importa cuánto contenido, el elemento ocupa una sola línea.

<p>  
<h1> 
<h6>

elemento en línea

elementos en una línea

<strong>
<em>

4. Listas, tablas, elementos multimedia.

4.1 lista

Clasificación de listas

lista ordenada

<ol>
    <li>年轮说</li>
    <li>迷幻</li>
    <li>低低星垂</li>
    <li>一点点</li>
</ol>

lista desordenada

<ul>
    <li>年轮说</li>
    <li>迷幻</li>
    <li>低低星垂</li>
    <li>一点点</li>
</ul>

lista personalizada

<!--自定义列表
dl：标签
dt：列表名称/列表标题
dd：列表内容
-->
<dl>
    <dt>吴青峰</dt>
    <dd>年轮说</dd>
    <dd>迷幻</dd>
    <dd>低低星垂</dd>
    <dd>一点点</dd>
</dl>

4.2 Formulario

estructura basica

Celúla
DE ACUERDO
Lista
interbancario
a través de columnas

<!--表格
行：tr rows
列：td

-->
<table border="1px">
    <tr>
        <!-- colspan - 跨列-->
        <td colspan="3">上学了</td>
    </tr>
    <tr>
        <!-- rowspan - 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

4.3 Elementos multimedia

elemento de vídeo

<!--视频
src：视频地址
controls：控制条，显示在界面上；不设置的话，则不显示
autoplay：设置自动播放
-->
<video src="../resources/video/***.mp4" controls autoplay></video>

elemento sonoro

<!--音频
src：音频地址
controls：控制条，显示在界面上；不设置的话，则不显示
autoplay：设置自动播放
-->
<audio src="../resources/audio/***.mp3" controls autoplay></audio>

5. Análisis de la estructura de la página.

nombre del elemento	describir
encabezamiento	El contenido del área del encabezado del título (para una página o un área en una página)
pie de página	El contenido del área del encabezado y pie de página (para toda la página o un área de la página)
sección	Un área independiente en una página web
artículo	Contenido del artículo independiente
aparte	Contenido o aplicaciones relacionados (usados a menudo en las barras laterales)
navegación	Contenido auxiliar de navegación

<body>

<header><h2>网页头部</h2></header>

<section><h2>网页主体部分</h2></section>

<footer><h2>网页脚部</h2></footer>

</body>

6. marco en línea iframe

<body>
<!--iframe
src：地址
width：宽度
height：高度
-->

<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="800px" height="500px"></iframe>

</body>

<body>
<!--iframe
src：地址
width：宽度
height：高度

-->

<iframe src="" name="hello" frameborder="0" width="800px" height="500px"></iframe>

<a href="1第一个页面.html" target="hello">点击跳转</a>

</body>

7. Etiqueta del formulario (énfasis)

Elementos básicos del formulario

Atributos	ilustrar
tipo	El tipo de elemento especificado. texto, contraseña, casilla de verificación, radio, enviar, restablecer, archivo, oculto, imagen, botón, el valor predeterminado es texto
nombre	Especifica el nombre del elemento del formulario.
valor	El valor inicial del elemento. Se debe especificar un valor cuando el tipo es radio
tamaño	Especifica el ancho inicial del elemento de formulario. Cuando el tipo es texto o contraseña, el tamaño del elemento del formulario está en caracteres. Para otros tipos, el ancho está en píxeles.
longitud máxima	Cuando el tipo es texto o contraseña, el número máximo de caracteres ingresados
comprobado	Cuando el tipo es radio o casilla de verificación, especifique si el botón está seleccionado

conocimiento básico

<!--表单
action：表单提交的位置，可以是网站，也可以是一个请求处理的地址
method：post get 提交方式
    get:我们可以在url中看到我们提交的信息，不安全，但高效
        http://localhost:63342/HTML/html/****?username=admin&pwd=123456
    post:在url中看不到我们提交的信息，可以传输大文件
-->
<form action="1第一个页面.html" method="get">
    ...
</form>

cuadro de entrada de texto

<!--文本输入框：input
type="text"
value：默认值
maxlength：文本框输入的最大长度
size：文本框的大小 - 长度
-->
<p>名字：
    <input type="text" name="username">
</p>

cuadro de entrada de contraseña

<p>密码：
    <input type="password" name="pwd">
</p>

Caja individual

<!--单选框标签：input
type="radio"
value：单选框的值
name：代表一个组
-->
<p>性别：
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>

Caja

<!--多选框input
type="checkbox"
name:代表一个组
value：单选框的值
-->
<p>
    <input type="checkbox" value="sleep" name="hobbys">睡觉
    <input type="checkbox" value="code" name="hobbys">敲代码
    <input type="checkbox" value="chat" name="hobbys">聊天
    <input type="checkbox" value="movie" name="hobbys">看电影
</p>

botón

<!--按钮
type="button" - 普通按钮
value：按钮上面的文字

type="image" - 图片按钮
type="submit" - 提交按钮
type="reset" - 重置按钮（清空现在自己写的东西）
-->
<p>按钮：
    <!--普通按钮-->
    <input type="button" name="btn1" value="点击开启">
    <!--图片按钮-->
    <input type="image" src="../resources/image/1.jpg">
    <!--提交-->
    <input type="submit">
    <!--重置-->
    <input type="reset">
</p>

campo de archivo

<!--文件域-->
<p>
    <input type="file" name="files">
</p>

caja desplegable

<!--下拉框、列表框
select
option：选项
-->
<p>国家
    <select name="列表名称" id="">
        <option value="国家名称">中国</option>
        <option value="国家名称" selected>冰岛</option>
        <option value="国家名称">瑞士ETH</option>
        <option value="国家名称">印度</option>
    </select>
</p>

campo de texto

<!--文本域
textarea
cols="10"：列
rows="5"：行
-->
<p>反馈：
    <textarea name="textarea" cols="10" rows="5">文本内容</textarea>
</p>

verificación sencilla

<!--邮件验证-->
<p>邮箱：
    <input type="email" name="email">
</p>

<!--url验证-->
<p>url：
    <input type="url" name="url">
</p>

<!--数字验证-->
<p>num：
    <input type="number" name="num" max="100" min="0" step="2">
</p>

control deslizante

<!--滑块-->
<p>滑块：
    <input type="range" max="200">
</p>

barra de búsqueda

<!--搜索框-->
<p>搜索框：
    <input type="search" name="search">
</p>

8. Formulario de solicitud (énfasis)

campo escondido

<p>密码：
    <input type="password" name="pwd" hidden>
</p>

solo lectura

<p>名字：
    <input type="text" name="username" value="admin" readonly>
</p>

desactivado

<p>
    <input type="radio" value="boy" name="sex" disabled>男
</p>

9. Formar la primera experiencia (énfasis)

Por qué validar formularios

solicitar presión
Seguridad

forma común

marcador de posición - mensaje de sugerencia
requerido - no nulo
patrón - expresión regular - (¡Vaya a Baidu usted mismo!)

<!--文本输入框：input
type="text"
value：默认值
maxlength：文本框输入的最大长度
size：文本框的大小 - 长度
placeholder：提示信息
requied：不能为空
pattern：正则表达式
-->
<p>名字：
    <input type="text" name="username" placeholder="请输入用户名" required>
</p>

<p>自定义邮箱：
    <input type="text" value="DIY_email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>

CSS (hojas de estilo en cascada)

pasos de aprendizaje

¿Qué es CSS?
Cómo utilizar CSS (Inicio rápido)
Selectores CSS (puntos clave + puntos difíciles)
Embellecer páginas web (texto, sombras, hipervínculos, listas, degradados...)
modelo de caja
flotar
posición
Animación web (efectos especiales)

1. ¿Qué es CSS?

como estudiar

¿Qué es CSS?
Cómo utilizar CSS (Inicio rápido)
Selectores CSS (puntos clave + puntos difíciles)
Embellecer páginas web (texto, sombras, hipervínculos, listas, degradados...)
modelo de caja
flotar
posición
Animación web (efectos especiales, efectos)

11. ¿Qué es CSS?

Hoja de estilos en cascada en cascada Hoja de estilos en cascada

CSS: Presentación (embellecer páginas web)

Fuentes, colores, márgenes, alturas, anchos, imágenes de fondo, posicionamiento de la página, flotadores de página...

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-SFzgZpqc-1690205525401) (front end.assets/20200516234621388.jpg)]

1.2 Historia del desarrollo

CSS1.0:

CSS2.0: DIV (bloque) + CSS, la idea de separar estructuras HTML y CSS, simplificar las páginas web, SEO

CSS2.1: posicionamiento flotante

CSS3.0: esquinas redondeadas, sombras, animaciones... (compatible con navegador~)

1.3 Inicio rápido

Entrada básica

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范 <style> 可以编写css的代码 ,每一个声明，最好使用分号结尾
    语法：
        选择器 {
            声明1;
            声明2;
            声明3;
        }
    -->
    <!--方式一-->
    <style>
        /*h1{
            color: red;
        }*/
    </style>

    <!--方式二，建议使用这个规范-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<h1>我是标题</h1>
</body>
</html>
12345678910111213141516171819202122232425262728

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-sanguijuela, se recomienda guardar la imagen y cargarla directamente (img-Cou5Kipu-1690205525401) (front end.assets/2020051623465811.jpg)]

Ventajas de CSS:

1. Separación de contenido y desempeño

2. La estructura de la página web está unificada y se puede reutilizar.

3. Los estilos son muy ricos.

4. Se recomienda utilizar archivos css independientes de html.

5. ¡Usando SEO, es fácil ser indexado por los motores de búsqueda!

1.4 Tres formas de importar CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
      
      
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--优先级：就近原则（谁离h1标签近谁的优先级高）-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red;">我是标题</h1>
</body>
</html>

/*外部样式*/
h1{
    color: yellow;
}

Expansión: dos formas de escribir estilos externos

Encadenado (uso generalmente recomendado):

HTML

<!--外部样式-->
<link rel="stylesheet" href="css/style.css">

tipo de importación:

@import es específico de CSS2.1

<!--导入式-->
<style>
	@import url("css/style.css");
</style>

2. Selector

Función: seleccionar un determinado elemento o un determinado tipo de elemento en la página

2.1 Selectores básicos

1. Selector de etiquetas: seleccione un tipo de etiqueta etiqueta{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择*/
        h1{
      
      
            color: #a13d30;
            background: #3cbda6;/*背景色*/
            border-radius: 24px;/*圆角*/
        }
        p{
      
      
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>

</body>
</html>

2. Clase de selector de clase: seleccione todas las etiquetas con el mismo atributo de clase, entre etiquetas. Nombre de clase {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式   .class的名称{}
        好处：可以多个标签归类，是同一个 class,可以复用
        */
        .liusx{
      
      
            color: blue;
        }
        .kuangshen{
      
      
            color: #a13d30;
        }
    </style>
</head>
<body>

<h1 class="liusx">标题1</h1>
<h1 class="kuangshen">标题1</h1>
<h1 class="liusx">标题1</h1>
<p class="kuangshen">p标签</p>
</body>
</html>

3. Selector de identificación: #nombre de identificación globalmente único{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器：id必须保证全局唯一
           #id名称{}
           不遵循就近原则，固定的
           id选择器 > class选择器 > 标签选择器
        */
        #liusx{
      
      
            color: red;
        }
        .style1{
      
      
            color: #3cbda6;
        }
        h1{
      
      
            color: blue;
        }
    </style>
</head>
<body>

<h1 id="liusx" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

Prioridad : selector de identificación> selector de clase> selector de etiqueta

2.2 Selector de jerarquía

1. Selector de descendientes: detrás de un determinado elemento, abuelo, abuelo, papá, tú

/*后代选择器*/
body p{
    
    
	background: red;
}

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-VblUoTed-1690205525402) (front end.assets/20200516234733415.jpg)]

2. Selector de niños: generación, hijo.

/*子选择器*/
body>p{
    
    
    background: #3cbda6;
}

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-ZIzpEV2q-1690205525403) (front end.assets/20200516234753606.jpg)]

3. Selector de hermano adyacente: el próximo i de la misma generación

/*相邻兄弟选择器，只有一个，相邻（向下）*/
.active + p{
    
    
    background: #a13d30;
}
1234

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-mR3g1P2a-1690205525403) (front end.assets/20200516234803162.jpg)]

4. Selector universal: todo lo siguiente entre pares

/*通用兄弟选择器，当前选中元素的向下所有兄弟元素*/
.active~p{
    
    
    background: blueviolet;
}

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-sanguijuela, se recomienda guardar la imagen y cargarla directamente (img-TZalqc9b-1690205525403) (front end.assets/20200516234815639.jpg)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{
            background: green;
        }*/

        /*后代选择器*/
        /*body p{
            background: red;
        }*/

        /*子选择器*/
        /*body>p{
            background: #3cbda6;
        }*/

        /*相邻兄弟选择器，只有一个，相邻（向下）*/
        /*.active + p{
            background: #a13d30;
        }*/

        /*通用兄弟选择器，当前选中元素的向下所有兄弟元素*/
        .active~p{
      
      
            background: blueviolet;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

<p>p7</p>
<p>p8</p>
</body>
</html>

2.3 Selectores de pseudoclases estructurales

Pseudoclase: condición

/*ul的第一个子元素*/
ul li:first-child{
    
    
    background: #a13d30;
}

/*ul的最后一个子元素*/
ul li:last-child{
    
    
    background: red;
}

/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个子元素为p的
按顺序
*/
p:nth-child(2){
    
    
    background: blue;
}

/*选中父元素，下的p元素的第二个，按类型*/
p:nth-of-type(1){
    
    
    background: yellow;
}
12345678910111213141516171819202122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--避免使用，class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
    
    
            background: #a13d30;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
    
    
            background: red;
        }

        /*选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个子元素为p的
        按顺序
        */
        p:nth-child(2){
    
    
            background: blue;
        }

        /*选中父元素下的p元素的第二个，按类型*/
        p:nth-of-type(1){
    
    
            background: yellow;
        }

        a:hover{
    
    
            background: black;
        }
    </style>
</head>
<body>
    <!--<h1>h1</h1>-->
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

    <a href="">链接标签</a>
</body>
</html>

2.4 Selector de atributos (de uso común)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
      
      
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性名，属性名 = 属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */

        /*存在id属性的元素：a[]{}*/
        /*a[id]{!*所有带id的a标签*!
            background: yellow;
        }*/
        /*id=first的元素*/
        /*a[id=first]{
            background: blue;
        }*/
        /*class中有links的元素*/
        /*a[class*=links]{
            background: yellow;
        }*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background: yellow;
        }*/
        /*选中href中以pdf结尾的*/
        a[href$=pdf]{
      
      
            background: yellow;
        }

    </style>
</head>
<body>

<p class="demo">
    <a href="http://baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

 = 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-0fkAQ53T-1690205525404) (front end.assets/20200516234851992.jpg)]

3. Embellecer los elementos de la página web.

3.1. Por qué embellecer la página web

1. Transmitir eficazmente la información de la página web

2. Embellecer la página web, la página es hermosa, para atraer usuarios.

3. Resalta el tema de la página.

4. Mejorar la experiencia del usuario

etiqueta span: las palabras que se resaltarán, use span para cubrir

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
      
      
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>

3.2 Estilo de fuente

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    font-family：字体
    font-size：字体大小
    font-weight：字体的粗细
    color：字体颜色
    -->
    <style>
        body{
      
      
            font-family:"Arial Black" ,楷体;
            color: #a13d30;
        }
        h1{
      
      
            font-size: 50px;
        }
        .p1{
      
      
            font-weight: lighter;
        }
    </style>
</head>
<body>

<h1>故事介绍</h1>

<p class="p1">
    物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。
    小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。
    按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
</p>
<p>
    按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
</p>

<p>
    Hooray! It's snowing! It's time to make a snowman.James runs out.
    He makes a big pile of snow. He puts a big snowball on top.
    He adds a scarf and a hat. He adds an orange for the nose.
    He adds coal for the eyes and buttons.In the evening,
    James opens the door. What does he see? The snowman is moving!
    James invites him in. The snowman has never been inside a house.
    He says hello to the cat. He plays with paper towels.A moment later,
    the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying!
    What a wonderful night!The next morning,
    James jumps out of bed. He runs to the door.He wants to thank the snowman. But he's gone.
</p>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--字体风格-->
    <style>
        p{
      
      
            font: oblique bolder 12px "楷体";
        }
    </style>
</head>
<body>

<p>
    按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
</p>

</body>
</html>

familia de fuentes: fuente
tamaño de fuente: tamaño de fuente
peso de fuente: el grosor de la fuente
color: color de fuente

3.3 Estilos de texto

1. Color: color, rgb, rgba

2. Alineación del texto: alineación del texto: centro;

3. Sangría de la primera línea: text-indext: 2em;

4. **Altura de línea: **altura de línea: 100 px; ¡el texto de una sola línea está centrado hacia arriba y hacia abajo! altura de línea = altura

5. Subrayado: decoración de texto:;

6. Alineación horizontal de texto e imágenes: alineación vertical: medio;

text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/
img,span{
    
    vetical-align:middle}/*图片、文字水平对齐*/
12345
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    颜色：
        单词：#FFFFFF
        RGB：0~F ,rgb(0,255,255)
        RGBA：A（透明度）：0~1,rgba(0,255,255,0.9)
        text-indent：段落首行缩进
        line-height: 300px;
            行高 和 块的高度一致，就可以上下居中
    -->
    <style>
        h1{
    
    
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
    
    
            text-indent: 2em;
        }
        .p3{
    
    
            background: blueviolet;
            height: 300px;
            line-height: 50px;
        }

        /*下划线*/
        .l1{
    
    
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
    
    
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
    
    
            text-decoration: overline;
        }
        /* a标签去除下划线 */
        a1{
    
    
            text-decoration: none;
        }

        /* 水平对齐~ 参照物， a，b */
        img,span{
    
    
            vertical-align: middle;
        }
    </style>
</head>
<body>

<a href="">a标签去除下划线</a>

<p class="l1">123321</p>
<p class="l2">123321</p>
<p class="l3">123321</p>

<h1>故事介绍</h1>

<p class="p1">
    物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。
    小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。
    按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
</p>
<p>
    按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
</p>

<p class="p3">
    Hooray! It's snowing! It's time to make a snowman.James runs out.
    He makes a big pile of snow. He puts a big snowball on top.
    He adds a scarf and a hat. He adds an orange for the nose.
    He adds coal for the eyes and buttons.In the evening,
    James opens the door. What does he see? The snowman is moving!
    James invites him in. The snowman has never been inside a house.
    He says hello to the cat. He plays with paper towels.A moment later,
    the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying!
    What a wonderful night!The next morning,
    James jumps out of bed. He runs to the door.He wants to thank the snowman. But he's gone.
</p>


<p>
    <img src="images/a.png" alt="">
    <span>abcdefghijklmnabcdefghijklmn</span>
</p>

</body>
</html>

3.4 Sombra

/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    
    
    text-shadow: #008800 20px -10px 2px;
}
/*	第一个参数：表示水平偏移
	第二个参数：表示垂直偏移
	第三个参数：表示模糊半径
	第四个参数：表示颜色
*/
text-shadow:5px 5px 5px 颜色

3.5 Pseudoclase de hipervínculo

/* 未访问的链接 */
a:link {
    
    color: #FF0000}
/* 已访问的链接,点击之后的状态*/
a:visited {
    
    color: #00FF00}
/* 鼠标移动到链接上,鼠标悬浮的状态*/
a:hover {
    
    color: #FF00FF}
/* 选定的链接,鼠标按住未释放的状态*/
a:active {
    
    color: #0000FF}
12345678
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 默认颜色 */
        a{
    
    
            text-decoration: none;
            color: #000000;
        }
        /* 鼠标悬浮的颜色 （只需要记住这个）*/
        a:hover{
    
    
            color: burlywood;
            font-size: 30px;
        }
        /* 鼠标按主未释放的状态 */
        a:active{
    
    
            color: #008800;
        }
        /* 未访问的链接 */
        a:link{
    
    
            color: maroon;
        }
        /* 已访问的链接 */
        a:visited{
    
    
            color: darkmagenta;
        }
        /* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
    
    
            text-shadow: #008800 20px -10px 2px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/a.jpg" alt="">
</a>
<p>
    <a href="#">码出高校：Java开发手册</a>
</p>
<p>
    <a href="">作者：孤尽老师</a>
</p>
<p id="price">
    ￥99
</p>

</body>
</html>

3.6 Lista

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
            <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
            <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
            <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">中标</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
            <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
            <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
        </ul>
    </div>
</body>
</html>

#nav{
    width: 300px;
    background: darkgrey;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li
list-style:
    none：去掉圆点
    circle：空心圆
    decimal：数字
    spuare：正方形
*/
ul{
    background: darkgrey;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.7 Antecedentes

Color de fondo: fondo

Imagen de fondo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
      
      
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/tx.jpg");
            /*默认是全部平铺的 repeat*/
        }
        .div1{
      
      
            background-repeat: repeat-x;
        }
        .div2{
      
      
            background-repeat: repeat-y;
        }
        .div3{
      
      
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

Continuando con el caso de 3.6, agregando una imagen de fondo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
            <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
            <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
            <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">中标</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
            <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
            <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
        </ul>
    </div>
</body>
</html>
#nav{
    width: 300px;
    background: darkgrey;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red url("../images/c.jpg") 270px 10px no-repeat;
}
/*ul li
list-style:
    none：去掉圆点
    circle：空心圆
    decimal：数字
    spuare：正方形
*/
/*ul{
    background: darkgrey;
}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/b.jpg");
    background-repeat: no-repeat;
    background-position: 236px 2px;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-sanguijuela, se recomienda guardar la imagen y cargarla directamente (img-28FHVJmQ-1690205525404) (front end.assets/20200516234947357.jpg)]

3.8 Degradado

https://www.grabient.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--径向渐变，圆形-->
    <style>
        body{
      
      
            background-color: #FFFFFF;
            background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
        }
    </style>
</head>
<body>

</body>
</html>

4. modelo de caja

4.1 ¿Qué es el modelo de caja?

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-sanguijuela, se recomienda guardar la imagen y cargarla directamente (img-maIzNvBr-1690205525405) (front end.assets/20200516235001615.jpg)]

margen: margen

relleno: relleno

frontera: frontera

4.2 Frontera

1. El grosor del borde

2. El estilo de la frontera

3. El color del borde

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*body总有一个默认的外边框margin：0,常见的*/
        /*body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }*/
        /*border:粗细，样式，颜色*/
        #box{
      
      
            width: 300px;
            border: 1px solid red;
        }

        h2{
      
      
            font-size: 16px;
            background-color: cornflowerblue ;
            line-height: 30px;
            margin: 0px;
        }

        form{
      
      
            background: #008800;
        }
        div:nth-of-type(1) input{
      
      
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
      
      
            border: 3px dashed yellow;
        }
        div:nth-of-type(3) input{
      
      
            border: 2px dashed green;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>

    </form>
</div>

</body>
</html>

4.3 Márgenes interior y exterior

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--外边距的妙用：居中元素
    margin: 0 auto;
    -->
    <style>

        /*border:粗细，样式，颜色*/
        #box{
      
      
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        /*
        顺时针选中
        margin: 1px
        margin: 1px 2px 3px;
        margin: 1px 2px 3px 4px;
        */
        h2{
      
      
            font-size: 16px;
            background-color: cornflowerblue ;
            line-height: 30px;
            margin: 0px;
        }

        form{
      
      
            background: #008800;
        }

        input{
      
      
            border: 1px solid black;
        }
        div:nth-of-type(1){
      
      
            padding: 10px 5px;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>

    </form>
</div>

</body>
</html>

El método de cálculo de la caja: ¿qué tamaño tiene tu elemento?

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-HqIaJcFP-1690205525405) (front end.assets/20200516235029566.png)]

margen + borde + relleno + ancho del contenido

4.4 Borde redondeado

4 esquinas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    左上 右上 右下 左下，顺时针方向
    -->
    <!--
        圆圈： 圆角 = 半径
    -->
    <style>
        div{
      
      
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
      
      
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
        }
        #div2{
      
      
            width: 100px;
            height: 50px;
            border: 10px solid red;
            border-radius: 100px 100px 0 0;
        }
        #div3{
      
      
            width: 50px;
            height: 50px;
            border: 10px solid red;
            border-radius: 100px 0 0 0;
        }
        img{
      
      
            border-radius: 100px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

<img src="images/tx.jpg" alt="">
</body>
</html>

4.5 Sombra del cuadro (explica el conocimiento del front-end)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--margin：0 auto; 居中
    要求：块元素，块元素有固定宽度-->
    <style>
        img{
      
      
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div>
    <div style="width: 500px;display: block;text-align: center ">
        <div>
            <img src="images/tx.jpg" alt="">
        </div>
    </div>
</div>
</body>
</html>

Inicio de códigos fuente: https://www.mycodes.net/

Casa de plantillas: http://www.cssmoban.com/

5. Flotando

5.1 Flujo de documentos estándar

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-mzRXQMMM-1690205525406) (front end.assets/2020051623505262.png)]

Elementos a nivel de bloque: línea exclusiva h1-h6 p lista div...

Elementos en línea: no ocupen una sola línea a img strong

Nota: Los elementos en línea se pueden incluir en elementos a nivel de bloque, pero viceversa.

5.2.pantalla (importante)

bloque: elemento de bloque
en línea: elementos en línea
bloque en línea: es un elemento de bloque, pero puede estar en línea, en una línea (más a menudo se usa flotante)
ninguno: desaparecer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联，在一行
    none 隐藏
    -->
    <style>
        div{
      
      
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }
        span{
      
      
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

Esta también es una forma de realizar la disposición de los elementos en la fila, en ese momento usábamos float en muchos casos.

Práctica de miembros de QQ :

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-ArQZjYGL-1690205525407) (front end.assets/2020051623511781.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ会员</title>
    <style>
        *{
      
      
            padding:0;
            margin: 0;
        }
        a{
      
      
            text-decoration: none;
        }
        .nav-header{
      
      
            height: 90px;
            width: 100%;
            background: rgba(0,0,0,.6);
        }
        .head-contain{
      
      
            width: 1180px;
            height: 90px;
            margin: 0 auto;
            text-align: center;
        }
        .top-logo,.top-nav,.top-nav li,.top-right{
      
      
            height: 90px;
            display: inline-block;
            vertical-align: top;
        }
        .top-nav{
      
      
            margin: 0 48px;
        }
        .top-nav li{
      
      
            line-height: 90px;
            width: 90px;
        }
        .top-nav li a{
      
      
            display: block;
            text-align: center;
            font-size: 16px;
            color: #fff;
        }
        .top-nav li a:hover{
      
      
            color: blue;
        }

        .top-right a{
      
      
            display: inline-block;
            font-size: 16px;
            text-align: center;
            margin-top: 25px;
            border-radius: 35px;
        }
        .top-right a:first-of-type{
      
      
            width: 93px;
            height: 38px;
            line-height: 38px;
            color: #fad65c;
            border: 1px #fad65c solid;
        }
        .top-right a:first-of-type:hover{
      
      
            color: #986b0d;
            background: #fad65c;
        }
        .top-right a:last-of-type{
      
      
            width: 140px;
            height: 40px;
            font-weight: 700;
            line-height: 40px;
            background: #fad65c;
            color: #986b0d;
        }
        .top-right a:last-of-type:hover{
      
      
            background: #fddc6c;
        }
    </style>
</head>
<body>
<div class="wrap">
    <!--头部-->
    <header class="nav-header">
        <div class="head-contain">
            <a href="" class="top-logo"><img src="img/QQ.png" width="145" height="90" /></a>
            <nav class="top-nav">
                <ul>
                    <li><a href="">功能特权</a> </li>
                    <li><a href="">游戏特权</a> </li>
                    <li><a href="">生活特权</a> </li>
                    <li><a href="">会员特权</a> </li>
                    <li><a href="">成长体系</a> </li>
                    <li><a href="">年费专区</a> </li>
                    <li><a href="">超级会员</a> </li>
                </ul>
            </nav>
            <div class="top-right">
                <a href="">登录</a>
                <a href="">开通超级会员</a>
            </div>
        </div>
    </header>
</div>
</body>
</html>

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-PMkgzNlO-1690205525407) (front end.assets/20200516235138116.png)]

5.3.flotar

1. Flotador flotante a izquierda y derecha.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/1.png" alt=""></div>
    <div class="layer02"><img src="images/2.png" alt=""></div>
    <div class="layer03"><img src="images/3.png" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，知道它的外边缘碰到包含或另一个浮动盒子为止
    </div>
</div>
</body>
</html>
123456789101112131415161718
div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;/*向左浮动*/
    clear: both;/*清楚浮动*/
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
    clear: both;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: left;
    clear: both;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    float: left;
    clear: both;
}

5.4 Problema del colapso de la frontera principal

claro

/*
clear：right；右侧不允许有浮动元素
clear：left； 左侧不允许有浮动元素
clear：both； 两侧不允许有浮动元素
clear：none； 
 */
.layer04{
    
    
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: left;
}

solución

1. Aumentar la altura del elemento padre.

#father{
    
    
    border: 1px #000 solid;
    height: 800px;
}

2. Agregue una etiqueta div (class="clear") vacía para borrar el flotante

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/1.png" alt=""></div>
    <div class="layer02"><img src="images/2.png" alt=""></div>
    <div class="layer03"><img src="images/3.png" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，知道它的外边缘碰到包含或另一个浮动盒子为止
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
    height: 800px;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;/*向左浮动*/
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
/*
clear：right；右侧不允许有浮动元素
clear：left； 左侧不允许有浮动元素
clear：both； 两侧不允许有浮动元素
clear：none；
 */
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: left;
}
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3 、 desbordamiento

在父级元素中增加一个	
	overflow: hidden;
	overflow: scroll;
123
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #content{
            width: 200px;
            height: 150px;
            overflow: scroll;
        }
    </style>
</head>
<body>

<div id="content">
    <img src="images/1.png" alt="">
    <p>
        某雌性生物醉倒在草地上，路人对其上下其手，并在草地上翻滚，一番折腾后某雌性生物迷迷糊糊醒来步履蹒跚地离开了
    </p>
</div>
</body>
</html>

4. Agregue una pseudoclase a la clase principal: después

#father:after{
    content: '';
    display: block;
    clear: both;
}
12345
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px #000 solid;
        }
        #father:after{
            content: '';
            display: block;
            clear: both;
        }
        .layer01{
            border: 1px #F00 dashed;
            display: inline-block;
            float: left;/*向左浮动*/
        }
        .layer02{
            border: 1px #00F dashed;
            display: inline-block;
            float: left;
        }
        .layer03{
            border: 1px #060 dashed;
            display: inline-block;
            float: right;
        }
        /*
        clear：right；右侧不允许有浮动元素
        clear：left； 左侧不允许有浮动元素
        clear：both； 两侧不允许有浮动元素
        clear：none；
         */
        .layer04{
            border: 1px #666 dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: right;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="../lesson06/images/1.png" alt=""></div>
    <div class="layer02"><img src="images/2.png" alt=""></div>
    <div class="layer03"><img src="images/3.png" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，知道它的外边缘碰到包含或另一个浮动盒子为止
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

resumen:

Agregue un div vacío después del elemento flotante

Simple, intenta evitar divs vacíos en el código.
establecer la altura del elemento padre

Sencillo, si el elemento tiene una altura fija, será limitado
Desbordamiento

Simple, algunos escenarios desplegables evitan el uso
La clase padre agrega una pseudoclase: después

El método de escritura es un poco más complicado, pero no tiene efectos secundarios y se recomienda su uso.

5.5 Comparación entre visualización y flotador

Pantalla : La dirección no se puede controlar.
float : La flotación romperá con el flujo de documentos estándar, por lo que es necesario resolver el problema del colapso del borde principal.

6. Posicionamiento

6.1 Posicionamiento relativo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 相对定位
    相对于自己原来的位置进行偏移~
    -->
    <style>
        body{
      
      
            padding: 20px;
        }
        div{
      
      
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
      
      
            border: 1px solid #666;
        }
        #first{
      
      
            background-color: #3cbda6;
            border: 1px solid #b27530;
            position: relative;/*相对定位 上下左右*/
            top: -20px;/*向上偏移20px*/
            left: 20px;/*向右偏移20*/
        }
        #second{
      
      
            background-color: #0000FF;
            border: 1px solid #255066;
        }
        #third{
      
      
            background-color: #008800;
            border: 1px solid #1c6615;
            position: relative;/*相对定位 上下左右*/
            bottom: -20px;/*向下偏移20px*/
            right: 20px;/*向左偏移20px*/
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

Posicionamiento relativo: posición: relativa;

Con respecto a la posición original, se realiza el desplazamiento especificado. En el caso del posicionamiento relativo, todavía está en el flujo de documentos estándar y se conservará la posición original.

top: -20px;/*向上偏移20px*/
left: 20px;/*向右偏移20*/
bottom: -20px;/*向下偏移20px*/
right: 20px;/*向左偏移20px*/
1234

práctica:

Diseñar páginas usando etiquetas div y a.
El ancho y el alto de cada hipervínculo son 100 px, el color de fondo es rosa y el puntero del mouse cambia a azul.
Utilice el posicionamiento relativo para cambiar la posición de cada hipervínculo

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-Dx6UrdfN-1690205525408) (front end.assets/20200516235217726.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
      
      
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
      
      
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: darkmagenta;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
      
      
            background: #a13d30;
        }
        .a2,.a4{
      
      
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
      
      
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>

<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

6.2 Posicionamiento absoluto

Posicionamiento: Basado en el posicionamiento xxx. arriba abajo izquierda derecha

1. Bajo la premisa de que no hay posicionamiento del elemento principal, en relación con el posicionamiento del navegador

2. Suponiendo que el elemento principal tiene posicionamiento, generalmente lo compensamos con respecto al elemento principal.

3. Dentro del alcance del elemento padre.

En relación con la posición del padre o del navegador, se realiza el desplazamiento especificado. Si está en una posición relativa, todavía está en el flujo de documentos estándar y no se conservará la posición original.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
      
      
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
      
      
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
      
      
            background-color: #3cbda6;
            border: 1px solid #b27530;
        }
        #second{
      
      
            background-color: #0000FF;
            border: 1px solid #255066;
            position: absolute;
            left: 100px;
            top: 20px;
        }
        #third{
      
      
            background-color: #008800;
            border: 1px solid #1c6615;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3 Posicionamiento fijo fijo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
      
      
            height: 10000px;
        }
        div:nth-of-type(1){
      
      /*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
      
      /*fixed：固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

Índice 6.4.z

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-PR2sxeFv-1690205525408) (front end.assets/20200516235239580.png)]

Índice z: 0 por defecto, ilimitado hasta: 999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
      
      
            width: 333px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px #000 solid;

        }
        ul,li{
      
      
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }
        /*父级元素相对定位*/
        #content ul{
      
      
            position: relative;
        }
        .tipText,.tipBg{
      
      
            position: absolute;
            width: 333px;
            height: 25px;
            top: 320px;
        }
        .tipText{
      
      
            color: white;
            /*z-index: 0;*/
        }
        .tipBg{
      
      
            background: black;
            opacity: 0.5;   /*背景透明度*/
        }
    </style>
</head>
<body>

<ul id="content">
    <li><img src="images/bg.png" alt=""></li>
    <li class="tipText">学习微服务，找狂神</li>
    <li class="tipBg"></li>
    <li>时间：2099-01-01</li>
    <li>地点：月球一号基地</li>
</ul>
</body>
</html>

6.5 Animación

Autoestudio

javascript

Un backend calificado debe dominar js

ventaja

se puede reutilizar
Se agregaron funciones programáticas a CSS

1. Sistema de conocimiento front-end

Todavía queda un largo camino por recorrer para convertirse en un verdadero "ingeniero de pila completa de Java de Internet", y el front-end es un curso obligatorio que no se puede evitar. El objetivo principal del curso en esta etapa es llevar a los programadores en experiencia de Java a conocer el front-end, comprenderlo y dominarlo, y dar un paso más para convertirse en un "ingeniero de pila completa de Java de Internet". ".

1.1 Tres elementos frontales

HTML (estructura): Hyper Text Markup Language (Lenguaje de marcado de hipertexto), determina la estructura y el contenido de las páginas web.
CSS (rendimiento): Hojas de estilo en cascada (Hojas de estilo en cascada), establece el estilo de presentación de la página web.
JavaScript (comportamiento): es un lenguaje de scripting débilmente tipado, su código fuente no necesita ser compilado, pero el navegador lo interpreta y ejecuta para controlar el comportamiento de las páginas web.

1.2 Capa de estructura (HTML)

demasiado simple

1.3 Capa de presentación (CSS)

CSS Cascading Style Sheet es un lenguaje de marcado, no un lenguaje de programación, por lo que no se pueden personalizar variables, comillas, etc., es decir, no tiene ningún soporte gramatical, sus principales defectos son los siguientes:

La sintaxis no es lo suficientemente sólida, por ejemplo, no se puede anidar ni escribir, lo que resulta en la necesidad de escribir muchos selectores repetidos en el desarrollo modular;
No existe un mecanismo de reutilización de estilos variable y razonable, por lo que los valores de atributos relacionados lógicamente deben generarse repetidamente en forma literal, lo que dificulta su mantenimiento; esto ha generado una gran carga de trabajo irrazonable
en nuestro trabajo. Para resolver este problema, los desarrolladores de aplicaciones para el usuario utilizarán una herramienta llamada [preprocesador CSS] para proporcionar un mecanismo de reutilización de la capa de estilo del que carece CSS, reducir el código redundante y mejorar la capacidad de mantenimiento del código de estilo. Mejoró enormemente la eficiencia de desarrollo del estilo front-end.

¿Qué es un preprocesador CSS?

El preprocesador CSS define un nuevo lenguaje. La idea básica es usar un lenguaje de programación especial para agregar algunas funciones de programación a CSS, usar CSS como objetivo para generar archivos y luego los desarrolladores solo necesitan usar este lenguaje para realizar el trabajo de codificación. CSS. Traducirlo a palabras fáciles de entender significa " usar un lenguaje de programación especial para diseñar el estilo de la página web y luego convertirlo en un archivo CSS normal mediante un compilador para uso en el proyecto " .

¿Cuáles son los preprocesadores CSS de uso común?

SASS: Basado en Ruby, se procesa a través del servidor y tiene potentes funciones. Alta eficiencia de análisis. Necesitas aprender el lenguaje Ruby, que es más difícil que MENOS.
MENOS: Basado en NodeJS, procesado por el cliente, fácil de usar. La función es más simple que SASS y la eficiencia de análisis es menor que SASS, pero es suficiente en el desarrollo real, por lo que si nuestro personal de fondo lo necesita, se recomienda usar MENOS.

1.4 Capa de comportamiento (JavaScript)

JavaScript es un lenguaje de secuencias de comandos débilmente tipado. Su código fuente no necesita compilarse antes de enviarlo al cliente para su ejecución, sino que el código de caracteres en formato de texto se envía al navegador, que es interpretado y ejecutado por el navegador.

1.5Marco de JavaScript

JQuery : una biblioteca JavaScript muy conocida, la ventaja es que simplifica las operaciones DOM, pero la desventaja es que las operaciones DOM son demasiado frecuentes, lo que afecta el rendimiento del front-end; solo se usa a los ojos del front-end por compatibilidad con IE6, 7 y 8;
Angular: El marco front-end adquirido por Google fue desarrollado por un grupo de programadores de Java, se caracteriza por mover el modelo MVC back-end al front-end y agregar el concepto de desarrollo modular, coopera con Microsoft y adopta la sintaxis TypeScript . desarrollo; es amigable para los programadores back-end, No es muy amigable para los programadores front-end; la mayor desventaja es que la iteración de la versión no es razonable (como 1.a generación -> 2.a generación, excepto por el nombre, es básicamente dos cosas; Angular6 se ha lanzado al momento de publicar el blog)
Reaccionar: Producido por Facebook, un marco de front-end JS de alto rendimiento; la característica es que se propone un nuevo concepto ** [DOM virtual] ** para reducir las operaciones DOM reales, simular operaciones DOM en la memoria y mejorar efectivamente el front-end eficiencia de renderizado, desventajas Es complicado de usar porque necesita aprender un lenguaje [JSX] adicional;
vista: Un marco de JavaScript progresivo, el llamado medio progresivo para implementar gradualmente nuevas funciones, como la realización de nuevas funciones como el desarrollo modular, el enrutamiento y la gestión de estado. Se caracteriza por combinar las ventajas de Angular (modularización) y React (DOM virtual);
Axios : Marco de comunicación front-end; debido a que Vue tiene un límite claro, es para procesar DOM, por lo que no tiene capacidades de comunicación. En este momento, es necesario utilizar un marco de comunicación adicional para interactuar con el servidor; por supuesto También puede optar directamente por utilizar la función de comunicación AJAX proporcionada por jQuery;

2. Inicio rápido

2.1 Introducción a JavaScript

El primero: escribir directamente en html

<!--用script写js代码-->
<script>
    alert("hello,wonderful world");
</script>

El segundo método: escriba el archivo js por separado y consúltelo en html

código js

alert("what a wonnderful world!");

<!--注意：不能自闭合-->
<script src="js/CYQ.js"></script>
<!--不用显示定义type,也默认是js-->
<script type="text/javascript"></script>

2.2 Comenzando con la gramática básica

definir variables
control condicional

<script>

    // 1.定义变量
    var score = 92;
    // 2.条件控制
    if (score>60&&score<70){
      
      
        alert("just so so");
    }else if (score>70&&score<80){
      
      
        alert("could be better");
    }else{
      
      
        alert("Great");
    }

    /*
    * 多行注释
    * */

    //严格区分大小写！
    //console.log(**) - 在浏览器控制台打印变量

</script>

2.3 depuración

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-p7QHfEDZ-1690205525409) (front end.assets/image-20210202223943313.png)]

2.4 Tipos de datos

variable

Se utilizan todas las variables.var

número

js no distingue entre decimales y enteros, y usa números de manera uniforme

123	//整数
123.001	//浮点数
123e4 //科学技术法
-99	//负数
NaN //not a number
Infinity //无限大

cadena

valor booleano

true

false

operación lógica

&&    
    
||		
    
!

operador de comparación

=	//赋值

==  //等于（类型不一样，值一样，也会判断为true）   1  “1”
    
===		//绝对等于（类型一样，值一样）

NaN no es igual a todos los valores, incluido él mismo
Solo se puede utilizar isNaN (NaN) para juzgar si el número es NaN.

problema de punto flotante

concole.log(1/3)===(1-2/3)

//false

¡Intenta evitar hacer cálculos con números de coma flotante! debido a problemas de precisión

nulo

nulo

indefinido

indefinido

formación

Las matrices Java deben almacenar objetos del mismo tipo.

No existe tal disposición en js

var various=[1,2,3.1,null,false]

new Array("hello",1,2,2.3);

En js, si el subíndice está fuera de los límites, no se informará ningún error y se mostrará "indefinido"

objeto

//对象是大括号，每个属性之间使用逗号隔开，最后一个属性不用加
var person{
    
    
    name:"CYQ",
    age:2,
    tags:["js","web","Spring"]
}

//java中
new Person(1,2,3);

2.5 Modo de verificación estricta

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-zMnGG0ql-1690205525409) (front end.assets/image-20210203133247265.png)]

<script>
    
    /*IDEA需要设置支持ES6语法
    *  use strict 严格检查模式，预防JavaScript的随意性导致产生的一些问题
    * 必须写在第一行
    * let 定义局部变量
    * */
    'use strict';

    let i=0;

</script>

3. tipo de datos

3.1 Cuerdas

cadena normal

Usamos "xxx" 'xxx'

Personaje de escape

\
\'	//可打印出’
\n	//换行
\t	//空格
\u4e2d	//可打印unicode字符
\x41	\\Ascill

cadena multilínea

var msg = `
        你
        好
        呀
        中
        国
        `;

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-limpieza, se recomienda guardar la imagen y cargarla directamente (img-PGDoTuAk-1690205525410) (front end.assets/image-20210203134414156.png)]

cadena de plantilla

var name = "CYQ";
var age = "18";
let message  = `你好呀，${
      
      name}`;

longitud de la cuerda

str.length

conversión de casos

//注意，这里是方法，不是属性了
student.toUpperCase();
student.toLowerCase();

interceptar

//[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

Inmutabilidad de cuerdas

console.log(student[0])
>>s
student[0]=1
console.log(student[0])
>>student

¡Error en la asignación de descripción! Las cadenas son inmutables.

3.2 matrices

La matriz puede contener cualquier tipo de datos.

var arr = [1,2,3,4,5,6];//通过下标取值和赋值

longitud

console.log(arr.length)
>>6
arr.length=10;
console.log(arr.length)
>>[1,2,3,4,5,6,empty*4]   10

Nota: Si asigna un valor a arr.length, el tamaño de la matriz cambiará ~, si la asignación es demasiado pequeña, los elementos se perderán

índice de

Obtener índice de subíndice por elemento

arr.indexOf(2)

La cadena "1" es diferente del número 1

rebanada()

Intercepta una parte de Array y devuelve una nueva matriz, similar a la subcadena en String

push(), pop() cola

push：压入到尾部
pop：弹出尾部的一个元素

unshift(), shift() cabeza

unshift：压入到头部
shift：弹出头部的一个元素
12

ordenar ordenar()

(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
123

elemento inverso inverso()

(3)["A","B","C"]
arr.reverse()
(3)["C","B","A"]

concat()

["C","B","A"]
arr.concat([1,2,3])
>>["C","B","A",1,2,3]
console.log(arr);
>>["C","B","A"]

Nota: concat() no modifica la matriz, solo devuelve una nueva matriz

unirse

["C","B","A"]
console.log(arr.join("-"));
>>"C-B-A"

Matrices multidimensionales

arr=[[1,2],[3,4],[5,6]]
>>arr[1][1]
4

3.3 Objetos

varios pares clave-valor

var 对象名 = {
    
    
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
    
    
	name:"CYQ",
	age:23,
	email:"[email protected]",
	score:100
}

Objetos en Js, {...} significa un objeto, y el par establecido describe el atributo xxx: xxx, y varios atributos están separados por comas, ¡y el último atributo no agrega una coma!
¡Todas las claves en JavaScript son cadenas y los valores son objetos arbitrarios!

asignación de objetos

person.name = "陈雨晴"
console.log(person.name)
>>陈雨晴

Para propiedades de objetos que no existen

person.sex
>>undefined

Utilice una propiedad de objeto que no exista, ¡no se informará ningún error! indefinido

Eliminar atributos dinámicamente

delete person.name
>>true
person.name
>>undefined

Agregar atributos dinámicamente

person.friend = "ZTH"
>>"ZTH"
console.log(person)
>>{
    
    age: 23, email: "[email protected]", score: 100, friend: "ZTH"}
age: 23

¡Determine si el valor del atributo está en este objeto! xxx en xxx


获取：cookie

```javascript
document.cookie
"UM_distinctid=170f629069832c-0dda87d408271d-b383f66-144000-170f629069986b"

Principio de secuestro de cookies

www.taobao.com

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到它的服务器-->

Las cookies se pueden configurar en el lado del servidor: httpOnly - sólo lectura

historial (en desuso): representa el historial del navegador

histor.forward();//前进
history.back();//后退

8. Manipular objetos DOM (énfasis)

DOM: modelo de objetos de documento

centro

La página del navegador es una estructura de árbol DOM.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-INwHTDCj-1690205525410) (front end.assets/image-20210205120410765.png)]

ACTUALIZACIÓN: Actualización de nodos Dom
Atravesar nodos dom: obtener nodos Dom
Eliminar: eliminar un nodo Dom
agregar: agregar un nuevo nodo

Para operar un nodo Dom, debe obtener el nodo Dom

8.1 Obtener el nodo Dom

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1")
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");

    //获取父节点下所有的子节点
    var childrens = father.children;
    //var childrens = father.children[index];	//取第几个子节点
    
    //father.firstChild; //取第一个子节点
    //father.lastChild;	//取最后一个子节点
</script>

8.2 Actualizar información del nodo

<div id="id1">

</div>
<script>
    var id1 = document.getElementById('id1');
    id1.innerText='456';//修改文本的值
    id1.innerHTML='<strong>456</strong>';//可以解析HTML文本标签
</script>

Texto de acción:

id1.innerText='456': modifica el valor del texto
id1.innerHTML='<strong>456</strong>': Las etiquetas de texto HTML se pueden analizar

Manipulación de CSS:

id1.style.color = 'yellow';// 属性使用 字符串 包裹
id1.style.fontSize = '20px';// - 转 驼峰命名问题
id1.style.padding = '2em'

8.3 Eliminar nodo

Pasos para eliminar un nodo: primero obtenga el nodo principal y luego elimínese usted mismo a través del nodo principal

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementById("p1")
    var father = p1.parentElement;	//找到父类
    father.removeChild(self);	//通过父节点，删除子节点！
    
    //删除是一个动态的过程，先删除0，再删除2会找不到2节点
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

Nota: Al eliminar varios nodos, los hijos cambian todo el tiempo. Al eliminar nodos, ¡asegúrese de prestar atención! ! !

8.4 Insertar nodos

Tenemos un nodo Dom, asumiendo que el nodo dom está vacío, podemos agregar un elemento a través de internalHTML,

Pero si el nodo DOM ya tiene un elemento, se sobrescribirá.

suma:

<p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    /*另一种写法
    var
        js = document.getElementById("js"),
        list = document.getElementById("list");
    */

    list.appendChild(js);//追加到后面
</script>

-----
追加后效果为：
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
    <p id="js">Javascript</p>
</div>

Cree una nueva etiqueta para implementar la inserción.

<body>

<p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let js = document.getElementById('js');//已经存在的节点
    let list = document.getElementById('list');

    //追加到后面
    //list.appendChild(js);

    //通过JS 创建一个新的节点
    let newP = document.createElement('p');//创建有一个p标签	<p>
    newP.id = 'newP';//<p id="newP"></p>
    newP.innerText = 'Hello,Sam'; //<p id="newP">Hello,Sam</p>
    list.appendChild(newP);

    //创建一个标签节点
    let myScript = document.createElement('script');	//<script> 
    myScript.setAttribute('type', 'text/javascript');//<script type='text/javascript'>

    //给body标签创建样式1
    let body = document.getElementsByTagName('body')[0];
    body.setAttribute('style', 'background-color: yellow;');

    //给body标签创建样式2
    //let myStyle = document.createElement('style');//创建一个style标签
    //myStyle.setAttribute('tyle', 'text/css');
    //myStyle.innerHTML = 'body{background-color: chartreuse;}';//设置样式
    //document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
</body>

efecto anexar

<body style="background-color: yellow;">
    <p id="js">Javascript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
        <p id="newP">Hello,Sam</p>
    </div>
    <script>
    //....
    </script>  
</body>

insertar antes

<body>
    <p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');//已经存在的节点
    let list = document.getElementById('list');
    //要包含的节点. insertBefore(newNode,targetNode)
    list.insertBefore(js, ee);
</script>

</body>

El efecto después de agregar es:

<body>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="js">Javascript</p>
	<p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
//....
</script>

</body>

9. Formulario de operación (validación)

Formulario: del árbol DOM

Cuadro de texto: texto
caja desplegable:
botón de radio: radio
Casilla de opción múltiple: casilla de verificación
Campo oculto: oculto
Cuadro de contraseña: contraseña
…

El propósito del formulario: enviar información.

obtener información para enviar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
    <script>
        var input_text = document.getElementById('username');
        //得到输入框的值：input_text.value
        //修改输入框的值：input_text.value = wudi
        
        var boy_radio = document.getElementById('boy');
        var girl_radio = document.getElementById('girl');
        //对于单选框、多选框等等固定的值，
        boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中
        girl_radio.checked = true;//赋值
    </script>
</form>
</body>
</html>

Envío de formularios: cifrado MD5, optimización de formularios

Cifrado MD5 general:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>

    <!--绑定事件 onlick 被点击-->
    <button type="submit" onclick="sub()">提交</button>
    <script>
        function sub() {
      
      
            let username = document.getElementById('username');
            let password = document.getElementById('password');
            console.log(username);
            console.log(password);

            // MD5 算法    方案一：
            password.value = md5(password.value);
            console.log(password.value);
        }
    </script>
</form>
</body>
</html>

Ocultar cuadro de contraseña + cifrado MD5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    表单绑定提交事件
    onsubmit = 绑定一个提交检查的函数，true，false
    将这个结果返回给表单，使用 onsubmit 接收！
    οnsubmit="return sub();"
-->
<form action="#" method="post" onsubmit="return sub();">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password">
        <input type="hidden" id="md5-password" name="password">
    </p>
    <button type="submit" >提交</button>
    <script>
        function sub() {
      
      
            let username = document.getElementById('username');
            let password = document.getElementById('password');
            let md5password = document.getElementById('md5-password');

            //MD5 算法：隐藏表单域提交表单密码
            md5password.value = md5(password.value);

            //可以校验判断表单内容，true：通过提交，false：阻止提交
            return true;
        }
    </script>
</form>
</body>
</html>

10.jQuery

jQuery库：里面封装大量JavaScript方法.

**API de jQuery:**http://jquery.cuishifeng.cn/

jQuery inicial

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <a href="" id="test-jquery">点我</a>
<script>
    $('#test-jquery').click(function () {
      
      
        alert('hello,jQuery')
    })
</script>
</body>
</html>

Selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<script>
    //原生js，选择器少，麻烦且不好记
    //id、标签、类
    document.getElementById();
    document.getElementsByTagName();
    document.getElementsByClassName();

    //jQuery 就是 css中的选择器
    $('#id').click();//id选择器
    $('div').click();//标签选择
    $('.className').click();//class选择器
</script>
</body>
</html>

Manipular el DOM

manipulación de texto de nodo
operación css
Mostrar y ocultar elementos: la esenciadisplay=none;
...y másVer API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
    <li id="js" class="js">Javascript</li>
    <li name="python">Python</li>
    <li id="sh">show_hide</li>
</ul>

<script>
    $("#test-ul li[name='python']").text();//获得值
    $("#test-ul li[name='python']").text('Python_new');
    $('#test-ul').html();//获得值
    $('test-ul').html('<strong>html_new</strong>');//设置值

    $('#js').css('color','red');//设置样式

    $('#sh').show();//显示
    $('#sh').hide();//隐藏
    
    $(window).width();
    $(window).height();
    $(document).width();
    $(document).height();
</script>
</body>
</html>

[Lenguaje de programación informática] Conceptos básicos del front-end HTML

Directorio de artículos

HTML

1. Conociendo HTML

1.1 ¿Qué es HTML?

2. Etiquetas básicas de páginas web

2.1 Etiqueta de título

2.2 Etiquetas de párrafo

2.3 Etiquetas de nueva línea

2.4 Etiquetas de líneas horizontales

2.5 Etiquetas de estilo de fuente

2.6 Comentarios y símbolos especiales

3. Imágenes, hipervínculos, diseño de página.

3.1 Imagen

3.2 Etiquetas de enlace

3.3 Diseño de página web

4. Listas, tablas, elementos multimedia.

4.1 lista

4.2 Formulario

4.3 Elementos multimedia

5. Análisis de la estructura de la página.

6. marco en línea iframe

7. Etiqueta del formulario (énfasis)

cuadro de entrada de texto

cuadro de entrada de contraseña

Caja individual

Caja

botón

campo de archivo

caja desplegable

campo de texto

verificación sencilla

control deslizante

barra de búsqueda

8. Formulario de solicitud (énfasis)

9. Formar la primera experiencia (énfasis)

CSS (hojas de estilo en cascada)

pasos de aprendizaje

1. ¿Qué es CSS?

11. ¿Qué es CSS?

1.2 Historia del desarrollo

1.3 Inicio rápido

1.4 Tres formas de importar CSS

2. Selector

2.1 Selectores básicos

2.2 Selector de jerarquía

2.3 Selectores de pseudoclases estructurales

2.4 Selector de atributos (de uso común)

3. Embellecer los elementos de la página web.

3.1. Por qué embellecer la página web

3.2 Estilo de fuente

3.3 Estilos de texto

3.4 Sombra

3.5 Pseudoclase de hipervínculo

3.6 Lista

3.7 Antecedentes

3.8 Degradado

4. modelo de caja

4.1 ¿Qué es el modelo de caja?

4.2 Frontera

4.3 Márgenes interior y exterior

4.4 Borde redondeado

4.5 Sombra del cuadro (explica el conocimiento del front-end)

5. Flotando

5.1 Flujo de documentos estándar

5.2.pantalla (importante)

5.3.flotar

5.4 Problema del colapso de la frontera principal

5.5 Comparación entre visualización y flotador

6. Posicionamiento

6.1 Posicionamiento relativo

6.2 Posicionamiento absoluto

6.3 Posicionamiento fijo fijo

Índice 6.4.z

6.5 Animación

javascript

1. Sistema de conocimiento front-end

1.1 Tres elementos frontales

1.2 Capa de estructura (HTML)

1.3 Capa de presentación (CSS)