JavaWeb | 常用的HTML(JavaWeb)标签

news2024/12/23 17:20:26

目录：

    • HTML简介
    • HTML的基本结构
    • HTML的常用标签：
      • “标题” 标签
      • “换行” 标签
      • “段落” 标签
      • “水平线” 标签
      • “文字” 标签
      • “粗体” 标签
      • “下划线” 标签
      • “斜体” 标签
      • “上标” 标签
      • “下标” 标签
      • “闪烁” 标签
      • 表示 “空格”
      • “列表” 标签：
          • 无序列表标签
          • 有序列表标签
      • “表格” 标签：
          • “编写表格” 用到的标签
          • 表格标签的 “公共属性”
          • “<table>标签” 中常用的属性
      • 合并单元格
      • 链接标签
      • 图片标签
      • 表单标签

HTML简介

  • HTML ( 超文本标记语言 ) ，构成网页文档的主要语言。一般情况下，用户在网页上看到的文字、图形、动画、声音、表格、链接等元素大部分都是HTML语言描述。
  • HTML有单标签和双标签。
  • HTML对大小写不敏感。<html> </html> 也可以写成：<HTML> </HTML> 。
  • 标签有属性，如 <a href=page.html/> , 其中“href”就是一个属性名称，“page.html”是属性值。

HTML的基本结构

  • head标签 : 用来设置一些网页相关属性和信息

  • body标签 : 之间的内容为浏览器中网页上显示的内容

    例子如：

     <!-- 这是一个注释 -->
    <html> 
         <!-- head标签用来设置一些网页相关属性和信息 -->
        <head>
            头部信息
        </head>
          <!-- body标签之间的内容为浏览器中网页上显示的内容 -->
        <body>
            主体
        </body>
    </html>

HTML的常用标签：

“标题” 标签

  • 在HTML中提供了6个等级的标题。可取1~6，数字越小，标题字号越大。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
<!-- 数字越小,标题字号越大 -->
        <h1> 这是标题一 </h1>
        <h2> 这是标题二 </h2>
        <h3> 这是标题三 </h3>
        <h4> 这是标题四 </h4>
        <h5> 这是标题五 </h5>
        <h6> 这是标题六 </h6>
</body>
</html>

在这里插入图片描述

“换行” 标签

换行标签 ： <br>

“段落” 标签

  • <p> </p> 为段落标签。

  • 段落标签的 align属性 ： 指明内容显示时的对其方式。

  • align属性 常见的属性值有：left、center、right。

     <html>
        <body>
              <!-- 段落向左对齐 -->
          <p align="left">   段落标签1 </p> 
              <!-- 段落向中对齐 -->
          <p align="center"> 段落标签2 </p>
              <!-- 段落向右对齐 -->
          <p align="right">  段落标签3 </p>
        </body>
    </html>

在这里插入图片描述

“水平线” 标签

  • 水平线标签 ： <hr>

  • 水平线标签常用的 属性 ：

    • size ：水平线的宽度，单位为像素。

    • width ：水平线的长，如果不设置，则默认为页面长度，单位默认为像素。也可以用百分制，如：width=50% 表示长度为页面长度的50%

    • align ：水平线的对其方式。常用属性值为 left、center、right

    • noshade : 段落无阴影属性，没有属性值。若设置 ，则段落为实心段落。
      （若代码中添加 noshade ，则该水平线      会变成 “实心段落” ）

    • color ：段落内部的颜色。

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平线标签</title>
</head>
<body>
          <hr align="center" size="30">
          <hr align="center" noshade size="30">
          <hr align="center" noshade width="50%">
          <hr align="center" width="100" size="10" color="#CC0000">
          <hr align="center" width="200" size="50" color="#00FFFF">
          <hr align="center" width="200" size="50" color="#AAOOFF">
</body>
</html>

在这里插入图片描述

“文字” 标签

  • <font> </font> 文字标签 用于标记字体。
  • 文字标签常用的 属性 ：
    • size ：设置字体的 大小。
      属性值为: size = X ，其中X为1~7 ，值越大，字体越大。属性值为3是客户端网页的默认字体大小。
    • face ：设置字体的 类型。
      默认字体为宋体。例如：<font face=“楷体_GB2312”>为设置输出的字体为: 楷体。
    • color ：段落内部的颜色。

