HTML-02

2019-08-29 本文已影响0人白雪公主960

图像和链接

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>&copy;2012 XX官网     京ICP证XXX号</span>
  </footer>
</body>

HTML-02

图像和链接

URL

图像

链接

表格

表格的作用

使用表格

表格的复杂应用

结构标记

结构标记概述

结构标记

猜你喜欢

热点阅读