JavaWeb | 常用的HTML(JavaWeb)标签

目录：

    • 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.mzph.cn/news/67251.shtml

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

相关文章

window 常用基础命令

window 常用基础命令

0、起步 0-1) 获取命令的参数指引 netstat /? 0-2) 关于两个斜杠&#xff1a; window 文件路径中使用反斜杠&#xff1a;\ linux 文件路径中使用&#xff1a;/ 1、开关机类指令 shutdown /s # 关机shutdown /r # 重启shutdown /l …
阅读更多...
java 常用 jar 包

java 常用 jar 包

1 Lombok 是一个 java 类库&#xff0c;它利用注解方式自动生成 java bean 中 getter、setter、equals 等方法&#xff0c;还能自动生成 logger、toString、hashCode、builder 等 日志相关变量、Object 类方法或设计模式相关的方法&#xff0c;能够让你的 代码更简洁&#xff0…
阅读更多...
C# void 关键字学习

C# void 关键字学习

C#中void关键字是System.Void的别名&#xff1b; 可以将 void 用作方法&#xff08;或本地函数&#xff09;的返回类型来指定该方法不返回值&#xff1b; 如果C&#xff03;方法中没有参数&#xff0c;则不能将void用作参数&#xff1b;这是与C语言不同的&#xff0c;C语言有…
阅读更多...
机器人制作开源方案 | 桌面级全向底盘--本体说明+驱动控制

机器人制作开源方案 | 桌面级全向底盘--本体说明+驱动控制

一、本体说明 1. 底盘概述 该底盘是一款模块化的桌面级应用型底盘&#xff0c;基于应用级软件架构设计、应用级硬件系统设计、典型应用型底盘机械系统设计。 底盘本体为一个采用半独立刚性悬挂的四驱全向底盘。 2. 软件环境介绍 操作系统&#xff1a;Ubuntu18.04系统。基于Deb…
阅读更多...
【STM32】学习笔记(串口通信)

【STM32】学习笔记(串口通信)

串口通信 通信接口硬件电路电平标准USARTUSART框图 通信接口 串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、容易使用、通信线路简单&#xff0c;可实现两个设备的互相通信 单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信&#…
阅读更多...
多线程与高并发——并发编程（4）

多线程与高并发——并发编程（4）

文章目录 四、阻塞队列1 基础概念1.1 生产者消费者概念1.2 JUC阻塞队列的存取方法2 ArrayBlockingQueue2.1 ArrayBlockingQueue的基本使用2.2 生产者方法实现原理2.2.1 ArrayBlockingQueue的常见属性2.2.2 add方法2.2.3 offer方法2.2.4 offer(time,unit)方法2.2.5 put方法2.3 消…
阅读更多...
深入浅出AXI协议（5）——数据读写结构读写响应结构

深入浅出AXI协议（5）——数据读写结构读写响应结构

目录 一、前言 二、写选通&#xff08;Write strobes&#xff09; 三、窄传输&#xff08;Narrow transfers&#xff09; 1、示例1 2、示例2 四、字节不变性&#xff08;Byte invariance&#xff09; 五、未对齐的传输&#xff08;Unaligned transfers&#xff09; 六…
阅读更多...
MySQL基本查询

MySQL基本查询

MySQL基本查询 表的增删查改Create(增)Retrieve&#xff08;查&#xff09;select列全列查询指定列查询查询字段为表达式为查询结果指定别名结果去重 where 条件英语不及格的同学的英语成绩语文成绩在 [80, 90] 分的同学及语文成绩数学成绩是 58 或者 59 或者 98 或者 99 分的同…
阅读更多...
React的 虚拟DOM创建

React的 虚拟DOM创建

React是一个流行的JavaScript库&#xff0c;用于构建用户界面。它通过使用虚拟DOM来提高性能和渲染速度。本文将详细介绍React的虚拟DOM的创建方式、用法和案例&#xff0c;以及相关代码和解释。 虚拟DOM是什么&#xff1f; 虚拟DOM是React的一个重要概念&#xff0c;它是一个…
阅读更多...
华为云服务

华为云服务

【计算】 弹性云服务器ECS 弹性云服务器&#xff08;Elastic Cloud Server&#xff0c;ECS&#xff09;是由CPU、内存、操作系统、云硬盘组成的基础的计算组件。弹性云服务器创建成功后&#xff0c;您就可以像使用自己的本地PC或物理服务器一样&#xff0c;在云上使用弹性云服…
阅读更多...
查看 Linux 配置

