1. Introducción HTML y estructura del documento

1. Introducción a html

Lenguaje de marcado de hipertexto
Lenguaje de marcado de hipertexto
No es un lenguaje de programación
Texto sin formato

Lenguaje que describe la semántica del documento.

 html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。

2. Estructura del documento HTML

SEO, optimización de motores de búsqueda, optimización de motores de búsqueda.

<!DOCTYPE html> 
<!--文档类型定义，简称DTD-->
<html lang="en"> 
<!--语言：英语-->
<head>
<!--head头部，主要用来完成网页设置-->
    <meta charset="UTF-8">  
    <!--
    meta：元，完成对应设置
    meta字符集属性：
    国际编码，多字节
    gbk编码
	meta的其他属性：
	<meta name="keywords" content="">
	//找到网站的搜索关键字
	<meta name="description" content="">
	//网站的描述内容
	-->
    <title>Title</title>
    <!--标题，显示在浏览器的标签栏中-->
	
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<!--title前的logo-->

	
</head>
<body>
 	<!--网页内容-->
</body>
</html>

Formas de generar rápidamente la estructura del documento:

html: 5 + pestaña
! + pestaña

<style>
		/*引入外部样式文件*/
		<link rel="stylesheet" href="style.css">
	</style>

3. Funciones HTML

Sencillez
Escalabilidad
Independencia de la plataforma
Versatilidad

4. Clasificación de páginas web

Estático
dinámica

2. Navegadores y kernel convencionales

1. Navegadores convencionales

Internet Explorer (IE)
Firefox (Firefox)
Google Chrome)
Opera (Openg)
Sarafi (manzana)

2. Kernel del navegador

El kernel del navegador se compone de dos partes: motor de renderizado y motor JS.

Núcleo tridente ----- IE
Núcleo de gecko ------ FireFox
Núcleo de WebKit ------ Safari y Chrome
Presto kernel ----- Opera
Parpadeo del kernel ------ Chrome y Opera

La mayoría de los navegadores domésticos utilizan controladores de doble núcleo:

tridente y webkit
tridente y parpadeo

Móvil:

iphone / ipad: núcleo de webkit
La versión del kernel de webkit por debajo de android4.4, la versión del kernel de blink por encima de 4.4

Tres etiquetas html básicas

Etiquetas semánticas: comprenda el propósito de cada etiqueta.

Etiquetas a nivel de contenedor, donde se puede colocar cualquier cosa;
Las etiquetas de nivel de texto solo pueden contener texto, imágenes y elementos de formulario.

1. Etiqueta de bloque y etiqueta en línea

Etiqueta de nivel de bloque: ocupa una línea sola, puede establecer el ancho y la altura, el ancho de toda la línea de forma predeterminada, los elementos de nivel de bloque pueden contener elementos de nivel de bloque y en línea.
Etiqueta en línea: no ocupará una línea sola, no puede establecer el ancho y la altura y solo puede contener elementos en línea.
Conversión mutua
Nivel de bloque -----> en línea: pantalla: en línea; en línea
-----> nivel de bloque: pantalla: bloque;

Por ejemplo:

	<span>黑鸭</span>
	<span>绝味</span>

Inserte la descripción de la imagen aquí

	<style type="text/css">
		span{
     
     
			display:block;
		}
	</style>

或者：
	<span style="display:block;">黑鸭</span>
	<span>绝味</span>

Inserte la descripción de la imagen aquí

2. div y span

div: diseño, etiqueta de bloque
span: diseño, etiqueta en línea

3. título hx

Grande -----> pequeño h1 -----> h6

	<h1>我</h1>
	<h2>我</h2>
	<h3>我</h3>
	<h4>我</h4>
	<h5>我</h5>
	<h6>我</h6>

Inserte la descripción de la imagen aquí

4. Etiqueta de párrafo p (etiqueta a nivel de texto)

p: nivel de bloque

<p></p>

5. Newline br

br: etiqueta única / vacía, en línea

<br/>

6. Línea horizontal hr

hr: etiqueta única / vacía, nivel de bloque

<hr/>

7. Imagen img

<img src="" alt="">

src: ruta de la imagen, ruta relativa y ruta absoluta
alt: el texto que se muestra cuando la imagen no se carga y el
título del error : el texto que se reemplaza cuando el mouse pasa sobre la imagen

8. Hiperenlace a (etiqueta a nivel de texto)

1, atributos de una etiqueta

<a href=""></a>

href: la dirección para redirigir
título: indica el texto de solicitud del mouse
objetivo: indica la forma objetivo del salto
nombre: ancla

Valor de atributo de destino:
_blank (nueva ventana)
_self (predeterminado, propia ventana)
_parent (volver al nivel principal)
_top (volver al nivel superior)

2. Una pseudoclase de etiqueta