“粗体” 标签

<b> </b> : 将内容设置为粗体。

“下划线” 标签

<u> </u> : 将内容设置下划线。

“斜体” 标签

<i> </i> : 将内容设置为斜体。

“上标” 标签

<sup> </sup> : 将内容设置为上标。

“下标” 标签

<sub> </sub> : 将内容设置为下标。

“闪烁” 标签

<blink> </blink> : 将内容设置为闪烁（非标准元素）。

表示 “空格”

空格：&nbsp;

“列表” 标签：

无序列表标签
  • <ul> </ul> : 无序标签 ，列表前的每一项都不会加上序号，而是会加上其他符号。
  • 其中列表的每一项都有 <li> </li> 表示。
有序列表标签
  • <ol> </ol> : 有序标签 ，列表前的每一项都会加上序号。
  • 其中列表的每一项都有 <li> </li> 表示。

“表格” 标签：

“编写表格” 用到的标签

  • <table> </table> : 定义表格，表格的所有内容都写在这个标签内。

  • <caption> </caption> : 定义标题，标题会自动出现在整张表格的上方。

  • <tr> </tr> : 定义表行。

  • <th> </th> : 定义表头。包含在 <tr> </tr> 之间，表头中的文字会自动变成粗体。

  • <td> </td> : 定义表元 (表格的具体数据)。包含在 <tr> </tr> 之间。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> “编写表格” 用到的标签</title>
</head>
<body>
<table>
    <caption>表格</caption>
    <tr>
        <th>表头第一格</th>
        <th>表头第二格</th>
    </tr>
    <tr>
        <td>第一行第一格</td>
        <td>第一行第二格</td>
    </tr>
    <tr>
        <td>第二行第一格</td>
        <td>第二行第二格</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

表格标签的 “公共属性”

表格标签常用的公共属性 ：

  • align ：水平布局方式。常用属性值有：left、right和center，分别表示：左对齐、右对齐、居中对齐。
    默认布局方式为“左对齐”

  • bgcolor ：设置 背景颜色。

  • border ：设置边框的宽度，属性值为整数，0表示没有边框，其默认值为0

  • width ：宽度，默认单位为像素，也可以使用百分制单位。

  • height ：高度，默认单位为像素，也可以使用百分制单位。

  • color ：段落内部的颜色。

    color ：段落内部的颜色。

    color ：段落内部的颜色。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 表格标签的 “公共属性”</title>
</head>
<body>
<table bgcolor="#FFFF99" border="1" width="300">
    <tr bgcolor="#FF3399">
        <td>第一行第一格</td>
        <td bgcolor="FFFF99">第一行第二格</td>
    </tr>

    <tr align="center" height="100" bgcolor="white">
        <td align="left">第二行第一格</td>
        <td bgcolor="#FF##99">第二行第二格</td>
    </tr>
</table>
</body>
</html>

    在这里插入图片描述

“标签” 中常用的属性

“<table>标签” 中 常用的属性 :

  • bordercolor ：表格边框的颜色，默认为黑色。

  • cellpadding ：表示边框的宽度。

  • cellspacing ： 表示边框和表格边框之间的宽度。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table标签的属性</title>
</head>
<body>
<table align="center" cellpadding="5" bordercolor="#FFFF99" cellspacing="20" bgcolor="#FF3399" border="10" width="300">
    <tr align="center">
        <td>表格</td>
        <td>表格</td>
    </tr>

    <tr align="center">
        <td >表格</td>
        <td >表格</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

合并单元格

  • 合并单元格必须对 <td> 标签中的rowspan、colspan属性进行设置，属性值都是整数，默认为1，表示并没有合并。

  • rowspan : 从该表元起该表元在行上占有的单元格数。
    (向下合并一格或多格 , 如：rowspan = 2 , 向下合并一格)

    <!-- 尚未进行单元格合并的表格 -->
