html操作

1、HTML文本元素

<font></font>文本样式

 属性：

文本的颜色 color  取值：颜色代码 ，英文

文本的大小  size  取值  数值 1—7  以号为单位

文本的字体：face  取值字体，你的字体库要有 没有的就会使用默认的宋体

例如：<font color="red" size="12" face="隶属"> 修饰的内容</font>

<b></b>加粗

<strong></strong>加粗--- 强调

<i></i>倾斜

<em></em>倾斜强调

<u></u>加下划线

<ins></ins>插入文本---强调

<del></del>删除线

上标

下标

  <small></small> 原来文字的85%

  <big></big> 文本变大

例如：<font color="blue" size="30" face="隶属"><b><u>这是修饰的内容</u></b></font>

2、html 段落标记

   <p></p>  分段

  <h1></h1>  标题1  --最大

  <h2></h2>  标题2

   …

  <h6></h6>  标题6  最小

  <hr /> 单标签 ----水平线

水平线的属性

1)        水平线的颜色 color =”数值”

2)        水平线的粗细 size=”数值”

3)        水平线的宽度 width=”数值”

相对数值 %  ----相对窗口，占整个窗口的百分之多少

, 固定值 px（像素），单位不写

           4） 水平线的对齐方式align=left/center /right  默认是居中

块标签： 输入完标签之后，在浏览器下观看自己独占一行 ,

        哪些标签属于块标签  段落元素 <div>   <h1>…<h6>  <p> <pre>

行内标签：输入完标签之后，在浏览器下观看不是独占一行，一行可以有多个标签元素

       行内标签有哪些：   文本元素都是<em> <i> <b> <strong> <span>

 注意：通常块标签里面包含行内标签

3、html特殊字符

&lt;  <

&gt;  >

&times;   x

&divide; ÷

&nbsp; 空格

&yen;￥

&laquo;《             

&raquo;》    

4、列表

无序列表：

若干个相似内容进行排列 ，没有先后顺序

语法:

 <ul>

  <li>内容</li>

  <li>内容</li>

</ul>

ul或li的属性

 type取值 square 方形  circle 空心圆  disc 默认

有序列表

若干个相似内容进行排列，有先后顺序

语法：

 <ol>

  <li>内容</li>

  <li>内容</li>

   …..

 </ol>

ol的属性

type 取值 (i I 1 a A)

 start :从第几位开始

自定义列表

若干个相似内容进行排列，内容有标题和对标题的描述

 语法：

<dl>

  <dt>标题</dt>

  <dd>描述</dd>

 </dl>

5、图片 (单标签–行内标签)

jpg  png  gif 

   src=”图片的路径”

   图片的宽度：width=”数值”

   图片的高度 height=”数值”;

   图片的解释说明  alt=”说明”

   图片的边框 border=”数值”

   图片和左右文本之间的距离 hspace=”数值”

   图片和上下文本之间的距离 vspace=”数值” （了解）后期用css来控制

例如：

<img src="./01.jpg" width="50" height="50" vspace="20" />

6、表格

table  表格   tr 行  td单元格

语法：

 <table>

<tr>

   <td>内容</td>

   <td>内容</td>

   <td>内容</td>

</tr>

 </table>

table 的属性：

   表格的边框 border=”数值”

   表格的宽度 width=”数值”

   表格的高度 height=”数值” ----但是不推荐使用，不允许使用

   表格的水平对齐方法  align=”left /center/right”

   单元格和单元格之间的距离  例如cellspacing=”0”

   内容和单元格之间的距 例如：cellpadding=”0”

   合并单元格边框线 rules=”all”  （不推荐使用）

  表格边框的颜色bordercolor=” 颜色值”

   表格的背景色  bgcolor=”颜色”

  表格背景图片  background=”图片的路径”----修饰作用---- 背景图片的上方可以放内容

注意：背景图片的优先级高于背景颜色

tr的行属性：

Ÿ   行的高度height=”数值”

Ÿ   行的背景颜色bgcolor=”颜色值”

Ÿ   行的背景图片background=”背景图片地址”

td 的属性：

Ÿ   单元格的宽度 width=”数值”

Ÿ   单元格高度 height=”数值”  (在单元格设置高度就不能在行里设置高度)

Ÿ   单元格背景颜色bgcolor=”颜色值”

Ÿ   单元格的背景图片background=”背景图片的地址”

Ÿ   左右合并单元格  colspan=”数值”

Ÿ   上下合并的单元格rowspan=”数值”

   标题行 <th></th> 

7、超链接

语法 <a>链接的内容</a>

