HTML链接标签和表格的使用

HTML链接标签和表格的使用
一、转义字符
二、行内元素和块级元素
三、web浏览器（以下是拥有自己内核的）
四、超链接标签
五、跑马灯标签
六、图片标签（img标签）是单标签
七、表格（块级元素）

一、转义字符

由**<>** 包裹的文本会当做标签去解析
& nbsp; 空格
& emsp；
& lt 、gt 分别代表“<” 和“ >”。
&copy；代表版权©
&yen；中文转义字符：￥

二、行内元素和块级元素

1.块级标签：
默认情况下，每一个块级元素都是独占一行的即元素的前后都会换行都有 align 属性如： p h1~6 hr div
2.行内标签（行级元素）：
不会换行可以和其他的标签或文本在一行内显示
如：b i s sup sub span
span和div没有语义。

注意事项（编程规则）
p标记不能嵌套块级元素 w3c的规范一个段落里面不能放另外一个文章

三、web浏览器（以下是拥有自己内核的）

1.谷歌：googlechrome
2.火狐：fireFox
3.IE 浏览器
4.欧朋：Opera
5.苹果：Safari

四、超链接标签

根据第一天的基础做一些补充知识：

<a href = "http://www.baidu.com" target=" "></a>

上面就是一个URL ：统一资源定位符
三种表现：

绝对路径：
解释：从文件所在的最高级目录下开始的完整路径
1.访问互联网上的资源
2.访问本机的资源

相对路径：
解释：文件所在的位置开始查找资源文件所在的位置经过的路径
1.当前文件和资源文在同目录下直接可以用名称引用
2.资源文件在当前目录的子目录中先进入，再引用
3.资源文件在当前文件的父目录中先返回再引用
…/ 返回上一级
…/…/ 返回商上两级
…/…/…/返回上三级
以此类推。

根相对路径：
在服务器上面使用的，只有服务器端才能用得到
表现 /作为开始
/img/ben.jpg 在项目中先找到一个img的文件夹再找btn的图片

扫描二维码关注公众号，回复： 10666353 查看本文章

锚点：
作用：在网页中的任意位置添加记号可由任意位置跳转到该记号（比如返回顶部）
使用：
1.定义锚点
a标签的一个属性 name
其他标签里面用 id 属性
2.在另外一个地方跳转
< a href="#记号的名称">< /a>

五、跑马灯标签

作用：将文本在页面上流动显示（滚动播放）
用法： < marquee > < /marquee >
属性：
scrollamount 调整速度
behavior轮播的样式：
1.alternate：左右轮播
2.scroll：无限循环轮播
3.slide：轮播到左处静止。

六、图片标签（img标签）是单标签

作用：在页面上添加一张图片
用法： < img src=“提取图片的地址” width=“宽度” height =“高度” align=“相对于左右文字的位置”>
图片的格式： jpg有损压缩 png无损压缩的图片支持透明度 gif动图

上述知识点的习题与案例：

习题：

<!DOCTYPE html>
	<html>
		<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--锚点用其他标签的使用-->
		<div id="bna" style=" width: 100px; height: 500px; background-color:black;">
			<div style="background-color: chartreuse; width:50px; height: 10px;"></div>
			<div style="background-color: azure; width:50px; height: 10px;"></div>
			<div style="background-color: blueviolet; width:50px; height: 10px;" ></div>
			<div style="background-color: cornflowerblue; width:50px; height: 10px;"></div>
			<div style="background-color: brown ;width:50px; height: 10px;"></div>
			<div style="background-color: burlywood ;width:50px; height: 10px;"></div>
			<div style="background-color: cadetblue; width:50px; height: 10px;"></div>
			<div style="background-color: chartreuse; width:50px; height: 10px;"></div>
			<div style="background-color: crimson; width:50px; height: 10px;"></div>
		</div>
		<a href="#bna">fg</a>
		<!--锚点用a标签使用-->
		<a name="DEN"></a>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		</div>
		<a href="#DEN">tz</a>
		<!--跑马灯标签
	作用：将文本在页面上流动显示（滚动播放）
	用法：  <marquee></marquee>
	属性： scrollamount   速度
		   behavior       样式
		-->
		<marquee behavior="alternate"  scrollamount="20">国色天香</marquee>
		<marquee behavior="scroll" scrollamount="50" >鸡你太美</marquee>
		<marquee behavior="slide"  scrollamount="10">没有开挂</marquee>
		<marquee  scrollamount="9">有基佬开我裤链</marquee>
		<marquee scrollamount="40"   >有卡哇卡忒ki由酷烈</marquee>
		<!--图片标签
	作用：在页面上 添加一张图片
	用法：  <img src="提取图片的地址" width="宽度" height ="高度" align="相对于左右文字的位置">-->
		<img src="img/u=1570638399,306028539&fm=26&gp=0.jpg";  width="50%"; height="50%;" align="center" />金泫雅
	</body>
