一. H TML 表格标签
表格标签

表格标签：<table>
行标签：<tr>
单元格标签：<td>
一个表格里有无限行
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
一行有无限单元格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
一个单元格里有无限内容
<table>
<tr>
<td>无限内容</td>
</tr>
</table >

入门案例1：
<!-- <table>定义一个表格 表格有黑色边框线的，边框线粗细默认0px table 属性： border 设置表格边框的粗细 width 设置表格的宽度(px 百分比) --> <table border="1" width="40%"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>


入门案例2：为表格加入背景颜色，设置单元格对齐方式
<!-- <table>定义一个表格 表格有黑色边框线的，边框线粗细默认0px table 属性： border 设置表格边框的粗细 width 设置表格的宽度(px 百分比) td 属性： align left(默认) center right table/tr/td 背景颜色：bgcolor --> <table border="1" width="40%" bgcolor="#f0ffff"> <tr bgcolor="#ffe4c4"> <td align="center">1</td> <td>2</td> <td bgcolor="#7fffd4">3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>

table 属性
属性名 属性说明
border 表格边框的宽度。
单位 ： 像素
width bgcolor
表格的宽度。
单位 ： 像素 /百分比 表格的背景颜色。



td属性
属性名 属性说明
colspan 跨列合并单元格。
合并几个单元格就写几 。
例如 ：colspan= ”2” 跨列合并两个单元格

rowspan align
跨行合并单元格。
例如 ：rowspan= ”2” 跨 行 合并两个单元格

表格的对齐方式。
left左对齐（默认）
center 居中
right 右对齐


单元格合并：



练习：将1、2两个单元格合并为一个，内容体改为A
<table border="1" width="300px"> <tr> <td colspan="2">A</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>


练习2 ：将4、7两个单元格合并为一个，内容体改为B
<table border="1" width="300px"> <tr> <td colspan="2">A</td> <td>3</td> </tr> <tr> <td rowspan="2">B</td> <td>5</td> <td>6</td> </tr> <tr> <td>8</td> <td>9</td> </tr> </table>

单元格合并总结： 步骤： 找到需要合并的单元格 谁的代码在最上方，谁加入单元格合并的属性 合并几个单元格，属性值就是几 被合并的单元格必须删除

二. 图片标签


属性名 属性说明
src 指定需要展示的图片所在路径

内网路径 ：
相对路径
绝对路径
外网路径 ：http://开头即可

alt 图片无法显示时的替代文本。
width height
图片宽度
单位 ： 像素 /百分比 图片高度
单位 ： 像素 /百分比


<!-- src:设置图片路径。 内网路径(本地、本机)： 绝对路径：明确且具体的路径 相对路径：以参照物为参照的路径 外网路径：http:// 例如：http://www.baidu.com/index/xxx.png --> <h1>绝对路径</h1> <!-- idea 不支持 --> <img src="D:\\IDEA56\\day04_1\\img\\logo.png"/> <!-- idea 支持--> <img src="/day04_1/img/logo.png"/> <h1>相对路径</h1> <img src="../img/logo.png"/>

属性名 属性说明
../ ./
返回向上一层目录
指当前目录，可以忽略

其中/和\\效果上无差别，甚至可以混合使用。但为了开发格式统一，我们仅选其中一个即可

记录规律：
/ 铲子拍一下
\\ 铲子铲两下
分辨相对路径和绝对路径：
绝对路径： ① 以盘符开头 或者 ② / 项目名
相对路径：其他所有


三. 列表标签&超链接标签
用于展示可以点击并打开的信息
超链接标签： <a></a>
属性名 属性说明
href target
用于指定需要连接并打开的页面路径
路径写法等同于img的src写法。

确定以何种方式打开href所设置的页面。

取值 ： _blank 在新窗口中打开href确定的页面。 _self 默认。使用href确定的页面替换当前页面。


<!-- 超链接：点击并跳转页面 # 当前页面 href：设置跳转路径 内网路径： 相对路径： 绝对路径：/day04/img/logo.png 外网路径：http:// http://www.baidu.com 超链接如何能够被点击： 1、必须有href属性 2、必须有内容体 --> <a href="demo.html">点我啊</a> <a href="demo.html"> <img src="../img/logo.png"/> </a>
<!-- target 打开方式/打开目标 _self 默认。 当前页签打开链接 _blank 在新窗口中，打开链接 --> <a href="demo.html" target="_blank">点我啊</a> <!-- 书签(扩展,非考点) name: 书签名 href: 跳转路径，可以跳转到某个书签上的 --> <a name="hehe"></a> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <h1>5</h1> <h1>6</h1> <h1>7</h1> <h1>8</h1> <h1>9</h1> <h1>10</h1> <h1>11</h1> <h1>12</h1> <a href="#hehe">点我返回顶部</a>


列表标签：用来展示列表 <!-- ul定义一个无序列表 ol定义一个有序列表 li列表中的一个列表项 --> <h1>无序列表</h1> <ul> <li>Java编程</li> <li>百度</li> <li>网易</li> <li>谷歌</li> </ul> <hr/> <h1>有序列表</h1> <ol> <li>Java编程</li> <li>百度</li> <li>网易</li> <li>谷歌</li> </ol>



看完恭喜你,又知道了一点点!!!
你知道的越多,不知道的越多!
~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!