Javaweb梳理16——HTMLCSS使用

ops/2024/11/20 0:21:36/

Javaweb梳理16——HTML&CSS使用

    • 16 快速入门
    • 16.1 基础标签
    • 16.2 图片、音频、视频标签
    • 16.3 超链接标签
    • 16.4 列表标签
    • 16.5 表格标签
    • 16.6 布局标签
    • 16.7 表单标签
    • 16.8 type取值

16 快速入门

1.新建文本文件,后缀名改为 .html/.htm
2.编写 HTML结构标签
3.在<body>中使用<h1>定义标题字体
4.使用<img>标签定义图片
5.保存后,使用浏览器打开该文件

标签描述
<HTML>定义 HTML 文档
<head>定义关于文档的信息
<title>定义文档的标题
<body>定义文档的主体

16.1 基础标签

标签描述
<h1> ~ <h6>定义标题,h1最大,h6最小
<font>定义文本的字体、字体尺寸、字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线
HTML 原代码显示结果描述
&lt;<小于号或显示标记
&gt ;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;引号
&reg;®已注册
&copy;©版权
&trade;商标
&nbsp;不断行的空白

16.2 图片、音频、视频标签

标签描述
<img>定义图片
<audio>定义音频
<video>定义视频
  • img:定义图片

    • src:规定显示图像的 URL
    • height:定义图像的高度
    • width:定义图像的宽度
  • audio:定义音频。支持的音频格式:MP3、WAV、OGG

    • src:规定音频的 URL
    • controls:显示播放控件
  • video:定义视频。支持的音频格式:MP4, WebM、OGG

    • src:规定视频的 URL
    • controls:显示播放控件

16.3 超链接标签

标签描述
<a>定义超链接,用于链接到另一个资源
  • href:指定访问资源的URL
  • target:指定打开资源的方式
    • _self:默认值,在当前页面打开
      • _blank:在空白页面打开

16.4 列表标签

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项

type:设置符号的类型

16.5 表格标签

标签描述
<table>定义表格
<th>定义表头单元格
<tr>定义行
<td>定义单元格
  • table:设置符号的类型
* table:定义表格   *  width:宽度   *  border:边框    *  cellpadding:定义内容和单元格的距离    *  cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条*  bgcolor:背景色    *  align:对齐方式
* tr:定义行    *  bgcolor:背景色    *  align:对齐方式
*  td:定义单元格    *  colspan:合并列   *  rowspan:合并行
*  th:定义表头单元格
*  <caption>:表格标题

16.6 布局标签

标签描述
<div>定义 HTML 文档中的一个区域部分,经常与 CSS 一起使用,用来布局网页
<span>用于组合行内元素。

16.7 表单标签

标签描述
<form>定义表单
<input>定义表单项,通过type属性控制输入形式
<label>为表单项定义标注
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域

16.8 type取值

type 取值描述
text默认值。定义单行的输入字段
password定义密码字段
radio定义单选按钮
checkbox定义复选框
file定义文件上传按钮
hidden定义隐藏的输入字段
submit定义提交按钮,提交按钮会把表单数据发送到服务器
reset定义重置按钮,重置按钮会清除表单中的所有数据
button定义可点击按钮
标签描述
----------------------------------------------------
<form>定义表单
<input>定义表单项,通过type属性控制输入形式
<label>为表单项定义标注
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域

http://www.ppmy.cn/ops/135100.html

相关文章

关于Java合并多个Excel中的数据【该数据不是常规列表】,并入库保存的方案

1. 背景 最近在使用RPA&#xff08;机器人流程自动化&#xff09;做数据采集的时候。发现那个RPA采集&#xff0c;一次只能采集相同格式的数据&#xff0c;然后入到Excel或者库中。由于院内系统的业务限制&#xff0c;导致采集的数据是多个Excel&#xff0c;并且我们这边的需求…

Android Framework AMS(16)进程管理

该系列文章总纲链接&#xff1a;专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节主要解读AMS 进程方面的知识。关注思维导图中左上侧部分即可。 我们本章节主要是对Android进程管理相关知识有一个基本的了解。先来了解下L…

Pr:音频过渡

Adobe Premiere Pro 自带一组共三个音频过渡 Audio Transitions效果。 对音频剪辑之间应用交叉淡化 Crossfade过渡&#xff0c;操作方式类似于应用视频过渡效果。 对于交叉淡化&#xff0c;要保证前剪辑的出点之后及后剪辑的入点之前有足够的预留内容&#xff08;也称“手柄”&…

【HarmonyOS】Hdc server port XXXX has been used.Configure environment variable

【HarmonyOS】Hdc server port XXXX has been used.Configure environment variable 一、 问题背景&#xff1a; 无法调试debug应用&#xff0c;IDE右下角显示该弹窗&#xff1a; Hdc server port XXXX has been used.Configure environment variable ‘OHOS_HDC_SERVER_POR…

Typora2024最新版破解方法(亲测可用)

此方法非常简单&#xff0c;无需安装dll补丁&#xff0c;无需修改注册表&#xff0c;无需使用老版本。仅需修改部分文件内容即可 方法步骤 步骤一 下载并安装Typora 安装Typora 打开官网 下载并安装最新版即可 点击访问Typora官网 https://typoraio.cn/ 步骤二 修改文件 …

C#.Net筑基-模式匹配汇总

01、模式匹配概述 从C#7开始支持的 模式匹配 语法&#xff08;糖&#xff0c;挺甜&#xff09;&#xff0c;可非常灵活的对数据进行条件匹配和提取&#xff0c;经过多个版本的完善&#xff0c;已经非常强大了。 C# 支持多种模式&#xff0c;包括声明、类型、常量、关系、属性…

AntFlow:一款高效灵活的开源工作流引擎

AntFlow 是一款功能强大、设计优雅的开源工作流引擎&#xff0c;其灵感来源于钉钉的工作流设计理念&#xff0c;旨在为企业和开发者提供灵活、高效的工作流解决方案。AntFlow 支持复杂的业务流程管理&#xff0c;具有高度可定制性&#xff0c;且拥有现代化的前端设计&#xff0…

Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别

Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别 keyword 与 text 区别term 查询match 查询match_phrase 查询match_phrase_prefix 查询写在最后 在讲述 es 查询时 term、match、match_phrase、match_phrase_prefix 的区别之前&#xff0c;先来了…