</html>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>漫威快讯</title>
	</head>
	<body>
		<div id="top" style="width:850px; height:500px; margin: 0 auto;">
			<img src="img/baidulogo.png" width="117px" height="38px"/>&emsp;&emsp;
			<a href="http://www.baidu.com" target="_blank">百度首页</a>&emsp;
			<a href="https://passport.baidu.com/v2/?reg&tt=1575523430688&overseas=undefined&gid=DD8FE29-7E7D-41BA-A084-3B610AFBAC8F&tpl=mn&u=https%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3Dutf-8%26f%3D8%26rsv_bp%3D1%26rsv_idx%3D1%26tn%3Dbaidu%26wd%3Dhtml%2520div%25E6%2580%258E%25E4%25B9%2588%25E8%25AE%25BE%25E7%25BD%25AE%25E5%25AE%25BD%25E9%25AB%2598%26oq%3Dhtmldiv%2525E6%252580%25258E%2525E4%2525B9%252588%2525E8%2525AE%2525BE%2525E7%2525BD%2525AE%2525E5%2525AE%2525BD%2525E9%2525AB%252598%26rsv_pq%3D85af45f300050d56%26rsv_t%3Dfe7d5vkGgN0P%252F0goyohXcDlTDTOlHtcBJLrurrWuLjJ535nw2keyAiLW%252Bdo%26rqlang%3Dcn%26rsv_enter%3D1%26rsv_dl%3Dtb%26inputT%3D3175%26rsv_sug3%3D37%26rsv_sug1%3D21%26rsv_sug7%3D000%26bs%3Dhtmldiv%25E6%2580%258E%25E4%25B9%2588%25E8%25AE%25BE%25E7%25BD%25AE%25E5%25AE%25BD%25E9%25AB%2598" 
			target="_blank">
				登录</a>
			<hr size="1" color="darkgray"/>
			<h1 align="center">如果没有出演美国队长，这将是克里斯·埃文斯最大的错误</h1>
			<div align="right">
			<img src="img/03.jpeg" width="30px" height="30px" align="center"/>&nbsp;
			<a href="http://www.manwei.wang/ " target="_blank">漫威</a>
			</div>
			<p>
			<b>&emsp;&emsp;美国队长克里斯·埃文斯</b>是最初曾两次婉拒出演美国队长，但最后还是参演了，
			“在扮演一个对我来说意义重大的角色之后继续向前迈进，我认为任何一个演员
			即使我一开始就扮演这个角色，好吧，我可能会被这个角色定义了？”CE在参加
			ACE漫展时说道。“但在某种程度上来说，在过去十年间，你不禁会接受这样一个
			事实：当你走在街上时，每个人都喜欢，队长！”
			</p>
			<marquee scrollamount="5" behavior="alternate" style="color: red;">欢迎进入百度百科新闻网</marquee>
			<div align="center">
			<img src="img/02.jpeg" width="640px" height="360px" />
			</div>
			<p>
				<i>&emsp;&emsp;尽管漫威这样的长期合约曾让CE有些焦虑，</i>因为这样很可能会将一个演员<s>局限</s>在这个角色中，
				“但实际情况是，漫威制作了一系列电影，如果我不是这些电影的一部分，如果我对这些电影
				最终说了不，那将是我生命中最大的错误”，他说道
			</p>
			<p>
				
			&emsp;&emsp;<span style="background-color:yellow;">“我认为这些电影对我来说非常特别。</span>这是令人难以置信的珍藏，而这些也永远不会再发生，
			我觉得很幸运雨特别的演员，以及导演编剧一起工作，这对我来说太特别了。”
			</p>
			<div align="center">
			<img src="img/01.jpeg" width="640px" height="360px"/>
			</div>
			<p>
				&emsp;&emsp;“在我生命中的某个时刻，我真的很担心[出演美国队长]，但想起来，我可以完全肯定地说，
				这是我做过最好的决定。”CE还表示，即使这些电影糟透了，他的职业生涯也因此而陷入困境，
				但和这些白痴[一同出席了漫展的还有“鹰眼”杰瑞米·富纳和“战争机器”唐·钱德尔]成为了朋友，
				<s>也超值了!</s>
			</p>
			<p align="right">2019-7-11</p>
			<hr size="1" color="darkgray" />
			<p style="color: darkgrey;">相关搜索</p>
			<div align="center">
			<a href="https://baike.baidu.com/item/%E5%A4%8D%E4%BB%87%E8%80%85%E8%81%94%E7%9B%9F/17609141?fr=aladdin"
				target="_blank">复仇者联盟演员表</a>&emsp;&emsp;
			<a href="https://baike.baidu.com/item/%E9%92%A2%E9%93%81%E4%BE%A0/303?fr=aladdin"
				target="_blank">钢铁侠</a>&emsp;&emsp;
			<a href="https://baike.baidu.com/item/%E8%9C%98%E8%9B%9B%E4%BE%A0%EF%BC%9A%E8%8B%B1%E9%9B%84%E5%BD%92%E6%9D%A5/20270901?fr=aladdin"
				target="_blank">蜘蛛侠之英雄归来</a>
			</div>
			<p align="right" >
				<a href="#top"><span style="color: red; font-family: '楷体'; font-size:25px;">
					回到顶部</span>
					
				</a>
			</p>
		</div>
	</body>