<table border="1" width="300">
    <tr>
        <td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>

    <tr>
        <td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>

    <tr>
        <td >表格</td>
        <td >表格</td>
        <td>表格</td>
    </tr>
</table>

    在这里插入图片描述

<!-- rowspan 单元格合并 -->
<table border="1" width="300">
    <tr>
        <td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>

    <tr>
        <td rowspan="2">表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>

    <tr>
     <!-- 这个位置上的 td被删除了，因为要合并单元格(rowspan),所以其没必要存在 -->
        <td >表格</td>
        <td>表格</td>
    </tr>
</table>

在这里插入图片描述

  • colspan ： 从该表元起该表元在列上占有的单元格数。
    (向右合并一格或多格 , 如：colspan= 2 ,向右合并一格)

  • <!-- 尚未进行单元格合并的表格 -->
<table border="1" width="300">
    <tr>
        <td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>

    <tr>
        <td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>

    <tr>
        <td >表格</td>
        <td >表格</td>
        <td>表格</td>
    </tr>
</table>

    在这里插入图片描述

<table border="1" width="300">
    <tr>
        <td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>

    <tr>
        <td colspan="2">表格</td>
        <!-- 这个位置上的 td被删除了，因为要合并单元格(colspan),所以其没必要存在 -->
        <td>表格</td>
    </tr>

    <tr>
        <td>表格</td>
        <td >表格</td>
        <td>表格</td>
    </tr>
</table>

在这里插入图片描述

链接标签

<a href=“路径”> </a>

图片标签

<img src= “图片文件路径” >

表单标签

  • 可以让用户在一些控件中写入一些内容，如写入：文本框、密码框，在输入之后提交，这些控件所在的区域叫作表单 ( form )

  • 表单最基本的标签是 <input>标签。该标签可用来显示输入框、按钮等元素，<input>标签type属性决定了表单元素的类型。

  • type属性有以下值：

    • text ： 文本框，text为type的默认属性。

    • password ：密码框。

    • radio ：单选按钮。可以将多个单选按钮的name属性设置为相同，使其成为一组。checked属性可以设置默认被选。

    • checkbox ：复选框。checked属性可以设置默认被选。

    • reset ：重置按钮。按下之后所有的表单元素内容变为默认值。

    • button ：普通按钮。

    • submit ：提交按钮。按下之后网页会将表单的内容提交给action设定的网页，action的值为空时提交给本页

    • image ：图片。单击图片的效果和提交按钮一样都会提交表单。

    • <textarea> </textarea> : 表示多行文本框，可以使用rows属性表示其行数，用cols属性表示其列数。

    • <select> </select> : 表示下拉菜单，其中的选项用<option> </option>标签。
      multiple属性能设置为多选，size属性的值为下拉菜单显示的项目数。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/972943.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VGA OUT 的PCB设计注意事项

VGA OUT 的PCB设计注意事项

VGA(Video Graphics Array)即视频图形阵列&#xff0c;具有分辨率高、显示速率快、颜色丰富等优点。VGA接口不但是CRT显示设备的标准接口&#xff0c;同样也是LcD液晶显示设备的标准接口&#xff0c;具有广泛的应用范围。 VGA OUT PCB设计注意事项&#xff1a; 1、整体布局时&…
阅读更多...
PCIe 配置空间：Command 寄存器

PCIe 配置空间：Command 寄存器

在 type 0 header 中，command 寄存器的位置如下图所示： 在 type 1 header 中，command 寄存器的位置如下图所示： Command 寄存器的结构如下图： 对于 PCIe，只有 Bit 0/1/2/6/8/10 是有效的，其他必须配置为 0 。 IO Space Enable 该位用于控制设别如何响应 I/O 空间的访…
阅读更多...
土著刷题Plus专业版对外开放入驻|在线组卷刷题学习平台|纯净无广|独立小程序|VIP功能全面开放|支持自定义品牌名称和Logo

土著刷题Plus专业版对外开放入驻|在线组卷刷题学习平台|纯净无广|独立小程序|VIP功能全面开放|支持自定义品牌名称和Logo

