Etiquetas de esqueleto y etiquetas de uso común

`<!DOCTYPE>`

Declare el tipo de documento y dígale al navegador HTML5que analice la página de acuerdo con el estándar.

<!DOCTYPE> La etiqueta se encuentra en la parte superior del documento y se utiliza para indicar al navegador qué especificación estándar HTML utiliza el documento actual. El tipo de documento debe declararse al principio, para que el navegador pueda analizarlo de acuerdo con el tipo de documento especificado. .

`<html>` etiqueta:

Rol: el nodo raíz de la página web.

`<head>` etiqueta:

Papel: para almacenar title, meta, style, script, linky otras etiquetas. El navegador auxiliar analiza la página y no la muestra en la página.

`<title>` etiqueta:

Rol: deje que la página tenga un título propio.

`<body>` etiqueta:

Papel: parte principal de la página, la página utiliza para almacenar la etiqueta para mostrar el p, h, a, imgy así sucesivamente.

Nota: <body>varios espacios o caracteres de nueva línea en el medio se tratarán como un solo espacio.

`<meta>` etiqueta

Configure los metadatos de la página web. Diferentes atributos harán que las <meta>etiquetas tengan diferentes funciones.

<meta charset="utf-8" />Especifique la codificación del juego de caracteres utf-8(código global optimizado)
Se usa para establecer palabras clave <meta name="keywords" content="xxx" />
Se utiliza para configurar la información de descripción. <meta name="description" content="xxxx" />

utf-8 es actualmente el método de codificación de juego de caracteres más utilizado. Los métodos de codificación de juego de caracteres más utilizados incluyen gbk y gb2312. gb2312 incluye 6763 caracteres chinos. GBK contiene todos los caracteres chinos, es una extensión de GB2312, agrega soporte para caracteres tradicionales y es compatible con GB2312. UTF-8 contiene caracteres que todos los países del mundo deben utilizar.

Etiqueta de título

<hn> 标题文本 </hn>

En htmlun total de seis títulos. <h1>, <h2>, <h3>, <h4>, <h5>Y <h6>. Disminuir en orden de importancia. <h1>Es el título más grande y solo puede aparecer una vez en la página. Los demás no importan.

Etiqueta de párrafo

<p>文本内容</p>

El texto de la página debe mostrarse de manera ordenada, es inseparable de las etiquetas de párrafo, tal como normalmente escribimos artículos, toda la página se puede dividir en varios párrafos, es la HTMLetiqueta más común del documento, por defecto, texto Un párrafo se ajustará automáticamente según el tamaño de la ventana del navegador.

Etiqueta de línea horizontal

<hr />
<!-- 单标签 -->

En las páginas web, a menudo vemos algunas líneas horizontales que separan los párrafos de los párrafos, lo que hace que la estructura del documento sea clara y en capas. Estas líneas horizontales se pueden lograr insertando imágenes, o simplemente mediante etiquetas, que <hr />es para crear etiquetas que abarcan las líneas horizontales de la página web.

Etiqueta de nueva línea

<br />

En HTMLun párrafo de texto se organizará de izquierda a derecha, hasta el extremo derecho de la ventana del navegador, y luego se ajustará. Si desea que se fuerce el ajuste de un determinado texto, debe utilizar una etiqueta de ajuste.

`div` `span` etiqueta

<div>这是头部</div>
<span>今日价格</span>

div span No hay semántica, sino dos etiquetas de uso común en el diseño de nuestra página web.

Etiqueta de imagen

<img src="图像URL" />

HTMLImplementar cualquier elemento de una página web debe basarse en HTMLetiquetas, para poder mostrar la imagen es necesario utilizar la etiqueta de imagen en la página web.

srcEl atributo se usa para especificar la ruta y el nombre de archivo del archivo de imagen, es imguna etiqueta de atributo requerida.

alt El atributo se utiliza para especificar el contenido que se muestra cuando no se encuentra la imagen.

jpg png svg gif Es el formato de la imagen.

camino

Ruta relativa y ruta absoluta

camino relativo

Relativo al archivo actual
En el mismo directorio de nivel, simplemente ingrese el nombre del archivo de imagen <img src="avatar.jpg" />.
El archivo de imagen se encuentra en el directorio del siguiente nivel del archivo actual: ingrese el nombre de la carpeta y el nombre del archivo, /separados por, como <img src="img/avatar.jpg" />.
Los archivos de imagen en los archivos del directorio actual en uno: antes del nombre del archivo más ../, si los niveles, necesita usar ../ ../, y así sucesivamente <img src="../avatar.jpg" />.

