Web开发基础学习笔记整理(4)

写在<body>中的标记

(15)超链接
   a  文字链接
   b  图片链接
   c  图片热点分割技术
   d  超链接的特殊使用--返回页面顶部    href=”#”
(16)表格标记
      <table border=”” ....></table>   表格的开始和结束标记
      <tr></tr>        表格的一行
      <td></td>        表格的一列 
      <caption></caption> 设置表格的标题,会一直在表格的正上方显示,<caption>标记一般写在<table>标记的下面,第一行<tr>的上面。
      表格中的属性:border=””  给表格加上一个边框
                   cellspacing=””   表格中行列之间的空隙(0~xx)
                   width=””   设置表格的宽度
                   height=””   设置表格的高度
                   align=”left/center/right”    设置水平对齐方式,左中右对齐方式
                       1)用在<table>开始标记中,是表格整体左中右对齐
                       2)用在<tr>开始标记中,设置该行的内容左中右对齐
                       3)用在<td>开始标记中,设置某一个单元格左中右对齐
                   valign=”top/middle/bottom”  垂直对齐方式,顶部,居中,底部对齐方式
                       (说明:valign只能用在<tr>和<td>标记中,不可以用在<table>标记中)
                   rowspan=””  跨行  数字,数字表示跨几行
                   colspan=””   跨列  数字,数字表示跨几列
                    (说明:rowspan和colspan一般写在<td>标记中,一般是让一个单元格跨行或者跨列)
    <marquee directon=”left/right”>内容</marquee>   该标记能够将内容变成漂移的效果,direction=””属性表示漂移的方向  

表格分析:

在这里插入图片描述

代码部分:

<html>
	<head></head>
	<body>
		<!-- 图片 -->
		<img src="玫瑰.jpg" width="600" height="400" 
		title="这是一只小老虎" border="1"/>
		<!-- <img src="a.png"/> -->
		<br/>
		<br/>
		
		<!-- 文字链接 a href="" target="" -->
		<a href="http://www.baidu.com" target="blank">去百度</a>
		<a href="http://www.taobao.com">点我去淘宝</a>
		<a href="body.html" target="_self">去我自己的页面</a>
		<br/>
		<br/>
		
		<!-- 图片链接 -->
		<a href="http://www.baidu.com" target="_blank">
			<img src="玫瑰.jpg" width="600" height="400"/>
		</a>
		<br/>
		<br/>
		
		<!-- 图片热点分割 map标记 -->
		<img src="t.jpg" width="600" height="400" usemap="#a"/>
		<map name="a">
			<!-- 左区域 -->
			<area shape="rect" coords="0,0,300,400" href="http://www.baidu.com"></area>
			<!-- 右区域 -->
			<!--
			<area shape="rect" coords="300,0,600,400" href="http://www.taobao.com"></area>
			-->
			<!-- 右区域划分为圆区域 -->
			<area shape="circle" coords="450,200,100" href="http://www.taobao.com"></area>
		</map>
		<br/>
		<br/>
		
		<!-- 超链接的特殊使用:返回页面顶部 
			 href="#" 表示跳转到本页面
		-->
		<a href="#"><img src="jt.jpg"/></a>
	</body>
</html>
<html>
	<head>
		<title>表格标记</title>
	</head>
	<body>
		<!-- 制作表格 table表示表格的开始结束 tr行 td列 -->
		<!-- 注意缩进(结构) -->
		<table border="1" cellspacing="0" width="600" height="250" align="center">
			<!-- 给表格加一个标题 标题永远在表格正上方显示 -->
			<caption>学生成绩表</caption>
			<tr align="center" valign="middle"> <!-- 第一行 -->
				<td>班级</td>
				<td>学号</td>
				<td>姓名</td>
				<td>成绩</td>
			</tr>
			<tr align="center"> <!-- 第二行 -->
				<td rowspan="2">软件1</td>
				<td>1001</td>
				<td>张三</td>
				<td>100</td>
			</tr>
			<tr align="center"> <!-- 第三行 -->
				<!-- <td align="center">软件1</td> 把第一列的位置空出来 -->
				<td>1002</td>
				<td>李四</td>
				<td align="center">90</td>
			</tr>
			<tr align="center"> <!-- 第四行 -->
				<td colspan="3">总分</td>
				<td>190</td>
			</tr>
			<tr> <!-- 第五行 漂移效果!-->
				<td colspan="4"><marquee direction="right">欢迎!<marquee></td>
			</tr>
		</table>
	</body>
</html>

效果图:

在这里插入图片描述

发布了55 篇原创文章 · 获赞 34 · 访问量 1474

猜你喜欢

转载自blog.csdn.net/qq_44458489/article/details/104959611