DIV+CSS+JS基础+正则表达式

2022-06-10 00:44:47

.。。。。。。。。。。。。。。HTML系列。。。。。。。。。。。。。。。。。。。。

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

http://baike.baidu.com/view/939547.html?wtp=tt

a.HTML基本代码：

<html>

<head>

<title> title </title>

</head>

<body>

dddddlld

</body>

</html>

标签网址：http://www.w3school.com.cn/tags/tag_doctype.asp

<h1>---<h6> 标题从大小。

<p></p> 表示段落

<br> 换行符此标签没结束标签。

注释标签。

<hr> 水平线

<del> </del> 删除文本

<ins> </ins> 下划线文本

字体格式化：

http://www.w3school.com.cn/html/html_formatting.asp

<b> </b> 粗体

<strong> </strong> 加强

<big> </big> 大号

<em> </em> 加强

<i> </i> 斜体

<sub></sub>下注释

<sup></sup>上注释

<address></address> 表示地址。

<bdo dir="rtl"></bdo> 文字反向输出。

<blockquote></blockquote> 长引用

<q></q> 短引用

http://www.w3school.com.cn/tiy/t.asp?f=html_quotations

<pre></pre> 预格式文本，很适合显示计算机代码，程序。

http://www.w3school.com.cn/tiy/t.asp?f=html_preformattedtext

一个无序列表：

<ul>

</ul>

一个有序列表：

<ol>

</ol>

字符实体格式：&#000 ;

基本的注意事项 - 有益的提示

当您写 HTML 文本的时候，你永远也没法确定这些文本在另一台显示器上是如何显示的。一些人使用大显示器，而另一些使用小的。当用户调整视窗的分辨率时，这些文本就会被重新格式化。所以不要通过在文本中添加空行和空格的办法在你的编辑器中格式化文本。

HTML 会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在 HTML 中，一个空行也被当作一个空格。

使用空的段落标记 <p> 去插入一个空行是个坏习惯。用 <br> 标签代替它！（但是不要用 <br> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

您也许已经注意到了，在没有结束标签 </p> 的情况下，<p> 标签依然可以正常工作。不过不要这样做！下一个版本的 HTML 将不允许忽略任何的结束标签。

HTML 会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

3.超链接

<a href="url">Text to be displayed</a>

http://www.w3school.com.cn/html/html_links.asp

发送EMAIL超链接时，应用 %20替换空格。

http://www.w3school.com.cn/tiy/t.asp?f=html_mailto2

4.框架

http://www.w3school.com.cn/html/html_frames.asp

5.表格的

基本格式:

<table>

<tr>

</tr>

</table>

关于cellpadding, table 属性

http://zhidao.baidu.com/question/7407260.html

关于cellspacing,table属性

http://www.w3school.com.cn/tiy/t.asp?f=html_table_cellspacing

关于table的frame属性

http://hi.baidu.com/tuwicn/blog/item/13f97366386d3025ab184ce5.html

6.表单

<form>

<input>

</form>

http://www.w3school.com.cn/html/html_forms.asp

7图像

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

8头信息

头元素

头元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta 意为“关于某方面的信息”。

可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息。

头元素内的信息

头元素内的元素不会被浏览器显示出来。

根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：<base>, <link>, <meta>, <title>, <style> 和 <script>。

这是一个不合法的结构：

<head>

</head>

9.URL

URL（统一资源定位器）

一个称为 URL（统一资源定位器）的东西用于对万维网上的文档（或其他数据）进行寻址。一个完整的网址，例如：http://www.w3school.com.cn/html/lastpage.html，遵守如下语法规则：

scheme://host.domain:port/path/filename

Scheme 定义因特网服务的类型。最流行的类型是 http。

domain（域）定义因特网域名，比如：w3school.com.cn。

host（主机）定义此域中的主机。如果被省略，缺省的支持 http 的主机是 www。

:port(端口)定义主机的端口号。端口号通常是被省略的。缺省的端口号是 80。

path（路径）定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录。

