Puntos de conocimiento HTML + CSS-Semana 1.md

1. Navegador y kernel (motor de renderizado)

Navegadores convencionales	Núcleo
safari safari	webkit
navegador de google chrome	webkit -> parpadear
ópera	presto -> webkit -> parpadear
Firefox	geco
IE Microsoft Internet Explorer	tridente

Navegador nacional

   QQ、360、UC、猎豹浏览器...
  无自主研发内核，基本都是使用webkit、trident 内核改造

2. Composición de la página web

    结构层   --  HTML
    表现层   --  CSS
    行为层   --  Javascript

Organización del W3C: World Wide Web Consortium, que desarrolla estándares web
El estándar web (estándar W3C) requiere que la estructura de tres niveles de las páginas web esté separada

Tres, primer conocimiento de HTML

1. Concepto HTML

Lenguaje de marcado de hipertexto Lenguaje de marcado de hipertexto

Hipertexto: No solo puede llevar texto, sino también imágenes, animaciones, audios, videos ...
El idioma utilizado para describir la página web.
No es un lenguaje de programación, sino un lenguaje de marcado.

2. Sintaxis básica de HTML

La totalidad de la etiqueta de elemento y el contenido entre las etiquetas también se denomina elemento.

3. La estructura básica de HTML

<!DOCTYPE html> -告诉浏览器以html5的标准去解析网页,网页根标签代表网页开始和结束

<head> - 网页头部：通常放页面的元信息

<meta charset="utf-8"> -设置网页的编码方式（字符集）
               utf-8: 国际编码（万国码）
               gb2312 : 国标，简体中文
               gbk : 国标扩，简体+繁体

<title>  - 网页标题

Cuatro etiquetas de uso común

1. Clasificación de etiquetas

Etiqueta de bloque	Etiqueta en línea
De arriba a abajo, en una sola línea	Organizar horizontalmente en una fila de izquierda a derecha
El ancho predeterminado ocupa el nivel principal y la altura es estirada por el contenido	El ancho y la altura predeterminados son compatibles con el contenido.
Puede configurar el ancho y la altura, y puede configurar todos los atributos del modelo de caja	El ancho y la altura no se pueden configurar. Los atributos del modelo de caja horizontal (relleno, borde, margen) se pueden configurar normalmente y el modelo de caja vertical no se puede configurar
text-align: center es válido	alineación de texto: el centro no es válido

Padre completo significa el ancho del contenido real del contenido del cuadro + relleno izquierdo y derecho + borde izquierdo y derecho + margen de márgenes izquierdo y derecho = ancho del padre 100%

块级标签
        hr 分割线  
        div 区块、盒子
        p   段落
        h1-h6   标题   
        ol  有序列表    type="1/A/a/I/i"
        ul   无序列表    type="desc/circle/square"
        li   无序列表和有序列表的项目
        dl   定义列表
        dt   放名词或术语
        dd   放描述或者说明
        form   表单域

行内标签
        span    无语义标签，给一段文字中的指定文本设置特殊样式
        i       样式斜体 
        em      斜体，并且强调
        b       样式加粗
        strong  加粗并且强调
        sub     下标
        sup     上标
        del     删除文本

Etiquetas de nivel de bloque en línea (img, entrada de elemento de formulario / área de texto / seleccionar)
De izquierda a derecha, varias etiquetas de nivel de bloque en línea se organizan horizontalmente en una línea
Puede configurar el ancho y la altura, y puede configurar todos los atributos del modelo de caja
alineación de texto: el centro no es válido

Efecto de centrado
1. El elemento en línea o el bloque en línea en el elemento de bloque está centrado y el elemento de bloque externo se establece text-align: center;
2. El elemento de bloque está centrado horizontalmente en el elemento principal y el margen: 0 auto es establecido para el elemento de bloque.

2. Etiqueta de imagen de imagen

    <img src="图片路径../ : 返回上一级目录
    ../../: 返回上两级目录" alt="替换文本" >