专业版对外开放入驻 土著刷题Plus专业版&#xff0c;以【录题-分组-刷题-考试】为中心打造一套完备的在线组卷刷题学习平台&#xff0c;自定义品牌名称和Logo&#xff0c;入驻后&#xff0c;您将拥有自己独立的企业级专业运营管理平台。 土著刷题Plus专业版对比个人版优势&…
阅读更多...
QT实现TCP通信（服务器与客户端搭建）

QT实现TCP通信（服务器与客户端搭建）

一、TCP通信框架 二、QT中的服务器操作 创建一个QTcpServer类对象&#xff0c;该类对象就是一个服务器调用listen函数将该对象设置为被动监听状态&#xff0c;监听时&#xff0c;可以监听指定的ip地址&#xff0c;也可以监听所有主机地址&#xff0c;可以通过指定端口号&#x…
阅读更多...
软件上线测评报告怎么做？

软件上线测评报告怎么做？

软件上线测试 软件上线前必须经过一个整体的测评&#xff0c;从而帮助企业了解软件的运行情况。软件上线测评检测报告&#xff08;软件产品测试报告&#xff09;也通常被称为&#xff1a;科技项目验收测试报告、&#xff08;软件类&#xff09;科技成果鉴定测试、软件检测报告…
阅读更多...
MySql学习笔记04——DDL

MySql学习笔记04——DDL

DDL 建表语法 建表属于DDL语句&#xff0c;DDL语句包括create drop alter create table 表名(字段名1 数据类型,字段名2 数据类型,字段名3 数据类型,.. );表名一般建议使用t_开头&#xff0c;可读性更强。 Mysql数据类型 varchar 可变长度的字符串&#xff0c;最长为255&…
阅读更多...
Promise常用方法笔记

Promise常用方法笔记

