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的图片

锚点：
作用：在网页中的任意位置添加记号可由任意位置跳转到该记号（比如返回顶部）
使用：
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>