图像和链接
URL
-
目录结构
目录结构指的是web站点中文件夹的名称
web站点的主目录称为根目录
位于根目录下的其他文件夹称为子目录
每个子目录下都会包含有具体功能的下一级子目录 -
URL
URL (Uniform Resource Locator)
统一资源定位器，俗称路径，用来标识网络中的任何资源:文本，图片，音视频文件，段落，或者其他超文本 -
绝对路径
1.网络资源
http://www.w3.org/TR/CSS2/syndata.html
http:协议名（用://分隔）
www.w3.org：主机名
/TR/CSS2/:目录路径
syndata.html:要链接的文件名
文件从最高级目录下开始的完整的路径
2.本机资源
文件从最高级目录下开始查找
file:///E:xiaoni/ni.jpg
- 相对路径
指文件的位置相对于当前文件的位置
例如在同一个目录下时，直接用<img src="tupian01.jpg"/>
在下一级目录时，先进入再引用<img src="image/tupian01.jpg"/>
在上一级目录时，先返回再引用<img src="../tupian01.jpg"/>
根相对路径：永远都是从WEB站点的根目录开始查找
用/作为开始
/img/index/jd.jpg
图像
-
图像格式:jpg、gif、png
-
图像元素
<img>,可以将图像添加到页面
必须属性：src(要显示的图像路径，url)
常用属性：width height (可以取数值，以px作为单位，px可以省略不写;在宽高中，如果有一个没写，则另外一个会等比缩放)
<img width="100" src="image/rose.jpg"/>
链接
- 链接元素
<a>
链接：又称为超链接，用户点击时能够发生页面的跳转等其他操作
<a href="http://www.baidu.com">百度链接</a>
<a href="teacher/teacher.asp" target="_blank">去其他的页面</a>
href属性：链接URL(只有设置了href，元素才可以被点击)
target属性：目标，即打开新网页的方式，可取值为_blank(在新标签页中打开),_self(在自身标签页中打开)等
name属性：锚点名称
- 链接的表现形式
目标文档为下载资源<a href="day09.zip">下载</a>
电子邮件链接<a href="mailto:xiaoyanger960@qq.com">联系我们</a>
(前提是电脑必须安装了邮件客户端并绑定账号)
返回页面顶部的空链接<a href="#">...</a>
链接到Javascript<a href="javascript:...">JS功能</a>
- 锚点
描点是文档中某行的一个记号,链接到文档中的某个部位
使用方式:
1.定义锚点 <a name="anchorname1">锚点1</a>
2.链接到锚点：在锚点名前加上# <a href="#anchorname1">...</a>
(如果文本和图像与锚点存在于同一个页面)
<a href="URL#anchorname1">...</a>
表格
表格的作用
1.显示表格数据
2.设置页面布局
使用表格
- 创建表格
定义表格<table></table>
创建表行：<tr></tr>
创建单元格<td></td>
例如：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
- 表格的常用属性
<table>元素
width 表格宽度
height 表格高度
align 表格对齐方式 (left right center)
border 表格边框宽度
cellspacing 设置外边距单元格之间距离
cellpadding 设置内边距，单元格与内容之间的距离
bgcolor 设置表格背景颜色
<tr>元素
align 设置水平对齐方式（left right center）
valign 设置垂直对齐方式（top bottom middle）
bgcolor 设置当前行的背景颜色
<td>元素
align 设置水平对齐方式
valign 设置垂直对齐方式
width 设置宽度
height 设置高度
colspan 设置单元格跨列
rowspan 设置单元格跨行
- 表格的子元素
1.表格标题<caption>
一般标题将在表格上方居中显示,<caption>标签必须紧随在<table>标签后面，且一个表格只能有一个标题
<table border="1">
<caption>this is my table</caption>
<tr>
<td></td>
</tr>
</table>
2.行标题/列标题
显示效果：水平居中，并加粗显示文本
<th></th>--><td></td>
表格的复杂应用
- 行分组
表格可以分为三个部分：表头 表主体 表尾
表头的行分组：<thead></thead>
表主体的行分组：<tbody></tbody>
表尾的行分组：<tfoot></tfoot>
包含一个或者多个<tr>元素
<table border="1" width="300" >
<thead align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody align="left">
<tr>
<td>张三</td>
<td>14</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
</tr>
</tbody>
</table>
注意：如果不设置行分组，那么所有的行被默认当成是tbody的内容。
-
不规则表格
设置单元格<td>的跨行或者跨列的属性
跨行：rowspan,值为正整数，表示此单元格水平延伸的单元格数
跨列：colspan,值为正整数，表示此单元格垂直延伸的单元格数 -
表格的嵌套
在单元格中再放置另一张表格
就是在<td>元素再包含<table>元素
结构标记
结构标记概述
- 结构标记作用
如果都是用div来进行布局，就会有大量的div元素，元素之间互相嵌套，很乱，难以处理和维护
所以html5提供了结构标记 方便各个部分的划分，也更容易看清结构，代码易于解读
<body>
<header>页头</header>
<section>主体内容</section>
<footer>页脚</footer>
</body>
结构标记
- <header>元素
用于定义文档的页眉
通常是一些介绍信息，导航信息，站点标题或者logo图片
可以在页面上出现多次，可以作为任何部分的头部定义
<body>
<header>
<img src="image/flower.jpg">
<h1>welcome to my homepage </h1>
</header>
</body>
- <nav>元素
<nav>元素用来定义页面的导航链接部分(用于包含表示链接的其他元素）
<body>
<header>flowers</header>
<nav>
<ul>
<li><a href="">rose</a></li>
<li><a href="">daisy</a></li>
<li><a href="">daffodil</a></li>
</ul>
</nav>
</body>
- <section>元素
表示文档中的一个具体的组成成分
1.常用于为页面上的内容分块，比如定义章节，页脚，或者文档中的其他部分
2.可以使用<header>元素为内容添加标题
<body>
<header>rose</header>
<section>
<img src="image/rose.jpg alt="rose"/>
With sunshine,water,and careful tending,roses will bloom several times in aa saeson.
</section>
</body>
- <article>元素
常用于定义独立于文档的其他部分的内容（比如论坛的一个帖子，一篇报纸文章，某个博客条目或者用户评论）
<body>
<header>rose</header>
<section>
With sunshine,water,and careful tending.roses will bloom several in a season .
</section>
<article>
<h1>internet explorer 9</h1>
<p>IE9于2001年3月14日发布</p>
</article>
</body>
- <footer>元素
常用于定义某区域的脚注信息（常用于定义文档的页脚，包含友情链接，版权信息和作者信息等等）
（一个页面中可以包含多个<footer>元素）
<body>
<footer>
<ul>
<li><a href="'>关于我们</a></li>
<li><a href="'>站点地图</a></li>
<li><a href="'>帮助</a></li>
</ul>
</footer>
</body>
- <aside>元素
用于定义页面的一些额外组成部分（如广告栏，侧边栏和相关引用信息等等）
<body>
<aside>
<p>最新留言</p>
<section>广告section>
</aside>
<footer>
<ul>
<li><a href="'>关于我们</a></li>
<li><a href="'>站点地图</a></li>
<li><a href="'>帮助</a></li>
</ul>
</footer>
<span>©2012 XX官网 京ICP证XXX号</span>
</footer>
</body>
网友评论