3. Vincular un elemento integrado

    本网站中的页面跳转
    <a href="相对路径/目标页面的网址" target="_blank在新窗口中打开/_self : 默认值，当前窗口打开" title="提示文字"> 链接文本 </a>

    锚点（锚记）链接 ：跳转到当前页面的指定位置
    <h3 id="f1"> ... </h3>
    <a href="#f1"> ... </a>
    跳转页面同时指定位置：
    <a href="./4、链接.html#floor2"> 跳转到链接页面的第2层</a>

Cinco, lista

1. Lista ordenada

'1 / A / a / I /i'ol和li属于固定父子标签，ol的直接子标签只能是li
    <ol type="A">
        <li>张三</li>
        <li>
            <h3> ... </h3>
            <p> ... </p>
        </li>
    </ol>

2. Lista desordenada

'desc (实心圆点)/cricle(空心圆圈)/square(正方形)'

    <ul type="circle">
        <li>Tom</li>
        <li>Jack</li>
        <li>Rose</li>
    </ul>

3. Lista de definiciones

一般用于解释一些专有名词或者术语说明
    <dl>
        <dt>放名词或者术语</dt>
        <dd>放解释说明</dd>
    </dl>

列表符换成图像
list-style-type:none;//去掉圆点
list-style-image: url(images/icon.gif);

Seis, símbolos especiales de la página web

    &nbsp;    空格
    &gt;    大于符号    >
    &lt;    小于符号    <
    &amp;    &符本身    &
    &copy;   版权符     ©
    &reg;    注册商标   ®

Siete, semántico

¿Qué es la semántica?
Use etiquetas razonables para formatear el contenido del documento, como la etiqueta h para el título, la etiqueta p para el párrafo y el atributo alt para imágenes importantes para agregar texto de reemplazo.

¿beneficio?
1. Puede mostrar una buena estructura sin CSS
2. Tiene buena legibilidad, lo que favorece el desarrollo y el mantenimiento del equipo.
3. Propicio para la experiencia del usuario
4. Bueno para la optimización de motores de búsqueda

8. Forma

1. Forma etiquetas relacionadas

    - table  定义整个表格
    - tr  定义一行
    - td  定义表格的单元格（标准单元格）
    - th  定义表头单元格 （加粗居中）
    - caption  定义表格标题
    - thead  表格的头
    - tbody  表格的主体
    - tfoot  表格的底部
    > thead\tbody\tfoot 这些标签可以增强表格的语义化，对布局没有影响

   <table>
          <caption>学生成绩表</caption>
          <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>分数</th>
           </tr>
           <tr>
           <td>01</td>
           <td>张三</td>
                <td>90</td>
           </tr>
    </table>

2. Atributos relacionados con la tabla

   <table border="1" cellspacing="0" style="width: 300px;border-collapse:collapse;">
   </table>

borde Agrega un borde a la tabla como un todo (la tabla y la celda tienen bordes)
border-collapse: colapso; elimine el espacio en blanco entre las celdas y combine los bordes adyacentes en uno
cellpacing = "0": elimina el espacio en blanco entre las celdas

3. Combinar celdas

Columna combinada (combinación horizontal) colspan = "2"

    <td colspan="2">  ... </td>

Filas combinadas (combinación vertical) rowspan = "2"

    <td rowspan="2"> ... </td>

4. Características de la mesa

Cuando no se establece el ancho de la mesa, el ancho real es estirado por el contenido
Si establece el ancho de la tabla, el ancho de la columna de la tabla se distribuirá de acuerdo con la proporción de la celda con más contenido en cada columna, y la altura de la fila es la misma.
También puede ajustar el ancho y el alto de toda la fila o columna configurando el ancho y el alto de la celda

    <tr>
        <td width="80">4444</td>
        <td width="80">5</td>
        <td width="140">6</td>
    </tr>
    <tr>
        <td width="33.33%">4444</td>
        <td width="33.33%">5</td>
        <td width="33.33%">6</td>
    </tr>

Nueve, CSS

Hojas de estilo en cascada: es un lenguaje que se utiliza para especificar el estilo de las páginas web.

1. Tres métodos de introducción de CSS (introducción externa en línea / en línea / enlace)