Camino absoluto

Ruta absoluta local

D:\web\img\avatar.jpg

Ruta de la red

https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=586984b5572c11dfded1b8255b1c05ed/bd3eb13533fa828b9caedeb5fd1f4134960a5ad2.jpg

<!-- 本地绝对路径 -->
<img src="H:/html+css课程/01-html/mydev/bf.png" alt="sorry,图片未找到" />
<!-- 网络路径 -->
<img
	src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=586984b5572c11dfded1b8255b1c05ed/bd3eb13533fa828b9caedeb5fd1f4134960a5ad2.jpg"
	alt="sorry,图片未找到"
/>

<!-- 相对路径,相对当前文件所在的目录 -->
<!-- 同级目录 -->
<img src="bf.png" alt="sorry,图片未找到" />
<!-- 下级目录 -->
<img src="img/bf.png" alt="sorry,图片未找到" />
<!-- 上一级目录 -->
<img src="../bf.png" alt="sorry,图片未找到" />

<!-- alt 属性 用来表示 图片未找到时 所显示的内容 -->

Etiqueta de enlace

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

En HTMLla creación de hipervínculos es muy sencillo, basta con utilizar la etiqueta de enlace para rodear el objeto que se va ligado.

href: Especifica la urldirección del destino del enlace , cuando la etiqueta se aplica hrefcuando las propiedades, tiene una función de hipervínculo. Abreviatura de referencia de hipertexto, que significa referencia de hipertexto.

target: Se utiliza para especificar el método de apertura de la página vinculada.

_self Para abrir en la ventana actual (valor predeterminado).
_blank Para abrir en una nueva ventana.

Nota:

El enlace externo se puede vincular directamente a la ruta de la red.
El enlace interno se puede vincular directamente al nombre de la página interna, por ejemplo <a href="index.html"> 首页 </a>.

Si el destino del enlace no se determina en ese momento, el valor del atributo href de la etiqueta del enlace generalmente se define como href="#", lo que indica que el enlace es temporalmente un enlace vacío.
No solo puede crear hipervínculos de texto, puede agregar hipervínculos a varios elementos de la página web, como imágenes, tablas, audio y video.

<!-- 当前窗口跳转 -->
<a href="https://www.baidu.com/">百度</a>
<a target="_self" href="https://www.baidu.com/">百度</a>
<!-- 新窗口跳转 -->
<a target="_blank" href="https://www.baidu.com/">百度</a>
<!-- 点击图片跳转 -->
<a href="https://www.baidu.com/">
	<img src="bf.png" alt="sorry,图片未找到" />
</a>

Etiqueta de lista

Lista desordenada `ul`

Cada elemento de la lista en una lista desordenada no tiene distinciones de nivel de orden y son paralelos. El formato de sintaxis básico es el siguiente:

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ul>

Por ejemplo, a continuación, las noticias no están en orden, no hay necesidad de hacer cola, primero en llegar, primero en servirse y luego publicarse primero.

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo anti-sanguijuelas. Se recomienda guardar la imagen y subirla directamente (img-4nKc3fsP-1593770248576) (https://i.loli.net/2019/07 /22/5d355c8a6941286724.png)]

Nota

La lista tiene una estricta relación de anidamiento.
<ul></ul>Solo se puede anidar <li></li>en la <ul></ul>etiqueta , no se permite ingresar directamente otras etiquetas o texto en la etiqueta.
<li></li>Between es equivalente a un contenedor, que puede contener todos los elementos.
Las listas desordenadas tendrán sus propios atributos de estilo, pero normalmente no usamos sus propios estilos.

Lista ordenada `ol`

Una lista ordenada es una lista ordenada, y cada elemento de la lista está organizado y definido en un orden determinado. El formato de sintaxis básico de una lista ordenada es el siguiente:

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ol>

Todas las características son básicamente las ulmismas. Pero en el trabajo real, rara vez se usa ol.

Lista personalizada

Las listas personalizadas se utilizan a menudo para explicar y describir términos o sustantivos. No hay viñetas antes de los elementos de la lista en la lista personalizada. La sintaxis básica es la siguiente:

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
	...
</dl>