Conoce la pagina
La página web está compuesta por texto, imagen, audio, video, hipervínculo, flash, etc.
Cómo mostrar páginas web
Después de que el programador escribe el código, el navegador lo representa para formar una página web.
Navegador
El navegador es la plataforma en la que se muestran y ejecutan las páginas web.
Cinco navegadores y kernels de uso común
- Navegador IE: núcleo Trident
- Navegador Firefox: kernel Gecko
- navegador safari: núcleo webkit
- Google Chrome: kernel de Bink (una rama de webkit)
- Abrir navegador: kernel de Bink
Estándar WEB
El estándar WEB no es un estándar. Es una serie de estándares formulados por la organización W3C y otras organizaciones de estandarización, que permiten que diferentes navegadores muestren contenido uniforme en la página.
La composición del estándar WEB
- Estructura (html): clasificación y organización de los elementos de la página web
- Rendimiento (css): el estilo de apariencia de la página web
- Behavior (js): la interacción y el comportamiento del modelo de página web.
Los beneficios de los estándares WEB
- Ampliar el desarrollo de WEB
- Se puede acceder al contenido mediante una gama más amplia de dispositivos
- Reducir los costos de tráfico del sitio web
- Hacer que el sitio web sea más fácil de mantener
HTML
HTML: el lenguaje de marcado de hipertexto no es un lenguaje de programación sino un lenguaje de marcado
Formato esqueleto HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
Clasificación de etiquetas de elementos HTML
etiqueta html: etiqueta única etiqueta doble
Etiqueta doble
<body></body> <html></html>等等
Etiqueta única
<img /> <br />等等
relación de etiqueta html
Relación anidada
<head>
<title></title>
</head>
Constelación
<head></head>
<body></body>
En la relación de anidamiento, el elemento secundario debe tener una sangría en una posición de tecla de tabulación del elemento principal
Herramientas de desarrollo de código
DWcs6
VScode
Webstrom
sublime
HBuilder
Formas de generar esqueleto html5
! 或者 html:5
Significado de la etiqueta del esqueleto
- ! DOCTYPE html: tipo de documento, se refiere a la estructura de html5.
- html: etiqueta raíz
- lang: especifica el idioma de html
- cabeza: etiqueta de cabeza
- juego de caracteres: juego de caracteres
- título: etiqueta de título del documento
- cuerpo: etiqueta del cuerpo
Codificación del juego de caracteres
- gb2312: chino simple, incluidos 6723 caracteres
- BIG5: chino tradicional, se refiere a Hong Kong, Macao, Taiwán, etc.
- GBK: incluye caracteres chinos simplificados y tradicionales, es una versión mejorada de GB2312
- UTF-8: Incluye el juego de caracteres requerido por todas las partes del mundo.
Semántica de etiquetas
La semántica de la etiqueta: se refiere al significado de la etiqueta. Coloca la etiqueta correcta en el lugar correcto para que la estructura sea más clara.
Etiqueta de composición tipográfica
Etiqueta de título
h1 ~ h6: Se refiere a que las fuentes de los titulares de los niveles 1 a 6 se irán reduciendo gradualmente, con las características de los saltos de línea.
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
Etiqueta de párrafo
p: se refiere a la etiqueta de párrafo
<p>文本</p>
Etiqueta de línea horizontal
hr: etiqueta de línea horizontal
<hr />
Etiqueta de nueva línea
br: etiqueta de línea horizontal
csdn 一个专属于程序员的APP <br />
div y span
<div>胡歌</div>
<div>霍建华</div>
<span>韩红</span>
<span>古天乐</span>
div: particiones separadas. Solo se puede colocar una etiqueta div en una fila
intervalo: intervalo intervalo. Se pueden colocar muchas etiquetas de tramo en una línea
Etiquetas de formato de texto
<b>文字以加粗的方式显示</b> <strong>文字以加粗的方式显示</strong> <br />
<i>文字以倾斜的方式显示</i> <em>文字以倾斜的方式显示</em> <br />
<s>文字以删除线的方式显示</s> <del>文字以删除线的方式显示</del> <br />
<u>文字以下划线的方式显示</u> <ins>文字以下划线的方式显示</ins> <br />
Atributos de etiqueta
Dejar que las etiquetas HTML tengan más información se denomina atributos de etiqueta.
<标签名 属性1="属性值1" 属性2="属性值2">文本</结束标签>
Atributos de imagen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./img/color.png" alt="color" title="color" width="800px">
</body>
</html>
para resumir
- La etiqueta tiene múltiples atributos. Debe estar escrito en la etiqueta de apertura y después del nombre de la etiqueta.
- No hay un orden particular entre los atributos, el nombre de la etiqueta y el atributo, y el atributo y el atributo deben estar separados por un espacio
- Utilice la forma de clave-valor, como el formato clave = valor.
- alt es el texto que no se puede mostrar en la imagen, y el título es el texto que se muestra cuando se mueve el mouse
Etiqueta de enlace
<a herf="目标的url地址" target="页面的打开方式">文本</a>
<a href="http://www.baidu.com" target="_blank">外部超链接</a>
<a href="./8.图像属性.html">内部超链接</a>
Precauciones
- _self: es abrir el enlace en la página web original
- _blank es abrir un enlace en una página nueva
Etiqueta de comentario
<!-- 注释内容-->
El comentario en sí es para que lo lean los programadores, el propósito es explicar el significado de este código.
El programa no ejecuta la tecla de atajo: ctrl + /
sendero
目标文件夹---->根目录
camino relativo
Camino de nivel superior
<img src="../图像URL" />
Camino del mismo nivel
<img src="./图像URL" />
Camino del siguiente nivel
<img src="./img/图像URL" />
Camino absoluto
Generalmente se refiere a la ruta de red completa
Posicionamiento del punto de anclaje
Cree enlaces de anclaje para permitir a los usuarios saltar rápidamente a la ubicación de destino
Proceder de la siguiente
- Crea el nombre de identificación correspondiente
- Use el nombre de identificación correspondiente para marcar la ubicación del salto al objetivo
<a href="#Christmas">圣诞树的由来</a><br />
<h2 id="Christmas"> 圣诞树的由来</h2>
etiqueta base
La etiqueta base es para establecer el método de apertura del enlace general y escribirlo entre el encabezado y
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.qq.com/">腾讯</a>
<a href="https://www.sina.com.cn/">新浪</a>
<a href="https://www.163.com/">网易</a>
</body>
</html>
pre etiqueta
pre: etiquetas de formato de texto previo, que se muestran en la página web de acuerdo con la configuración original del texto
<pre>
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
</pre>
Caracteres especiales
Se pueden usar caracteres especiales cuando las etiquetas html no sean cómodas de usar. Son símbolos.
La ruta de desarrollo de HTML5
El camino de desarrollo de html5: https://jingyan.baidu.com/article/59a015e352c175f7948865a5.html