html学习笔记(2)

31、Web上支持的图片格式 

      GIF（图形交换格式）：GIF格式文件最多只能保存256中颜色，该格式支持透明色，支持动画效果。

      JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种。

      PNG（网络可移植格式）：该格式支持透明色，不支持订花，颜色从几万种至1670万种。

32、图片标记：<img src="图片路径">

      图片路径：

             a、绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称

             b、相对路径：从当前文档开始的路径

                  如果当前文档和目标文档位置平行，则书写目标文档全称

                  如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称

                  如果当前文档所在文件夹和目标文档位置平行，则书写为 ../目标文档全称

            c、根相对路径：从站点根目录开始的路径，以"/"开头。

      图片标记的属性：

            属性名称        属性             值说明

            src                 URL             图片的路径

            alt                  文本             规定图片的替代文本[图片无法显示时]

            title                文本             鼠标悬停时显示的内容

            width       像素/百分比       设置图片的宽

            height      像素/百分比       设置图片的高

            border           数字             设置图象边框

            align              left                图片靠左，文字靠右

                                  right             图片靠右，文字靠左

                                  top               文字垂直居上靠

                                middle           文字垂直居中

                                bottom           文字垂直居下(默认)

          vspace           像素              定义图像顶部和底部的空白(垂直边距)

          hspace          像素              定义图像左侧和右侧的空白(水平边距)

34、某些html标记，都有默认值

       <h1> ~ <h6>内容是默认加粗

35、网页制作过程

      1）、先分析页面结构，这个页面内容大概分为那些部分

      2）、在适合的html标记中，加入页面的内容（信息）---信息载体---文字、图片

36、传统的网页布局方式-----使用table表格

      其实table表格，原来适用于保存数据的，保存这种有格式清晰的数据。

      布局思想----排版---

          a、从大向小排版

          b、从左向右排版，从上向下----按人视觉

     因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的

37、表格标记

      <table>  </able> --定义表格

      <tr>  </tr> --定义表行

      <td>  </td> --定义表列（单元格）

      <th>  </th> --定义标题栏（文字加粗，并居中）

      表格的属性:<table>

            属性                                      用途

           <table bgcolor="">                 设置表格的背景色

           <table background="">          设置表格的背景图片

           <table border="">                  设置边框宽度，若不设置此属性，则边框宽度默认为0

           <table cellpadding="">          设置表格单元格与其内部内容之间的大小，默认为2(表格边距)

           <table cellspacing="">           设置表格单元格之间空间大小，默认为2(表格边距)

           <table bordercolor="">          设置表格边框的颜色

           <table bordercolorlight="">    设置边框亮部分颜色(当border的值大于等于1时有效)

           <table bordercolordark="">   设置边框暗部分颜色(当border的值大于等于1时有效)

           <table align=""> 设置部分的对齐方式(left=左,center=居中,right=右)

      <table>标签下的边框设置

            属性名称         属性值         说明

            frame              void            不要显示表格的边线

                                   above        只显示表格的上边线

                                   below        只显示表格的下边线

                                   hsides       只显示表格的上下边线

                                   vsides       只显示表格的左右边线

                                   lhs             只显示表格的左边线

                                   rhs            只显示表格的右边线

                               border/box    会显现出表格的所有边线

           rules               rows           只显示横行的格框线

                                  cols            只显示直行的格框线

                                  all               显示所有格框线

                                 groups         表示列组合水平部分

                                  none           不显示任何格框线

      行的属性：<tr>

             属性                       用途

             <tr width="">         设置行的宽度

             <tr height="">        设置行的高度

             <tr bgcolor="">      设置行的背景颜色

             <tr align="">          设置水平对齐方式

             <tr valign="">        设置垂直对齐方式[top、middle、bottom]

      列(单元格)的属性：<td>
              属性                         用途

            <td width="">            设置单元格的宽度

            <td height="">          设置单元格的高度

            <td bgcolor="">        设置单元格的背景颜色

            <td background=""> 设置单元格的背景图片

            <td align="">            设置单元格的水平对齐方式

      结构化格式：

           <table>

                <thead>  </thead>-------表头区

                <tbody>  </tbody>------表体区

                .............

                <tfoot>  </tfoot>--------表尾区

          </table>

      直列化格式：

          <colgoup>  </colgroup>（<col>功能完全和<colgroup>一样）

               align  ：left          靠左

                            center     靠中

                            right        靠右

              valign：top           靠上

                           middle     靠中

                           bottom    靠下

              span： 数字        直列数

             bgcolor：颜色      背景颜色

      表格的标题

             <table>

                 <caption>  </caption>

             </table>

             align：top         标题在表格上方

                        bottom   标题在表格下方

