整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML+CSS CSS3 特殊的“边线”outline

utline与border的异同:

边框的设定在web设计中使用率非常的高,border:1px solid #00f;属于标准的边线写法,也可以实现单方向边线border-left:1px solid red;

1px red solid边线

(单边线)左边线

在CSS标准盒模型中,边线border是计算在容器总宽度和高度之中的,

总宽高是102*102

浏览器中呈现的总宽度和总高度102*102

但随着web布局要求越来越高,自适应布局应用逐渐广泛,横向排布四个div 各占据四分之一的宽度,但如果某一个要有边线border修饰,因为border是占据宽度的,最终会导致最后一个元素掉下来,因为实际宽度大于了总宽度。

各占据四分之一的宽度


第四个元素掉了下来

outline可以实现和border相同的效果,标准语法也基本相同(outline:1px solid red),也支持outline-styleoutline-widthoutline-color等分散属性。

但是outline不占位,不会增加元素的宽高。

outline使用,总宽高不变还是100*100

outline标准写法

outline缺点:

不支持圆角 outline-radius:3px;

②不支持单方向outline

不支持部分属性

outline在文本框中的作用:

默认的文本框input[type="text"]获取光标时会有边线高亮。

文本框高亮获取光标(新版本之前是蓝色边线)

实际上高亮的部分为outline在起作用

