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.rhkb.cn/news/124778.html

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

相关文章

mojo初体验

mojo初体验

目录标题 mojo初体验试用地址变量定义参数可变性和所有权Structures后续 mojo初体验 试用地址 https://www.modular.com/get-started 与python基础语法很相似。 变量定义 let定义不可变变量var定义可变变量 参数可变性和所有权 下面是一个基本的函数&#xff1a; fn add…
阅读更多...
软考：中级软件设计师:程序语言基础：表达式，标准分类，法律法规，程序语言特点，函数传值传址

软考：中级软件设计师:程序语言基础：表达式，标准分类，法律法规，程序语言特点，函数传值传址

软考&#xff1a;中级软件设计师:程序语言基础&#xff1a;表达式 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都…
阅读更多...
无涯教程-JavaScript - BIN2DEC函数

无涯教程-JavaScript - BIN2DEC函数

描述 BIN2DEC函数将二进制数字转换为十进制。 语法 BIN2DEC (number)争论 Argument描述Required/Optionalnumber 您要转换的二进制数。 Number cannot contain more than 10 characters (10 bits). 数字的最高有效位是符号位。其余的9位是幅度位。 负数使用二进制补码表示。…
阅读更多...
NUC980webServer开发

NUC980webServer开发

目录 1.RTL8189FTV驱动移植 2.wifi配置工具hostapd移植 1.openssl-1.0.2r交叉编译 2.libnl-3.2.25.tar.gz交叉编译 3.hostapd-2.9.tar.gz交叉编译 4.移植相关工具到开发板 1.RTL8189FTV驱动移植 1. 把驱动文件源码放在linux源码的drivers/net/wireless/realtek/rtlwifi/目录…
阅读更多...
C#-抽象类与接口

C#-抽象类与接口

文章目录 一、抽象类和接口总结总结补充说明主要区别 二、抽象类2.1 抽象类概述与声明2.2 抽象方法2.3 抽象类与抽象方法的使用 三、接口3.1 接口概述概述特征声明示例 3.2 接口的实现和继承说明示例 3.3 显式接口成员实现说明注意示例 一、抽象类和接口总结 总结 抽象类和接…
阅读更多...
数据结构 - 双向链表

数据结构 - 双向链表

文章目录 目录 文章目录 前言 一、什么是双向链表? 双向链表有什么优势? 二、双向链表的设计和实现 1.设计思想 尾增 : 在链表的末尾添加新的元素 头插 : 在链表头部插入节点 删除 : 根据val的值删除节点 查找 : 根据索引的值查找并返回节点 总结 前言 大家好,今天给…
阅读更多...
MySQL 8.0安装及配置教程

MySQL 8.0安装及配置教程

一、下载mysql 进入官网https://www.mysql.com/&#xff0c;下载最新的的mysql8.0版本&#xff0c;该版本新增了许多特性。 进入下载页面&#xff0c;可以选择企业版本和社区版本&#xff0c;一般选择社区免费下载。 二、安装mysql&#xff08;此方法默认安装至C盘&#xff0c…
阅读更多...
WangEditor在Vue前端的应用

WangEditor在Vue前端的应用

1、在Vue项目中安装WangEditor 对于Vue2&#xff1a; npm install wangeditor/editor-for-vue --save 或者 yarn add wangeditor/editor-for-vue 对于Vue3&#xff1a; npm install wangeditor/editor-for-vuenext --save 或者 yarn add wangeditor/editor-for-vuenext 2、将Wa…
阅读更多...
Java“牵手”易贝商品列表数据，关键词搜索易贝商品数据接口，易贝API申请指南

Java“牵手”易贝商品列表数据，关键词搜索易贝商品数据接口，易贝API申请指南

ebay商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取ebay商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问ebay商城的网页来获取商品详情信息。以下是两种常用方法的介绍&…
阅读更多...
酷开系统游戏空间，开启大屏娱乐新玩法

酷开系统游戏空间，开启大屏娱乐新玩法

在这个充满科技感和无限创意的时代&#xff0c;游戏已经成为我们生活的一部分。而随时着科技的不断发展&#xff0c;以及游戏爱好者的游戏需求在不断提高&#xff0c;促使游戏体验也向更加丰富多彩的方向发展。显然&#xff0c;酷开科技早已经认识到游戏发展的新蓝图&#xff0…
阅读更多...
Android离线文字识别-tesseract4android调用

Android离线文字识别-tesseract4android调用