链接的属性

     href 目标文件的路径 , 绝对路径   相对路径

     target 目标文件的显示显示窗口

Ÿ   _blank 在新的窗口中打开目标文件

Ÿ   _self  在当前窗口打开目标文件 默认的打开方式（替换原来的窗口）

绝对路径网络路径

<a href= http://www.baidu.com>内容</a> 

 <a href=”admin/login.html”>内容</a>  

目标文件在当前文件的下两级目标  .   xx/xx/目标文件名

 往上找  ----目标文件在当前文件的上一级目录    ../ 目标文件名

                  目标文件在当前文件的上两级目录    ../../ 目标文件名

空链接

 在一个页面做链接----链接之后还是在当前页面   

<a href=”#”>内容</a>

邮件链接

     语法:<a href=mailto:地址>内容</a>

下载链接

哪些内容必须下载 .zip  .rar  安装的一些软件  视频

  语法：<a href="xx.zip"> </a>

javascrip 链接

 <a href=”javascript:window.close()”>内容</a>

<a href=”javascript:window.confirm(‘你确定要修改吗???’)”>修改</a>

name：定义锚点的名称

   在同一个页面区域做链接

定义锚点 （定义一个记号）

  <a name=”锚点名称”></a>

给做链接用，所以<a></a>之间不加内容

            锚点名称自定义，开头是字母或下划线，后跟字母下划线或数字

跳转到锚点

  <a href=”#锚点名称”>内容</a>

8、表单

  表单前台的验证，使用javascript,进行表单的验证，通过了，再进行服务器端的验证

从表单的工作原理看，表单分前台的制作，和对表单进行处理  php

 表单语法

 <form action=”XX.php”>

   控件

</form>

表单的属性

   action ：表单的处理程序  action=”XX.php” php 文件可能做 删除，修改，添加，查询等

如果你不写action ,表单的功能代码就是在当前文档

  method 表单数据的提交方法，get 和post

