文档章节

【嘉兴东臣php】HTML+CSS+JS基础学习周总结

林酥奇奥
 林酥奇奥
发布于 2015/12/11 21:26
字数 1804
阅读 29
收藏 0
点赞 0
评论 0

   第一周学习了XML CSS JS三大块的内容,自己对于这三大块的内容一开始只是模模糊糊的感觉,基本写不出一个像样的注册登录页面来.一个多星期的学习让我觉得自己把零散的知识整合到一起。知道了XML就是标准化的HTML,HTML就是一个框架结构,而CSS就是表现形式,JS就是行为,三者合起来组成了一个非常炫酷的网页。

     第 二天老黄教了盒子模型。盒子模型最重要的三个元素:外边距+内边距+边框。其他包括定位,边框设置透明度(opacity:0.2)设置,层的设置(z- index:-1),清除内边距、清除外边距 例如 body{margin:0px;padding 0px;}(基本上都是工作上的网站用法).

     第三天学习了CSS部分的内容,绝对定位和相对定位是个很纠结的问题,不过纠结了一天终于中晚上搞定了。属性background-attachment:随背景图片滚动,fixed不滚动,scroll滚动,一般设置为fixed。

     第 四天学习了JS,JS是服务端不需要进行编译的脚本语言。学习了几种弹框的函数。null ,undefined ,NaN   1、获取不到这个相关属性值,比如找不到选择器里的值得时候。就会有null也就是空值。2.Undefined获取不到这个属性的时候,或者一个相关的 变量没有赋初始值就输出的时候。所以就会有Undefined的情况出现。3、NaN通常为在做运算符操作的时候,无法确认数值的时候(比如字符串和整形 相乘时),为NaN, 注意:+ 在操作字符串的是起的是链接的作用。

   第五天教的新内容不多,基本教的以前掌握了差不多,一天讲最多的就是流程控制,这种东西很容易把人绕进去,所以我觉得学这块适合自己看书慢慢领悟,这样效率更高。

一.XHTML

1、XHTML 就是XML和HTML的结合体,X代表可扩展的。简单的说XHTML就是严谨规范化的HTML语言。
2、XML,XML其实是一种标记性的语言。例如:
<break></break>,<hello><rose></rose></hello>
3、XHTML 有以下几个特性:
    1、有头就有尾,用<>表示出来。
    2、层次化的东西,一定要正确,不要颠倒。
    3、所有的属性和元素都要小写。
    4、空元素,也要有结束标签 例如<br/><hr/>
    5、多用ID,少用Name
4、visibility: hidden; 设置元素不可见
5、background-repeat:no-repeat  背景不重复
6、整理一个登录页面完成的步骤(参照renren.com):
    1、定义列表 <dl><dd></dd></dl>
    2、在列表的相关的项里面加入input 文本框
    3、设置文本框的样式,height,width,padding,margin,font-size等
    4、设置dd的样式
    width,height等。注意设置了dd样式一定也要算好input文本框的样式,因为dd里面嵌套了至少一个input
    5、接下来

的是按钮,按钮只需要遵守dd的基本样式,并且设置好背景颜色即可。
    6、验证码:注意验证码的dd列表,有两部分组成:文本框和验证码图片,注意分配宽度,另外,要想两个控制在一行,请设置验证码图片 float:right;另外需要注意:文本框不能太宽,可能会把验证码挤掉,最重要一点一定要限制dd的宽度,不然会在屏幕的最右边去了。
    7、边框,border,注意:设置相关的width和高度,另外最好设置一个背景图片或者颜色,最好设置一个内边距padding,因为边框和控件最好有距离。
    8、设置这个边框,float:right
    9、设置body的背景图片:background-image:(url:图片链接)。

二.CSS(盒子模型)

1、盒子模型
     盒子模型顾名思义就是像盒子,它包括,外边距(margin),内边距(padding),边框(border),详细请参加firebug中的盒子模型的图例。
2、clear:both  清除浮动,由于float浮动会造成所有的元素都会在一行,因此清除的话可能会达到换行的效果。
3、opacity: 0.2(表示20%的透明度); 透明度,一般设置在层里。
4、z-index: 数字。数字越大,显示在越上层,可以表示负数。
5、border-top-style: 上边框的样式
     border-top-width: 上边距的粗细
     border-top-color: 上边框的颜色
     border-top: 上边框
