Nivel 1: Conocimiento básico de las etiquetas de control de texto
detalles de la misión
Esta tarea de nivel: complete un conjunto de preguntas de opción múltiple relacionadas con las etiquetas de control de texto.
información relacionada
Para completar esta tarea, debe dominar: 1. Etiquetas de párrafo título y su uso, 2. Etiquetas de formato de texto y su uso, 3. Etiquetas de caracteres especiales y su uso.
Elementos a nivel de bloque y elementos en línea
Elemento a nivel de bloque
Un elemento de nivel de bloque hace referencia a un elemento que se muestra como un contenido de bloque. Cuando el navegador lo muestra, normalmente se inicia (y termina) con una nueva línea. Sus características son:
Comience siempre en una nueva línea
La altura, la altura de la fila y los márgenes interiores y exteriores son controlables
El ancho predeterminado es el 100% del contenedor
Puede anidar elementos en línea y otros elementos de nivel de bloque
Elemento en línea
Los elementos insertados también se denominan elementos en línea, que hacen referencia a elementos que se muestran como una línea de contenido. Cuando se muestran por el navegador, se organizarán en una línea en secuencia sin iniciar una nueva línea. Sus características son:
Alinee con otros elementos
Altura incontrolable, altura de fila y márgenes internos y exteriores
El ancho es el ancho de su contenido y no se puede cambiar
Los elementos insertos solo pueden contener texto u otros elementos en línea
Etiqueta de párrafo de encabezado
Etiqueta de título de texto
La etiqueta de título de texto es una etiqueta doble, elemento de nivel de bloque, utilizado para especificar el nivel del título del contenido de texto. Proporciona 6 niveles de etiquetas de título en HTML, desde el nivel uno
Comienza el nivel 6
, el tamaño de fuente disminuye en orden.
De forma predeterminada, se muestra en la mayoría de los navegadores
El contenido es mayor que el tamaño predeterminado del texto en la página web,
El contenido es básicamente del mismo tamaño que el texto predeterminado, y
Con
El contenido es menor que el texto predeterminado. Puede establecer las propiedades de alineación del título del texto.
Etiqueta de párrafo
Etiqueta de párrafo
Es una etiqueta doble, elemento de nivel de bloque, que se utiliza para definir el contenido de texto como un párrafo, el contenido del párrafo comienza desde una nueva línea y hay una línea en blanco entre el párrafo anterior. Puede establecer las propiedades de alineación del texto del párrafo.
Etiqueta de decoración de texto
Etiqueta Newline
Etiqueta Newline
Es una sola etiqueta, que puede ajustar el texto sin terminar el contenido del texto. No produce una línea en blanco, pero múltiples
Las etiquetas pueden tener el efecto de varias líneas en blanco.
Etiqueta de línea horizontal
La etiqueta de línea horizontal hr/ es una sola etiqueta, utilizada para generar una línea horizontal. Puede establecer el grosor, la longitud, la alineación de la línea horizontal, la presencia o ausencia de sombreado y los atributos de color de la línea.
Etiqueta de decoración de texto
Las etiquetas de decoración de texto son todas etiquetas dobles, elementos en línea. Se utiliza para establecer el estilo del texto. Estas etiquetas y sus descripciones de funciones se muestran en la figura siguiente.
Etiqueta de decoración de texto
Etiqueta de bloque
Etiqueta de bloque
Etiqueta en línea
El intervalo de etiquetas en línea es una etiqueta doble, un elemento en línea. Se utiliza para combinar elementos en línea en el documento para facilitar la definición de estilo o utilizar JavaScript para manipularlo. Cómo usar y
Cita de caracteres especiales
Al navegar por páginas web, a menudo ve textos que contienen caracteres especiales, como fórmulas matemáticas, información de derechos de autor, etc. Estos caracteres no se pueden utilizar directamente, pero solo se pueden realizar por la forma de referencia que se muestra en la figura siguiente.
Cita de caracteres especiales
Respuesta de referencia:
Nivel 2: Etiquetas de párrafo de encabezado
Descripción de la tarea
La tarea de este nivel: escribir una página web con encabezados y párrafos. El efecto de visualización es el siguiente:
Representaciones de párrafos de título
Conocimientos relacionados
Para completar la tarea de este nivel, debe dominar: 1. El uso de etiquetas de encabezado y párrafo, 2. El valor del atributo align.
Etiquetas necesarias para completar esta tarea
Para completar esta tarea, debe usar la etiqueta title tag de primer nivel
, Etiqueta de encabezado secundaria
Y etiquetas de párrafo
El valor del atributo relacionado se alinea
izquierda: alineada a la izquierda
centro: centro alineado
derecha: alineado a la derecha
justificar: justificar
Requisitos de programación
Según las representaciones anteriores, agregue código en el área Begin-End del editor de la derecha. Los requisitos específicos son:
1. Agregue un título de primer nivel en el medio, el contenido del título es «Chapter One HTML5 Basics», utilizando la alineación central;
2. Agregue un título secundario en el medio, el contenido del título es «1.1 Etiqueta de control de texto», alineado a la izquierda.
3. Añadir un párrafo intermedio, el contenido del párrafo es «Este es el primer párrafo.», utilizando ambos extremos justificados.
introducción de pruebas
Después de agregar el código, haga clic en la prueba, la plataforma probará el código que ha escrito y, si es correcto, complete la tarea.
Código de referencia:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Settings of title paragraph</title>
</head>
<body bgcolor="#00ffff">
<!-- ********* Begin ********* -->
<h1 align="center">Chapter One HTML5 Basics</h1>
<h2 align="left">1.1 Text control tags</h2>
<p align="justify">This is the first paragraph</p>
<!-- ********* End ********* -->
</body>
</html>Insert the code snippet here
Nivel 3: Etiqueta horizontal
detalles de la misión
La tarea de este nivel: escribir una página web con una línea horizontal debajo del título. El efecto de visualización es el siguiente:
Efecto de línea horizontal
información relacionada
Para completar la tarea de este nivel, usted necesita dominar: 1. El uso de la etiqueta de línea horizontal y la etiqueta del salto de línea, 2. Los atributos relacionados de la etiqueta de línea horizontal.
Etiquetas necesarias para completar esta tarea
Para completar esta tarea, debe utilizar la etiqueta de línea horizontal
Y etiqueta de salto de línea
Atributos relacionados con la etiqueta de línea horizontal
tamaño: El grosor de la línea horizontal, la unidad de longitud, el valor predeterminado es px
ancho: longitud de línea horizontal, unidad de longitud, por defecto es px
alinear: alineación de línea horizontal, se puede dejar, centro, derecha
color: El color de la línea horizontal. El valor puede ser una palabra de color o un código de color.
noshade: Sin ajuste de sombra, sin sombra al agregar y sombra cuando no se agrega.
Requisitos de programación
Según las representaciones anteriores, agregue código en el área Begin-End del editor de la derecha. Los requisitos específicos son:
1. Agregue una línea horizontal debajo del texto del título de primer nivel «Chapter One HTML5 Basics», y utilice una etiqueta de salto de línea para agregar una línea en blanco debajo de la línea horizontal
2. Agregue el atributo size a la etiqueta de línea horizontal, el valor es 3
3. Agregue el atributo width a la etiqueta de línea horizontal, el valor es 400
4. Ajuste el color de la línea horizontal a azul
4. Retire el efecto de sombra de la línea horizontal
Descripción de la prueba
Después de agregar el código, haga clic en la prueba, la plataforma probará el código que ha escrito y, si es correcto, complete la tarea.
Código de referencia:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal line settings</title>
</head>
<body bgcolor="#00ffff">
<h1 align="center">Chapter One HTML5 Basics</h1>
<!-- ********* Begin ********* -->
<hr size=3 width=400 color="blue" noshade="noshade">
<br/>
<!-- ********* End ********* -->
<h2 align="left">1.1 Text control tags</h2>
<p align="justify">This is the first paragraph. </p>
</body>
</html>Insert the code snippet here
Nivel 4: Etiqueta de decoración de texto
detalles de la misión
Esta tarea: escriba un documento HTML y modifique el texto según sea necesario. El efecto de visualización es el siguiente:
Modificación de texto 2
información relacionada
Para completar esta tarea, debe dominar: etiqueta 1.font y sus atributos, 2. función de etiqueta de modificación de texto común.
etiqueta de fuente y sus atributos
La etiqueta de fuente puede modificar el tamaño de fuente, la fuente y el color del texto. Los atributos correspondientes son:
tamaño: establecer el tamaño de fuente de texto, el valor es 1 ~ 7
cara: establecer la fuente de texto
color: establecer el color del texto, el valor es una palabra de color o código de color
alinear: Establecer la alineación del texto, el valor puede ser izquierda, centro, derecha, justificar
Otras etiquetas de la decoración del texto
Las otras etiquetas de la clase de decoración de texto son las siguientes
Decoración de texto
Requisitos de programación
Según las representaciones anteriores, agregue código en las dos áreas Begin-End del editor de la derecha. Los requisitos específicos son:
1. Utilice la etiqueta de fuente para agregar la fuente «Bold» y la pantalla «Red» al texto del título de primer nivel «Chapter One HTML5 Basics»
2. Utilice etiquetas en negrita, cursiva, subrayado, superíndice y subíndice para agregar efectos de visualización al texto correspondiente respectivamente
introducción de pruebas
Después de agregar el código, haga clic en la prueba, la plataforma probará el código que ha escrito y, si es correcto, complete la tarea.
Código de referencia:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal line settings</title>
</head>
<body bgcolor="#00ffff">
<h1 align="center">
<!-- ********* Begin ********* -->
<font face=" " color="red">Chapter One HTML5 Basics</font>
<!-- ********* End ********* -->
</h1>
<hr size=3px width=400px Align=center color=blue noshade/>
<br/>
<h2 align="left">1.1 Text control tags</h2>
<!-- ********* Begin ********* -->
<b>This is the text in bold</b>
<i>This is the text in italics</i>
<u>This is underlined text</u>
X<sup>3</sup>-2Y<sub>2</sub>=1
<!-- ********* End ********* -->
</body>
</html>Insert the code snippet here
.
