我爱Java系列---【HTML基本标签】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML基本标签</title>
</head>
<body>
<!--1.水平线-->
<hr />
<hr size="200"/>
<hr noshade="noshade" />
<!--2.字体-->
<font size="7">我很帅（size取值1-7，依次增大）</font>
<font color="blue">我很蓝</font>
<font color="#FF0000">我是红色的</font>
<font face="微软雅黑" color="green" size="7">微软雅黑</font>
<font face="华为彩云" color="green" size="7">华为彩云</font>
<!--3.格式化标签-->
<b>粗体</b>
<i>斜体</i>
<!--4.段落标签-->
<p>定义段落
插入单个<br />换行
</p>
<!--5.标题标签： hn
数字n: 取值范围1-6
数字越小: 字体越大 常用 h1和h3
-->
<h1>标题</h1>
<h6>小标题</h6>
<!--
6.图片标签: img 内部结束
属性:
src: 指定图片的路径 相对路径
width: 宽度 像素 百分比: 占用浏览器窗口的比例
height: 高度
title: 图片标题,鼠标悬停提示
alt ：图片无法显示时的替代文本
align: left 把图像对齐到左边
right 把图像对齐到右边
middle 把图像与中央对齐
top 把图像与顶部对齐
bottom 把图像与底部对齐
-->
<img src="img/middle01.jpg" width="50%" height="30%"title="你点我" alt="加载失败">
<img src="img/small0.jpg" width="50%" height="30%"title="你点我" alt="加载失败">
<img src="img/middle01.jpg" width="50%" height="30%"title="你点我" alt="加载失败" align="right">
<!--
7.列表标签:
有序标签: ol
列表项标签: li
属性:
start: 起始值
type: 列表项前的序号的样式(1,A,a,I,i)
无序标签: ul
列表项标签: li
属性:
type: 列表项前的图形的样式(disc,square,circle)
-->
<ol start="3" type="i">
<li>百度</li>
<li>京东</li>
</ol>
<ul type="square">
<li>百度</li>
<li>京东</li>
</ul>
<!--
8.表格标签: table
属性:
border: 表框 像素值
width: 宽度
height: 高度
align: 显示位置 居中 center 居左 left 居右 right
cellpadding: 单元格内容和边框线的位置
cellspacing: 单元格之间的举例
bgcolor: 背景色
bordercolor: 边框颜色
行标签: tr
属性:
align: 显示位置 居中 center 居左 left 居右 right
单元格标签: td
单元格标题标签: th 默认居中 加粗
3行3列的表格
-->
<table border="2" bordercolor="red"cellpadding="12"cellspacing="0"bgcolor="chartreuse"width="201"height="80">
<tr >
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr align="center">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<!--
8.合并单元格(都是针对单元格 td)
1.第一行的三个单元格合并
跨列操作:
属性:
colspan: 值是合并单元格的数量,跨越的列数
2.第二行第一个单元格和第3行第一个单元格合并
跨行操作:
属性:
rowspan: 值是合并单元格的数量,跨越的行数
3行3列的表格
快捷键：tr*n>td*n 然后按Tab，就可以生成n行n列的表格
-->
<table bordercolor="blue" border="1" cellpadding="3" cellspacing="1" width="800" height="600">
<tr>
<th colspan="2">亚瑟</th>
<!--<th>钟无艳</th>-->
<th>后羿</th>
</tr>
<tr>
<th rowspan="2">孙尚香</th>
<th>小乔</th>
<th>猴子</th>
</tr>
<tr>
<!--<th>妲己</th>-->
<th>甄姬</th>
<th>云中鹤</th>
</tr>
<!--
9.超链接标签: 从一个页面跳转到另一个页面
标签: a
属性:
href: 跳转到另一个页面的地址
target: 新页面的显示方式
_blank: 在新窗口中打开
_self: 在当前窗口中打开 默认
-->
<a href="http://www.baidu.com" target="_self">百度</a>
</table>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？