</html>

七、表格（块级元素）

1.表格的作用：按照一定的格式摆放的数据。
表格是有一些被称为单元格的矩形框所组成。
按照从左往右，从上到下的顺序排列到一起组成的

2.创建表格（table标签）
语法如下：

<!--定义表格-->
<table>
<!--创建行-->
		<tr>
		<!--创建单元格-->
				<td>
				</td>
		</tr>
</table>

3.表格的创建
table标签属性：
border：边框
cellspancing：单元格外边距（单元格之间的距离）
cellpadding：单元格内边距（单元格边框与内容之间的边距）
width：宽度
height：高度
align：对齐方式
bgcolor：背景颜色（纯色填充）
bordercolor：边框颜色
background：背景图片

tr标签（行）属性：
bgcolor：背景颜色
tr标签没有宽高属性
align：水平对齐方式
valign：垂直对齐方式

td标签（单元格）属性
width：宽度
height：高度
align：水平对齐方式（每个单元格的内容）
valign：垂直对齐方式

4.不规则表格的创建
行合并：colspan
合并一行的多个单元格
比如一行有五个将其合并
前：

<table border="1" align="center" width="500px" height="500px" cellspacing="0>
	<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
</table>

后：

<table border="1" align="center" width="500px" height="500px" cellspacing="0>
	<tr>
			<td  colspan=”5“></td>
		</tr>
</table>

列合并：rowspan
合并一列多个单元格
比如合并一列3个单元格

前：

<table border="1" align="center" width="500px" height="500px" cellspacing="0>
	<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
</table>

后：

<table border="1" align="center" width="500px" height="500px" cellspacing="0>
		<tr>
				<td rowspan=”3“></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
	</table>

表格标题
语法：

<caption> </caption>

表格标题必须跟在table标签后面，而且最多只有一个

小技巧：
？标签想要的此标签的个数+tab键可一次性创建多个该标签
比如创建9个table标签
table * 9
如要创建多个组合标签
则
标签名个数 >子标签名 * 个数
如：
tr 5 >td3**

表格习题与案例

习题：