查看 Linux 配置

目录 1. 查看 Linux 配置1.1. CPU1.2. 内存 1. 查看 Linux 配置 1.1. CPU cat proc/cpuinfolscpu1.2. 内存 freetop# htop 是 top 的一个增强版, 它提供了更多的功能和可视化界面。在终端中输入以下命令即可查看: htop; # htop 界面中, 可以看到系统中运行的进程, 以及它们占…
阅读更多...
【C#项目实战】控制台游戏——勇士斗恶龙(1)

【C#项目实战】控制台游戏——勇士斗恶龙(1)

君兮_的个人主页 即使走的再远&#xff0c;也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;最近开始正式的步入学习游戏开发的正轨&#xff0c;想要通过写博客的方式来分享自己学到的知识和经验&#xff0c;这就是开设本专栏的目的。希望…
阅读更多...
因为axios请求后端，接收不到token的问引出的问题

因为axios请求后端，接收不到token的问引出的问题

vue axios请求后端接受不到token的问题。 相关概念 什么是跨域&#xff1f; 跨域指的是在浏览器环境下&#xff0c;当发起请求的域&#xff08;或者网站&#xff09;与请求的资源所在的域之间存在协议、主机或端口中的任何一个条件不同的情况。换句话说&#xff0c;只要协议、…
阅读更多...
ubuntu下Anaconda安装与使用教程

ubuntu下Anaconda安装与使用教程

前言 好久没用anaconda了&#xff0c;还记得之前用anaconda的欢乐时光。pytorch和paddlepaddle(飞浆)&#xff0c;怀念&#xff0c;可生活&#xff08;换了ubuntu系统之后&#xff09;教会了我残忍&#xff08;可能很难有机会再用windows的anaconda了&#xff09;。找个时间&a…
阅读更多...
爬虫源码---爬取小猫猫交易网站

爬虫源码---爬取小猫猫交易网站

前言&#xff1a; 本片文章主要对爬虫爬取网页数据来进行一个简单的解答&#xff0c;对与其中的数据来进行一个爬取。 一&#xff1a;环境配置 Python版本&#xff1a;3.7.3 IDE:PyCharm 所需库&#xff1a;requests &#xff0c;parsel 二&#xff1a;网站页面 我们需要…
阅读更多...
MSSQL-2008的备份恢复操作

MSSQL-2008的备份恢复操作

MSSQL2008清理log事务 ---------------------------------- USE [master] go ALTER DATABASE GTD SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE GTD SET RECOVERY SIMPLE --简单模式 GO USE GTD GO DBCC SHRINKFILE (NGTD _Log , 11, TRUNCATEO…
阅读更多...
【LeetCode】208.实现Trie（前缀树）

【LeetCode】208.实现Trie（前缀树）

题目 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0c;例如自动补完和拼写检查。 请你实现 Trie 类&#xff1a; Trie() 初始化前缀…
阅读更多...
虚拟机Ubuntu18.04系统使用时所需要的便利配置选项

虚拟机Ubuntu18.04系统使用时所需要的便利配置选项

文章目录 一、屏幕分辨率调节二、解决虚拟机和宿主机之间无法进行复制粘贴和自由移动文件&#xff1a;三、允许使用Git指令四、可以使用Cmake进行编译五、vi编辑器查看代码文件&#xff0c;类型linux的记事本 每次配置虚拟机&#xff0c;都需要重新安装配置一些能提供便利功能的…
阅读更多...
Java设计模式：四、行为型模式-07：状态模式

Java设计模式：四、行为型模式-07：状态模式

文章目录 一、定义&#xff1a;状态模式二、模拟场景&#xff1a;状态模式2.1 状态模式2.2 引入依赖2.3 工程结构2.4 模拟审核状态流转2.4.1 活动状态枚举2.4.2 活动信息类2.4.3 活动服务接口2.4.4 返回结果类 三、违背方案&#xff1a;状态模式3.0 引入依赖3.1 工程结构3.2 活…
阅读更多...
C# easymodbus

C# easymodbus

库介绍 EasyModbus是用于 .NET 和 Java 平台上的Modbus TCP/UDP/RTU通讯协议库&#xff0c;支持多种编程语言&#xff0c;如C#、VB.NET、Java、C 与更多C#的变体&#xff0c;如Unity、Mono、.NET Core等等。 EasyModbus的Java版本至少需要Java 7&#xff0c;而C#版本兼容 .NE…
阅读更多...
最新文章

Copyright @ 2022~2023