get（通常不用）

  通过地址栏传递数据，安全性差，不能提交敏感的数据 (密码）

  传递的数据，受地址栏的长度限制，传送的数据小

  不能上传附件

      post (常用的方法)

         不是通过地址栏传递数据，安全性相对较高

         可以传递海量的数据

         可以上传附件

 name 表单的识别名称

单行输入框

语法:<input type=”text” />

属性

  size :输入框的宽度，显示的字符数（字符为单位  值越大，长度越大）

  maxlength=”数值” 最多允许输入的字符数，如果超过范围不允许输入

  name 控件的名称自定义但是起的有意义，把输入框中的数据提交给处理程序

   value 输入框中的数据如果你设置，在输入框中显示内容

  readonly:只读属性，只能选中不能修改

  disabled:禁止属性，既不能选中又不能修改

密码 ： 单标签

语法:<input type=”password” />

 

属性：

   size 输入框的宽度

   maxlength 最多允许输入的字符数，超出范围不能输入

  name 控件的名称，把密码框中的数据提交到处理程序

  value 密码框中默认显示信息

  readonly 只读属性

   disabled 禁止属性，不能选中，不能修改

单选按钮

  仅能选中其中一项

  语法

  <input type=”radio”>

  属性：

l  name 控件的名称

l  value 必须给初始值

l  checked 默认被选中

 注意：单选按钮的name值要相同，代表单选按钮组

      必须给value的值，代表每一项的值

<input type="radio" name="mary" value="1">已婚

<input type="radio" name="mary" value="0">未婚

注意：不同的控件----name中的值不能相同

复选框 （多选）

 语法格式： <input type=”checkbox” 属性=”属性值” />

   常用属性;

Ÿ   Name:控件名称

Ÿ   Value :复选框的值，value中的数据发送到服务器

Ÿ   Checked 默认被选中

例如：

  <input type="checkbox" name="red" value="0"> 红色

  <input type="checkbox" name="red" value="1"> 绿色

  <input type="checkbox" name="red" value="2"> 蓝色

注意：复选框也是一组选项，name的值必须相同，在php中，使用数组来获取多个相同name中的值

 复选框可以选中其中一个，也可以选中多个

下拉列表

  格式 <select name=”控件名称” >

          <option value=”默认值” >内容</option>

          <option value=”默认值”>内容</option>

          <option value=”默认值” >内容</option>

       </select>

 <select > 属性  只有一个name属性

 <option>有两个属性

 value 每一项的默认值 ，此值为表单传递真实值

         Selected 默认被选中

文本域

语法格式<textarea name=”控件名称” cols=”宽度” rows=”高度” > </textarea>

  Textarea常用的属性

Ÿ   Name文本域的名称 

Ÿ   Cols  宽度，一行可以输入多少个字符

Ÿ   Rows 高度，可以显示多少行文本

   例如: <textarea name=”content”cols=”45” rows=”8” ></textarea> 

隐藏域

隐藏域就是看不见的一个框，传递一下值，这些值又不想让别人看见

格式<input  type=”hidden” name=”id” value=”163” />

上传文本域

  语法格式  <input  type=”file” 属性=”属性值” />

     常用属性：

       Name文本域的名称

       value 文本域的值，这个值是上传的文件名，value属性是只读属性，不能用户自己指定路径，是通过单击按钮来上传文件，为了安全，value是只读的

按钮

      1、  提交按钮：<inputtype=”submit” value=”按钮上的文字” />

      例如:<input type=”submit”value=”提交” />

     2、 重置按钮:<input type=”reset” value=”按钮上的文字” />

     例如:<input type=”reset”value=”重置” />

     注意：重置就是将表单内容回复默认的初始状态，而不是删除里面的值

    3、   普通按钮:<inputtype=”button” value=”按钮上的文字” />

Ÿ   普通按钮本身没有任何功能，必须配合程序语言实现功能 ，一般与javascipt配合使用，实现相应的功能

     4、图片按钮：<input type=”image” src=”图片的路径” />

    功能和submit 提交按钮一样，提交表单

9、框架

将浏览器窗口划分为若干个小窗口，每个小窗口显示一个独立的网页

框架集和框架页

  框架集（frameset）：主要是用来划分窗口用的

  框架页(frame)：主要是显示默认的网页地址

 将一个浏览器窗口划分为左右型框架

    <frameset  cols=”200,*” borderframe=”yes” border=”3” bordercolor=”blue”>

       <frame src=”left.html”/>

       <frame src=”main.html”/>

    </frameset>

Frameset的属性

1 Cols 划分为左右框架

Ÿ   Cols=”200,*” 左框架的宽度是200px,剩下的都给右边

Ÿ   Cols=”*,200” 右框架的宽度为200px，剩下的都给左框架

Ÿ   Cols=”180,*,180” 左框架和右框架的宽度是180px，剩下的都给中间

Ÿ   Cols=”20%,*” 可以用%来划分，左框架占窗口的20%,剩下的都是右框架

Ÿ   (*)表示剩下的部分

2  Rows 划分为上下框架

Ÿ   Rows=”200,*”  上边框架高度为200px，剩下的给下边的框架

Ÿ   Rows=”180,*,180”  上边的框架为180px ，最下面的框架为180px，剩下的给中间

Ÿ   Rows=”20%,*” 上边的框架占20%，剩下的给下面的框架

注意：cols属性和rows属性，每个框架只能用其中的一个，不能同时用

3  Frameborder 是否显示框架的边框线，取值 1和0， yes和no

4  Border 边框线粗细

5  Bordercolor 边框线的颜色

Frame 框架页的属性

 Src 在小窗口中，默认显示的网页地址

 Noresize  不能调整框架小窗口的大小

 Scrolling  是否出现滚动条，取值 auto yesno

          Auto 默认值， 如果网页的内容超出框架的尺寸时，出现滚动条，否则不出现滚动条

         Yes  无论网页的内容是否超出框架的尺寸，都会为框架窗口提供滚动条

         No  无论网页的内容是否超出框架的尺寸，都不会为框架窗口提供滚动条

Name 给当前小窗口起个名字，这个 name 是为了给<a>标签中属性 target 用的

注意事项

 <frameset>框架，又叫做普通框架

  普通框架先划分结构，在制作具体页面

  普通框架在划分的时候，不能出现body标签，因为里面没有实际的内容

浮动框架（内嵌框架）iframe

描述：内嵌框架就是相当于给当前网页挖一个窟窿，透过窟窿看到 里面的内容

浮动框架和普通框架的区别是，浮动框架是<body>的子标签，因此放到 <body>中

格式：<iframe  属性=”属性值”> 内容</iframe>

Iframe的属性：

   Src    引入文件的地址

   Width 浮动框架的的宽度

   Height 浮动框架的高度

   Scrolling 是否出现滚动条  取值 auto yes no

   Name 浮动框架小窗口的名称，是给<a>标签中的target属性用的

   Frameborder 浮动框架的边框线  取值  yes 和no  ,1或0

   Align 浮动框架的在网页页面对齐方式  left center right

  <input type="checkbox" name="red" value="0"> 红色

  <input type="checkbox" name="red" value="0"> 红色