mixin.methods.getList(xxx) 是axios的二次封装 是通过Promise进行基本封装 let a mixin.methods.getList(toosSet.gettype);let b mixin.methods.getList(toosSet.gettypes);let c mixin.methods.getList(toosSet.gettypess);Promise.all([a, b, c]).then((res) > {aler…
阅读更多...
【图解RabbitMQ-2】图解JMS规范与AMQP协议是什么

【图解RabbitMQ-2】图解JMS规范与AMQP协议是什么

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;CSDN实力新星&#xff0c;后端开发两年经验&#xff0c;曾担任甲方技术代表&#xff0c;业余独自创办智源恩创网络科技工作室。会点点Java相关技术栈、帆软报表、低代码平台快速开…
阅读更多...
基于卡尔曼滤波的锂电池状态估计MATLAB仿真及程序

基于卡尔曼滤波的锂电池状态估计MATLAB仿真及程序

完整资源请查看主页置顶博客&#xff08;专享优惠&#xff09; 该项目的目的是估计锂电池的荷电状态(SOC)。主要完成了扩展卡尔曼滤波(EKF)的实验、参数辨识和仿真。 项目中包括锂电池模型建立、参数辨识与验证、SOC估计采用扩展卡尔曼滤波(EKF)&#xff0c;使用了两种方式实…
阅读更多...
CSS中如何实现一个自适应正方形（宽高相等）的元素？

CSS中如何实现一个自适应正方形（宽高相等）的元素？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐利用padding百分比⭐2. 利用::before伪元素⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对W…
阅读更多...
Linux（基础IO）

Linux（基础IO）

Linux&#xff08;基础IO&#xff09; 前言C语言文件IO什么叫当前路径stdin/stdout/stderr 系统文件IOopenclosewriteread 文件描述符文件描述符的分配规则 重定向输出重定向原理追加重定向原理输入重定向原理dup2添加重定向功能到minishell 缓冲区模拟实现一个缓冲区 理解文件…
阅读更多...
BCSP-玄子Share-Java框基础_解析XML

BCSP-玄子Share-Java框基础_解析XML

二、XML 2.1 XML 简介 XML&#xff08;Extensible Markup Language&#xff09;&#xff0c;可扩展标记语言 2.1.1 特点 XML 与操作系统、编程语言的开发平台无关规范统一&#xff0c;实现不同系统之间的数据交换 2.1.2 作用 数据存储数据交换数据配置 2.1.3 XML 文档结…
阅读更多...
专业课130+上岸哈尔滨工业大学803信号与系统和数字逻辑电路考研大纲真题参考书哈工大

专业课130+上岸哈尔滨工业大学803信号与系统和数字逻辑电路考研大纲真题参考书哈工大

​专业课130上岸哈尔滨工业大学803信号与系统和数字逻辑电路考研大纲真题参考书哈工大 政治&#xff1a; 9月开始&#xff0c;用肖秀荣的精讲精练&#xff0c;做1000题&#xff0c;一章视频做一章题&#xff0c;错题标记。以后会不定时看&#xff0c;每天大概2个小时。时间可…
阅读更多...
navicat访问orcal数据库

navicat访问orcal数据库

1&#xff09;因为不能直接访问服务器&#xff0c;所以通过中介进行了端口转发&#xff1b; 2&#xff09;依然不能访问&#xff0c;提示netadmin权限什么错误&#xff1b; 3&#xff09;下载了一个 PLSQL Developer 13.0.0.1883 版本&#xff0c;自带的instantclient 好像不…
阅读更多...
C语言：选择+编程（每日一练Day15）

C语言：选择+编程（每日一练Day15）

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;寻找奇数 思路一&#xff1a; 题二&#xff1a;寻找峰值 思路一&#xff1a; 本人实力有限可能对一些地方解…
阅读更多...
Compression Bypass Logic

Compression Bypass Logic

默认，EDT逻辑中包含bypass逻辑，bypass电路可以bypass EDT逻辑，访问设计core中未压缩的扫描链。 bypass EDT逻辑可以应用未压缩test patterns到设计中 Debug 压缩test patterns。应用附加自定义未压缩扫描链。应用来自其他ATPG工具的test patterns。在扫描插入时，bypass可以…
阅读更多...
SpringBoot运维实用篇、打包、运行、高级配置、多环境开发、日志

SpringBoot运维实用篇、打包、运行、高级配置、多环境开发、日志

文章目录 SpringBoot运维实用篇YW-1.SpringBoot程序的打包与运行程序打包程序运行SpringBoot程序打包失败处理命令行启动常见问题及解决方案SpringBoot项目快速启动&#xff08;Linux版&#xff09; YW-2.配置高级YW-2-1.临时属性设置YW-2-2.配置文件分类YW-2-3.自定义配置文件…
阅读更多...
精益创业就是想控制：到底浪费在哪里？

精益创业就是想控制：到底浪费在哪里？

精益创业就是想控制&#xff1a;到底浪费在哪里&#xff1f;【安志强趣讲278期】 趣讲大白话&#xff1a;创业的浪费是惊人的 **************************** 现代社会的问题不是能不能制造出来&#xff1f; 而是该不该制造 产能过剩是社会的核心矛盾 精益创业就是预见浪费 系统…
阅读更多...
【mybatis-plus进阶】多租户场景中多数据源自定义来源dynamic-datasource实现

【mybatis-plus进阶】多租户场景中多数据源自定义来源dynamic-datasource实现

Springbootmybatis-plusdynamic-datasourceDruid 多租户场景中多数据源自定义来源dynamic-datasource实现 文章目录 Springbootmybatis-plusdynamic-datasourceDruid 多租户场景中多数据源自定义来源dynamic-datasource实现0.前言1. 作者提供了接口2. 基于此接口的抽象类实现自…
阅读更多...
行军遇到各种复杂地形怎么处理？

行军遇到各种复杂地形怎么处理？

行军遇到各种复杂地形怎么处理&#xff1f; 【安志强趣讲《孙子兵法》第30讲】 【原文】 凡军好高而恶下&#xff0c;贵阳而贱阴&#xff0c;养生而处实&#xff0c;军无百疾&#xff0c;是谓必胜。 【注释】 阳&#xff0c;太阳能照到的地方。阴&#xff0c;太阳照不到的地方。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023