Android在线文字识别可以调阿里云的接口Android文字识别-阿里云OCR调用__花花的博客-CSDN博客 需要离线文字识别的话&#xff0c;可以调tesseract4android。个人测试效果不是特别理想&#xff0c;但是速度真的很快&#xff0c;VIVO S10后摄照片&#xff0c;80ms内识别完成。现…
阅读更多...
阿里巴巴推出D.Design文生图网站（免费10-20张图）

阿里巴巴推出D.Design文生图网站（免费10-20张图）

简介&#xff1a; d.design是阿里巴巴推出的一个基于人工智能的设计工具&#xff0c;可以帮助用户轻松创建3D模型和场景。该工具提供了丰富的素材库和功能&#xff0c;可以满足用户的各种需求。 ​堆友堆友是Alibaba Design打造的设计师全成长周期服务平台&#xff0c;围绕品质…
阅读更多...
汽车技术发展趋势及我国节能与新能源汽车技术

汽车技术发展趋势及我国节能与新能源汽车技术

一、世界汽车技术发展趋势 汽车技术正向着低碳化、信息化、智能化方向发展&#xff1b;“三化”趋势成为世界主要汽车强国、主要车企共同的战略选择。 主要汽车战略及方向 在“三化”趋势下&#xff0c;各汽车强国在汽车节能技术、新能源汽车技术、智能网联汽车技术等方面持续…
阅读更多...
第十八课、Qt 下载、安装与配置

第十八课、Qt 下载、安装与配置

功能描述&#xff1a;介绍了 Qt 的下载、安装和配置的全部过程&#xff0c;并对关键页面选项进行了详细说明 一、Qt 的下载 Qt 官方下载地址&#xff1a;https://www.qt.io/zh-cn/downloadhttps://download.qt.io/https://download.qt.io/https://www.qt.io/zh-cn/download进入…
阅读更多...
2023数学建模国赛选题建议及BC题思路

2023数学建模国赛选题建议及BC题思路

大家好呀&#xff0c;全国大学生数学建模竞赛今天下午开赛啦&#xff0c;在这里先带来初步的选题建议及思路。 目前团队正在写B题和C题完整论文&#xff0c;后续还会持续更新哈&#xff0c;以下只是比较简略的图文版讲解&#xff0c;团队目前正在写B、C题完整论文&#xff0c;…
阅读更多...
在线考试组卷Word文档导出|废纸篓|支持搜索组员查看练习情况|官网上线

在线考试组卷Word文档导出|废纸篓|支持搜索组员查看练习情况|官网上线

土著刷题微信小程序v1.16&#xff0c;主要是对系统功能的优化&#xff0c;同时迭代开发了反馈热度比较高的【在线考试组卷word文档导出】和废纸篓功能。 下面将逐条介绍一下这一版的新功能和优化点。 在线考试组卷Word文档导出 【组卷Word导出】这个功能对于线下组织考试是个刚…
阅读更多...
LeetCode 904. 水果成篮

LeetCode 904. 水果成篮

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 在你去摘水果的时候&#xff0c;你当前只能拥有两种种类的水果&#xff0c;若想拿第三种水果&#xff0c;就需要发下前两种水果中的一种。 法一&#xff1a;滑动窗口哈希表(未优化…
阅读更多...
怎么把pdf转换成jpg图片？

怎么把pdf转换成jpg图片？

怎么把pdf转换成jpg图片&#xff1f;在工作中&#xff0c;如果我们收到无法修改编辑的PDF文件&#xff0c;可能会遇到一些困难。尤其是当平台或网站只支持JPG图片格式&#xff0c;而领导又要求我们将pdf文件改为JPG格式时&#xff0c;情况就更为棘手了。这对于我们打工一族来说…
阅读更多...
CSS基础

CSS基础

一、选择器 1.1 元素选择器&#xff1a; 指定元素统一格式 p {text_align: center;}1.2 id选择器&#xff1a; 当我们想精准找到某元素的时候要就id选择器 /* id选择器使用 # 来定义 */ #para1{ text-align:center;}1.3 class选择器&#xff1a; 多个元素统一类型 /* cl…
阅读更多...
XCon2023 | 聚铭网络受邀出席并发表“安全运营中心的应用及发展”主题演讲

XCon2023 | 聚铭网络受邀出席并发表“安全运营中心的应用及发展”主题演讲

作为国内信息安全领域“历史最悠久、举办规模最大、知名度最高”的闭门型技术峰会&#xff0c;2023年XCon安全焦点信息安全峰会&#xff08;XFocus Information Security Conference&#xff09;在8月30日于北京盛大召开&#xff0c;本次大会以“链无境皆可能”为主题&#xff…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发