Etiquetas básicas de HTML-javaweb

Introducción HTML

Abreviatura del lenguaje de marcado de hipertexto (lenguaje de marcado de hipertexto): HTML
HTML utiliza etiquetas para marcar varias partes de una página web que se mostrarán. El archivo de la página web en sí es un archivo de texto. Al agregar etiquetas al archivo de texto, puede decirle al navegador cómo mostrar el contenido (como: cómo procesar el texto, cómo organizar la imagen, cómo mostrar la imagen, etc.).

Especificaciones de escritura de documentos HTML

<html> 			表示整个html 页面的开始
	<head> 头信息
		<title>标题</title> 标题
	</head>

	<body>	 body 是页面的主体内容
		页面主体内容
	</body>
</html>

Excepción

<!DOCTYPE html><!-- 约束，声明 -->

<html lang="en"><!-- html标签标识html的开始 lang="zh_CN"表示中文 html标签中一般分为两部分，分别是head和body -->

<head><!-- 表示头部信息，一般包含三部分内容，title标签 css样式，js代码 -->

    <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->

    <title>标题啊</title><!-- 标题 -->

</head>

<body><!-- body主体标签是整个html页面显示的主体内容  -->
	hello world
</body>

</html>

Introducción a las etiquetas HTML

1.标签的格式:
<标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
	i. 分为基本属性：bgcolor="red" 可以修改简单的样式效果
	ii. 事件属性： onclick="alert('你好！');" 可以直接设置事件响应后的代码。
4.标签又分为，单标签和双标签。
	i. 单标签格式： <标签名/> br 换行hr 水平线
	ii. 双标签格式: <标签名> ...封装的数据...</标签名>

★ Gramática de etiquetas

<!-- ①标签不能交叉嵌套-->
正确：<div><span>早安</span></div>
错误：<div><span>早安</div></span>
<hr />
<!-- ②标签必须正确关闭-->
<!-- i.有文本内容的标签： -->
正确：<div>早安</div>
错误：<div>早安
<hr />
<!-- ii.没有文本内容的标签： -->
正确：<br />
错误：<br>
<hr />
<!-- ③属性必须有值，属性值必须加引号-->
正确：<font color="blue">早安</font>
错误：<font color=blue>早安</font>
错误：<font color>早安</font>
<hr />
<!-- ④注释不能嵌套-->
正确：<!-- 注释内容--> <br/>
错误：<!-- <!-- 这是错误的html 注释--> -->
<hr />
注意事项：
1.html 代码不是很严谨。有时候标签不闭合，也不会报错。

Etiqueta de título

<h1>一级标题<h1> ,<h2>二级标题<h2>  <h3>三级标题<h3> <h4>四级标题<h4> <h5>五级标题<h5> <h6>六级标题<h6>

Etiqueta de fuente

font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
	 	color属性修改颜色
	 	face属性修改字体
	 	size属性修改文本大小

特殊字符
需求1：把 <br> 换行标签 变成文本 转换成字符显示在页面上

常用的特殊字符:
   <  ===>>>>       &lt;
   >   ===>>>>       &gt;
  空格   ===>>>>       &nbsp;

★ hipervínculo

a标签是 超链接
      href属性设置连接的地址 "#"不跳转
      target属性设置哪个目标进行跳转
       _self     表示当前页面(默认值)
      _blank    表示打开新页面来进行跳转
      <a href="http://www.baidu.com" target="_blank">

★ etiqueta de imagen

需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性

    img标签是图片标签,用来显示图片
        src属性可以设置图片的路径
        width属性设置图片的宽度
        height属性设置图片的高度
        border属性设置图片边框大小
        alt属性设置当指定路径找不到图片时,用来代替显示的文本内容

    在JavaSE中路径也分为相对路径和绝对路径.
        相对路径:从工程名开始算

        绝对路径:盘符:/目录/文件名

    在web中路径分为相对路径和绝对路径两种
        相对路径:
            .           表示当前文件所在的目录
            ..          表示当前文件所在的上一级目录
            文件名      表示当前文件所在目录的文件,相当于 ./文件名            ./ 可以省略

        绝对路径:
            正确格式是:  http://ip:port/工程名/资源路径

            错误格式是:  盘符:/目录/文件名
<img src=""/>

★ Lista de etiquetas

<ul>
	<li> </li>
</ul>无序列表 
<ol>
	<li></li>
</ol>有序列表 			其中li是列表项

★ etiqueta de formulario

		table 标签是表格标签
			border 设置表格标签
			width 设置表格宽度
			height 设置表格高度
			align 设置表格相对于页面的对齐方式
			cellspacing 设置单元格间距

		tr	 是行标签
		th	是表头标签
		td  是单元格标签
			align 设置单元格文本对齐方式

		b 是加粗标签