行内样式 ：
<div style="width:100px;height:100px;background-color:red;"></div>
内嵌式 :
<head>
        <style>
            p{
     
     
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
</head>
link外部引入：
<link rel="stylesheet" href="./style.css" type="text/css">

   - rel : 表示目标文件和当前文件的关系  stylesheet 表示样式表
   - href : 目标文件的相对路径
   - type : "text/css"标记文件类型为 css

La diferencia entre los estilos de importación de enlaces y @import en CSS

   <style> 
       <!--该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。-->
        @import url("global.css");
        @import url(global.css);
        @import "global.css";

　     　p{
     
     color:red;}

   </style>

Enlace	@importar
El enlace es una etiqueta XHTML, además de cargar CSS, también puedes definir otros asuntos como RSS	Pertenece a la categoría CSS, solo puede cargar CSS
Cuando el enlace hace referencia a CSS, se carga al mismo tiempo que se carga la página.	Necesita cargar la página después de que la página esté completamente cargada
el enlace es una etiqueta XHTML, no hay problemas de compatibilidad	Propuesto en CSS2.1, los navegadores de versiones inferiores no admiten
Admite el uso de Javascript para controlar el DOM para cambiar el estilo	no apoyo

2. Selector

Se utiliza para dar estilo a las etiquetas, hay muchos tipos de selectores (nombre de etiqueta, id, clase, *)

div,p{  ...  }
#box{ ... }
.red{ ... }
*{
        margin: 0;
        padding: 0;
 }

3. Selectores compuestos (descendientes, secundarios, grupos de conglomerados paralelos, selectores de intersecciones)

    .box div{  /* 选择.box标签后代当中所有div标签*/
    }
    
    .box>div{  /* 选择.box标签直接子代中所有div标签 */
    }
     
    #box,.red,h3,#box p{  /*把以下几个选择器匹配的元素同时选中*/
        #box
        .red
        h3
        #box p
    }
    
    div.red{ ... }   /*选择标签名为div并且类名中包含red这个单词的标签，精准定位   */

10. Atributos relacionados con el texto

1. Serie de texto

  text-align : left/right/center--文本对齐方式
  text-indent : 2em --首行缩进，em : 代表一个字的大小
  text-decoration ：none/underline/overline/lint-through--文字修饰  
  color : 文本颜色

2. Serie de fuentes

Atributos de fuente abreviados, el orden no se puede cambiar a
voluntad. Puede omitir los atributos que no es necesario configurar, al menos mantener el tamaño de fuente y la familia de fuente

Propiedades de la taquigrafía de fuente

font: font-style font-weight  font-size/line-height font-family;
font: italic bold 20px/2 "宋体";
至少要大小、字体

atributos de fuente de fuente (tamaño, peso, estilo, familia)

   font-size   字体大小 16px
   font-weight 字体加粗
         100-300  细
         400-500  正常
         600-900  加粗
         normal   正常
         bold     加粗
   font-style --字体风格
         normal   正常
         italic   斜体
   font-family  --字体系列（族类）
        可以设置一个字体或多个字体
        多个字体用逗号分隔，浏览器会显示第一个能够识别的字体
   font-family: Helvetica Neue,Helvetica,Arial,"宋体",Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;

altura de la línea de fuente

   line-height  字体行高-由上间距、文本高度、下间距组成
      取值可以为具体的长度  30px
      也可以为font-size的倍数   比如2  代表font-size的两倍
      单行文本垂直居中可以设置line-height为盒子的高度

3. Otro

设置字符间距：英文字母、中文汉字
letter-spacing:10px;  "1 2 3 a b c 汉 字"
设置单词的间距
word-spacing:10px;  "world    hello    ujiuye   汉字   "

鼠标变小手cursor:pointer

4. Unidad de longitud y representación del color

unidad

   px   像素
   em   相对单位，代表的是当前元素的font-size值  
   %    百分比   
   rem  1rem 等于页面的根元素的font-size值，也就是html标签的font-size

Representación de color

   red                          --英文单词  
   #000000                      --十六进制
   rgb(0-255,0-255,0-255)       --rgb()模式
   rgba(0-255,0-255,0-255,0-1); --rgba()模式-alpha 透明度

11. Formulario HTML

Los sitios web utilizan formularios para recopilar información del usuario.

1. Campo de formulario (nivel de bloque)

Representa un área utilizada para especificar el formulario, que se utiliza para colocar varios elementos del formulario.

