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属性 常见的属性值有:leftcenterright

     <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水平线对其方式。常用属性值为 leftcenterright

    • 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水平布局方式。常用属性值有:leftrightcenter,分别表示:左对齐、右对齐、居中对齐。
    默认布局方式为“左对齐”

  • 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> 标签中的rowspancolspan属性进行设置,属性值都是整数,默认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初体验试用地址变量定义参数可变性和所有权Structures后续 mojo初体验 试用地址 https://www.modular.com/get-started 与python基础语法很相似。 变量定义 let定义不可变变量var定义可变变量 参数可变性和所有权 下面是一个基本的函数&#xff1a; fn add…

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

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

无涯教程-JavaScript - BIN2DEC函数

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

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#-抽象类与接口

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

数据结构 - 双向链表

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

MySQL 8.0安装及配置教程

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

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申请指南

ebay商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取ebay商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问ebay商城的网页来获取商品详情信息。以下是两种常用方法的介绍&…

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

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

Android离线文字识别-tesseract4android调用

Android在线文字识别可以调阿里云的接口Android文字识别-阿里云OCR调用__花花的博客-CSDN博客 需要离线文字识别的话&#xff0c;可以调tesseract4android。个人测试效果不是特别理想&#xff0c;但是速度真的很快&#xff0c;VIVO S10后摄照片&#xff0c;80ms内识别完成。现…

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

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

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

一、世界汽车技术发展趋势 汽车技术正向着低碳化、信息化、智能化方向发展&#xff1b;“三化”趋势成为世界主要汽车强国、主要车企共同的战略选择。 主要汽车战略及方向 在“三化”趋势下&#xff0c;各汽车强国在汽车节能技术、新能源汽车技术、智能网联汽车技术等方面持续…

第十八课、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题思路

大家好呀&#xff0c;全国大学生数学建模竞赛今天下午开赛啦&#xff0c;在这里先带来初步的选题建议及思路。 目前团队正在写B题和C题完整论文&#xff0c;后续还会持续更新哈&#xff0c;以下只是比较简略的图文版讲解&#xff0c;团队目前正在写B、C题完整论文&#xff0c;…

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

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

LeetCode 904. 水果成篮

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

怎么把pdf转换成jpg图片?

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

CSS基础

一、选择器 1.1 元素选择器&#xff1a; 指定元素统一格式 p {text_align: center;}1.2 id选择器&#xff1a; 当我们想精准找到某元素的时候要就id选择器 /* id选择器使用 # 来定义 */ #para1{ text-align:center;}1.3 class选择器&#xff1a; 多个元素统一类型 /* cl…

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

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