1、目录结构
1、页面
2、图像
3、css / style
4、Javascript
2、URL
Uniform ResourceLocator
统一资源定位器
描述的是资源文件的所在地址
URL有三种表现形式:
1、绝对路径
永远都是从一个固定位置开始查找
固定位置：资源所在的根目录
从本机查找：
盘符:\目录\目录......\文件名称.jpg
E:\李俊\01_HTML5BASIC\Day02\jd\images\1.jpg
互联网资源:
http://www.baidu.com/img/bd_logo1.png
2、相对路径
查找资源文件的位置是相对于当前网页文件所在的位置处开始查找
1、网页文件与资源文件在同一个目录内
直接引用资源文件名称即可
1.jpg
2、资源文件在子级目录内
先进入到目录内，再通过资源文件的名称进行引用
images/1.jpg
images/fengjing/2.jpg
3、资源文件在父级目录内，网页在子级目录下
../ ： 表示上一级
../../../
../1.jpg
../images/1.jpg
3、根相对路径
从服务器上网站所在的根路径开始查找
/ ：网站根路径
不同点：查找资源文件的起始位置不同
3、图像
语法：<img/> -->
属性：
1、src
描述图像地址(URL)
<img src="1.jpg" />
<img src="E:/xxx/1.jpg" />
<img src="http://www.baidu.com/1.jpg" />
2、width ：宽度
height: 高度
注意：宽度和高度如果只设置一个的话，那么图像会等比缩放
3、title
4、超链接
语法:<a></a>
属性：
1、href：链接的URL
可以相对URL 也可以是 绝对URL
取值为 #,链接到本页的顶部
2、target
目标，打开新网页的方式
取值:
_blank : 新页面中打开
_self:在当前页(本页面)中打开，默认值
3、name
定义锚点名称
4、title
超链接的表现形式:
1、下载资源
<a href="xxxx.rar"></a>
2、电子邮件链接
使用前提：用户机器中必须配好一个邮件客户端(outlook,foxmail)
<a href="mailto:[email protected]"></a>
3、返回顶部链接
<a href="#"></a>
4、链接到Javascript
<a href="javascript:">JS功能</a>
锚点：
在页面中标记一个记号，允许超链接跳转到这个记号处。
使用方式：
1、定义锚点
<a name="锚点名称"></a>
2、链接到锚点
<a href="#锚点名称"></a>（本页）
<a href="页面URL#锚点名称"></a>（其他页）
http://www.tmooc.cn
5、表格
1、语法
2、注意
基本的表格里，每行的列数都是统一化的
3、属性
1、table
1、width 宽度，以px为单位
也可以以 % 为单位，占到外层容器宽度的百分之多少
2、height 高度，以px为单位
3、border
边框，默认为 0，以px为单位
4、align
表格的对齐方式
取值:left center right
5、bgcolor
背景颜色
6、cellpadding
设置表格内边距,即单元格边框与内容之间的距离
7、cellspacing
设置表格外边距,即单元格之间的距离
2、tr
1、align
当前行数据在单元格中的水平对齐方式
2、valign
当前行数据在单元格中的垂直对齐方式
取值：top middle bottom
3、bgcolor
当前行的背景颜色
3、td
1、align
2、valign
3、bgcolor
4、width
一旦设置好宽度，那么所有行的当前列的宽度，都将保持一致
5、height
一旦设置好高度，那么当前行所有列的高度，都将保持一致
6、colspan
设置单元格的跨列
7、rowspan
设置单元格跨行
4、表格标题
表格的标题会显示在表格的正上方，中间位置处
语法:<caption>标题内容</caption>
位置：在<table>中
5、th
th与td相似，也要放在 tr 当中
以加粗、居中的方式显示数据，可称为 行标题或列标题
6、表格的复杂应用
1、行分组
表头:<thead></thead>
表主体:<tbody></tbody>
表尾:<tfoot></tfoot>
2、不规则表格
通过 td 的跨行 和 跨列属性来实现
1、跨列
当前单元格横向向右合并指定个数的单元格。
特点：同一行中，改变列数
属性：colspan
2、跨行
当前单元格纵向向下合并指定个数的单元格
特点：同一列中，改变行数
属性：rowspan
3、表格的嵌套
在【单元格】中再嵌套另外一个表格
<table>
<tr>
<td>
<table>
<tr>
</tr>
</table>
</td>
</tr>
</table>
6、列表
1、有序列表
将列表项按照一定的次序排列显示出来并且列表项前面会有有序的标识
语法：
<ol>
<!-- Order List -->
<li>
<!-- List Item -->
</li>
</ol>
属性:
1、type
取值：
1 : 默认，以数字方式显示
a : 小写字母
A : 大写字母
i : 小写罗马数字
I : 大写罗马数字
2、start
列表项标识从哪个值开始
取值 ：数字
2、无序列表
<ul></ul> --> Unorder List
按照一定的格式排列显示，列表项前面是符号标识
<ul>
<li></li>
<li></li>
<li></li>
</ul>
属性：
1、type
disc : 实心圆（默认）
circle ：空心圆
square ：方块
none : 无
使用场合：、
1、从上到下的显示数据
2、导航
3、列表嵌套
在 li 中 嵌套另外一个 列表
4、定义列表
语法:
<dl> -->定义列表
<dt></dt> --> 定义列表标题(术语)
<dd></dd> --> 对标题或术语的解释
<dl>
<dl>
<dt>天安门</dt>
<dd>大，大，大....</dd>
</dl>
使用场合：
图文并茂的时候使用dl、dt、dd比较多