今天的主要分享的是一些最基本、最常用的标签:<img/>、<a></a>、<table></table>、<ul></ul>,以及文件路径。
首先,先来了解一下<img/>标签,它表示图片标签,在页面中会出现很多的图像,主要的编码方式就是通过<img/>来实现的;那是怎么实现的呢?它通过一些自己的属性来规定了这个图像的样式,要实现一个图像最基本的属性有 src属性、width属性、height属性、alt属性,详解一下他们的属性分别是做什么的,是实现图像的哪一个部分的?
src属性:就是你要放置图像,该图像的文件路径,你的文件是放在C盘里面的文件还是D盘里面的文件,那么src就是这个图像的路径;
width属性:就是你的图像的宽度,同理height就是图像的高度;
alt属性:是指一种提示,比如你的鼠标在移动到你的图片的时候或有文字提示、或者因为某种原因图片不能正常显示的时候,会有直接文字提示;
第三、关于<table>表格标签
表格:有行有列,按照一定的格式(从左到右,从上到下)排列里面的内容;它能组织结构化的信息,按照一定的格式来进行数据显示
要想创建表格:
1.定义表格:<table></table>
2. 定义行:<tr></tr>
3.创建列(单元格):<td></td>
注意:原始的表格中,每行的列数全部都是统一的。
在一些情况下,表格会有:表头,表主体,表尾
表头:<thead></thead>
表主体:<tbody></tbody>
表尾:<tfoot></tfoot>
实战:创建一个表格,有4行3列
<table>
<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>
</table>
表格的属性:表格也是通过自己的属性来形成自己风格的table
width:宽度
height:高度
align:水平对齐方式(left,center,right)
border:设置表格的变宽,以px(像素)为单位
cellpadding:内边距,(单元格边框与内容之间的距离)
cellspacing:外边距,(单元格与单元格之间的距离)
bgcolor:表格背景颜色
align:设置该行内容的水平对齐方式(left,center,right)
valign:设置该行内容的垂直对齐方式(top,middle,bottom)
colspan:单元格跨列(向右合并单元格)
rowspan:单元格跨行(向下合并单元格)
表格标题:即表格第一行,文字加粗 语法:<caption>标题</caption>
<table>
<caption></caption>
<tr>
<td></td>
</tr>
</table>
表格除了中规中矩,还有复杂应用,可以形成不规则的表格,实现不规则表格主要是通过跨列:colspan、跨行:rowspan
第四:关于列表<ul>
列表根据使用情景,可以分为:有序列表、无序列表、自定义列表,其中
1、有序列表
语法:<ol><li></li> 列表项</ol>
常用属性:
type : 列表类型,取值可以为:
1 :表示数字(默认值)
a : 表示小写字母
A : 表示大写字母
i : 表示小写罗马数字
I : 表示大写罗马数字
start : 起始编号
2、无序列表
语法:<ul><li></li></ul>
属性: type 取值可以为:
disc : 实心圆(默认)
circle : 空心圆
square : 实心矩形
3、自定义列表
<dl> 定义列表
<dt></dt> 列表内容标题
<dd></dd> 列表数据
</dl>
有序、无序使用场景:
1、从上到下,只有一列显示数据
2、从左到右,只有一行显示数据(导航)
自定义列表使用场景:做图文混排的布局
最后是关于文件路径,即URL
目录结构的表示方式
URL : Uniform Resource Locator , 统一资源定位器 ,俗称,路径
作用:用来标识网络中的资源位置
http://www.baidu.com
images/logo.gif
URL的三种形式: 绝对路径 相对路径 根相对路径
1、绝对路径
文件从最高级目录开始的完整的路径
绝对路径就是完整的URL
1、从本机目录结构查找,从盘符开始
C:\xxx\xxx.jpg
2、网络资源目录结构开始查找
协议、主机、目录路径、文件名称
http://www.baidu.com/images/logo.jpg
2、相对路径
相对于当前文件的位置,查找资源文件
1、同级目录(直接找)
直接输入资源文件名称即可
2、子级目录(先进入)
先进入到指定文件夹,再查找资源文件
3、父级目录(先返回)
先返回到指定的父级目录出,再查找指定资源文件
../ : 表示返回上一级
../../images/logo.png
3、根相对路径
file:///C:/zhaoxu/ ........ 本地访问
http://www.baidu.com
http://localhost/ ...... 从服务器访问数据
,