6、border: 10px inset red; 综合设置,相关的样式 边框粗细,样式,颜色,注意只能综合设置,不能设置单一。
7、boder-style: dashed 虚线 dotted 点线
solid 实线 none 不显示
8、background-position: 2px 0px; 图片定位,注意两个参数表示为 x 和 y。注意设置这个块元素的宽和高。
9、font: 36px 微软雅黑; 设置字体的复合属性,大小和字体
10、负数之美:margin 是可以使用负数,也就是相反的反向,padding 不可以使用负数。
11、清除内边距、清除外边距 例如 body{
     margin:0px;padding 0px;
}  (基本上都是工作上的网站用法)
12、overflow: hidden; 当界面溢出之后的效果,hidden为隐藏,还有一种常用就是scroll
13、margin: 0 auto 水平居中,但是要注意:因为设置的是外边距,因此最好是设置div里面的块元素。
14、background-repeat:背景是否平铺。repeat 平铺,no-repeat 不平铺,repeat-x 横轴平铺,repeat-y 纵轴平铺

三:JS

学习JS,了解基本的JS语言。包括函数的定义,确认框和弹出框等等。本来对运算符的返回值有些懵懂,现在学过之后已经可以领悟。
今天还学了全局和局部变量的作用域。变量的定义以及常量。感觉回到大一学C的状态。但是JS和C有些语法又不太一样,容易混淆,所以还得慎重对待学习,不能大意。

脚本语言:省略编译等过程的语言比如JS。

var 只是定义变量,不定义类型,由编译器定义类型
比较运算符比较时会尽量转化成接近的类型进行运算

null ,undefined ,NaN
           1、获取不到这个相关属性值,比如找不到选择器里的值得时候。就会有null也就是空值。
           2、获取不到这个属性的时候,或者一个相关的变量没有赋初始值就输出的时候。所以就会有Undefined的情况出现。
           3、NaN通常为在做运算符操作的时候,无法确认数值的时候,为NaN, 注意:+ 在操作字符串的是起的是链接的作用。

如果强制让一个字符串运算的话,结果是NaN,就是特指未知的值。
parseInt() 将其他类型转化为整型,注意转化整型是从左往右,取出全部的整型,当遇到第一个非整型的值时结束。如:“101a1” 取出的是 101



© 著作权归作者所有

共有 人打赏支持
林酥奇奥
粉丝 1
博文 8
码字总数 11361
作品 0
温州
【嘉兴东臣php】JS BOM和DOM学习周总结

