HTML链接标签和表格的使用

最新推荐文章于 2022-11-22 20:36:05 发布

头上三尺很有神

最新推荐文章于 2022-11-22 20:36:05 发布

阅读量1.3k

点赞数

分类专栏：前端 HTML和CSS 文章标签：前端 html 表格实训网页设计

本文链接：https://blog.csdn.net/weixin_45060872/article/details/103410447

版权

本文详细介绍了HTML链接标签的使用，包括绝对路径、相对路径、锚点等，并讲解了表格的创建，如单元格合并、对齐方式、边框属性等。同时，提到了行内元素与块级元素的区别，以及常见web浏览器的内核。

摘要由CSDN通过智能技术生成

HTML链接标签和表格的使用

一、转义字符

由**<>** 包裹的文本会当做标签去解析
& 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" scrolla