html——02（url、img、a、table、list）

古城微笑少年丶 2022-07-15 00:17 113阅读 0赞

**1、URL**  
   目录结构的表示方式  
   URL : Uniform Resource Locator , 统一资源定位器 ，俗称，路径  
   作用：用来标识网络中的资源位置  
     http://www.baidu.com  
     images/logo.gif  
   URL的三种形式:  
     1、绝对路径  
     2、相对路径  
     3、根相对路径  
  
   1）绝对路径  
      文件从最高级目录开始的完整的路径  
      绝对路径就是完整的URL  
      1、从本机目录结构查找，从盘符开始  
         D:\\zhaoxu\\HTML5Basic\\Day02\\images\\logo.jpg  
      2、网络资源目录结构开始查找  
         协议、主机、目录路径、文件名称  
http://www.baidu.com/images/logo.jpg  
   2）相对路径  
      相对于当前文件的位置，查找资源文件  
      1、同级目录(直接找)  
         直接输入资源文件名称即可  
logo.png  
      2、子级目录(先进入)  
         先进入到指定文件夹，再查找资源文件  
images/logo.png  
      3、父级目录(先返回)  
         先返回到指定的父级目录出，再查找指定资源文件  
../  :  表示返回上一级  
../../images/logo.png  
   3）根相对路径  
      file:///E:/zhaoxu/ ........   本地访问  
  
      http://www.baidu.com  
      http://localhost/ ...... 从服务器访问数据  
  
      根相对路径：  
      / 开始  
      /images/logo.png  
**2、图像**  
   语法:<img />  
   属性:  
       src : 图像的路径(绝对路径、相对路径、根相对路径)  
       width : 宽度  
       height: 高度  
       alt : 提示，  
           1、鼠标移入时显示的文本  
  2、图像不显示时，显示的文本  
       注意：通常情况下， 不需要手动改变图像的宽和高  
**3、链接**  
   能够完成简单的跳转动作  
   语法：<a></a>  ,anchor 缩写  
   属性：  
        href : 链接URL  
target ： 目标 ，指定打开新网页的方式  
        取值 \_blank : 在新标签页中打开  
     \_self : 在自身(当前)页面中打开(默认值)  
name : 定义锚点名称  
   链接的表现形式:  
   1、页面间跳转  
      <a href="页面路径">文本 或 图像</a>  
   2、页面上的文档(资源)下载  
      <a href="指定资源路径">文本或图像</a>  
      资源路径：非html,htm,txt的资源  
      <a href="xxx.rar">下载</a>  
   3、返回页面顶部的空连接  
      <a href="\#">返回顶部</a>  
      跳转到本页(开发、测试阶段使用)  
   4、电子邮件链接  
      打开本机邮件客户端，向指定地址处发送email邮件  
      <a href="mailto:zhaoxu@tarena.com.cn">联系我们</a>  
   5、链接到Javascript  
      <a href="javascript:js代码段落"></a>  
   锚点：在页面的任意位置处定义一个标识，随时随地的都可以跳转到这个标识上  
   什么时候使用:向快速的跳转到网页的某个位置处，可以选择使用锚点  
   锚点的使用方式：  
   1、定义锚点   
      <a name="anchorName"></a>  
   2、链接到锚点  
      <a href="\#anchorName">文本 或 图像</a>  
      <a href="url\#anchorName"></a>  
     
**4、表格**  
   1、什么是表格  
      有行有列，按照一定的格式(从左到右，从上到下)排列里面的内容  
   2、表格的作用  
      组织结构化的信息，按照一定的格式来进行数据显示  
      单元格?  
   3、创建表格  
      定义表格:<table></table>  
      定义行:<tr></tr>  --> Table Row  
      创建列(单元格):<td></td> --> Table Data  
      注意:原始的表格中，每行的列数全部都是统一的。  
      Question:创建一个表格，有3行2列  
      <table>  
<tr>  
 <td></td>  
 <td></td>  
</tr>  
<tr>  
 <td></td>  
 <td></td>  
</tr>  
<tr>  
 <td></td>  
 <td></td>  
</tr>  
      </table>  
   4、表格属性  
      table:  
        width : 宽度  
height : 高度  
align : 水平对齐方式（left,center,right）  
border : 设置表格的变宽,以px(像素)为单位  
cellpadding : 内边距,(单元格边框与内容之间的距离)  
cellspacing : 外边距,(单元格与单元格之间的距离)  
bgcolor : 表格背景颜色  
      tr :   
        align : 设置该行内容的水平对齐方式(left,center,right)  
valign: 设置该行内容的垂直对齐方式(top,middle,bottom)  
      td :   
        align:  
valign:  
width:  
height:  
colspan : 单元格跨列(向右合并单元格)  
rowspan : 单元格跨行(向下合并单元格)  
   5、表格标题  
      <caption>标题文本</caption>  
      <table>  
<caption></caption>  
<tr>  
 <td></td>  
</tr>  
      </table>  
   6、表格复杂应用  
      1、行分组  
         根据行不同的作用，划分成不同的组  
行分组分为3个部分:  
表头，表主体，表尾  
表头:<thead></thead>  
表主体:<tbody></tbody>  
表尾:<tfoot></tfoot>  
      2、不规则表格  
         1、跨列:colspan  
2、跨行:rowspan  
     
**5、列表**  
   1、有序列表   
      语法:<ol></ol> --> Order List  
           <li></li> --> List Item  列表项  
      属性:  
          ol :   
    type : 列表类型  
        取值:  
   1 : 数字（默认值）  
   a : 小写字母  
   A : 大写字母  
   i : 小写罗马数字  
   I : 大写罗马数字  
    start : 起始编号  
   2、无序列表  
      语法:<ul></ul> --> Unorder List  
      列表项<li></li>  
      属性:  
          ul:  
    type  
     取值:  
       disc : 实心圆(默认)  
circle : 空心圆  
square : 实心矩形  
      什么时候使用列表(有序、无序):  
      1、从上到下，只有一列显示数据  
      2、从左到右，只有一行显示数据(导航)  
   3、自定义列表  
      <dl>  定义列表  
         <dt></dt> 列表内容标题  
<dd></dd> 列表数据  
      </dl>  
      使用场合:做图文混排的布局