.text:focus{outline: 3px solid #00f;}

使用outline:none,可以去除默认文本框获取光标时出现的边线

outline:none

.outline{
		/*标准写法*/
		outline:1px solid red;
		/*单方向边线*/
		outline-left:4px solid #000; 
	}
	.outline:focus{
		/*去除默认边线*/
		outline: none;
	}

outline作为一个特殊的属性存在,在特殊的场景中会产生很棒的效果,灵活使用才能发挥出最大作用。

TML基础知识

学习目标

  • 能够知道html的作用
  • 能够写出html的基本结构
  • 能够知道单标签和双标签的区别
  • 知道相对路径和绝对路径的区别
  • 掌握标签的种类
  • 了解表格的边线合并
  • 了解表单中常用的表单元素标签
  • 了解表单的提交方式
  • 了解表单中action属性的作用

一、HTML的介绍

1. 网页效果图 -- 百度



2. html的定义

HTML 的全称为:HyperText Mark-up Language, 指的是超文本标记语言。

标记:就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1>等,标签大多数都是成对出现的。

所谓超文本,有两层含义:

  1. 因为网页中还可以图片、视频、音频等内容(超越文本限制)
  2. 它还可以在网页中跳转到另一个网页,与世界各地主机的网页链接(超链接文本)

3. html的作用

html是用来开发网页的,它是开发网页的语言。

二、html 的基本结构

1. 结构代码

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>
  1. 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
  2. <html>...</html>标签是开发人员在告诉浏览器,整个网页是从<html>这里开始的,到</html>结束,也就是html文档的开始和结束标签。
  3. <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
  4. <body>...</body>标签是编写网页上显示的内容。

2. 浏览网页文件

网页文件的后缀是.html或者.htm, 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。

3. 小结

三、初始常用的 html 标签

1. 常用的 html 标签

<!-- 1、成对出现的标签:-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签: -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签,如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

提示:

  1. 标签不区分大小写,但是推荐使用小写。
  2. 根据标签的书写形式,标签分为双标签(闭合标签)和单标签(空标签) 2.1 双标签是指由开始标签和结束标签组成的一对标签,这种标签允许嵌套和承载内容,比如: div标签 2.2 单标签是一个标签组成,没有标签内容, 比如: img标签

2.标签列表

标签

描述

<!--...-->

定义注释

<!DOCTYPE>

定义文档类型

<a>

定义超文本链接

<abbr>

定义缩写

<acronym>

定义只取首字母的缩写,不支持HTML5

<address>

定义文档作者或拥有者的联系信息

<applet>

HTML5中不赞成使用。定义嵌入的 applet。

<area>

定义图像映射内部的区域

<article>

定义一个文章区域

<aside>

定义页面的侧边栏内容

<audio>

定义音频内容

<b>

定义文本粗体

<base>

定义页面中所有链接的默认地址或默认目标。

<basefont>

HTML5不支持,不赞成使用。定义页面中文本的默认字体、颜色或尺寸。

<bdi>

允许您设置一段文本,使其脱离其父元素的文本方向设置。

<bdo>

定义文字方向

<big>

定义大号文本,HTML5不支持

<blockquote>

定义长的引用

<body>

定义文档的主体

<br>

定义换行

<button>

定义一个点击按钮

<canvas>

定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形

<caption>

定义表格标题

<center>

HTML5不支持,不赞成使用。定义居中文本。

<cite>

定义引用(citation)

<code>

定义计算机代码文本

<col>

定义表格中一个或多个列的属性值

<colgroup>

定义表格中供格式化的列组

<command>

定义命令按钮,比如单选按钮、复选框或按钮

<datalist>

定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

<dd>

定义定义列表中项目的描述

<del>

定义被删除文本

<details>

用于描述文档或文档某个部分的细节

<dfn>

定义定义项目

<dialog>

定义对话框,比如提示框

<dir>

HTML5不支持,不赞成使用。定义目录列表。

<div>

定义文档中的节

<dl>

定义列表详情

<dt>

定义列表中的项目

<em>

定义强调文本

<embed>

定义嵌入的内容,比如插件。

<fieldset>

定义围绕表单中元素的边框

<figcaption>

定义<figure> 元素的标题

<figure>

规定独立的流内容(图像、图表、照片、代码等等)。

<font>

HTML5不支持,不赞成使用。定义文字的字体、尺寸和颜色。

<footer>

定义 section 或 document 的页脚。

<form>

定义了HTML文档的表单

<frame>

定义框架集的窗口或框架

<frameset>

定义框架集

<h1> to <h6>

定义 HTML 标题

<head>

定义关于文档的信息

<header>

定义了文档的头部区域

<hr>

定义水平线

<html>

定义 HTML 文档

<i>

定义斜体字

<iframe>

定义内联框架

<img>

定义图像

<input>

定义输入控件

<ins>

定义被插入文本

<kbd>

定义键盘文本

<keygen>

规定用于表单的密钥对生成器字段。

<label>

定义 input 元素的标注

<legend>

定义 fieldset 元素的标题。

<li>

定义列表的项目

<link>

定义文档与外部资源的关系

<main>

定义文档的主体部分。

<map>

定义图像映射

<mark>

定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。

<menu>

不赞成使用。定义菜单列表。

<meta>

定义关于 HTML 文档的元信息。

<meter>

定义度量衡。仅用于已知最大和最小值的度量。

<nav>

定义导航链接的部分

<noframes>

定义针对不支持框架的用户的替代内容。HTML5不支持

<noscript>

定义针对不支持客户端脚本的用户的替代内容。

<object>

定义内嵌对象

<ol>

定义有序列表。

<optgroup>

定义选择列表中相关选项的组合。

<option>

定义选择列表中的选项。

<output>

定义不同类型的输出,比如脚本的输出。

<p>

定义段落。

<param>

定义对象的参数。

<pre>

定义预格式文本。

<progress>

定义运行中的进度(进程)。

<q>

定义短的引用。

<rp>

<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

<rt>

<rt> 标签定义字符(中文注音或字符)的解释或发音。

<ruby>

<ruby> 标签定义 ruby 注释(中文注音或字符)。

<s>

不赞成使用。定义加删除线的文本。

<samp>

定义计算机代码样本。

<script>

定义客户端脚本。

<section>

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<select>

定义选择列表(下拉列表)。

<small>

定义小号文本。

<source>

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

<span>

定义文档中的节。

<strike>

HTML5不支持,不赞成使用。定义加删除线文本。

<strong>

定义强调文本。

<style>

定义文档的样式信息。

<sub>

定义下标文本。

<summary>

<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。

<sup>

定义上标文本。

<table>

定义表格。

<tbody>

定义表格中的主体内容。

<td>

定义表格中的单元。

<textarea>

定义多行的文本输入控件。

<tfoot>

定义表格中的表注内容(脚注)。

<th>

定义表格中的表头单元格。

<thead>

定义表格中的表头内容。

<time>

定义日期或时间,或者两者。

<template>

定义在页面加载时隐藏的一些内容。

<title>

定义文档的标题。

<tr>

定义表格中的行。

<track>

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

<tt>

定义打字机文本。

<u>

不赞成使用。定义下划线文本。

<ul>

定义无序列表。

<var>

定义文本的变量部分。

<video>

<video> 标签定义视频,比如电影片段或其他视频流。

<wbr>

规定在文本中的何处适合添加换行符。

3.HTML 属性

属性

描述

accesskey

设置访问元素的键盘快捷键。

class

规定元素的类名(classname)

contenteditable

规定是否可编辑元素的内容。

contextmenu

指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单

data-*

用于存储页面的自定义数据

dir

设置元素中内容的文本方向。

draggable

指定某个元素是否可以拖动

dropzone

指定是否将数据复制,移动,或链接,或删除

hidden

hidden 属性规定对元素进行隐藏。

id

规定元素的唯一 id

lang

设置元素中内容的语言代码。

spellcheck

检测元素是否拼写错误

style

规定元素的行内样式(inline style)

tabindex

设置元素的 Tab 键控制次序。

title

规定元素的额外信息(可在工具提示中显示)

translate

指定是否一个元素的值在页面载入时是否需要翻译

4.小结

  • 学习 html 语言就是学习标签的用法,常用的标签有20多个。
  • 编写 html 标签建议使用小写
  • 根据书写形式,html 标签分为双标签和单标签
  • 单标签没有标签内容,双标签可以嵌套其它标签和承载文本内容

四、资源路径

当我们使用img标签显示图片的时候,需要指定图片的资源路径,比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的,资源路径可以分为相对路径和绝对路径

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

2. 绝对路径

从根目录算起的路径叫做绝对路径,Windows 的根目录是指定的盘符,mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径,绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

五、列表标签

1. 列表标签的种类

  • 无序列表标签(ul标签)
  • 有序列表标签(ol标签)

2. 无序列表

<!-- ul标签定义无序列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

3. 有序列表

<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>

六、表格标签

1. 表格的结构

表格是由行和列组成,好比一个excel文件

2. 表格标签

  • <table>标签:表示一个表格
    • <tr>标签:表示表格中的一行
      • <td>标签:表示表格中的列
      • <th>标签:表示表格中的表头

示例代码:

<table border="1" cellspacing="3">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td> 
    </tr>
</table>

表格边线合并:

border-collapse 设置表格的边线合并,如:border-collapse:collapse;

七、表单标签

1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 。

2. 表单相关标签的使用

  1. <form>标签 表示表单标签,定义整体的表单区域
  2. <label>标签 表示表单元素的文字标注标签,定义文字标注
  3. <input>标签 表示表单元素的用户输入标签,定义不同类型的用户输入数据方式
  4. type属性
  5. type="text" 定义单行文本输入框
  6. type="password" 定义密码输入框
  7. type="radio" 定义单选框
  8. type="checkbox" 定义复选框
  9. type="file" 定义上传文件
  10. type="submit" 定义提交按钮
  11. type="reset" 定义重置按钮
  12. type="button" 定义一个普通按钮
  13. <textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框
  14. <select>标签 表示表单元素的下拉列表标签 定义下拉列表
  15. <option>标签与<select>标签配合,定义下拉列表中的选项

示例代码:

<form>
    <p>
        <label>姓名:</label><input type="text">
    </p>
    <p>
        <label>密码:</label><input type="password">
    </p>
    <p>
        <label>性别:</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>爱好:</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 游泳
    </p>
    <p>
        <label>照片:</label>
        <input type="file">
    </p>
    <p>
        <label>个人描述:</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍贯:</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

3. 小结

  • 表单标签是<form>标签
  • 常用的表单元素标签有: <label><input><textarea><select>等标签

八、表单提交

1. 表单属性设置

<form>标签 表示表单标签,定义整体的表单区域

  • action属性 设置表单数据提交地址
  • method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写

2. 表单元素属性设置

  • name属性 设置表单元素的名称,该名称是提交数据时的参数名
  • value属性 设置表单元素的值,该值是提交数据时参数名所对应的值

3. 示例代码

 <form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名:</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密码:</label><input type="password" name="password" />
    </p>
    <p>
        <label>性别:</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>爱好:</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述:</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯:</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

4.小结

  • 表单标签的作用就是可以把用户输入数据一起提交到web服务器。
  • 表单属性设置
    • action: 是设置表单数据提交地址
    • method: 是表单提交方式,提交方式有GET和POST
  • 表单元素属性设置
    • name: 表单元素的名称,用于作为提交表单数据时的参数名
    • value: 表单元素的值,用于作为提交表单数据时参数名所对应的值

、 结构

一、标记<Html> 建立HTML文档

<Head> 设置网页头部和其它信息

<Body> 设计文件格式及内文所在<Body> 元素的属性

Text 设置页面文字的送顔色 Bgcolor 设置页面背景的顡色

Background 设置页面的背景图像 Link设置页面黙认的顔色

Bgproperties 设置页面的背景图像为固定,不随页面的滚动而滚动

Alink 设置鼠标正在单击时候的链接顔色 Vlink 设置访问过后的链接顔色

Topmargin 设置页面的上边距 Leftmargin 设置页面的左边距

二、头部

标记 <Base> 当前文档的URL全称 <Title>设置显示在浏览器在上方的标题内容

<Isindex> 表明该文档是一个可用于检索的网关脚本

<Meta> 有关文档本身的信息,例如用于查询的关键词,用于获取该文档的有效期等

<Style> 设置CSS层叠样式表的内容

<link> 设置外部文件的链接 <script> 设置页面中程序脚本的内容

<Mate> 标记属性

Http-Equiv 生成一个HTTP标题域,它的取值与另一个属性相同,

例如Http-Equiv=Expires,实际取值由Content确定

Name 如果元数据是以关键字/取值的形式出现的,Name 表示键字,

如Author或ID

Content 关键字/取值的内容

三、文字

文字标记 <HNumber>……<1HNumber> Number=1.2.3.4.5.6

分别指1至6级标题

<Font>文字

文字的修饰标记 <B>/<strong> 粗体 <I>/<Em>/<cite> 斜体

<Sup>上标 <sub>下标 <Big>大字号 <small>小字号

<U>下划线 <S>/<strike>删除线 <Address>地址

<Tt>打字机文字 <Blink>闪烁文字(只适用于Netscape浏览器)

<Code>/<samp>等宽 <kbd>键盘输入文字 <Var>声明变量

<Fant>标记的属性

Face 字体 Size字号 Color顔色

四.列表

列表标记 <Ul>无序列表 <Ol>有序列表 <Dir>回录列表 <Dl>定义列表

<Meru>菜单列表 <Dt>·<Dd>定义列表的标记 <Li>列表项目的标记

<Ul><Ol>标记的属性 Type设置列表类型 start设置列表起始属性

Type的属性值 1 数字 a 小写字母 A 大写字母 i小写罗马数字

I 大写罗马数字 Disc ● Circle ○ square □

五.链接

链接标记 <A> 链接

<A>标记的属性 Href 指定链接地址 Name给链接命名

Title设置链接提示文字 Target指定链接的目标窗口

Target属性值 -parent在上一级窗口中打开。一般使用分帧的框架页会经常使用

-bank在新窗口中打开

-self在同一个帧或窗口中打开.这项一般不用设置

Href属性值 http:// 进入万维网站点 news://启动新闻讨论

ftp:// 进入文件传输服务器 mailto:// 启动新闻讨论组

telnet:// 启动telnet方式 gopher://访问一个gopher服务器

六.图片

图片标记 <Img>图片 <Map>图像映射 <Area>图像映射中定义区域

<lmg>标记的属性 src图像的源文件 Alt提示文字 Width宽度

Height高度 Vspace垂直间距 Hspace水平间距 Align排列 Border边框

Align属性值 Top文字的中间线居于图片上方 Middle文字的中间线居于图片中间

Bottom文字的中间线居于图片底部 Left 图片在文字的左侧

Right图片在文字的右侧 Absbottom文字的底线居于图片底部

Absmiddle文字的底线居于图片中间 Baseline英文文字基线对齐

Texttop英文文字上边线对齐

Shape属性值

Rect矩形区域 Circle椭圆形区域 Poly多边形区域

七.表格

1.表格标记 <Table>…</Table>表格标记 <Tr>…</Tr>行标记

<Td>…</Td>单元格标记 <Th>表头标记

<Table>标记属性 Bordercolor 表格边框色 Borde表格边框的宽度

Bordercolorlight 表格边框亮边框色(左上边框顔色)

Bordercolordark 表格暗边框色(右下边框顔色)

Bordercolor 行的边框顔色 Width表格的宽度 Height表格的高度

Bgcolor表格的背景顔色 Background表格的背图像

<Tr>标记属性 Align行内容的水平对齐 Valign 行内容的垂直对齐

Bgcolor 行的背景顔色 Background 行的背景图像

Bordercolor 行的边框顔色 Bordercolorlight 行的亮边框顔色

Bordercolordark 行的暗边框顔色

<Td>标记属性 Align单元内容的水平对齐 Valign单元格内容的垂直对齐

Bgcolor 单元格的背景顔色 Background 单元格的背景图像

Bordercolor单元格的背景顔色 Bordercorlorlight单元格的亮边框顔色

Brodercolordark 单元格的暗边框顔色 Width 单元格的宽度

Height单元格的高度

<Th>标记属性 Align表头内容的水平对齐 Valign表头内容的垂直对齐

Bgcolor 表头的背景顔色 Background表头的背景图像

Bordercolor表头的边框顔色 Bordercolorlight 表头的亮边框顔色

Bordercolordark 表头的暗边框顔色 Width 表头的宽度 Height 表头的高度

八.表单

1.表单标记 <Form>表单标记 <Input>表单输入标记

<select>菜单和列表标记 <Option>菜单和列表项目标记

2.属性 <Form> Name表单的名称

Method 定义表单结果从浏览器传送到服务器的方法,一般有两种方法:get,post

Action 用来定义表单处理程序(一个Asp,CGI等程序)的位置(相对地址或绝对地址)

<lnput>标记属性 Name 域的名称 Type域的类型

Maxlength 域的最大输入字符数 size域的宽度 Value 域的默认值

<Select>标记属性 Name 菜单和列表的名称 size 显示的选项数目

Multiple 列表中的项目多选 Value 选项值 selected默认选项

<Texrarea>标记属性 Name 文字域的名称 Rows文字域的行数

Cols 文字域的列数 Value 文字域的默认值

Type属性值 Text 文字域 Password 密码域 File 文件域

Checkbox复选框 Redio单选框 Button普通按扭

Submit 提交按钮 Reset重置按钮 Hidden隐藏域Image图像域

九.滚动

滚动标记 <Marquee>

<Marquee>标记属性 Direction 滚动方向 up 文字向上滚动 Left文字向左滚动

Behavior 滚动方式 Scroll 循环往复

Side 只做一次滚动

Alternate 交替进行滚动

ScrollAmount 滚动速度

ScrollDelay 滚动延迟

Trim函数用来剔除首尾空格

十.框架

1.标记 <Frameset> 框架边框标记 <Frame> 框架标记 <Iframe>浮动框架标记

<Frameset>标记属性 Cols列 Rows行

<Frame> 标记属性 src框架中显示页面源文件的路径

FrameBorder 框架边框显标属性 FrameSpacing框架边框宽度属性

Scrolling框架滚动条显示属性 NoResize 框架尺寸调整属性

BorderColor 框架边框顔色属性 MarginWidt 框架边框缘宽度属性

MarginHerght框架边缘高度属性

<1frame> 标记属性 src浮动框架中显示页面源文件的路径

Width 浮动框架的宽度 Height 浮动框架的高度

Name 浮动框架的名称

Align 浮动框架的排列方式 Left表示居左 Center表示居中 Right表示居右

FrameBorder 框架边框显示属性 FrameSpacing 框架宽度属性

Scrolling 框架滚动条显示属性 ( yes显示 No不显示 Auto根据页面的长度自动判断是否晶粒示滚动条

NoResize 框架尺寸调整属性 BorderColor框架的顔色

MarginWidth 框架边缘宽度属性 MarginHeight 框架边缘高度属性

插入刷新

步骤:1.选择"查看/文件头内容"

2.在插入面板上,打开HTML选项卡

优化代码

打开文件窗口,执行"命令、清理HTML"命令

文本换行:Enter 行距较大

Enter + Shift 行距较小

插入水平线设置顔色:单击属性面板中的快捷标签编辑器按钮

在代码中键入"color = #顔色值"

当图像无法显示时将显示这段文字:

图像属性中的替代→输入文字

插入鼠标经过图像:准备两张图像

在文件窗口中,将光标放置于需要翻转图像位置→插入工具栏中单击鼠标经过图像

Ⅱ.使用导航条:

在"常用"对象组中,单击"图像"小三角→导航条

插入图像占位符:图像小三角→图像占位符

Flash动画的背景实现透明 参数wmode 值 transparent

插入 Java Applet

插入表单

插入表单域:对象面板上"表单"→插入表单

插入文本域:单击面板上的插入文本域. 初始值 = 打开时显于的文字

插入密码框:在属性面板上选择密码

插入多行文本域:在类型后选择多行

插入隐藏域:对象面板→插入隐藏域

插入按钮:标签用来设置按钮上显示的文本

插入图像提交按钮=图像域:

插入文件上传按钮=文件域:

插入单选框

插入单选按钮组:Label文字说明 Value 单选按钮的值

插入复选框

菜单/插入列表:列表值→

插入跳转菜单:(

制作网页链接

URL统一资源定位器

目标:_blank在一个新的未命名的浏览器窗口中打开

_parent如果是嵌套的框架,链接会在父框架或窗口中打开,否则=_top

_top在完整的浏览器中打开

创建搜索页

运行中输入:

Inetmgr (IIS

Odbcad32 (odbc

Asp对象

Applicatipn 在给定的应用程序的所有用户间共享信息,并在服务器运行期间持久地保存数据。

集合: Contents

staticObjects

Item(变量值)=设置资料变量的值

Key(变量名称)=设置资料变量的名称

Count(变量资料的数量)=表示

Coutents集合中资料的总数量

方法: Lock

Unlock

事件: Applicatipn_Onstart

Application_OnEnd

Session 存储特定的用户会话所需的信息

属性:CodePage

LCID

SessionID

Timeout

集合:Contents

StaticObjects

方法:Abandon

事件:Session_Onstart

Session_OnEnd

Response 用来控制发送给用户的信息,包括直接发送信息给浏览器,重定位浏览器到另一个URL或设置Cookie值

属性: Buffer

CacheControl

Charset

ContentType

Expires

ExpiresAbsolute

IsClientConnected

PICS

Status

集合: Cookies

方法: AddHeader

AppendToLog

BinaryWrite

Clear

End

Flush

Redirect

Write

Request 访问任何基于HTTP请求传递的信息,常见的有从HTML表单用Post方法或Get方法传递的参数,Cookie或用户认证等。

属性: TotalBytes

集合: ClientCertificate

Cookies

Form

QueryString

ServerVaiables

方法: BinaryRead

Server 提供对服务器方法和属性的访问

属性: ScriptTimeout

集合: 无

方法: CreatObject

HTMLEncode

MapPath

URLEncode

Recordset

MoveNext 将前数据记录移至下一条

MovePrevious 将当前数据记录移至上一条

MoveFirst 将当前数据记录移至第一条

MoveLast 将当前数据记录移至最后一条

AbsolutePosition=N 将当前数据记录移至第N条

EOF 当前数据记录是否移过了最后一条(发生于向下移动时)

BOF 当前数据记录是否移过了第一条 (发生于向上移动时)

VBScript 运算符

算术运算符

指数 取负 乘法 除法 加法 减法 取模 连接 整数除法

∧ - * / ﹢ ﹣ Mod & \

比较运算符

相等 不相等 小于 大于 小于或等于 大于或等于 对象相象

= <> < > <= >= IS

逻辑运算符

逻辑非 逻辑与 逻辑或 异或 逻辑等于 逻辑蕴含

Not And Or Xor Eqv Imp