filename（文件名）定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html，或者依据 WEB 服务器设置的其他文件名。

编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。

URL Schemes

以下是其中一些最流行的 scheme：

Schemes 访问

file 本地 PC 上的文件。

ftp FTP 服务器上的文件。

http World Wide Web 服务器上的文件。

gopher Gopher 服务器上的文件。

news Usenet 新闻组。

telnet Telnet 连接。

WAIS WAIS 服务器上的文件。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

。。。。。。。。。。。。。。。。。CSS系列。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

http://www.w3school.com.cn/css/index.asp CSS教程

http://www.w3school.com.cn/css/css_howto.asp 如何创建CSS

1.样式层叠

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1.浏览器缺省设置

2.外部样式表

3.内部样式表（位于 <head> 标签内部）

4.内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

2 css 背景

背景色：background-color

背景图像：background-image

背景重复：background-repeat

背景定位：background-position

背景关联：background-attachment

background 简写属性，作用是将背景属性设置在一个声明中。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

background-color 设置元素的背景颜色。

background-image 把图像设置为背景。

background-position 设置背景图像的起始位置。

background-repeat 设置背景图像是否及如何重复。

3. CSS 文本

color 设置文本颜色

direction 设置文本方向。

line-height 设置行高。

letter-spacing 设置字符间距。

text-align 对齐元素中的文本。

text-decoration 向文本添加修饰。

text-indent 缩进元素中文本的首行。

text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。

text-transform 控制元素中的字母。

unicode-bidi 设置文本方向。

white-space 设置元素中空白的处理方式。

word-spacing 设置字间距。

4.css 字体

可以使用font-family属性

font 简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family 设置字体系列。

font-size 设置字体的尺寸。

font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）

font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）

font-style 设置字体风格。

font-variant 以小型大写字体或者正常字体显示文本。

font-weight 设置字体的粗细。

http://www.w3school.com.cn/css/css_font.asp

5.css 列表

要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square}

时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif)}只需要简单地使用一个 url() 值，就可以使用图像作为标志。

CSS列表属性：

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。

list-style-image 将图象设置为列表项标志。

list-style-position 设置列表中列表项标志的位置。

list-style-type 设置列表项标志的类型。

6.CSS表格

CSS TABLE 属性

CSS 表格属性允许你设置表格的布局。（请注意，本节介绍的不是如何使用表来建立布局，而是要介绍 CSS 中表本身如何布局。）

属性描述

border-collapse 设置是否把表格边框合并为单一的边框。

border-spacing 设置分隔单元格边框的距离。（仅用于 "separated borders" 模型）

caption-side 设置表格标题的位置。

empty-cells 设置是否显示表格中的空单元格。（仅用于 "separated borders" 模型）

table-layout 设置显示单元、行和列的算法。

7.CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {

margin: 0;

padding: 0;

}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸

1)CSS 内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

CSS 内边距属性

属性描述

padding 简写属性。作用是在一个声明中设置元素的所内边距属性。

padding-bottom 设置元素的下内边距。

padding-left 设置元素的左内边距。

padding-right 设置元素的右内边距。

padding-top 设置元素的上内边距。

2) CSS的边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS 边框

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面：宽度、样式，以及颜色。

a）边框与背景

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

b）边框的样式

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}定义多种样式

您可以为一个边框定义多个样式，例如：

p.aside {border-style: solid dotted dashed double;}上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线有边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。

定义单边样式

如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：

border-top-style

border-right-style

border-bottom-style

border-left-style

因此这两种方法是等价的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

c）边框的宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

注释：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。

所以，我们可以这样设置边框的宽度：

p {border-style: solid; border-width: 5px;}

其它见：http://www.w3school.com.cn/css/css_border.asp

CSS 边框属性

属性描述

border 简写属性，用于把针对四个边的属性设置在一个声明。

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color 设置元素的下边框的颜色。

border-bottom-style 设置元素的下边框的样式。

border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color 设置元素的左边框的颜色。

