HTML学习

5、图像标签

<img src="图片的路径"/>

示例：

   <img src="b1.jpg" width="300" height="400" alt="这是图片标题">

 

-- src：图片的路径

--width:图片的宽度

--height:图片的高度

--alt:图片上显示的文字，把鼠标放在图片上等一会（有些浏览器不显示）

6.路径的介绍

（1）绝对路径

图片在内存中的路径   例如： D:\111111_JAVA_Web\a.jpg

(2)相对路径：一个文件相对于另一个文件的位置

3种情况：

<1>html文件和图片文件在同一个路径下，可以直接写文件名

<2>图片在html的下层目录：

D:\111111_JAVA_Web    \图片\a.jpg

D:\111111_JAVA_Web    4.html

那么在html的代码中的路径写上    图片\a.jpg

<3>图片在html的上层目录

D:\                                     a.jpg

D:\111111_JAVA_Web\     4.html

在html代码中用     ../a.jpg 表示图片路径

6.超链接标签

（1）链接资源

-<a href = "链接到资源的路径"> 显示在页面上的内容 </a>

**href: 超链接的资源地址

**target:设置打开的方式，默认是在当前页打开

    -- _blank : 在一个新窗口打开

      --_self : 在当前页打开

例如：<a href = "hello.html" target="_self"> 这是一个超链接 </a>

当超链接不予要到任何地址 在href里面加一个 # 号。

（2）定位资源

**如果想要定位资源：定义一个位置

<a name="top"> 顶部</a>

 

**回到这个位置

<a href="top">回到顶部</a>

**引入一个标签 pre: 原样输出

9.表格标签

（1）可以对数据进行格式化，使数据根据更加清晰

（2）<table></table>;表示表格的范围

         border: 表格线

        boedercolor:表格线的颜色

        cellspacing: 单元格之间的距离

         width: 表格的宽度

         height:表格的高度

（3）在table里面<tr></tr>（表示单元格）

       --设置对齐方式 align:   left   center   right

      ---使用 th 也可以表示单元格

 -  --- 表示可以实现居中和加粗

例子：

<table border = "i"  bordercolor = "blue"  cellspacing = "0" width= "200" height = "150">

 

(4) 画图分析表格的写法

-- 首先定义一个表格的范围使用 table

   --定义一行使用 tr

  -- 定义一个单元格使用 td

** 操作技巧

 - 首先数有多少行， 数每行里面有多少个单元格

表格的标题

  <caption></caption>

(5)合并单元格

---rowspan  跨行

--colspan   跨列

例如： <td clospan = "3">人员信息<td>

10.表单标签

（1）<form></form>: 定义一个表单的范围

输入项：可以输入内容或者选择内容的部分

大部分的输入项 使用 <input type = "输入项的类型"/>

*** 普通输入项：<unput type = "text"/>

***密码输入项：<input type = "password"/>

***单选输入项：<input type  = "radio"/>

   -- 在里边要有属性 name

   -- name的属性必须要相同

***复选输入项：<input type = "checkbox"/>

-- 在里边要有属性 name

   -- name的属性必须要相同

*** 文件输入项（在上传的时候用到）

  -<input type = "file"/>

*** 下拉输入项（不是input标签里边的）

<select  name  ="birth">

     <option value = "1991">1991</option>

    <option value = "1992">1992</option>

    <option value = "1992">1992</option>

</select>

*** 文本域

<textarea cols = "10" row = "10"></textarea>

***隐藏项（不会显示在页面上，但是存在于html代码里边）

<input type = "hidden" />

*** 提交按钮

<input type = "submit" value = “注册”/>

14.框架标签的使用

*<frameset>

-rows；按照行进行划分

          ** <frameset rows = "80, *">

-clos:按照列进行划分

          ** <frameset cols = "80,*">

*<frame>

   --具体显示的页面

                  -<frame name ="这一项的名字"  src = "要跳转的页面地址">

*** 使用框架标签的时候，不能写在body里边，使用了框架标签，需要把body去掉

<frameset rows="80,*">              // 把页面划分成上下两部分

       <frame  name ="top" src="a.html">    //  上边页面

       <frameset  cols="160,*">          //把下边部分划分成上下两部分

                 <frame name="lower_left" src ="b.html">       //左边的页面

                  <frame name="lower_right" src="c.html">        //右边的页面

        </frameset>

</frameset>

如果要在左边的页面超链接，想让内容显示在右边的页面中

     -设置超链接里面属性 target,值设置成上面代码的name属性值

     -<a href = "01-hello.html" target ="right"> 超链接1</a>