RicardoMonk.github.io:网络实践

  • n2_767973
    了解作者
  • 6.5KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-13 19:55
    上传日期
RicardoMonk.github.io:网络实践
RicardoMonk_github_io-master.zip
  • RicardoMonk.github.io-master
  • index.html
    12.4KB
  • css
  • style.css
    6.4KB
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Document</title> </head> <body> <!--FIGURE Y FIGCAPTION PARA TENER UNA IMAGEN Y TEXTO <main> <section> <figure> <img src="" alt=""> <figcaption>arriba de mi debe ir una imagen</figcaption> </figure> </section> </main>--> <!--ESTA ETIQUETA NOS PERMITE CONECTAR UN VIDEO DE MIS ARCHIVOS AL SITIO WEB <main> <section> <video src="">en el SRC va la ubicaicion del video</video> </section> </main> --> <!-- FORMULARIO SENCILLO <form action=""> <label for="Nombre"> <span>Nombre</span> <input type="text" id="Nombre"> </label> <label for=""> <span>E-mail</span> <input type="text" id="E-mail"> </label> <label for=""> <span>Fecha</span> <input type="date" id="Fecha"> </label> </form> --> <!-- FORMULARIO CON BOTON SUNMIT (muchos campos) <form action=""> <label for="Hora"> <span>Hora</span> <input type="time" id="Hora" name="hora"> </label> <label for="Dia"> <span>Dia</span> <input type="date" id="Dia" name="Dia"> </label> <label for="Semana"> <span>Semana</span> <input type="week" id="Semana" name="Semana"> </label> <label for="Mes"> <span>Mes</span> <input type="month" id="Mes" name="Mes"> </label> <input type="submit"> </form> --> <!--FORMULARIO SUPER UX (MINIMAL) <form action=""> <label for="calendario"> <span>Calendario</span> <input type="datetime-local" id="Calendario" name="calendario"> </label> <input type="submit"> </form> --> <!--FORMULARIO CON ATRIBUTO AUTOCOMPLETE Y REQUIERED <form action=""> <label for="Nombre"> <span>Nombre</span> <input type="text" id="Nombre" name="Nombre" autocomplete="name" required> </label> <label for="Correo"> <span>Correo</span> <input type="email" id="correo" name="correo" autocomplete="email" required> </label> <label for="Pais"> <span>Pais</span> <input type="text" id="Pais" name="pais" autocomplete="country" required> </label> <label for="Codigo posta"> <span>Codigo Postal</span> <input type="text" id="codigo-postal" name="cp" autocomplete="postal-code" required> </label> <input type="submit"> </form> --> <!--INPUT CON ETIQUETA DATALIST Y OPTION PARA PODER TENER OPCION DE ESCOGER O ESCRIBIR <main> <input list="cursos"> <datalist id="cursos"> <option value="html5"></option> <option value="java"></option> <option value="css"></option> </datalist> </main> --> <!-- DOS TIPOS DE BOTONES <input type="submit"> <input type="submit" value="Enviarlo"> <button>este boton es mas flexible</button> --> <!--PSEUDOCLASES (:) Y PSEUDOELEMENTOS (::) EN ESTA PARTE PUDIMOS VER LA DIFERENCIA ENTRE ESTOS ELEMENTOS <header> <nav> <ul class="main-nav"> <--La calse Main es para el principal bloque <li class="main-nav__item"><a href="" rel='nofollow' onclick='return false;'>Home</a></li> <li class="main-nav__item"><a href="" rel='nofollow' onclick='return false;'>Book</a></li> <li class="main-nav__item"><a href="" rel='nofollow' onclick='return false;'>Blog</a></li> <li class="main-nav__item"><a href="" rel='nofollow' onclick='return false;'>Contacto</a></li> </ul> </nav> </header> --> <!--CLASE MODELO DE CAJA <main> <section> <h1>SOMOS UNA CAJA</h1> <div> <p>MARGIN REPREENTA EL EXTERIOR DE LA CAJA <br> EL BORDE ES COMO EL TRAZO <br> ESTE REPRESENTA EL ESPACIO INTERNO </p> </div> </section> </main> --> <!--CLASE HERENCIA, CON INHERIT <main> <section> <h1>soy un titulo</h1> <p>soy un parrafo</p> </section> </main> --> <!--ESPECIFICIDAD EN SELECTORES Consta de realizar buenas practicas haciendo uso de class y uso de selectores <header class="page-header"> <h1 id="page-title" class="title">Empresa</h1> <nav> <ul id="main-nav" class="nav"> <li><a href="" rel='nofollow' onclick='return false;'>home</a></li> <li><a href="" rel='nofollow' onclick='return false;'>cursos</a></li> <li><a href="" rel='nofollow' onclick='return false;'>instrucciones</a></li> <li><a href="" rel='nofollow' onclick='return false;'>blog</a></li> </ul> </nav> </header> --> <!--ADJACENT SIBLINGS - HERMANO CERCANO El estilo aplica solo para etiquetas hermanas <div> <h2>soy un 2</h2> <p>parrafo</p> <h3>soy un 3</h3> <p>parrafp</p> <h2>soy un 2</h2> <p>parrafo</p> </div> --> <!--GENERAL SIBLINGS - HERMANOS GENERALES aplica para las etiquetas declaradas sin importar si son cercanas <div> <h2>tit</h2> <p>parrafo</p> <h3>tit</h3> <p>parrafo</p> <h2>tit</h2> <p>parrafo</p> <p>parrafo</p> </div> --> <!--CHILD - HIJO DIRECTO <div> <article rel='nofollow' onclick='return false;'> <p>soy un texto</p> </article> <article rel='nofollow' onclick='return false;'> <p>soy un texto</p> </article> <section> <div><p> soy un texto </p></div> </section> <p>soy un texto</p> </div> --> <!--DESCENDIENTES <div> <article rel='nofollow' onclick='return false;'> <p>soy un texto</p> </article> <article rel='nofollow' onclick='return false;'> <p>soy un texto</p> </article> <section> <div><p> soy un texto </p></div> </section> <p>soy un texto</p> </div> --> <!--EM UNITS Esta medida se basa en la etiqueta padre, <main class="text-container"> <p> soy texto </p> <div> <p> soy mas texto </p> </div> </main> --> <!--REM UNITS Esta unidad de medida se basa en el root o las medidas asignadas a la etiqueta HTML <main> <p>algo de texto</p> </main> --> <!--VH-VW MIN-MAX W-H <main> <section><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere voluptatibus architecto tempora sunt quasi aliquid eos quo ipsum similique? Sint nostrum soluta ipsa dolorem aliquam itaque consectetur labore quia quos! Ratione exercitationem minima minus quibusdam alias, officiis voluptatibus suscipit aspernatur excepturi? Aliquid obcaecati quos exercitationem assumenda cumque velit eligendi, quasi quod veritatis quaerat repellat facere, architecto molestiae eius. Inventore, modi. Veritatis at voluptates molestiae hic explicabo maiores provident eum tenetur blanditiis ducimus consectetur tempore atque, nisi error commodi optio? Consequuntur architecto quis alias facere, fuga et rerum quos quae pariatur! Totam dolorem ex, modi qui, maiores earum praesentium, recusandae delectus ducimus blanditiis veritatis fugit. Optio accusantium cumque cum reprehenderit, laborum provident laboriosam reiciendis repellendus quos fugiat corporis tempora, eos ducimus. Aliquam delectus accusantium dolore mollitia incidunt hic repudiandae, tenetur in beatae labore vel ratione minima ut cupiditate. Rem inventore, sed dolorum tempore id quisquam amet laboriosam totam nam reprehenderit hic! Cum culpa, quae delectus accusamus praesentium impedit dicta quas, temporibus molestias corrupti, ullam saepe nihil quisquam nemo sunt error sit. Vero voluptates necessitatibus repellat eveniet. Quo voluptatum reiciendis expedita omnis. Odit perspiciatis debitis quasi eum est? Dicta quasi repudiandae officia ipsam, soluta praesentium numquam, possimus temporibus beatae perspiciatis accusamus reiciendis nesciunt voluptate deserunt quam corrupti veritatis! Modi, dolor minima. Quas. N
评论
    相关推荐