Gracias por tener algo tan básico y los amigos lo aprecian.
Hola soy ken
Posteriormente, Ken continuará actualizando los conceptos básicos de HTML y CSS en esta columna,
principalmente basados en libros de texto y materiales de enseñanza, complementados
con recursos de sitios web de autoaprendizaje. Los amigos que quieran aprender por sí mismos o mirar hacia atrás y revisarlos pueden reunirse. jajaja
Estoy muy avergonzado de la reciente negligencia para ajustar
Siempre pienso en las cosas que no son acordes a mi edad, siempre pienso en todo lo que se puede considerar, y constantemente me presiono y algunas pequeñas cosas que no son molestas sino dispersas. La mentalidad no ha sido muy optimista
, y yo solo estoy Una persona común con baja eficiencia de aprendizaje
puede estar un poco perdida_
Pero cuando una persona sabe a soledad,
sonríe y se reconcilia con el mundo.
Cuando tenga preguntas sobre usted mismo,
es hora de que cambie
1.1_html conceptos básicos
1.1.1_html5 formato básico del documento y marcado HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
- La etiqueta <! Doctype>
está en la parte superior del documento. El uso de la declaración DOCTYPE de html5 hará que el navegador muestre la página en modo de compatibilidad estándar, de modo que el navegador pueda usar la página como un documento html válido.
<!doctype html>
- Etiqueta <html>
Esta etiqueta se encuentra después de la etiqueta <! doctype>, lo que significa que el principio y el final del documento html y el contenido del encabezado y el cuerpo del documento están en el medio. - Etiqueta <head>
Después de la etiqueta <html>, defina la información de la cabecera del documento html, también llamada etiqueta head. - <body> etiqueta
etiqueta del cuerpo - Marca simple y doble en html
- Doble marca
<标记名>内容</标记名>
- Marca única
<标记名/>
- Marca de comentario
<!--注释语句-->
<!--这就是注释标记-->
1.1.2_Sintaxis de HTML5
- Las etiquetas no distinguen entre mayúsculas y minúsculas
<p>这里的p标签大小写不一致</P>
Aunque el caso de la etiqueta inicial y la etiqueta final de la etiqueta p no coinciden, la sintaxis es completamente legal en html5.
- Permitir valores de atributo sin comillas
<input checked=a type=checkbox/>
<input readonly=readonly type=text/>
El código anterior es equivalente a
<input checked="a" type="checkbox"/>
<input readonly="readonly" type="text"/>
- Permitir la omisión de atributos de algunos valores de atributos
<input checked=“checked” type="checkbox"/>
<input readonly="readonly" type="text"/>
Puede omitirse como:
<input checked type="checkbox"/>
<input readonly type="text"/>
1.1.3_ atributos de la etiqueta
<标记名 属性1="属性值1" 属性2="属性2"...>内容</标记名>
Los marcadores pueden tener varios atributos sin ningún orden en particular.
Por ejemplo:
<h1 align="center">内容</h1>
1.1.4_Etiquetas relacionadas con el encabezado del documento HTML5
Estas etiquetas suelen estar escritas en la etiqueta principal
- Establecer etiqueta de título de página <título>
<title>网页标题名称</title>
- Definir etiqueta de metainformación de la página <meta />
- Etiqueta de archivo externo de referencia <link>
- Etiqueta de estilo en línea
1.2_ Marca de control de texto
1.2.1 Marcas de título y párrafo
- Las etiquetas de título
incluyen <h1> ~ <h6>
< hn align="对齐方式">内容< /hn>
izquierda: establece la alineación izquierda del texto del título (valor predeterminado)
centro: establece la alineación central del texto del título
derecha: establece la alineación derecha del texto del título
- Marca de párrafo
< p align="对齐方式">内容< /p>
- Marca horizontal <h />
< hr 属性=“属性值” />
| Nombre del Atributo | sentido | Valor de atributo |
|---|---|---|
| alinear | Establecer la alineación de las líneas horizontales | Se pueden seleccionar tres valores de izquierda, derecha, centro, el predeterminado es izquierdo |
| Talla | Establecer el grosor de la línea horizontal | En píxeles, el valor predeterminado es 2 píxeles. |
| color | Establecer el color de la línea horizontal | Nombres de colores disponibles, hexadecimal #RGB, rgb (r, g. B) |
| anchura | Establecer el ancho de la línea horizontal | Puede ser un determinado valor de píxel o un porcentaje de la ventana del navegador. El valor predeterminado es 100% |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水平线标记的用法和属性</title>
</head>
<body>
<p>传智播客专业于Java、.NET、 PHP、 C/C++、网页设计、平面设计、UI设计。从菜鸟到职场达人的转变就在这里，你还等什么? </p>
<hr />
<P align="left">Java学院</p>
<hr color="red" align="left" size="5" width="600"/>
<P align="center">网页平面设计学院</p>
<hr color="#066F" align-"right" sizem"2" width="508"/>14 <P align="right">PHP学院</p>
</body>
</html>
Los resultados de la operación son los siguientes:
4. Marca de salto de línea <br />
1.2.2_ Marca de formato de texto
1.2.3_Marca de carácter especial
1.3_Etiqueta de imagen
Los formatos de imagen más utilizados son principalmente GIF, JPG y PNG.
Se recomienda que las imágenes pequeñas, como iconos y botones en la web, utilicen el formato GIF o PNG, las imágenes transparentes se recomiendan para usar el formato PNG, las imágenes similares a las fotos se recomiendan para usar el formato JPG y las imágenes dinámicas. Formato GIF.
1.3.1_Etiqueta de imagen <img />
<img src="图像URL"/>
Ejemplo: el
código es el siguiente:
resultado de ejecución:
1.3.2_ ruta absoluta y ruta relativa
-
Absoluta
path_ La
ruta absoluta es el camino real del archivo o directorio en la página web en el disco duro, tales como "D: \ HTML5 + CSS3 \ imágenes \ logo.gif", o la dirección de red completa, como http: //www.itcast. cn / images / logo, gif ".
_No
se recomienda usar rutas absolutas en las páginas web, porque necesitamos subir todos los archivos al servidor después de que se crea la página web. Es decir, es muy probable que" D: \ HTML5 + CSS3 \ images \ " logo.gif "tal ruta. -
Ruta relativa
_
la ruta relativa es relativa al archivo actual, ruta relativa sin una letra de unidad, generalmente en un documento de página HTML como punto de partida, la posición de la imagen de destino es descrita por la jerarquía.
_En
resumen, la configuración de la ruta relativa se divide en los tres tipos siguientes.
_
(1) El archivo de imagen y el archivo HTML se encuentran en la misma carpeta: simplemente ingrese el nombre del archivo de imagen, como <img src = "logo. Gif" />.
_
(2) El archivo de imagen se encuentra en la carpeta del siguiente nivel del archivo HTML: ingrese el nombre de la carpeta y el nombre del archivo, separados por "/", como <img src = "images / logo.gif" />
_
(3) El archivo de imagen se encuentra en la carpeta del nivel superior del archivo html: agregue "… /" antes del nombre del archivo, si son los dos niveles superiores, debe usar "... / ... /" y así sucesivamente, como <img src = "logo.gif />
1.4_ Marca de hipervínculo
1.4.1_ Crear hipervínculo
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- La etiqueta <a> se utiliza para definir un hipervínculo, href y target son sus atributos comunes
- href: se utiliza para especificar la dirección URL del destino del enlace
- target: se utiliza para especificar cómo abrir la página vinculada. Sus valores son _self y _blank,
_self significa abrir en la ventana original, _blank significa abrir en una nueva ventana
Ejemplos:
Código:
Después de ejecutar:
Haga clic en el hipervínculo para que aparezca una nueva ventana:
1.4.2_ enlace de anclaje
Ejemplo directo:
Código: después de
ejecutar las siguientes dos imágenes, haga clic en "haga clic en mí" en la primera imagen para saltar a "aquí" en la segunda imagen:
Definitivamente haré todo lo posible
para estar a la altura de mí
y de mis familiares y amigos.
Soy Ken,
tendremos un período después