一.集合 打印数组的两种方法: (未知长度) var list= [2,4,6,8,10]; for(var i=0;i<list.length;i++){ console.log(list[i]); } (超出数组长度,数组值为undefined) var list= [2,4,6,8...

林酥奇奥 ⋅ 2015/12/19 ⋅ 0

上海交通大学继续教育学院(网络教育)上课时间表

上海交通大学继续教育学院(网络教育)上课时间表 专业: 2017 秋业余制专升本计算机科学与技术 一、 上课时间表: 9 月 4 日正式开学(第一周) 说明: 1、 上课地址为: 法华镇路 535 号南楼...

春天的竹笋 ⋅ 01/01 ⋅ 0

非技术问题,前辈们,帮忙解惑,感激不尽

我是一个大三的学生,明年四月份左右就要开始找实习了。 我之前做过一些正规项目主要有: 我用c#.net做过wp上的两个软件,参加过微软创新杯,后台是webservice,但是比赛结果不佳;还做过桌面...

GatsW ⋅ 2013/11/03 ⋅ 37

php, 不使用模板引擎,如何实现前端和后端协作?

看了一会smarty感觉有点难度,php,不使用模板引擎。 如何实现前端和后端协作?我想把后端的代码先写好,然后再来写前端的工作html+css+js。

Helloall ⋅ 2014/08/03 ⋅ 18

请问一个web开发的问题,请指点~

如何让前端html+css+js开发和后端php+pgsql开发结合起来???这两者要如何结合起来?新学,对这个有点模糊,请各位前辈指点。~

Helloall ⋅ 2014/08/03 ⋅ 2

貌似好久没更新博客了

问渠那得清如许,为有源头活水来。最近似乎老毛病又犯了...o(╯□╰)o... 今天去面试python开发,其实是数据抓取。创业公司,做o2o,服装方面的,面试有些惨不忍睹啊。在纸上写代码,错误百出...

明天以后 ⋅ 2014/09/28 ⋅ 0

PHP基础学习之SPL Autoload机制

PHP基础学习之SPL Autoload机制 果冻想2018-03-172 阅读 PHP 前言 上一篇文章总结了PHP中的 机制。这一篇是上一篇的姊妹篇。关于 现在基本都被抛弃了,使用的越来越少了,但是语言的发展都是...

果冻想 ⋅ 03/17 ⋅ 0

OSC 招聘( 0x12 期-那些小而美的公司 )

被彭博商业周刊称为「硅谷人脉王」的LinkedIn创始人里德·霍夫曼最著的书——《联盟》是一本谈论当今这个时代雇主与雇员的关系的书。当今时代的雇主和雇员是什么关系?即使再天真的雇员,也不...

oschina ⋅ 2016/06/22 ⋅ 3

App跨平台开发框架分析

所谓的跨平台app开发就是一套代码写完以后可以多端发布运行到各个平台,比如:安卓、iOS、web。 原生开发是一对一的,安卓、iOS需要分别写两套代码,学习成本高、开发成本高、后期维护麻烦;...

yiranhaiziqi ⋅ 2017/09/11 ⋅ 0

运维与开发的深思

工作后,发现已经没有当初那种激情去坚持写日志了,或许是因为工作繁忙,或许是因为自己懒惰了,又或许是实在没什么东西可以写。最近有一些感触,趁着周末还是抽空记录一下吧,最近跟师弟闲聊...

10730 ⋅ 2014/08/31 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【elasticsearch】 随笔 Date datatype

一。时间类型的本质 首先json是没有时间类型的,对于es来说,时间类型的标示可以是下面三种情况 1.一个时间格式的字符串,如:"2014-11-27T08:05:32Z","2015-01-01" or "2015/01/01 12:10:3...

xiaomin0322 ⋅ 26分钟前 ⋅ 0

阿里云资源编排ROS使用教程

阿里云资源编排ROS详细内容: 阿里云资源编排ROS使用教程 资源编排(Resource Orchestration)是一种简单易用的云计算资源管理和自动化运维服务。用户通过模板描述多个云计算资源的依赖关系、...

mcy0425 ⋅ 29分钟前 ⋅ 0

适配器设计模式

1、适配器模式 把一个类的接口变换成客户端所期待的另一种接口 使原本因接口不匹配而无法在一起工作的两个类能够在一起工作 分为类的适配器模式和对象的适配器模式 2、类适配器模式 类的适配...

职业搬砖20年 ⋅ 33分钟前 ⋅ 0

npm操作报错 _stream_writable.js:61

有一天 不知道什么原因(估计和node的版本有关),无论你做什么npm的操作 都会报错/usr/local/lib/node_modules/npm/node_modules/readable-stream/lib/_stream_writable.js:61 这时候只要执...

lilugirl ⋅ 37分钟前 ⋅ 0

Eclipse安装插件的几种方式

Eclipse魅力之一就是支持可扩展的插件,来丰富自身的功能,这种方式也是建立在开源思想之上的。具体使用什么方式去安装插件,要看我们拿到的是什么。 1. 拿到的是一串URL,如http://subclips...

GordonNemo ⋅ 39分钟前 ⋅ 0

div图片叠加

css实现代码如下: <div style="position: relative;"><!--这个层为外面的父层,需设置相对位置样式--> <div style="position: absolute;"><!--子层,需设置绝对位置样式--> <i......

niithub ⋅ 40分钟前 ⋅ 0

作用域slot

如果父组件需要使用子组件中的内容怎么办,比如父组件需要控制子组件的显示 <div id="root"><child><template slot-scope="props"><h1>{{props.item}} <div>编辑</div></h1><......

金于虎 ⋅ 43分钟前 ⋅ 1

HongHu commonservice-eureka 项目构建过程

上一篇我们回顾了关于 spring cloud eureka的相关基础知识,现在我们针对于HongHu cloud的eureka项目做以下构建,整个构建的过程很简单,我会将每一步都构建过程记录下来,希望可以帮助到大家...

明理萝 ⋅ 46分钟前 ⋅ 1

xml和对象的相互转化

@Data//setter和getter方法,toString和equals,hashcode方法@EqualsAndHashCode//代表重写equals和hashcode方法@XmlAccessorType(XmlAccessType.FIELD)public class Classroom {@X......

拐美人 ⋅ 46分钟前 ⋅ 0

tableView cell的高度 分组头部尾部的高度 自适应

@property (nonatomic) CGFloat rowHeight; // default is UITableViewAutomaticDimension@property (nonatomic) CGFloat sectionHeaderHeight; // default is UITableViewA......

娜一片蓝色星海 ⋅ 47分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部