<table> 表格标签

	<tr>行标签

		<td> </td>单元格标签

		<th></th>表头标签
	<tr>
</table>
加粗<b></b>  align 设置单元格文本对齐方式  

cellspacing = "0" 设置单元格间距

colspan ="2"属性设置跨列

rowspan="2"属性设置跨行

etiqueta de marco de iframe (ventana en línea)

<iframe src="demo.html" name="abc"></iframe>在页面开辟一个空间，显示另外的页面
一般配合列表标签使用。菜单栏选择

[Falló la transferencia de la imagen de la cadena externa. El sitio de origen puede tener un mecanismo de cadena antirrobo. Se recomienda guardar la imagen y cargarla directamente (img-NSQngtRk-1587052939119) (D: \ YoudaoNote \ data \ weixinobU7VjkjF_n6Xv4vkiPhhSvWhZsk \ f328d58901b068b5b01

★ etiqueta de formulario

form标签就是表单
    input type=text     是文件输入框  value设置默认显示内容
    input type=password 是密码输入框  value设置默认显示内容
    input type=radio    是单选框    name属性可以对其进行分组   checked="checked"表示默认选中
    input type=checkbox 是复选框   checked="checked"表示默认选中
    input type=reset    是重置按钮      value属性修改按钮上的文本
    input type=submit   是提交按钮      value属性修改按钮上的文本
    input type=button   是按钮          value属性修改按钮上的文本
    input type=file     是文件上传域
    input type=hidden   是隐藏域    当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

    select 标签是下拉列表框
    option 标签是下拉列表框中的选项 selected="selected"设置默认选中

    textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
        rows 属性设置可以显示几行的高度
        cols 属性设置每行可以显示几个字符宽度

 form标签是表单标签
            action属性设置提交的服务器地址
            method属性设置提交的方式GET(默认值)或POST

        表单提交的时候，数据没有发送给服务器的三种情况：
            1、表单项没有name属性值
            2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
            3、表单项不在提交的form标签中

        GET请求的特点是：
            1、浏览器地址栏中的地址是：action属性[+?+请求参数]
                请求参数的格式是：name=value&name=value
            2、不安全
            3、它有数据长度的限制

        POST请求的特点是：
            1、浏览器地址栏中只有action属性值
            2、相对于GET请求要安全
            3、理论上没有数据长度的限制

<form action="http://localhost:8080" method="post">
        <input type="hidden" name="action" value="login" />
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td> 用户名称：</td>
                <td>
                    <input type="text" name="username" value="默认值"/>
                </td>
            </tr>
            <tr>
                <td> 用户密码：</td>
                <td><input type="password" name="password" value="abc"/></td>
            </tr>
             <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" value="boy"/>男
                    <input type="radio" name="sex" checked="checked" value="girl" />女
                </td>
            </tr>
             <tr>
                <td> 兴趣爱好：</td>
                <td>
                    <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
                    <input name="hobby" type="checkbox" value="js"/>JavaScript
                    <input name="hobby" type="checkbox" value="cpp"/>C++
                </td>
            </tr>
             <tr>
                <td>国籍：</td>
                <td>
                    <select name="country">
                        <option value="none">--请选择国籍--</option>
                        <option value="cn" selected="selected">中国</option>
                        <option value="usa">美国</option>
                        <option value="jp">小日本</option>
                    </select>
                </td>
            </tr>
             <tr>
                <td>自我评价：</td>
                <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
            </tr>
             <tr>
                <td><input type="reset" /></td>
                <td align="center"><input type="submit"/></td>
            </tr>
        </table>
    </form>

Etiquetas div-p -span

div标签       默认独占一行
span标签      它的长度是封装数据的长度
p段落标签     默认会在段落的上方或下方各空出一行来（如果已有就不再空）

★ elementos estructurales

1.headery 头部内容结构
2.nav 导航栏内容结构
3.<article> 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
4.aside标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关
5.<section> 标签定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。
6。footer标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

Elementos de grupo

1.figure与figcaption标签用于对元素进行组合
2.hgroup

Elementos de interacción de página

1.details与summary 
2.progress （进度条） 搭配value：已完成工作量 max：总共工作量
3.meter用于投票等进度条

Elementos semánticos a nivel de texto

1.time（时间日期）
2.mark 标记主要字体（添加底纹）
3.cite用于文档参考文献说明

Atributo global

1.draggable 可拖动图片
2.hidden 隐藏域
3.spellcheck 文本确认检查
4.contenteditable 设置可编辑内容（列表标签）

Lo anterior es el contenido básico de javaweb html

Número público del autor: código del editor, bienvenidos a comunicarse juntos

Inserte la descripción de la imagen aquí

JUNSHI957

Publicado 12 artículos originales · ganó 39 · vistas 630

carta privada preocupaciones