a: enlace no visitado
a: visitado visitado
a: pasar el mouse por encima
a: activo al hacer clic con el mouse

3. Punto de anclaje
Salta a la posición especificada.

1.html:

<a href="#wdzp">点击我就查看我的作品</a>

2.html:

<a name="wdzp">我的作品</a>
或者：
<a id="wdzp">我的作品</a>

9. Lista desordenada ul

los

<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>

10. Lista ordenada ol

<ol>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ol>

Inserte la descripción de la imagen aquí

11. Cita de texto breve q

El navegador agregará automáticamente comillas dobles a la etiqueta q.

12. Dirección de información de dirección

Agregar información de dirección a la página

13. Etiqueta de leyenda de resumen del título de la tabla

Agregue un título y un resumen a la tabla.
El contenido del resumen no se muestra en el navegador y su función es aumentar la legibilidad de la tabla.

Inserte la descripción de la imagen aquí

Cuatro, etiquetas de formato de texto HTML

1. Negrita b, fuerte (en línea)

b: negrita
fuerte: negrita, enfatizar (el énfasis se usa principalmente para SEO, para extraer palabras clave)

2. Incline i, em (en línea)

yo: inclinación
em: inclinar, enfatizar

3. Texto preformateado previo (nivel de bloque)

Mantenga los saltos de línea y los espacios y el ancho. El tamaño de fuente del texto será un tamaño menor.

	<pre>
		预保留            换行
	和空格
及宽度。
	</pre>

Inserte la descripción de la imagen aquí

4. Reducir el texto a pequeño (en línea)

El tamaño de fuente mínimo admitido por el navegador es 12px.

5. Ampliación de texto grande (en línea)

big fue eliminado en html5, pero no eliminado.
Intente no utilizar etiquetas obsoletas en el desarrollo.

6. Subíndice de texto

<p>X1+X2=Y</p>
	X<sub>1</sub>+X<sub>2</sub>=Y

Inserte la descripción de la imagen aquí

7. Texto superíndice sup

<p>X2+Y2=Z</p>
	X<sup>2</sup>+Y<sup>2</sup>=Z

Inserte la descripción de la imagen aquí

Cinco, carácter de escape de entidad html

<Signo menor que & lt;
> Signo mayor que>
Espacio & nbsp;
"Comillas & quot;
× signo de multiplicación y tiempos;
÷ signo de división & dividir;

Seis, W3C

La especificación w3c se compone de tres partes: estructura (html), presentación (css) y forma (JavaScript).

Consorcio Mundial de la red
Red mundial
Responsable de unificar los estándares relacionados con la web

1. El principio del anidamiento de etiquetas

Los elementos a nivel de bloque pueden contener elementos a nivel de bloque y elementos en línea
Los elementos en línea solo pueden contener elementos en línea
Los elementos a nivel de bloque no se pueden colocar en p
h1-h6, p, dt no pueden contener elementos a nivel de bloque
Los elementos a nivel de bloque se yuxtaponen con elementos a nivel de bloque, y los elementos en línea se yuxtaponen con elementos en línea

2. Convención de nomenclatura de archivos

Durante el desarrollo del proyecto, los caracteres chinos o espacios no se pueden utilizar como nombres de archivos o directorios.
Los nombres de archivos y directorios generalmente comienzan con letras o guiones bajos, y las letras, números y guiones bajos pueden aparecer más tarde.
La página de inicio debe ser index.html
Página de producto product.html
Order page order.html

3. Resumen de especificaciones

Inserte la descripción de la imagen aquí

Etiquetas básicas HTML, etiquetas de formato de texto, caracteres de escape de entidad, navegadores y núcleos, especificaciones W3C

1. Introducción HTML y estructura del documento

2. Navegadores y kernel convencionales

Tres etiquetas html básicas

1. Etiqueta de bloque y etiqueta en línea

2. div y span

3. título hx

4. Etiqueta de párrafo p (etiqueta a nivel de texto)

5. Newline br

6. Línea horizontal hr

7. Imagen img

8. Hiperenlace a (etiqueta a nivel de texto)

9. Lista desordenada ul

10. Lista ordenada ol

11. Cita de texto breve q

12. Dirección de información de dirección

13. Etiqueta de leyenda de resumen del título de la tabla

Cuatro, etiquetas de formato de texto HTML

1. Negrita b, fuerte (en línea)

2. Incline i, em (en línea)

3. Texto preformateado previo (nivel de bloque)

4. Reducir el texto a pequeño (en línea)

5. Ampliación de texto grande (en línea)

6. Subíndice de texto

7. Texto superíndice sup

Cinco, carácter de escape de entidad html

Seis, W3C

1. El principio del anidamiento de etiquetas

2. Convención de nomenclatura de archivos

3. Resumen de especificaciones

Supongo que te gusta