webpage种种笔记

有关于Div_Css布局，JS_Html网页制作的种种笔记

两本书——《CSS网站布局实录》《javascript征途》，一个网站——W3school，大概的翻阅浏览了一下，记录四部分如下：

目录

目录 (1)

张淳老师Notes (1)

Html (1)

Css (2)

Javascript (4)

摘录 (6)

W3shool (6)

《CSS网站布局实录》 (7)

案例Model (8)

Question (11)

张淳老师Notes

Html

一、基本规范

二、元素分类

块状元素：可定长宽高

Div h1-h6 p pre ul/li/ol form fieldset legend noframes noscript

内联函数：紧挨着

A b ado big br button cit code dfn em i img input kbd label map object q samp script select

small span strike strong sub sup textarea tt var

三、常用元素

div

span

p

h1-h6

ul li ol

dl dt dd

img scr alt

table tr td

form

method: GET POST action:

input text(设定name值) password hidden reset checkbox（radio）image file （文

件上传）button and so on

Css

1Chapter

一、使用方法：选择符{属性：值}

二、在网页中应用样式CSS

1、内敛样式

2、内部样式

3、外部样式

三、前置id class

1、类型选择符

2、*

3、#p

4、.p

5、包含选择符div span

6、子对象选择符div>p>span>#a1/span>#a1

7、相邻选择符+

8、属性选择符p[class]

9、属性值空格匹配

10、前置匹配^ p[class^=”0”]

11、后缀匹配$ p[class$=”0”]

12、子字符匹配* p[class*=”0”]

13、连字符匹配

群组选择符p,ul{....}

伪类选择符:link/:visited/:active/:hover/:focus/:first-child

对象：fisrt-letter :fisrt-line

2Capter

一、常用的布局属性div 随时调用

Height

Width

Postion: relative/absolute/fixed/static（default）

○1top○2left○3right○4botton○5z-index:0 default

二、max-height/min-height/max-width/min-width

三、float:left,right clear:left/right/both/botton/top

四、overflow hidden –x –y

五、inline(只有块状元素有长宽大小)/block/inline-block

六、display none visible\

visibility:hidden visible

Margin 外边距

三要素Padding内编剧

Border 边框

3Capter

常用值

一、颜色

二、绝对单位in cm mm

三、相对单位em ex{代表一个小写x的高度} px像素pt（屏幕变大不变其值）pica

四、百分比width 30% 相对于页面的宽度

一、URL 关于字体

二、关于字体大小font-size

三、其他字体样式

Font-weight:normal/bold/bolder/lighter

Font-style:normal/italic/oblique 后两种斜字体

Text-transform:capitalize首字母大写/uppercase/lowercase/inerit继承

Text-decoration:none normal overline underline blink and so on

Font缩写：font：font-style font-variant font-weight font-size [/line-height] font-family *当line-height不设定时，行高不会从父级继承，而是default 1

段落排版

一、首行样式

Text-indent: 首行缩进em

二、对齐

Text-align:center left right

Vertical-align:

三、行距

Line-height

Overflow:visible auto hidden scroll

White-break:normal break-all keep-all

Word-warp:normal/break-word

文本流向

1.框架layout-flow:

2.Writing-mode:lr-tb/tb-rl

3.Direction:rtl/ltr/inherit

4.Input-align:right

5.Unicode-bid:normal/bidi-overirde/embed

背景background

1．Background color image:url() repeat –x –y atachment: scroll/fixed position:

5Capter

继承

一、不具有继承性的属性

二、优先级

简单选择符，内嵌式>class选择符>id选择符

条件编译

一、各种注译

二、修饰关键字

\t \te gt gte

三、例子

列表样式

List-style-image/position/type

滤镜

.....

Javascript

*

,null.....0 逻辑flase 除了undefined=null 其他不等、

2.“123”==123 “0123”==0123 （X）

3.“123”===123

是一个常量

运算符

复杂数据

Object

谈谈事件原理

*事件流

事件冒泡与捕获事件

Document DOM BOM

事件分布

1.UI（BOM）事件onload事件

2.脚本事件

Onover

3.鼠标事件

Onmousedown

Onclick

深入控制事件event对象

6Capter

内置函数

（）unescape（）/encodeURI()decodeURI()/

(“”)

(“”) 确定窗口

（””,””）

（）数

（）当成公式算出来

7....

1.math对象

2.date对象

一个延迟的例子：

基本数据类型的对象表现

1.Number 对象

2.属性.prototype

3.方法

4.String

常用eg charcadeat/indexof/lastindexof/match(regexp)/search(regexp)/slice()/split()/..... 5.其他对象

数组array 1.属性length/prototype 2.方法.....

6.Windows对象BOM？

属性：docment history navigator

方法：alert prompt open settimeout setinterva confirm focus blur

Bom？

7.Docmnet 对象

属性：title bgcolor fgcolor location cookie

方法：open close focus write writh

8.Navigator对象

9.Location 对象

属性：

方法：reload刷新replace

10.History 对象

属性：length

方法：back forword go

11.Screen 对象

属性：...

方法：

DOM——可以把他认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现！

摘录

W3shool

注释：这些标签常用于显示计算机/编程代码。

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

二十 十二

HTML 元素

元数据（metadata）是关于数据的信息。

标签提供关于HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

标签始终位于head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web 服务。

下面的meta 元素定义页面的描述：

下面的meta 元素定义页面的关键词：

设置表单的样式

属性选择器在为不带有class 或id 的表单设置样式时特别有用：

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

bom和dom是完全不同的东西，分别由不同的部门定义，但是dom又参考了bom而来，所以bom又叫做dom 0级，dom现在到了dom 3级，每级都有自己的定义和特色，最终形成现在这个网页的模式。搞清楚了这些，javascript就过关了。

《CSS网站布局实录》

网页=表现css div+结构html +行为js php ajax

Web和web 运用得益于ajax与css的配合

关于解决左右margin问题，在div标签中设定display：inline；

案例Model

一个表单案例

1

一个跳转页面案例

1

2

3

4

5 CONTENT="5;URL=">

6

7

8

9 您将在5秒内被重定向到新的地址。

10

如果超过5秒后您仍然看到本消息，请点击上面的的链接。

11

12

一个视频加载案例

1

2 WIDTH="480" HEIGHT="400"

3 TYPE="APPLICATION/X-SHOCKWAVE-FLASH">

4

一个浏览器版本识别案例

1

2

3

16

一个邮件地址合法性识别案例

1

2

3

24

25

26

30

31

一个定时器案例

1

2

3

13

14

15

19

一个Q JUERY加载使用案例

1

2 $(DOCUMENT).READY(FUNCTION(){

3 $(".FLIP").CLICK(FUNCTION(){

4 $(".PANEL").SLIDE T OGGLE("SLOW");

5 });

6 });

7

8

9

10

请试一下这个J Q UERY 效果：

11

15

请点击这里

16