前端学习-HTML-01

1、图像和链接

   1、URL

      1、目录：文件夹  所谓的目录就是 web
站点中的文件夹名称

      2、URL

         1、什么是URL   Uniform Resource Locator  统一    资源     定位器

    俗称：路径，  从一个位置到目标文件位置所经过的路线描述

    URL的表现形式：1、绝对路径    2、相对路径    3、根相对路径

    以上三种形式的本质区别：查找资源文件的起始位置不同

 2、绝对路径   从 资源文件 所在的最高级目录下开始查找

     1、获取网络资源 1、协议名称  2、主机名称(域名、IP地址)
 3、各级目录
路径  4、文件名称

       http://www.baidu.com/img/270_36cdbb596e619fcc8548d28d9506ad3d.gif

     2、获取本机资源

    从 文件所在的盘符
开始查找C:/Users/Public/Pictures/Sample Pictures/Koala-1.jpg    

    弊端：不能更换计算机,不适合程序的移植

    3、相对路径

    是通过当前文件 与资源文件
之间的位置关系进行查找的

    从当前文件位置出发
找到 资源文件所在位置所经过的路径
就是相对路径

    同级别 ：直接找     子目录：先进入     父目录：先返回

  4、根相对路径(了解)     永远都是从 WEB站点的
根目录处开始查找

    语法：/           /images/login.jpg

            注意：根相对路径，只有将web项目部署到服务器时才可用

      注意：路径要严格区分大小写。尤其是在服务器上。

   2、图像

      1、图像格式 jpeg：*.jpg  *.jpeg (有损压缩，压缩较大，文件小)

  gif：*.gif (动画)  png：*.png
(透明)

      2、图像元素         将图像显示在页面中  标签：<img>或
<img/>

 属性：src : 要显示图像的URL(绝对、相对、根相对)

  width : 宽度  height：高度    数字作为值，像素(px)作为单位

       注意：width
或 height  如果只给定一个属性的话，那么图片会按照给定的值进行等比缩放       title :鼠标移入到图片时或者图片不显示时，所提示的文字

       alt : 作用与title一样，老版本浏览器支持，现在主流浏览器支持性很差。

      3、注意问题

        1、align   尽量加在 块级元素中    行内元素没有作用

2、标签嵌套问题

   1、p标记中只能嵌套 文本、图像、行内元素，绝对不能嵌套块级元素，否则的话块级元素会将
p 元素拆开    2、hn标题，一般只嵌套 文本 或 行内元素  3、div允许嵌套任何元素(除html
、body、head之外)
   4、行内元素不许嵌套块级元素

   3、链接

      1、允许用户 进行点击 的操作 ， 可以通过链接来表示

         典型代表：用户点击
文字 ， 跳转到另外一个页面

      2、标签    标签：<a>内容</a>

  属性：href : 链接URL

注意：添加了 href 属性后，链接才可以被点击，否则，没有效果

       target : 目标  打开新页面的方式（在当前标签页打开还是 在新标签页中打开）

         取值：_self :
在当前标签页中打开(默认值)    _blank :新标签页中打开

      3、链接的表现形式

         1、目标文档为下载资源  <a href="01.rar">下载</a>  <a href="01.zip">下载</a>

    以上两种格式的文件出现在 href
中，不是跳转，而是 下载

 2、目标 为发送电子邮件   <a href="mailto:zhaoxu@tedu.cn">联系我们</a>

 3、返回页面顶部的空链接   <a href="#">返回顶部</a>

 4、链接到Javascript    <a href="javascript:js代码"></a>

      4、锚点

         在文档的某个位置处，做一个记号.随时随地可以跳转到该记号的位置处。

 锚点的使用方式：

 1、定义锚点  1、<a name="锚点名称"></a>
   2、<标签id="值"></标签>

 2、链接到锚点   <a href="#锚点名称"></a>  --跳转到本页的锚点处

    <a href="页面url#锚点名称"></a> --跳转到其他页面的指定锚点处

    http://www.tmooc.cn

