本周是我进入PHP学习的第一周，本周的学习任务主要是XHTML CSS JS三部分。对于三年纯属混日子的我，几乎可以说对于网页页面设计只会利用Dreamweaver的设计视图利用表单工具拖出一个大致布局。一开始只能简单的做好各种按钮、图片、文本框、复选框。然后就乱起八糟挤在一起不知道该如何进行排版布局，进行排版设置之后也是一个东一个西，整个屏幕各处跑。经过一个星期的梳理学习之后，把零散的知识点整合加上动手操作，可以大致完成一个较为完整、美观的登录、注册页面。

      一、XHTML

      XHTML是一种可扩展超文本标记语言。HTML是一种基本的WEB网页设计语言，XHTML是一个基于可扩展标记语言的标记语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的可扩展标记语言（XML），所以，简单的说XHTML就是严谨规范化的HTML语言。在语法上XHTML语言必须符合XML的格式。

与HTML对比

1.所有的标记都必须要有一个相应的结束标记，即有头就有尾，用<>表示出来。

2.所有标签的元素和属性的名字都必须使用小写。

3.所有的XML标记都必须合理嵌套。也就是说，一层一层的嵌套必须是严格对称，层次化，不能颠倒。

4.所有的属性必须用引号""括起来。

5、空元素，也要有结束标签 例如<br/><hr/>

6、多用ID，少用Name

二、CSS（盒子模型）

      CSS的含义就是级联样式表的意思，简而言之就是风格表的意思，可以通过CSS来进行对页面的外观设置，一般把给CSS文件一个单独的文件，然后在HTML文件中引入，<link type="text/css"  href="url" rel="sheet.css">。

     CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

     选择器通常是您需要改变样式的 HTML 元素；每条声明由一个属性和一个值组成。

      在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。CSS 中 id 选择器以 "#" 来定义；类选择器以一个点"."号显示。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

CSS样式重点：

• 盒子模型顾名思义就是像盒子，它包括，外边距(margin)，内边距(padding)，边框(border)，

• clear : both; 清除浮动

• opacity : 透明度 ; 设置透明度，一般表示在层里面

• z-index：数字 ; 数字越大就显示在越上层 。

• border-top-style: 上边框的样式

• border-top-width: 上边距的粗细

• border-top-color: 上边框的颜色

• border-top: 上边框

• border: 10px inset red; 综合设置，相关的样式 边框粗细，样式，颜色

• boder-style： dashed 虚线  , dotted 点线 ,  solid 实线 ,   none 不显示

• background-position: 2px 0px; 图片定位，注意两个参数表示为 x 和 y。注意设置这个块元素的宽和高。

• font    设置字体的复合属性，大小和字体。

• background-attachment:随背景图片滚动，fixed不滚动，scroll滚动，一般设置为fixed

• position：relative 相对定位，距离最近的元素标签的距离

• position：absolute 绝对定位，距离body的距离

三、JS

    JavaScript 是脚本语言,这门语言可用于 HTML 和 web，插入 HTML 页面后，可由所有的现代浏览器执行。

• function 函数名(){ } 定义一个函数，函数名() 调用了一个函数

• alert(“内容”); 警告框。

• document.write("内容")；写入一个内容，可以加入HTML代码

• confirm(“内容”)； 是确认框

• window.close 关闭窗口 IE

• 关键字：又叫保留字，特指语言中内部所使用单词，这些单词禁止用来做 变量、常量或者函数的名字。

• 标识符：是告诉你 变量、常量或者函数的名字只能 字母、下划线、$符号开头。

• 转义符：可以经常用\ 转义某一个特殊符号 如" 能让脚本正常运行。

• 变量：可以改变的量，如数值、字符串、浮点、布尔 变量用var申明。例如var a = 10；这就是告诉你，一个名字叫a的变量赋了一个初始值为10；注意10为整型。

• 常量：不能改变的量，常量用const申明，例如：const b = 10；这就是告诉你，一个名字叫b的常量值为10，并且这个值不能改变，除非你销毁它。

• document.writeln("<pre>") 支持转义字符，如\n换行等，注意：必须在<pre> </pre> 之间写转义。

• undenfied 是指找不到某一个对象的属性或者某一个变量，没有赋初始值，如:var abc; alert( document.alert );

• null 是指空值，特指找到了属性，但是找不到或者获取不到值。所以为空。

• 全局变量和局部变量，一般发生在作用域之内，全局变量一般是在函数的之外，局部的是在函数的里面的。全局变量可以作用于多个函数，但是局部只能作用于自己的函数里，不能去管别人。

• + 在通常的情况下是表示字符串的连接符，例如："a"+"b" 输出的就是ab，

• + 在字符串和任何的类型都是连接符。

• + 在整型之间的是做加法运算符。

• 其他的 - * / 都是运算符，但是注意：如果强制让一个字符串运算的话，结果是NaN，就是特指未知的值。

• parseInt() 将其他类型转化为整型，注意转化整型是从左往右，取出全部的整型，当遇到第一个非整型的值时结束。如：“101a1” 取出的是 101

• parseFloat() 将其他类型转化为浮点型。

• 运算符分类 1、算术运算符：+ - * / 2、比较运算符：> < == >= <= 3、赋值运算符：a = b 4、逻辑运算符：&&(同时满足)，||(或，满足一个)，！(非，取反值)。 5、条件运算符：条件 ？条件成立 : 条件不成立注意：1、比较运算符返回，布尔类型也就是true或者false。 2、注意：&&(与)运算符，如果两个数比较的话，返回后者，注意：同时满足才会满足。3、注意：或运算符,如果两个数比较的话，或运算符的特点就是满足一个就是满足，后面的相当于不需要看，所以只要前面满足，返回就是前面。

• 流程控制语句：

• if(表达式){JavaScript 语句1} else  {javascript语句2;} 

• For(初始化；条件；增量或减量) {JavaScrip语句;}   注意嵌套for的情况，外面循环一次，里面的for要循环N次。

• While(条件)  {JavaScrip语句;}  例如：while(条件){

循环操作

}

注意：不要死循环，切记不到万不得已，不要写true。有个限制才会从while循环里出来。

        do..while：也是循环写法和while的区别就是：do..while 先执行一次再判断条件，while先判断条件，再看是否执行。

• Switch(表达式){case 常量1：javascript语句1；break；} 例如：switch(){

case 0:

case 1:

default:

}

       注意：default用于默认情况，也就是都不满足的情况下执行。

break：在英文意思是打破，在程序中的意思是跳出当前循环。

contiue：在英文意思是继续，在程序中的意思是跳出当前循环，进入下一个循环。

四、自我小结：

在整体布局方面还需要多加练习，提高操作熟悉度，在JS里面的逻辑运算比较绕！++i；i++还是有一定纠结程度！

转载于:https://my.oschina.net/9979187/blog/543473

• 点赞
• 收藏
• 分享
• 文章举报