38、<center>  </center>中所有内容都居中。

39、合并单元格思想，当将多个内容合并时，就会出现多余的东西，合并单元格就是删除多余的td

      例如：有三列 3个td，当合并时，就需要删除2个

      推出一个合并删除td的公式：删除的个数=合并的个数-1

40、立体表格效果，其实就是将表格的亮边框颜色与暗边框颜色，进行对比。表格自身有边框，单元格自身也有边框。

41、细线表格效果公式：

      a、将表格自身border=0,

      b、给表格设置背景颜色=细线的颜色

      c、给表格设置单元格之间距离 = 细线粗细

42、当<td> </td>中间没有内容时，默认不显示边框，如果想看见边框，在之间加&nbsp。

43、可以通过标签嵌套实现一些复杂布局。

44、超级链接：一个网站是由多个网页组成的，网页之间都是通过链接实现互联的。

      链接的概念：实现由当前文档目标文档的一种跳转，链接重要的使用原则，必须是回路，有去有回---优化，相关链接。

      链接语法：

             <a href=链接目标 title="注释" target="打开链接窗口的形式">显示内容</a>

                    _blank在新窗口中打开

                    _self在自身窗口中打开（默认值）

                    _parent在上一级窗口中打开，框架会经常使用

                    _top在浏览器的整个窗口中打开，忽略任何框架

      链接分类：

            a、内部链接：当前文档与目标文档在同一站点内：<a href=目标文档位置及全程>

            b、外部链接：当前文档与目标文档不在同一站内：<a href=URL（网址）>

            c、E-mail链接：允许访问者向指定的地址发送邮件：<a href=mailto:电子邮件地址>    

      链接（锚点）：

            到同一网页或其他文档中的指定位置。

            创建锚点：<a name="#秒点名称">显示内容</a> 

            链接锚点：<a href="#秒点名称">显示内容</a>

      空链接：就是没有目标端点的链接。格式创建锚点：<a href="#">显示内容</a>

           例如：

               设为首页：<a href="#" onClick="this.style.behavior=‘url(#default#homepage)‘;this.sethomepage(‘http://www.sohu.com‘)">

                                 设为首页</a>

               添加收藏<a href="#" onClick="javascript:window.external.addfavorite(‘http://www.sohu.com‘,‘搜狐‘)">加入收藏夹</a>

      脚本链接：是一种特殊的链接，当单击设置脚本链接的文本或图像时，可以运行相应的JavaScript语句。

            常用到的脚本链接：

            例如：<a href="javascript:window.open(‘http://www.163.com‘)">新浪

                      关闭窗口：输入javascript:window.close()

                      打开窗口：输入javascript:window.open(‘文件名‘)
45、布局时，可以先输入一些数字，简单文字说明占位.

46、html表单标记

       表单的作用是从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表

单元素输入信息，然后单击某个按钮提交这些信息。客户端与服务器端进行信息交流的途径。

47、form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等。

表单元素必须入在form标记内才有作用。

      <form action=url（传送目标，处理表单信息的服务器端应用程序） method=处理表单数据的方法（POST/GET）如果不写

method则默认提交方式为get， name=表单名称>表单元素</form>

      POST方法可以传递大量信息

      GET方法将值附加到请求该页的URL中。适合传递少量信息（默认方式）

48、单行文本框(如下图：)

      <input name="文本框名称“ type="text" value="初始值" size="显示字符数" maxlength="最多容纳字符数"

      readonly="readonly"（设置为只读） disabled="disabled"（设置为不可操作）>

49、密码框(如下图：)

      <input name="文本框名称" type="password" value="初始值" size="显示字符数">

50、所有的表单元素都必须要放置在表单标签中<form></form>

       所有的表单元素，以<input>标签为例，必须包含两个属性

      有些表单的属性是相似的。