border-left-style 设置元素的左边框的样式。

border-left-width 设置元素的左边框的宽度。

border-right 简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color 设置元素的右边框的颜色。

border-right-style 设置元素的右边框的样式。

border-right-width 设置元素的右边框的宽度。

border-top 简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color 设置元素的上边框的颜色。

border-top-style 设置元素的上边框的样式。

border-top-width 设置元素的上边框的宽度。

3) 边框的外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

CSS margin 属性

设置外边距的最简单的方法就是使用 margin 属性。

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

h1 {margin : 0.25in;}下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

margin: top right bottom left另外，还可以为 margin 设置一个百分比数值：

p {margin : 10%;}百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式

CSS 外边距属性

属性描述

margin 简写属性。在一个声明中设置所有外边距属性。

margin-bottom 设置元素的下外边距。

margin-left 设置元素的左外边距。

margin-right 设置元素的右外边距。

margin-top 设置元素的上外边距。

8.CSS 定位 position

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性描述

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

值描述

static 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

relative 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 将向元素的 LEFT 位置添加 20 个像素。

absolute 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow 设置当元素的内容溢出其区域时发生的事情。

clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。

vertical-align 设置元素的垂直对齐方式。

z-index 设置元素的堆叠顺序。

详见：http://www.w3school.com.cn/css/css_positioning.asp

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

附录：关于 display: inline 的一些

Web页中的HTML元素的排版布局规则

我们知道每个Web页面都是由一大堆的HTML元素组成的，我们把每对<element>...</element>这样的结构称为box，在Web页面的排版布局中，浏览器把这样的box作为排版的元素，并且把box分为了inline level和block level两种类型。

当然这个box内是可以容纳很多其它的HTML标签的，但是不管它的内部有多少的TAGs，box都被我们看成是一个排版元素，比如：<div style="border: solid 1px blue"> abc </div>和<table> <tr> <td> <span> <i> abc </i> </span> </td> </tr> </table>就可以被看成是两个排版元素div和table(当然div和table的内部还可以继续细分子的box)。

在browser的默认排版策略(没有任何的CSS修饰)中，box的inline和block分别指的是：

