文档章节

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

徐徐徐徐徐徐霸气
 徐徐徐徐徐徐霸气
发布于 2015/12/13 15:40
字数 2006
阅读 21
收藏 0
点赞 0
评论 0

      本周是我进入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 常量1javascript语句1break

    例如:switch(){

case 0:

case 1:

default:

}

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

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

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

四、自我小结:

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


© 著作权归作者所有

共有 人打赏支持
徐徐徐徐徐徐霸气
粉丝 0
博文 6
码字总数 11083
作品 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

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

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

oschina ⋅ 2016/06/22 ⋅ 3

PHP基础学习之SPL Autoload机制

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

果冻想 ⋅ 03/17 ⋅ 0

运维与开发的深思

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

10730 ⋅ 2014/08/31 ⋅ 0

App跨平台开发框架分析

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

yiranhaiziqi ⋅ 2017/09/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部