WEB前端之HTML基础（图像链接篇）

图像和链接
1、URL
1、目录 & 目录结构
目录：WEB站点中文件夹的名称
目录结构：由目录以及子目录形成复杂结构
2、URL
URL(Uniform Resource Locator)
统一资源定位符
作用：用来标识网络中资源的位置
资源：图片，网页，音视频…
俗称：路径(地址)

URL在WEB页面上有三种表现形式:
1、绝对路径
2、相对路径
3、根相对路径
3、路径详解(重点)
1、绝对路径
1、什么是绝对路径
文件从最高级目录下开始的完整路径

1、访问网络资源
1、由以下四个部分组成
1、协议名称
2、主机名(IP地址，域名)
3、目录路径
4、文件名
ex:
1、协议名
https
2、主机名(域名)
www.baidu.com
3、目录路径
img
4、文件名
bd_logo1.png

https://www.baidu.com/img/bd_logo1.png

//www.baidu.com/img/bd_logo1.png
2、访问本机资源
从盘符位置处一层一层查找，直到找到文件名为止
E:\HTML5BASIC\Images\login.png
2、相对路径
1、什么是相对路径
资源文件为止是相对于当前文件的位置开始进行查找的完整路径表现形式。相对路径是通过 文件之间的 位置关系 来查找文件
2、具体表现形式
1、资源文件和当前文件在同目录
直接通过资源文件名称 进行引用
2、资源文件 在 当前文件的 相当于是子目录中
想进入到目录中，再查找
3、资源文件 在 当前文件的 父层结构下
通过 …/ 向上返回，再引用文件
3、根相对路径
永远都是从web站点所在的根目录处开始查找
形式：/路径/子路径/…
2、图像
1、格式
2、图像元素
语法：
属性：
1、src
指定要显示图像的URL
2、width
宽度，指定图像的宽度
以px作为单位的数值，px可以省略
3、height
高度，指定图像的高度
以px作为单位的数值，px可以省略
注意：
1、如果 width 和 height 只设置了一个属性的话，那么另外一个属性会跟着"等比缩放"
2、src中的 URL ，要严格区分大小写(服务器端约束)
3、链接
1、链接元素
语法：内容
属性：
1、href 属性
链接的文件的url
2、target
目标，打开新网页的方式
取值：
1、_self
(默认值)
在自身页面中打开新页面
2、_blank
在新标签页中打开新页面
2、链接的表现形式
1、链接目标为资源下载
下载

			rar/zip:压缩包

2、电子邮件链接
联系我们

	前提：
				1、有电子邮件
				2、机器中必须装有邮件客户端(Foxmail,outlook,...)
		3、返回页面顶部的空链接
			<a href="#">返回顶部</a>
		4、链接到Javascript
			<a href="javascript:">JS功能</a> 3、锚点
		1、作用
			在html文档中某个位置处做记号
		2、使用方式
			1、定义锚点
				1、任何一个元素的id属性可以作为锚点
					<div id="name1"></div>
				2、a 元素 的 name 属性
					<a name="name2"></a>
			2、链接到锚点
				<a href="#锚点名称">链接到锚点</a>
				<a href="页面URL#锚点名称">其他页面锚点</a>

2、表格
1、什么是表格
表格是用来以一种结构化的方式来显示数据的元素。
表格是一些被称之为 单元格 的矩形框 按照 从左到右，从上到下的顺序排列而成的一个元素。
2、创建表格
1、表格 :

2、行 :
3、列(单元格) :
注意：
1、表格的 display:table,既不是行内元素页不是块级元素
2、特点
1、独自成行
2、宽度，高度，全部都是以内容为主-自适应
3、表格的常用属性
1、表格元素属性-table
1、width
宽度
2、height
高度
3、align
设置 表格 在其父元素中的水平对齐方式
4、border
边框
取值 以px为单位数值，px可以省略
5、cellpadding
设置单元格内边距-单元格边框与内容之间的距离
6、cellspacing
设置单元格外边距-单元格与单元格，或单元格与表格之间的距离
7、bgcolor
背景颜色
2、表行元素属性-tr
1、align
该行文本的水平对齐方式
left/center/right
2、valign
该行文本的垂直对齐方式
top/middle/bottom
3、bgcolor
3、单元格(列)td元素属性-td
1、align
单元格内容的水平对齐方式
2、valign
3、width
4、height
5、bgcolor
6、colspan
设置单元格跨列
7、rowspan
设置单元格跨行
4、表格中其他标记
1、表格标题
语法：标题
默认情况下，标题将在表格上方以水平居中的方式显示。
注意：必须紧紧跟随在之后
2、行(列)标题
以特殊化的方式 来显示每行中的第一个单元格 或 第一行中的 每列单元格的效果
语法：
注意：th 与 td 具备相同作用的，不同显示效果
特殊效果：
1、水平居中显示
2、文本加粗显示
5、表格复杂应用
1、行分组
1、表头 行分组

2、表主体 行分组

3、表尾 行分组

以上三组，每组中都允许包含多对
注意：
如果不手动指定行分组的话，那么所有的行都被默认在 中
2、不规则表格
1、跨列
设置 td 的 colspan 属性
从当前单元格开始，横向向右 合并几个单元格(包含自己)
2、跨行
设置 td 的 rowspan 属性
从当前单元格开始，纵向向下合并几个单元格(包含自己)
3、表格的嵌套
一个表格中又嵌套了另一个表格
表格中，所有被嵌套的东西，只能放在

中