introducción html
1.1 descripción general de html
html full name: Hyper Text Markup Language (Hyper Text Markup Language) Hyper Text Markup Language
es una aplicación bajo el Standard General Markup Language (SGML), también es una especificación, un estándar, utiliza símbolos de marcado para marcar la página web que se mostrará Partes.
El archivo de la página web en sí es un archivo de texto, al agregar etiquetas en el archivo de texto.
Puede decirle al navegador cómo mostrar el contenido (por ejemplo: cómo procesar el texto, cómo organizar la pantalla, cómo mostrar la imagen, etc.).
El navegador lee los archivos de la página web en orden, y luego interpreta y muestra el contenido marcado de acuerdo con los marcadores. Las marcas que están mal escritas no indicarán el error y no detendrán el proceso de interpretación y ejecución. El compilador solo puede analizar la causa del error a través del efecto de visualización Y la ubicación del error. Pero debe tenerse en cuenta que para diferentes navegadores, la misma etiqueta puede tener diferentes interpretaciones y, por lo tanto, puede tener diferentes efectos de visualización.
1.2 características html La
producción de documentos con lenguaje de marcado de hipertexto no es muy complicada, pero tiene funciones poderosas y admite la incrustación de archivos en diferentes formatos de datos. Esta es también una de las razones de la popularidad de la World Wide Web. Sus principales características son las siguientes:
1 Simplicidad: el uso de la actualización de la versión del lenguaje de marcado de hipertexto Modo Super set, que es más flexible y conveniente.
2 Escalabilidad: La amplia aplicación del lenguaje de marcado de hipertexto ha traído consigo funciones mejoradas y mayores requisitos para los identificadores. El lenguaje de marcado de hipertexto adopta el método de elementos de subclase para asegurar la expansión del sistema.
3 Independencia de la plataforma: aunque las computadoras personales son populares, hay muchas personas que usan otras máquinas como MAC. El lenguaje de marcado de hipertexto se puede usar en una amplia gama de plataformas. Esta es otra razón por la que la World Wide Web es popular.
4 Versatilidad: Además, HTML es el lenguaje universal de Internet, un lenguaje de marcado simple y universal. Permite a los creadores web crear páginas complejas que combinan texto e imágenes. Estas páginas pueden ser vistas por cualquier otra persona en Internet, sin importar el tipo de computadora o navegador que se utilice.
1.3 reglas gramaticales html
<!DOCTYPE html>
<html>
<head>
<!--设置页面的字符集编码 -->
<meta charset="utf-8" />
<!--设置页面的标题 -->
<title></title>
</head>
<body>
<!--需要展示的信息-->
</body>
</html>
1. Estructura
html : incluido el cuerpo principal 2. Las etiquetas html son palabras clave rodeadas por corchetes angulares 3. Las etiquetas html
suelen aparecer en pares, con un principio y un final, incluidas las etiquetas emparejadas y las etiquetas independientes 4.
html suele tener Atributo, formato: nombre de atributo = "valor de atributo" (espacios separados entre varios atributos)
5. Las etiquetas html no distinguen entre mayúsculas y minúsculas, se recomiendan minúsculas
etiquetas html básicas
2.1 Etiqueta de estructura
<html><html>: Etiqueta raíz: Etiqueta
<head></head>principal
<title></title>: Título de la página
<body></body>: Etiqueta corporal: Contenido web
Atributo:
color: el color del texto<font color="red">内容</font>
bgcolor: color de fondo <body bgcolor="bisque"> </body>
fondo:
representación del color de la imagen de fondo : la
primera forma: use el nombre del color: rojo verde azul la
segunda forma: modo RGB (# 000000 #ffffff # 325687 # 377405)
2.2 Etiqueta de composición tipográfica
1. Etiqueta de anotación: <!--注释-->
2. Etiqueta de avance de línea: <br/>
3. Etiqueta de párrafo: <p>文本文字</p>
Características: Hay una altura de línea entre los párrafos
Atributos: alinear alineación (izquierda: alineación izquierda centro: centrada derecha: alineación derecha)
4. Etiqueta de línea horizontal : <hr/>
Atributo:
ancho: la longitud de la línea horizontal (dos tipos: el primer tipo: representación de píxeles; el segundo tipo, representación porcentual)
tamaño: el grosor de la línea horizontal (en píxeles, por ejemplo: 10px)
color: el color de la
línea horizontal alinear: la alineación de la línea horizontal (izquierda: alineado a la izquierda centro: centrado derecha: alineado a la derecha)
2.3 Etiqueta del contenedor
<div></div>: Etiqueta de bloque, una sola línea, salto de línea
<span></span>: Etiqueta de nivel de fila, todo el contenido está en la misma línea
efecto:
<div></div>: Principalmente combinado con diseño de bloque de página CSS
<span></span>: Lleva a cabo información rápida y amigable
2.4 Etiqueta de texto
2.4.1 Etiquetas de texto básicas
<font></font>
Atributos: tamaño: establecer tamaño de fuente
color: establecer color de fuente
cara: establecer fuente
2.4.2 Etiqueta de título
<h1></h1>—-<h6></h6>
A medida que aumenta el número, el texto se vuelve más pequeño, la fuente está en negrita y el tamaño de fuente incorporado ocupa una línea por defecto;
2.5 Etiqueta de lista
2.5.1 Lista desordenada
la
Etiquetas de lista desordenadas:<ul></ul>
Atributos: tipo: tres valores, a saber,
círculo (círculo hueco), disco (predeterminado, círculo relleno),
elementos de lista cuadrados (cuadrado negro) :<li></li>
Los ejemplos son los siguientes:
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
2.5.2 Lista ordenada
ol
Etiquetas de lista ordenadas:
Atributos: tipo: 1, A, a, I, i (números, letras, números romanos)
elementos de la lista: los
<li></li>
ejemplos son los siguientes:
<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
2.5.3 Lista de definiciones
dl
定义列表 <dl>
<dt>苹果</dt>
<dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd>
</dl>
2.5.4 Lista de anidamiento
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
2.6 Etiquetas de imagen
<img/>Etiqueta independiente
Atributo:
src: dirección de imagen: ruta relativa (mismo sitio web) ruta absoluta (diferentes sitios web)
ancho: ancho
altura: altura
border: border
alinear: alineación, que representa la posición relativa de la imagen y el texto adyacente (hay tres valores de atributo: superior medio inferior)
alt: descripción de texto de la imagen
hspace y vspace establecen los márgenes superior, inferior, izquierdo y derecho de la imagen para evitar que el texto u otras imágenes se acerquen demasiado.
2.7 Etiqueta de enlace
Un hipervínculo puede ser texto o una imagen. Puede hacer clic en estos contenidos para saltar a un nuevo documento o una determinada parte del documento actual.
<a>文本或图片</a>
Atributos:
href: la dirección de la página a la que saltar (es necesario agregar el protocolo para saltar a la red externa);
nombre: nombre, punto de anclaje (volver al punto de anclaje: arriba, abajo, medio), el formato de escritura del punto de anclaje visitante: #nombre 的El valor
objetivo: _self (self) _blank (página nueva, existe la página anterior) _parent _top El valor predeterminado _self
_search equivale a dar un nombre a la página.Si la página existe cuando se abre de nuevo, no se abrirá ninguna página nueva. Puede ser cualquier nombre.
2.8 Etiquetas de formulario El
formulario se <table>define mediante etiquetas. Cada tabla tiene una pluralidad de filas (según la <tr>definición de la etiqueta), cada fila se divide en una pluralidad de celdas (una <td>etiqueta personalizada). Las celdas de datos pueden contener texto, imágenes, listas, párrafos, formularios, líneas horizontales, tablas, etc.
2.8.1 Forma ordinaria
(tabla, tr, td)
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.2 Encabezado de la tabla
(th)
<table border="1" bordercolor="red" cellspacing="0" align="center">
<caption>学生表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.3 Combinando las columnas de la tabla
atributo colspan
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2">各科成绩</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
<td>80</td>
<td>90</td>
</tr>
</table>
2.8.4 Combinar filas de tablas
atributo rowpan
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">aa</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
</tr>
</table>
2.9 Las etiquetas de formato de texto
<b>definen texto en negrita.
<big>Defina caracteres grandes.
<em>La definición se centra en el texto.
<i>Definir cursiva.
<small>Defina fuentes pequeñas.
<strong>La definición enfatiza el tono.
<sub>Defina la palabra subíndice.
<sup>Defina palabras en superíndice.
<ins>Defina la palabra insertada.
<del>Definir palabras de eliminación.
etiqueta de formulario html
Los formularios HTML se utilizan para recopilar diferentes tipos de entrada de usuario
3.1 Etiqueta de formulario
Atributos comunes: acción: representa la acción, el valor es la dirección del servidor y los datos del formulario se envían a la dirección para su procesamiento
método: método de solicitud: obtener y publicar
enctype: indica el tipo de envío del formulario
Valor predeterminado: formulario ordinario application / x-www-form-urlencoded
multipart / form-data Formulario multiparte (generalmente utilizado para cargar archivos)
obtener:
1. En la barra de direcciones, los parámetros de solicitud están todos empalmados después de la ruta de la dirección? Name = "Zhang San" & password = "123456"
2. No es seguro
3. Alta eficiencia
4. El tamaño de la solicitud de obtención es limitado, los diferentes navegadores tienen diferentes, pero el
uso es de aproximadamente 2 KB : generalmente se usa para consultar datos.
post:
1. Barra de direcciones: los parámetros de solicitud se procesan por separado.
2. Seguro y confiable
3. Baja eficiencia
Uso: generalmente se usa para insertar y modificar operaciones
3.1.1 etiqueta de entrada
tipo: los siguientes son valores posibles para el tipo:
1.1 contenido de entrada de texto
1.2 contraseña cuadro de contraseña texto cifrado o máscara
1.3 Radio significa selección única, el nombre debe ser consistente; valor: los datos enviados al servidor significan que solo se puede seleccionar uno en el mismo grupo (marcado = "marcado" significa seleccionado)
1.4 casilla de verificación significa selección múltiple, el nombre debe ser consistente, lo que significa que se puede seleccionar el mismo grupo Seleccione múltiples, el valor de retorno es una matriz (marcado = "marcado" significa seleccionado)
1.5 archivo: significa cargar el control. Las propiedades de entrada anteriores deben tener el atributo de nombre, y el valor al principio significa el valor predeterminado (después de obtener el contenido del cuadro de entrada) Debe tomarse de acuerdo con el nombre), los siguientes botones no tienen propiedades de entrada y no necesitan el atributo de nombre, pero el texto en el botón solicita el uso del atributo de valor
1.6 enviar
1.7 reiniciar
1.9 botón de envío de imagen de imagen
Los atributos de toda la entrada anterior: ancho establece el ancho, alto establece el alto borde establece el borde
Botón 1.10 Botón normal
1.11 oculto significa dominio oculto, que es necesario para el servidor de contenido de la caja, pero no quiere que los usuarios lo sepan (no quiere mostrarlo claramente en la interfaz)
atributo de nombre: el nombre del elemento del formulario, solo el atributo de nombre se puede enviar al servidor.
3.1.2 seleccionar elemento
(la lista desplegable)
<select name="city"> <!--select标签添加该属性multiple="multiple"表示多选-->
<!--option表示下拉列表项-->
<option value="北京">北京</option>
<!--selected="selected"表示选中该项-->
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
3.1.3 elemento textarea
(Campo de texto)
Necesita especificar el tamaño del área de entrada
<textarea cols="100" rows="5">Indica que se puede ingresar el área de 5 filas y 100 columnas, y este elemento no tiene atributo de valor
3.1.4 Los ejemplos y representaciones son los siguientes
<form action="" method="get">
<table align="center">
<caption>
<h1>注册</h1></caption>
<tr>
<td align="right">用户名：</td>
<td><input type="text" name="username" value="bluesky" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" name="confirmpwd" /></td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked="checked" />女
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>
<input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
<input type="checkbox" name="hobby" value="足球 " />足球
<input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
<input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
</td>
</tr>
</tr>
<tr>
<td align="right">上传头像：</td>
<td>
<input type="file" name="upload" />
</td>
</tr>
</tr>
<tr>
<td align="right">居住地：</td>
<td>
<select name="city">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
</td>
</tr>
</tr>
<tr>
<td align="right">个人介绍：</td>
<td>
<textarea cols="100" rows="5">
</textarea>
</td>
</tr>
</tr>
<tr>
<td></td>
<td align="center">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
etiqueta de marco html
Mediante el uso de marcos, puede mostrar más de una página en la misma ventana del navegador. Cada documento HTML se denomina marco y cada marco es independiente de otros marcos.
Desventajas del uso de marcos: los
desarrolladores deben rastrear más documentos HTML al mismo tiempo,
es difícil imprimir la página completa
4.1 conjunto de marcos
Etiqueta de estructura de marco
La etiqueta de estructura de marco ( <frameset>) define cómo dividir la ventana en marcos.
Cada conjunto de marcos define una serie de filas o
columnas. El valor de filas / columnas especifica el área ocupada por cada fila o columna de la pantalla
4.2 marco
Etiqueta de marco
La etiqueta de marco define el documento HTML colocado en cada marco.
4.3 Consideraciones básicas
1. No puede <body></body>etiquetar <frameset></frameset>etiquetas simultáneamente
2. Si un marco tiene un borde visible, el usuario puede arrastrar el borde para cambiar su tamaño. Para evitar esto, es posible <frame>agregar la etiqueta: noresize = "noresize".
4.4 Ejemplo de imagen de efecto y código fuente
！--主界面--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*" border="1px">
<frame src="FrameTop.html" name="topFrame" noresize="noresize" />
<frameset cols="15%,*">
<frame src="FrameLift.html" name="liftFrame" noresize="noresize"/>
<frame src="FrameRight.html" name="rigthFrame"/>
</frameset>
</frameset>
</html>
！--左侧超链接连接栏--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>a{text-decoration:none}</style>
</head>
<body>
<table width="100%" height="400px">
<tr align="center" >
<td>
<a href="a连接.html" target="rigthFrame"><font size="5">第一个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="Table.html" target="rigthFrame"><font size="5">第二个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="注册.html" target="rigthFrame"><font size="5">第三个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="综合案例.html" target="rigthFrame"><font size="5">第四个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="列表.html" target="rigthFrame"><font size="5">第五个连接</font></a>
</td>
</tr>
</table>
</body>
</html>
！--右侧显示页面--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body bgcolor="aquamarine">
<div align="center">
<form action="" method="post">
<table>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="uName" /></td>
</tr>
<tr>
<td>密码：</td>
<td> <input type="password" name="pwb" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td> <input type="password" name="qpwb" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" checked="checked" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="动漫"/>动漫
<input type="checkbox" name="hobby" value="游戏"/>游戏
<input type="checkbox" name="hobby" value="社交"/>社交
</td>
</tr>
<tr>
<td>所在地</td>
<td>
<select name="address">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>广东</option>
</select>
</td>
</tr>
<tr>
<td>上传头像</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea style="resize:none; height: 50px;" name="myself"></textarea>
</td>
</tr>
<tr >
<td colspan="2">
<input style="margin-left: 50px;" type="submit" name="submit"/>
<input style="margin-left: 50px;" type="reset" name="reset"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
!--顶部Hello World--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="coral">
<p align="center"><font size="7">Hello World</font></p>
</body>
</html>
Otras etiquetas y caracteres especiales de html
5.1 Otras etiquetas
<!--该网页的关键字-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<meta charset="UTF-8"> html5
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
5.2 Caracteres especiales
<Menos que signo
>Mas grande que
&Y personajes
"comillas
®Registrado
©derechos de autor
™marca comercial
Espacio