前端-HTML图片标签的路径、超链接标签、属性 table表格的基本结构、属性

• 图片标签的路径

路径分类：绝对路径、相对路径

1. 绝对路径

           绝对路径是指文件在硬盘上真正存在的路径。例如“bg jpg"这个图片是存放在硬盘的"ENbook\网页布局代码\第2章”目录下，那么“bg.jpg"这个图片的绝对路径就是"ENbook\网页布\代码\第2章\bg. jpg”。
           注意：绝对路径在实际的开发过程中很少去使用，如果使用“ENbook网页布\代码\第2章bg.jpg-来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用"\"或"/"字符作为目录的分隔字符。     

2. 相对路径

   相对路径，就是相对于自己的目标文件位置。
   当 当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名;
   < img src= "pic4.gif" />

   例如:将图片(123.jpg)导入网页

   同级目录写法:

   1.<img src="123.jpg">

   2.<img src="./123.jpg">      ("./" :在当前路径下  )

   3.<img src="D:\code\123.jpg">     (绝对路径+图片)

   不同级目录写法：

    <!-- " ../ "为返回上一级 -->

           <img src="../code.gif">

           <img src="../baimubai/1.png">

   <!--在同级子文件中使用以下写法-->

           <img src="baimubai/1.png">

           <img src="./baimubai/1.png">

   

• 图片标签的属性

  <img  src="图片路径"  title="鼠标悬停上去之后的提示信息"  alt="图片不显示之后（加载失败）的提示信息" width="200px" height="200px"/>

        注：只设置  width  或  height  时另一个参数会随变化

• 超链接标签

  能够实现不同页面的跳转

  <a  href="路径"  title="鼠标悬停上去之后的提示信息"  target="规定在何处打开文档">内容</a>

  Target属性： 规定在何处打开文档。

  A. target="_self"默认值

  B.target="_blank"新窗口打开

  a{ text-decoration: none; color:black; }（静态时的基本样式）

  text-decoration: none——无修饰

  text-decoration: underline——带下划线

  a:hover{color: rgb(122, 10, 10);}（鼠标悬停时的样式）

• table表格的基本结构

  

• table表格的属性

table表格的属性

1. 宽度 width
2. 高度 height
3. 边框 border
4. 边框颜色 bordercolor
5. 背景颜色 bgcolor
6. 水平对齐 align=“left或right或center”
7. cellspacing=“单元格与单元格之间的间距”
8. cellpadding=“单元格与内容之间的空隙”

table表格的相关属性

行tr 属性

1. 高度 height
2. 背景颜色 bgcolor
3. 水平对齐 align=“left或right或center”
4. 文字垂直对齐 valign=“top或middle或bottom”

单元格td属性

1. 高度 height
2. 宽度 width
3. 背景颜色 bgcolor
4. 水平对齐 align=“left或right或center”
5. 文字垂直对齐 valign=“top或middle或bottom”

表格合并

1. Colspan=“所要合并的单元格的列数”必须给td。
2. Rowspan=“所要合并的单元格的行数”必须给td。

表单标签

<form method=“get或者post” action=“向何处发送表单数据”>

        <input />

                A. 属性  type  定义输入框的类型

                        a）文本框  type=“text”   密码框  type=“password”

                        b）提交框  type=“submit”和<button>提交按钮</button>一样

                        c）按钮框  type=“button”单纯的按钮

                        d）重置框  type=“reset”清空的效果

                B. 属性  placeholder  描述输入字段预期值的简短的提示信息。兼容到IE8以上

                C. 属性  name  必须设置，否则在提交表单的时，用户在其中输入的数据不会被发送给服务器

                D. 属性  value=“显示的内容信息”

</form>