图片标签：<img scr="图片的URL" alt="替换文本" title="提示文本">(单标签)
图片标签-属性
| 属性 | 作用 | 说明 |
| alt | 替换文本 | 当图片无法显示的时候显示文字 |
| title | 提示文本 | 当鼠标放在图片上时显示的文字 |
| width | 图片的宽度 | 值为数值，没有宽度 |
| height | 图片的高度 | 值为数值，没有宽度 |
注意：
- width和height在使用时，一般只使用其中一个，因为同时使用2个，值控制不好图片会压缩
- 属性要写在尖括号里面，标签名后面。标签名和属性之间要用空格分隔开，且不分先后顺序
- 图片URL可是是本地照片也可以是网页里你想要的图片地址
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我们开始图片测试吧 </title>
</head>
<body>
<img src="./培.jpg" alt="这是培的照片" title="培" width="300">
<!-- 下面这个是获取别人网页里面的图片地址 -->
<img src="https://gitee.com/static/images/logo-black.svg?t=158106664" >
<img src="../2023080910113-###/素材.png" alt="机器人" title="机器人">
</body>
</html>浏览器效果：
超链接:<a href="跳转链接" target="新窗口跳转页面">显示的文字</a>（双标签）
- 超链接标签的作用：单击跳转到其他页面
- 如何写href属性值：在初期开发，不确定跳转地址用#空链接代替
- target="_blank"属性的作用是：在新窗口中打开
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
<a href="https://gitee.com/chinaio" target="_blank">跳转到码云</a>
</body>
</html>浏览器效果：
点击浏览器文字，立即跳转到编程中指定网址
表格标签<table></table>
标签：table嵌套tr，tr嵌套td/th
| 标签名 | 说明 |
| table | 表格 |
| tr | 行 |
| td | 内容单元格 |
| th | 表头单元格 |
提示：在网页中，表头默认没有边框，使用border属性可以为表格加边框线
表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义跟清晰
| 标签名 | 含义 | 特殊说明 |
| thead | 表格头部 | 表格头部内容 |
| tbody | 表格主体 | 主要内容区域 |
| tfoot | 表格底部 | 汇中信息区域 |
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
合并单元格步骤：
- 明确合并的目标
- 保留最左最上的单元格，添加属性（取值是数值，表示需要合并的单元格数量）
-跨行合并，保留最上单元格，添加属性rowspan
-跨列合并，保留最左单元格，添加属性colspan
-
删除其他单元格
属性
边框：border="1"
颜色：bgcolor="rad"
单元格间距：cellspcing=""
单元格内间距：cellpadding=""
对齐方式：align=""
高宽度：width="宽度" height="高度"
合并：rowspan="" colspan=""
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格测试</title>
</head>
<body>
<table border="0" width="100%">
<tr align="center" bgcolor="pink">
<td bgcolor="cyan">购物网站-></td>
<td>
<a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=kong&utm_medium=jingfen&utm_campaign=t_2030767747_&utm_term=89c2f5234bd5415c9d61ee4c2ec1958a" target="_blank">
<img src="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png" alt="京东" width="160">
</a>
</td>
<td>
<a href="https://www.vip.com/?wq=1&chanTag=d9f31588f2733e5ad6096f6053ca7fc9" target="_blank">
<img src="https://b.appsimg.com/upload/momin/2020/06/16/82/1592278113502.png" alt="唯品会" width="200">
</a>
</td>
<td>
<a href="https://www.tmall.com/?page_offline=true" target="_blank">
<img src="https://img.alicdn.com/imgextra/i2/O1CN01a69z6z1hJklCkBqOU_!!6000000004257-2-tps-174-106.png" alt="天猫" width="60">
</a>
</td>
<td width="10">
<a href="https://ai.taobao.com/?pid=mm_5539777028_3063500466_115634500434&union_lens=lensId%3APUB%401708679959%40213d5e9b_1394_18dd54312a3_04b8%4001" target="_blank">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01BqHq2Z28Ns0s0KLHa_!!6000000007921-2-tps-126-54.png" alt="爱淘宝" width="60">
</a>
</td>
</tr>
<tr align="center" width="100%" bgcolor="beige">
<td bgcolor="khaki">学习-></td>
<td>
<a href="http://zmxstudy.com/" target="_blank">
<img src="./素材.png" alt="学习" width="160">
</a>
</td>
<td>
<a href="https://www.csdn.net/?spm=1000.2115.3001.4476" target="_blank">
<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="博客" width="200">
</a>
</td>
<td>
<a href="https://fishc.com.cn/" target="_blank">
<img src="https://fishc.com.cn/static/image/common/logo.png" alt="鱼鱼" width="100">
</a>
</td>
<td>
<a href="https://www.bilibili.com/?spm_id_from=333.1007.0.0" target="_blank">
<img src="https://i0.hdslb.com/bfs/archive/9a30607625e6c07da570bb2eb07ebdcc4b23c759.png" alt="b站" width="160">
</a>
</td>
</tr>
<tr bgcolor="goraal" align="center" size="10">
<td>无聊<br>刷剧-></td>
<td>
<a href="https://www.iqiyi.com/v_151oux8ma9s.html?vfrm=pcw_home&vfrmblk=712211_dianshiju&vfrmrst=712211_dianshiju_float_video_area1" taeget="_blank">
<img src="https://pic7.iqiyipic.com/image/20240307/45/d8/v_175717886_m_601_m2_480_270.jpg?caplist=jpg,webp,avif" alt="唐人街探案案" width="200">
</a>
</td>
<td>
<a href="https://v.qq.com/x/cover/mzc00200whsp9r6/b0047fgdeuq.html?start=2430&cut_vid=r0047p17sxv&scene_id=3" target="_blank">
<img src="https://puui.qpic.cn/vpic_cover/r0047p17sxv/r0047p17sxv_hz.jpg/640" alt="繁花" width="200">
</a>
</td>
<td>
<a href="https://v.qq.com/x/cover/gwz8nqvc78oexgm/i0026dt1929.html?start=3963&cut_vid=e0040wxehi1&scene_id=3" target="_blank">
<img src="https://puui.qpic.cn/vpic_cover/e0040wxehi1/e0040wxehi1_hz.jpg/640" alt="九品芝麻官" width="200">
</a>
</td>
<td>
<a href="https://v.qq.com/x/cover/mzc00200hl7a86v/y0048yggwci.html?start=904&cut_vid=o0048rtokka&scene_id=3" target="_blank">
<img src="https://puui.qpic.cn/vpic_cover/o0048rtokka/o0048rtokka_hz.jpg/640" alt="照明商店" width="200">
</a>
</td>
</tr>
</tr>
<tr bgcolor="orange" align="center">
<td>来听歌放松一下-></td>
<td align="center" colspan="4">
<video src="../刘正月/张学友 - 听海 (活出生命Live演唱会).mp4" controls>看视频么</video>
</td>
</tr>
<tr align="center" bgcolor="yellow" width="100%">
<td>使用评价</td>
<td>希望更新内容</td>
<td>关于我们</td>
<td></td>
<td></td>
</tr>
<tr bgcolor="yellow" width="100">
<td>
<ul>
<li>非常好</li>
<li>好</li>
<li>一般</li>
<li>有待改善</li>
</ul>
</td>
<td>
<ul>
<li>更新视频</li>
<li>更新购物网</li>
<li>更新学习资源</li>
<li>
<a href="./喜欢风格.html" target="_blank">点击进入选择喜欢风格</a>
</li>
</ul>
</td>
<td>
<ul>
<li>联系我们</li>
<li>官方账户</li>
<li>公益活动会</li>
<li>了解更多</li>
</ul>
</td>
<td>
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.syGgzN-EI-Tjf7N0wF51OwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="哈哈哈" width="200">
</td>
<td>
<img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.AzOTg_vwnMEZNYlr7KQFEwHaJZ&w=221&h=281&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="哈哈哈" width="200">
</td>
</tr>
</table>
</body>
</html>浏览器效果：
扫一扫
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