2、表格

   1、什么是表格?  用来组织结构化信息的一个"容器"

      表格是由 一系列的”单元格“按照从左到右从上到下的顺序排列组成的。表格的最终使用目的是将数据保存在单元格中

      html中的表格 主要由三大部分组成  1、表格: <table></table>  2、在表格的内部，由若干行
组成的<tr></tr>    3、在行的内部，由 单元格(列)组成的<td></td>

      注意：默认情况下，所有行的列数都是统一化的。即每行的列数都一样。

      练习：在html中，创建一个5行4列的表格

      4、表格标题  出现的位置在表格之上，水平居中的内容  <caption></caption>

 注意：1、caption的位置 位于 所有tr之上，紧跟着table之下2、一个table最多只能有一个caption

   2、属性

      1、table属性   width :宽度  height :
高度

 align : 表格在其容器内的水平对齐方式,取值：left(默认),center,right

 border : 边框,边框宽度 以px为单位的数值

 bgcolor : 表格的背景颜色

 cellpadding ： 内边距,即 单元格与内容之间的距离

 cellspacing :  外边距,即 单元格与单元格之间的距离

      2、tr属性
align :当前行数据的水平对齐方式

 valign: 当期行数据的垂直对齐方式(top,middle,bottom)

      3、td属性width height align valign bgcolor colspan :设置单元格跨列
rowspan :设置单元格跨行

   3、th标记   th与
td是同级别的

      th ：标题，当前列的内容，以标题的样式呈现出来的（加粗显示，水平居中）

   4、表格的复杂应用

      1、行分组      table可以将
tr划分为
3大部分：表头、表主体、表尾

 表头 ：<thead></thead>表主体：<tbody></tbody>表尾：<tfoot></tfoot>

      2、不规则的表格      改变传统表格的模式，每行的列数可以不同

 实现方式：设置 td 的跨行 和 跨列 属性  跨行 ：rowspan  跨列 ：colspan

 跨列：从某个单元格位置处
横向向右 ，合并几个单元格(包含自己)

 注意：被合并掉的单元格，一定要从代码中删除出去，否则当前行会多出几个单元格

 跨行：从某个单元格位置处
纵向向下 ， 合并几个单元格(包含自己)

 注意：被合并掉的单元格，一定要从代码中删除出去，否则当前行会多出几个单元格

      3、表格嵌套   在单元格中，允许放置另一个表格 在 <td>中再包含一个
<table>

3、列表

   1、什么是列表?列表也是按照一定的格式来显示数据的

 格式：默认情况，从上到下的显示数据

   2、什么样的数据 适合 放在列表中

      会将 具有相似特征或
明显具备先后顺序的内容放在列表中

   3、列表的组成   列表类型：有序列表 和  无序列表    列表项：列表中所显示的内容

   4、使用列表

      1、有序列表  可以将列表项的"顺序"罗列出来的列表

 标记:<ol></ol>  --> Order List  列表项：<li></li>

 <ol><li>数据1</li><li>数据2</li><li>数据3</li>
</ol>

 属性:

   1、type  列表项前面的标识类型 是什么

      取值：

         1 ：数字 （默认值）

 a ：小写字母  A ：大写字母

 i ：小写罗马数字 i ii iii iv v vi ...  I：大写罗马数字

           2、start     规定 在type
值中的第几个位置处开始

       2、无序列表         通过统一的固定标识，显示出列表项

  标签：<ul></ul>  --> Unorder List   列表项：<li></li>   --> List Item   

  属性：1、type列表项标识类型

取值： disc : 实心圆(默认值)  circle :空心圆
 square :实心矩形

       3、使用场合 1、数据 按照 从上到下的顺序来排列的时候

   2、数据 按照 从左到右的顺序来排列的时候 -网页导航

   5、定义列表   给出一类事物定义的情形时使用

      张无忌      英俊潇洒，玉树临风...有好几个对象
....

      语法：

        <dl> <dt>描述的术语或名词</dt> <dd>对上述名词或术语的解释</dd></dl>

      使用场合：图文混排

      <dl><dt> <img src="xxx.jpg" ></dt><dd> Price : 125.55  xxxxx</dd> </dl>