Explicar HTML y CSS (super detallado)
提示：以下是我的一些经验之谈，下面案例可供参考
1. HTML y CSS iniciales
1. La historia del desarrollo de html
Lenguaje de marcado de hipertexto HTML 1.0 (primera edición): publicado como borrador de trabajo del Grupo de trabajo de ingeniería de Internet (IETF) en junio de 1993 (no es un estándar)
HTML 2.0: publicado como RFC 1866 en noviembre de 1995, declarado obsoleto después de la publicación de RFC 2854 en junio de 2000
HTML 3.2 – 14 de enero de 1996, Recomendación W3C
HTML 4.0 – 18 de diciembre de 1997, recomendación W3C
HTML 4.0 (mejoras menores) - 24 de diciembre de 1999, recomendación W3C
XHTML 1.0: publicado el 26 de enero de 2000 como recomendación del W3C, revisado y vuelto a publicar el 1 de agosto de 2002
XHTML 1.1 – Publicado el 31 de mayo de 2001
HTML5.0 El 28 de octubre de 2014, el Consorcio World Wide Web anunció que después de casi 8 años de arduo trabajo, finalmente se formuló la especificación estándar
Ejemplo: pandas es una herramienta basada en NumPy creada para resolver tareas de análisis de datos.
2.html
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言(标记语言是一套标记标签)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
3.css
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
dos, html
1. Marco básico
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面名字</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
< !DOCTYPE html > se declara como un documento HTML5.
El elemento < html > es el elemento raíz de una página HTML.
El elemento < head > contiene los metadatos del documento, como < meta charset="utf-8" > define el formato de codificación de la página web como utf -8.
El elemento <title> describe el título del documento
El elemento <body> contiene el contenido de la página visible El
elemento <h1> define un encabezado
El elemento <p> define un párrafo
2. Etiquetas y atributos de uso común de HTML5
| Etiqueta | describir |
|---|---|
| Base | |
| <pag> | definir un párrafo |
| < br > | definir nueva línea simple |
| < hora > | definir linea horizontal |
| < !–…-- > | definir un comentario |
| Formato | |
| < segundo > | definir texto en negrita |
| < yo > | definir texto en cursiva |
| < tu > | Definir texto subrayado |
| < em > | definir texto enfatizado |
| < del > | Definir el texto a eliminar |
| < tiempo > | definir una hora/fecha |
| <sub> | Definir texto de subíndice |
| < arriba > | Definir texto en superíndice |
| forma | |
| < formulario > | Definir un formulario HTML para la entrada del usuario |
| < entrada > | definir un control de entrada |
| < etiqueta > | Define la anotación del elemento de entrada. |
| <botón> | botón definir |
| < seleccionar > | Definir una lista de selección (lista desplegable) |
| < grupo de opciones > | Define combinaciones de opciones relacionadas en una lista de selección |
| < opción > | Definir opciones en una lista de selección |
| <lista de datos> | Especifica una lista de posibles opciones para el elemento de entrada. |
| imagen | |
| <imagen> | definir imagen |
| < mapa > | Definir un mapa de imagen |
| < área > | Define la región dentro del mapa de imagen |
| Audio Video | |
| <audio> | Definir sonidos, como música u otras transmisiones de audio |
| <vídeo> | definir un audio o video |
| <fuente> | Un recurso multimedia que define el elemento multimedia ( y ) |
| < pista > | Definir pistas de texto externas para elementos multimedia (y) |
| Enlace | |
| < un > | definir un enlace |
| < enlace > | Definir la relación de un documento con un recurso externo |
| <principal> | Definir el cuerpo del documento. |
| < navegación > | Definir enlaces de navegación |
| la lista | |
| < ul > | definir una lista desordenada |
| < viejo > | definir una lista ordenada |
| <li> | definir un elemento de la lista |
| hoja | |
| < mesa > | definir una tabla |
| <título> | Definir el título de la tabla |
| < th > | Definir celdas de encabezado en tablas |
| <tr> | definir las filas en la tabla |
| < td > | 定义表格中的单元 |
| < thead > | 定义表格中的表头内容 |
| < tbody > | 定义表格中的主体内容 |
| < tfoot > | 定义表格中的表注内容（脚注） |
| 样式/节 | |
| < style > | 定义文档的样式信息 |
| < div > | 定义文档中的节 |
| < span > | 定义文档中的节 |
| < header > | 定义一个文档头部部分 |
| < footer > | 定义一个文档底部 |
| < section > | 定义了文档的某个区域 |
| < article > | 定义一个文章内容 |
| < aside > | 定义其所处内容之外的内容 |
| 程序 | |
| < script > | 定义客户端脚本 |
Html的一些全局属性
| 全局属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditableNew | 规定是否可编辑元素的内容。 |
| contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-* | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggable | 指定某个元素是否可以拖动 |
| dropzone | 指定是否将数据复制，移动，或链接，或删除 |
| hidden | hidden 属性规定对元素进行隐藏 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码 |
| spellcheck | 检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序 |
| title | 规定元素的额外信息（可在工具提示中显示） |
| translate | 指定是否一个元素的值在页面载入时是否需要翻译 |
三、CSS
1.css的使用
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
p{
color: red;
/* 设置字体颜色为红色 */
text-align: center;
/* 设置文本对齐方式为居中 */
}
2.css选择器
大家可以看下面这个选择器参考表
| 选择器 | 示例 |
|---|---|
| 类型选择器 | h1 { } |
| 通配选择器 | * { } |
| 类选择器 | .box { } |
| ID选择器 | #unique { } |
| 标签属性选择器 | a[title] { } |
| 伪类选择器 | p: primer hijo { } |
| Selector de pseudoelementos | p::primera línea { } |
| selector de descendientes | artículo p |
| selector de niños | articulo > pag |
| Selector de hermanos adyacentes | h1 + p |
| Selector genérico de hermanos | h1 ~ pag |
- Selectores de tipo, clase e ID
Este grupo de selectores, el primero se refiere a todos los elementos HTML < h1 >.
h1 {
}
También contiene un selector de clase:
.box {
}
O, un selector de identificación:
#unique {
}
- Selectores de atributo de etiqueta
Este conjunto de selectores selecciona elementos de diferentes maneras en función de la presencia de un atributo de etiqueta en un elemento:
a[title] {
}
O seleccione según la presencia o ausencia de un atributo de etiqueta con un valor específico:
a[href="https://www.baidu.com"] {
}
- Pseudo-clases y pseudo-elementos
Este conjunto de selectores contiene pseudo-clases utilizadas para diseñar estados específicos de un elemento. Por ejemplo: la pseudoclase flotante selecciona un elemento cuando el puntero del mouse pasa sobre él:
a:hover {
}
También puede contener pseudoelementos, seleccionando partes de un elemento en lugar del elemento en sí. Por ejemplo, ::first-line seleccionará la primera línea de un elemento (<p> en el siguiente caso), similar a <span> envuelto fuera de la primera línea formateada, y luego seleccionará este <span>.
p::first-line {
}
- Operadores
El conjunto final de selectores se puede combinar con otros selectores para una selección de elementos más compleja. El siguiente ejemplo usa el operador (>) para seleccionar el primer hijo del elemento <div>.
div > p {
}
Resumir
Lo anterior es principalmente un documento relativamente básico que creo que está compilado para las bellezas que acaban de ingresar al frente. Puede consultarlo y continuará actualizándose en el futuro ~~