<!DOCTYPE html>
	<html>
	
		<head>
			<meta charset="UTF-8">
			<title></title>
		</head>
	
		<body>
			<table border="2" width="500px" height="450px" cellpadding="1px" cellspacing="0" align="center" bgcolor="crimson" bordercolor="yellow" background="img/u=1570638399,306028539&fm=26&gp=0.jpg">
				<tr align="left" valign="top">
					<td width="150px" height="200px" align="center" valign="bottom">爱斯基摩</td>
					<td>白俄罗斯</td>
					<td>土耳其</td>
				</tr>
				<tr>
					<td>爱斯基摩</td>
					<td>白俄罗斯</td>
					<td>土耳其</td>
				</tr>
				<tr>
					<td>爱斯基摩</td>
					<td>白俄罗斯</td>
					<td>土耳其</td>
				</tr>
			</table>
			
			<table border="1" align="center" width="500px" height="500px" cellspacing="0">
				<tr>
					<td colspan="5"></td>
	
				</tr>
				<tr>
					<td rowspan="7" colspan="2" width="40%"></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td colspan="2" rowspan="3"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</body>
		</html>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" align="center" width="650px" height="1000px" cellspacing="0" >
			<tr>
				<td colspan="8" rowspan="2" align="center" ><b>个人求职简历</b></td>
				
			</tr>
			<tr></tr>
			<tr>
				<td align="center" height="3%" width="12%">姓名</td>
				<td colspan="2" width="25%"></td>
				
				<td td align="center" height="3%" width="12%">性别</td>
				<td colspan="2" width="25%"></td>
				
				<td colspan="2" rowspan="6" width="25%"></td>
				
			</tr>
			<tr>
				<td td align="center" height="3%" width="12%">年龄</td>
				<td colspan="2"></td>
				
				<td td align="center" height="3%" width="12%">出生日期</td>
				<td colspan="2"></td>
				
				
				
			</tr>
			<tr>
				<td align="center" height="3%" width="12%">所在城市</td>
				<td colspan="2"></td>
				
				<td align="center" height="3%" width="12%">从事行业</td>
				<td colspan="2"></td>
				
				
			</tr>
			<tr>
				<td align="center" height="3%" width="12%">学历</td>
				<td colspan="2"></td>
				<td align="center" height="3%" width="12%">民族</td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				<td align="center" height="3%" width="12%">婚姻状况</td>
				<td colspan="2"></td>
				<td align="center" height="3%" width="12%">身份证</td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				<td align="center" height="3%" width="12%">毕业学校</td>
				<td colspan="2"></td>
				<td align="center" height="3%" width="12%">计算机能力</td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="3" align="center" height="3%" width="12%">家庭成员</td>
				<td colspan="2" align="center" height="3%" width="12%">姓名</td>
				<td >成员关系</td>
				<td colspan="2" align="center" height="3%" width="12%">职务</td>
				<td colspan="2" align="center" height="3%" width="12%">工作单位</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="5" align="center" height="3%" width="12%">工作经历</td>
				<td colspan="2" align="center" height="3%" width="12%">工作时间</td>
				<td>公司名称</td>
				<td colspan="2" align="center" height="3%" width="12%">职位名称</td>
				<td colspan="2" align="center" height="3%" width="12%">所属部门</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td rowspan="2" colspan="2"></td>
				<td rowspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="2" align="center" height="3%" width="12%">教育状况</td>
				<td colspan="2" align="center" height="3%" width="12%">时间</td>
				<td align="center" height="3%" width="12%">学校</td>
				<td colspan="4" align="center" height="3%" width="12%">学历</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="2" align="center" height="3%" width="12%">培训经历</td>
				<td colspan="2" align="center" height="3%" width="12%">培训时间</td>
				<td align="center" height="3%" width="12%">培训机构</td>
				<td colspan="4" align="center" height="3%" width="12%">培训内容</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td align="center" height="3%" width="12%">备注</td>
				<td colspan="7"></td>
			</tr>
			<tr>
				<td colspan="8"></td>
			</tr>
			<tr>
				<td rowspan="5" align="center" height="3%" width="12%">自我评价</td>
				<td colspan="7" rowspan="5"></td>
			</tr>
		</table>
	</body>
	</html>

weixin_45060872

发布了26 篇原创文章 · 获赞 5 · 访问量 1056

私信关注