Inline Level：元素按从左向右排列，就像我们输入文字一样，一行容纳不下了自动分行继续显示。比如text、<a>、<img>、<span>等都属于inline element(除了30个block level的TAGs，和几个none的TAGs，其它大多数的标签都是inline level的；

Block Level：相对于它的parentElement构成的box来说，它的排版始终会独自占一行，就是在block level的元素后必然会新起一行。比如<form>、<hr>、<div>、<table>、<p>等30个TAGs都属于block element。

在大多数的情况下，虽然我们完全可以在inline level的元素中嵌套block level的元素，可是这样会对它们的显示效果带来一些混淆和不确定。比如<div>正常情况下是单独占一行的，可是我们却可以使用一个inline level的元素<span>把<div>包裹起来，这时这个<span><div>...</span>构成的box排版属性仍是inline的(e.g.

span&div

)。可是如果我们用<span>把<table>包裹起来，这时这个<span><table>...</span>构成的box的排版属性却成了block的了(e.g. span&table

)。

其实inline和block直观的表现就是，比如<a>link1 </a>text1 <a>link2 </a>text2 ...这样的HTML在browser里是可以显示一行上(preview:link1 text1 link2 text2 ...)，而<table> <tr> <td> text1 </td> </tr> </table> <table> <tr> <td> text2 </td> </tr> </table> ...是不能显示在一行上的(preview: text1

text2

)。

以上是browser对于box的默认的排版策略，而我们可以通过css来改变这些默认的策略。使用css中提供的position(配合top,left)、float和clear三个属性就可以实现用户定制Web页中元素的排版布局策略。

详解visibility属性

CSS控制内容显示2008年08月28日星期四上午 08:27

我们先看看什么是CSS的visibility属性？

　　设置或检索是否显示对象。

　　请区别与display属性不同，此属性为隐藏的对象保留其占据的物理空间。也就是说：

　　 visibility属性取值为hidden时，只是改变了元素的可见性，元素所占有的空间依然存在。

　　visibility是一个不可继承的属性，如果希望对象为可视，其父对象也必须是可视的。

　　CSS的visibility属性有些哪取值？

　　inherit：继承上一个父对象的可见性

　　visible：对象可视

　　hidden：对象隐藏

　　collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。

　　我们看下面的两个例子来理解visibility属性：

　　我们在文字中插入一个图片，请注意文字与图片的位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>52CSS</title> <style type="text/css"> * {margin:0;padding:0;font-size:13px;color:#000;} #test {width:300px; margin:20px auto; background:#ccc;} </style> </head> <body> <div id="test"> 52CSS.com 我爱CSS-Web标准化 Div+css教程<img src="http://www.52css.com/skins/logo3.gif" alt="52CSS.com" />至力于Web标准在中国的应用及发展 </div> </body> </html>

　　我们对图片应用visibility:hidden，再来看看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title><style type="text/css">* {margin:0;padding:0;font-size:13px;color:#000;}#test {width:300px; margin:20px auto; background:#ccc;}#test img{visibility:hidden;}</style></head><body><div id="test">52CSS.com 我爱CSS-Web标准化 Div+css教程<img src="http://www.52css.com/skins/logo3.gif" alt="52CSS.com" />至力于Web标准在中国的应用及发展</div></body></html>

　　我们发现图片不见了，但它所占的空间依然存在，文字的位置没

----------------------------------------------------------------------------------------------------------------------------------------------------------

鼠标的一些图标变化

http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor

CSS 的伪类

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

http://www.w3school.com.cn/css/css_pseudo_classes.asp

CSS 伪元素 (Pseudo-elements)实例：

语法：

伪元素的语法：

选择器 : 伪元素 { 属性: 值 }CSS 类也可以与伪元素配合使用：

选择器 . 类: 伪元素 { 属性: 值 }

:first-line 伪元素

"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式：

p {font-size: 12pt}

p:first-line {color: #0000FF; font-variant: small-caps}

<p>Some text that ends up on two or more lines</p>

在上面的例子中，浏览器显示根据 first-line 伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。

提示：first-line 伪元素仅能被用于块级元素。

提示：下面的属性可以被应用到 first-line 伪元素。

font 属性

color 属性

background 属性

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

:first-letter 伪元素

first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式：

p {font-size: 12pt}

p:first-letter {font-size: 200%; float: left}

<p>The first words of an article.</p>输出的效果类似于：

___

| he first

| words of an

article.font 属性

color 属性

background 属性

margin 属性

padding 属性

border 属性

text-decoration

vertical-align (仅当float为none时)

text-transform

line-height

float

clear

http://www.w3school.com.cn/css/css_pseudo_elements.asp

CSS2 媒介类型

v不同的媒介类型

注释：媒介类型名称对大小写不敏感。

浏览器支持：IE: Internet Explorer, F: Firefox, N: Netscape。

W3C：“W3C” 列的数字显示出属性背景由哪个 CSS 标准定义（CSS1 还是 CSS2）。

媒介类型描述

all 用于所有的媒介设备。

aural 用于语音和音频合成器。

braille 用于盲人用点字法触觉回馈设备。

embossed 用于分页的盲人用点字法打印机。

handheld 用于小的手持的设备。

print 用于打印机。

projection 用于方案展示，比如幻灯片。

screen 用于电脑显示器。

tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。

tv 用于电视机类型的设备。

----------------------------------------------------------------------------------------------------------------------------------------------------------

为搜索引擎准备的内容

代码如下，替换成你自己站点的内容就可以：

? 允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索，推荐采用 robots.txt 方法

? 设置站点作者信息

? 设置站点版权信息

? 站点的简要介绍(推荐)

? 站点的关键词(推荐)

w3c, w3, w3cn, ajie" name="keywords" />

先介绍这么多。补充说明，前面花了 5 节都是讲 head 区的代码，实际页面内容还一字未提，呵呵，不要急，其实 head 区

非常重要的，看一个页面的 head 的代码就可以知道设计师是否够专业。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－JAVASCRIPT系列－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

http://www.w3school.com.cn/js/ javascript教程

1.JAVAscript 的位置

当页面载入时，会执行位于 body 部分的 JavaScript。

当被调用时，位于 head 部分的 JavaScript 才会被执行。

也可通过外部调用。外部调用时，外部的语句不加<script></script>

2.javascript注释

单行的以 "//" 开始

多行注释以"/*"开始以"*/"结束。

3.javascript 的变量

正如代数一样，JavaScript 变量用于保存值或表达式。

可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。

JavaScript 变量也可以保存文本值，比如 carname="Volvo"。

JavaScript 变量名称的规则：

变量对大小写敏感（y 和 Y 是两个不同的变量）

变量必须以字母或下划线开始

注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。

声明（创建） JavaScript 变量

在 JavaScript 中创建变量经常被称为“声明”变量。

您可以通过 var 语句来声明 JavaScript 变量：

var x;

var carname;

在以上声明之后，变量并没有值，不过您可以在声明它们时向变量赋值：

var x=5;

var carname="Volvo";

注释：在为变量赋文本值时，请为该值加引号。

4.条件运算符

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2 例子

greeting=(visitor=="PRES")?"Dear President ":"Dear ";如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。

5.switch 语句

JavaScript Switch 语句

如果希望选择执行若干代码块中的一个，你可以使用 switch 语句：

语法：

switch(n)

{

case 1:

执行代码块 1

break

case 2:

执行代码块 2

break

default:

如果n即不是1也不是2，则执行此代码

}

6.JS 消息框

a.警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：

alert("文本")

b.确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法：

confirm("文本")

c.提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

prompt("文本","默认值")

7. isNaN(x)

用于检测是否是非数值。

返回值

如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。

8，onerror 事件

我们刚讲过如何使用 try...catch 声明来捕获网页中的错误。现在，我们继续讲解如何使用 onerror 事件来达到相同的目的。

只要页面中出现脚本错误，就会产生 onerror 事件。

如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

语法：

onerror=handleErrfunction handleErr(msg,url,l)

{

//Handle the error here

return true or false

}浏览器是否显示标准的错误消息，取决于 onerror 的返回值。如果返回值为 false，则在控制台 (JavaScript console) 中显示错误消息。反之则不会。

9.JS对象字符串string

http://www.w3school.com.cn/js/jsref_obj_string.asp

10.JS对象日期 Date

http://www.w3school.com.cn/js/js_obj_date.asp

11.js对象数组 Array

http://www.w3school.com.cn/js/js_obj_array.asp

concat() 合并数组：数组A.concat(数组B)

12.js对象 Math 函数

http://www.w3school.com.cn/js/js_obj_math.asp

13.js对象 RegExp

什么是 RegExp？

RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

定义 RegExp

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：

var patt1=new RegExp("e");当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。

RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

http://www.w3school.com.cn/js/js_obj_regexp.asp

14.JS 函数调用

<html>

<head>

function myfunction()

{

alert("您好！")

}

</script>

</head>

<body>

<form>

</form>

<p>通过点击这个按钮，可以调用一个函数。该函数会提示一条消息。</p>

</body>

</html>

15.js 事件

onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

<a href="http://www.w3school.com.cn"

onmouseover="alert('An onMouseOver event');return false">

</a>

16.

重新声明 JavaScript 变量

如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。

var x=5;

var x;

在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。

17.js 字符串处理

http://www.w3school.com.cn/js/js_obj_string.asp

18. 输入验证：数字或者非空的

<html>

<head>

function checkNumeric(objName, form)

{

if (isNaN(objName.value))

{

alert("Please enter numeric values only.");

objName.focus();

objName.value+="";

}

function checkempty(objName)

{

if(objName.value==null||objName.value=="")

{

alert("不能为空");

objName.focus();

}

</script>

</head>

<body>

Enter your name: <input type="text" id="fname" onblur="checkNum(fname)"><br />

</body>

</html>

19.JavaScript之关于时间的操作

//在页面上实现一个时钟

<html>

<head>

function startTime()

{

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

// add a zero in front of numbers<10

m=checkTime(m)

s=checkTime(s)

document.getElementById('txt').innerHTML=h+":"+m+":"+s

t=setTimeout('startTime()',500)

}

function checkTime(i)

{

if (i<10)

{i="0" + i}

return i

}

</script>

</head>

</body>

</html>

setTimeout　　定义和用法:

　　setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

　　语法:

　　setTimeout(code,millisec)

　　参数：

　　code （必需）：要调用的函数后要执行的 JavaScript 代码串。

　　millisec（必需）：在执行代码前需等待的毫秒数。

　　提示：

　　setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

JS 相关格式：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Add_Infos.aspx.cs" Inherits="JMW_MHW.Web.admin.News.NewsInfo.Add_Infos" %>

<%@ Register Assembly="eWebEditorExt.UI" Namespace="eWebEditorExt.UI" TagPrefix="EditorV2" %>

<%@ Register Src="../../UserControl/CSelectNewsType_ddl.ascx" TagName="CSelectNewsType_ddl" TagPrefix="uc1" %>

<%@ Register Src="../../UserControl/CSelectNewsType_CheckBox.ascx" TagName="CSelectNewsType_CheckBox" TagPrefix="uc1" %>

<%@ Register Src="../../UserControl/CCataLog.ascx" TagName="CCataLog" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

function CheckNewsInfos_Data(type)

{

if(document.getElementById("tr_qc").style.display=="")

{

if(CheckNewsType_ddl()==false) return false;

}

if(document.getElementById("tr_shfb1").style.display=="")

{

if(CheckNewsType_CheckBox()==false) return false;

}

if(CataLog_CheckData()==false) return false;

if(document.getElementById("txtbt").value=="")

{

alert("请输入【标题】");

return false;

}

if(document.getElementById("txtngr").value=="")

{

alert("请输入【拟稿人】");

return false;

}

if(document.getElementById("txthgr").value=="")

{

alert("请输入【核稿人】");

return false;

}

if(document.getElementById("txtqfr").value=="")

{

alert("请输入【签发人】");

return false;

}

// if(document.getElementById("tr_fb1").style.display==""&& document.getElementById("txt_PublishDt").value=="")

// {

// alert("请输入【发布时间】");

// return false;

// }

if(document.getElementById("tr_shfb2").style.display==""&& document.getElementById("txt_KeyWord").value=="")

{

alert("请输入【关键字】");

return false;

}

if(document.getElementById("tr_shfb3").style.display==""&& document.getElementById("txtbjr").value=="")

{

alert("请输入【编辑人】");

return false;

}

if(document.getElementById("tr_shfb4").style.display==""&& document.getElementById("txt_Audits").value=="")

{

alert("请输入【审核意见】");

return false;

}

if(document.getElementById("tr_ts5").style.display=="")

{

if(!document.getElementById("rb_cn").checked&&!document.getElementById("rb_bcn").checked&&!document.getElementById("rb_th").checked)

{

alert("请选择办理方式：采纳、不采纳、退回");

return false;

}

if(document.getElementById("tr_fb2").style.display=="")

{

if(!document.getElementById("rb_fb").checked&&!document.getElementById("rb_bfb").checked)

{

alert("请选择办理方式：发布、不发布");

return false;

}

if(document.getElementById("hide_IsAdd").value=="0") return true;

var msg=JMW_MHW.Web.admin.News.NewsInfo.Add_Infos.CheckTitle(document.getElementById("txtbt").value).value;

if(!msg)

{

return confirm("已经存在该条新闻，是否要继续操作？");

}

return true;

}

</script>

</head>

<body>

类别</td>

 <uc1:CSelectNewsType_ddl ID="CSelectNewsType_ddl" runat="server" />

<div id="bz" runat=server><font color=red>注意：您提交的“政策法规”信息，如属于福建省经贸委发布的文件，应选择“省经贸委文件”类别，并请在编辑建议中提醒编辑同志同时发布在“政策法规”栏目。</font></div>

</td>

</tr>

类别</td>

 <uc1:CSelectNewsType_CheckBox ID="CSelectNewsType_CheckBox" runat="server" /></td>

</tr>

编辑建议</td>

<asp:TextBox runat="server" ID="txt_jy" CssClass="input-css" Width="50%" TextMode="MultiLine" Height=50px></asp:TextBox>

</td>

</tr>

<tr>

标题</td>

<asp:TextBox runat="server" ID="txtbt" CssClass="input-css" Width="50%" Height="60px" MaxLength="400" TextMode="MultiLine"></asp:TextBox><font

color="red" >*</font>

</td>

</tr>

<tr>

文号</td>

<%--<asp:TextBox runat="server" ID="txtwh" CssClass="input-css" Width="25%" onblur="WriteFileNo();"></asp:TextBox>--%>

</td>

</tr>

<tr>

<uc1:CCataLog ID="CCataLog" runat="server" />

</td>

</tr>

<tr>

<font color="red">注：如果信息内容来源于WORD或者是其它的网页，请先将内容拷到记事本后（过滤代码），再拷到编辑器里；或者清除WORD格式后粘贴到编辑器中！请不要输入空格来换行，请使用<img src="../../images/JustifyFull.gif" />来设置文字的对齐方式，以免影响前台页面的显示效果

如添加表格下载，请按<img src="../../images/sc.gif" />

</font>

</td>

</tr>

<tr>

<EditorV2:EditorWebControl ID="FtbComment" runat="server" eWebEditorExtPath="../../Editor/" Height="700px">

</EditorV2:EditorWebControl>

</td>

</tr>

<td class="inputlabel" width="20%">首页面左上角新闻图片</td>

<asp:FileUpload runat="server" ID="tpfile" Width="70%"/>

</tr>

关键字</td>

<asp:TextBox runat="server" ID="txt_KeyWord" CssClass="input-css" Width="50%" MaxLength="200"></asp:TextBox>

<span style="color: #ff0000">注：关键字之间，请用空格格开。<font

color="red"></font></span></td>

</tr>

发布时间</td>

<asp:TextBox runat="server" ID="txt_PublishDt" CssClass="input-css" Width="50%" MaxLength="200"></asp:TextBox>

<span style="color: #ff0000">注：若为空系统默认为当前时间，时间格式:2007-9-6 8:25:36。</span></td>

</tr>

<tr>

拟稿人</td>

<asp:TextBox runat="server" ID="txtngr" CssClass="input-css"></asp:TextBox><font

color="red">*</font></td>

核稿人</td>

<asp:TextBox runat="server" ID="txthgr" CssClass="input-css"></asp:TextBox><font

color="red">*</font></td>

签发人</td>

<asp:TextBox runat="server" ID="txtqfr" CssClass="input-css"></asp:TextBox><font

color="red" >*</font></td>

</tr>

编辑人</td>

<asp:TextBox runat="server" ID="txtbjr" CssClass="input-css" Width="15%" MaxLength="200"></asp:TextBox><font

color="red" >*</font>

</td>

</tr>

审核意见</td>

<asp:TextBox runat="server" ID="txt_Audits" CssClass="input-css" Width="50%" MaxLength="200" Height="80px" TextMode="MultiLine"></asp:TextBox><font

color="red" >*</font>

</td>

</tr>

<asp:RadioButton ID="rb_cn" runat="server" Text='采纳' GroupName="tt"/>   <asp:RadioButton ID="rb_bcn" runat="server" Text='不采纳' GroupName="tt"/>   <asp:RadioButton ID="rb_th" runat="server" GroupName="tt" Text='退回'/>

</td>

</tr>

<asp:RadioButton ID="rb_fb" runat="server" Text='发布' GroupName="t" />   <asp:RadioButton ID="rb_bfb" runat="server" Text='不发布' GroupName="t"/>

</td>

</tr>

<asp:Button ID="btn_Save" runat="server" Text="保存" CssClass="submit_btn"

OnClick="btn_Save_Click" />  

<asp:Button ID="btn_Submit" runat="server" Text="提交" CssClass="submit_btn"

OnClick="btn_Submit_Click" />  

</td>

</tr>

</table>

</form>

</body>

</html>

20 正则表达式

var aUsage = { "int": "^([+-]?)\\d+$", //整数

"int+": "^([+]?)\\d+$", //正整数

"int-": "^-\\d+$", //负整数

"num": "^([+-]?)\\d*\\.?\\d+$", //数字

"num+": "^([+]?)\\d*\\.?\\d+$", //正数

"num-": "^-\\d*\\.?\\d+$", //负数

"float": "^([+-]?)\\d*\\.\\d+$", //浮点数

"float+": "^([+]?)\\d*\\.\\d+$", //正浮点数

"float-": "^-\\d*\\.\\d+$", //负浮点数

//邮件

"email": "^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$",

"color": "^#[a-fA-F0-9]{6}", //颜色

"url": "^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$", //联接

"chinese": "^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$", //仅中文

"ascii": "^[\\x00-\\xFF]+$", //仅ACSII字符

"zipcode": "^\\d{6}$", //邮编

"mobile": "^0{0,1}13[0-9]{9}$", //手机

"ip4": "^\(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))$", //ip地址

"notempty": "^[^ ]+$", //非空

"picture": "(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$", //图片

"rar": "(.*)\\.(rar|zip|7zip|tgz)$", //压缩文件

"date": "^\\d{4}(\\-|\\/|\.)\\d{1,2}\\1\\d{1,2}$" //日期

};

\d{5}(-\d{4})? 美国邮政编码

(($\d{3}$ ?)|(\d{3}-))?\d{3}-\d{4} 美国电话号码

----------------------------------------------------------------------------------------------------------------------------------------------------------------

19。JS字符串处理的一些函数：

函数：split()

功能：使用一个指定的分隔符把一个字符串分割存储到数组

例子：

str=”jpg|bmp|gif|ico|png”;

arr=theString.split(”|”);

//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组

函数：John()

功能：使用您选择的分隔符将一个数组合并为一个字符串

例子：

var delimitedString=myArray.join(delimiter);

var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);

var portableList=myList.join(”|”);

//结果是jpg|bmp|gif|ico|png

函数：substring()

功能：字符串截取，比如想从”MinidxSearchEngine”中得到”Minidx”就要用到substring(0,6)，

去掉字符长最后一个字符的方法：str.substring(0,str.length-1)；

函数：indexOf()

功能：返回字符串中匹配子串的第一个字符的下标

var myString=”JavaScript”;

var w=myString.indexOf(”v”);w will be 2

var x=myString.indexOf(”S”);x will be 4

var y=myString.indexOf(”Script”);y will also be 4

var z=myString.indexOf(”key”);z will be -1

20 JS中关于在打开新窗口的窗口的属性设置等。

function pop(Url)

{

window.open(Url,'', width=800,height=560,scrollbars=0,status=1,top=30,left=280') }

</script>

上面是js代码，下面是HTML里面代码：

<a href="javascript:pop('GuideAdd.aspx?PID=<%# Eval("PID") %>')" title="编辑信息">编辑</a>

或者

<a href="#" onclick="javascript:pop('GuideAdd.aspx?PID=<%# Eval("PID") %>')" title="编辑信息">编辑</a>

注意: 2种写法中的 <a> 中不能有属性target="_blank" 否则会出错。

21.js取客户端ID 时，有设计的控件的用下面取ID值：

var id = document.getElementById('<%= ddl_zzfgsshy.ClientID%>')

否则一般可以直接传页面的ID

document.getElementById("tr_ddl_zzfgsshy")

码农公寓

相关文章