Propiedades del campo de formulario

   action: 用来规定表单的提交地址(与后台对接)
   method:用来规定表单的提交方式
   get : 默认提交方式, 会把表单数据以键值对形式，多组用&拼接在一起，通过地址栏进行传递，安全性不好，因为地址栏可容纳的数据大小有限制的，所以可能造成数据丢失
   post : 推荐使用的方法，安全性更好，理论上没有大小限制

    <form action="" method="" >
        ...
    </form>

2. Elementos de formulario (bloque en línea)

etiqueta de entrada (el nombre se recibe en segundo plano, escríbalo)

   <input type="text" name="username"> 普通文本框
   <input type="password" name="psd">  密码框
   <input type="radio" name="gender" value="male">单选按钮(name要设置相同才能互斥单选)
   <input type="checkbox" name="hobby" value="coding">复选框
   <input type="file" name="file"> 文件域
   <input type="submit" value="注册">      提交按钮  
   <input type="reset"  value="清空表单">  重置按钮
   <input type="button" value="普通按钮">  普通按钮
   <input type="image" src="图片路径"> 图片提交按钮，显示图标，变成小手
   <input type="hidden" name="hid" value="传数据">   隐藏域,页面不显示但是可以携带数据

la lista desplegable

   <select name="city">
            <option value="aa">AA</option>
            <option value="bb">BB</option>
            <option value="cc">CC</option>
   </select>

Campo de texto (texto de varias líneas)

   <textarea name="des" cols="30" rows="20"
    style="width:100px; height:200px;">
    我就是文本域初始显示的值
   </textarea>
        - cols ： 规定输入文本列数
        - rows ： 规定输入文本的行数

3. Descripción de los atributos de los elementos de formulario

   1.type用来定义输入框的不同类型
   2.name属性用来规定表单字段名，如果不设置这个输入框的内容无法随表单一起提交到后台
        - 多个单选按钮想要有互斥效果，name属性值必须相同
   3.value用来给表单元素定义值
        - 单选按钮(radio)、复选框(checkbox)、下拉列表的选项(option)必须要设置value属性，表示选项所代表的值
        - 提交按钮(submit)、重置按钮(reset)、普通按钮(button)设置value属性表示修改按钮上的文字
        - 文本框(text)、密码框(password)、隐藏域(hidden)，用value设置默认值
        - 文件域flie和textarea不能设置value
   4.maxlength="10" 用于规定输入框允许输入的最大字符个数
   5.disabled="disabled"  设置表单元素为禁用状态, 不能编辑，也不能被提交
   6.readonly="readonly"  设置表单元素为只读状态, 不能编辑，可以被提交
   7.checked="checked"    设置单选按钮和复选框默认选中
   8.selected="selected"  设置下拉列表的选项默认选中
   9.size="2"  规定下拉表默认显示项目的个数

Puntos de conocimiento HTML + CSS-Semana 1.md

1. Navegador y kernel (motor de renderizado)

2. Composición de la página web

Tres, primer conocimiento de HTML

1. Concepto HTML

2. Sintaxis básica de HTML

3. La estructura básica de HTML

Cuatro etiquetas de uso común

1. Clasificación de etiquetas

2. Etiqueta de imagen de imagen

3. Vincular un elemento integrado

Cinco, lista

1. Lista ordenada

2. Lista desordenada

3. Lista de definiciones

Seis, símbolos especiales de la página web

Siete, semántico

8. Forma

1. Forma etiquetas relacionadas

2. Atributos relacionados con la tabla

3. Combinar celdas

4. Características de la mesa

Nueve, CSS

1. Tres métodos de introducción de CSS (introducción externa en línea / en línea / enlace)

2. Selector

3. Selectores compuestos (descendientes, secundarios, grupos de conglomerados paralelos, selectores de intersecciones)

10. Atributos relacionados con el texto

1. Serie de texto

2. Serie de fuentes

3. Otro

4. Unidad de longitud y representación del color

11. Formulario HTML

1. Campo de formulario (nivel de bloque)

2. Elementos de formulario (bloque en línea)

3. Descripción de los atributos de los elementos de formulario

Supongo que te gusta