WEB开发基础学习总结第二阶段任务:学习掌握HTML、CSS、JavaScript等与web开发相关的基础知识。
在第二阶段的学习中,主要都是针对web开发基础的知识,其中html 用于来表现网页的结构与内容,css用来控制页面的外观和表现,javascript用来控制页面的行为。
其中分别针对每一部分分别总结如下:HTML的学习总结:(1)、HTML、XHTML的不同:①XHTML中属性名称必须小写;②XHTML属性值必须加引号③XHTML属性不能简写;④XHTML在属性中增加了ID属性,它可以取代name的功能;⑤XHTML DTD 定义了强制使用的 HTML 元素。
总的来说,XHTML比HTML更加严格与规范。
它只着重强调用来表现网站的结构而非样式,样式的内容交由CSS来控制。
(2)、HTML中注释的形式是:<!—注释的文字-->,注释部分的内容,将不会显示在网页中。
(3)、HTML中的标签有两种形式:①带结束标记的标签,如:<a></a>,<p></p>etc。
②不带结束标记的标签,如:<br />,<hr />etc。
在标签内部,可以是允许的属性=“值”对出现。
最重要的几个标签如下:<html><head></head><body></body></html><html></html>标签在文档的最外层,其它所有标签都在它的内部,它表示该文档是由html语言写的。
<head></head>它是头部标签,它其中的内容是不会被网页显示在正文中的,常常在其中插入标题,或者说明文件的一些公共属性,例如内部样式表的定义,外部样式表的导入,javascript的编写,外部javascript脚本的导入。
<body></body>标签是文本的正文,它其中的内容将显示在网页之中。
(4)、HTML元素具有四种形式:①空元素,如<br />它只是起到换行的作用,没有属性,也不能跟任何属性;②带有属性的空元素,如<hr color=”blue” />,与空元素相对应,这类元素自然就是具有属性,但是无法体现任何元素;③带有内容的元素,如<title>XXXX</title>,它表示该标签没有属性,但是在开始标签与结束标签之间可以插入元素;④带有内容和属性的元素,如<a href=”#”>链接</a>,它表示标签内部可以有多个属性,在开始标签与结束标签之间可以插入元素。
(5)、有一些特殊的字符,在HTML中不能直接用键盘上的键来表示,像不间断空格,回车,还有html中的保留字等都需要引用的方式才能输入。
如不换行空格: 。
(6)、常常使用到的标签:①<p></p>用来表示段落的标签,②<ul><li></li><li></li></ul>列表的建立,还有<ol></ol>等等,其中<dl></dl>内部标签不是<li></li>而是<dt></dt>、<dd></dd>③还有就是表格的标签,一般形式是:<table></table><caption>表格的标题</caption><tr>表格的一行</tr><th>用于定义表头</th><td>用于定义单元格</td>④<form></form>表示创建表单,其中有两个重要的属性:method属性指定向服务器发送数据时使用的HTTP方法,可以是get或者post(get方法提交表单时,提交的数据被附加到URL中,作为URL的一部分发送到服务器,缺乏安全。
Post方法是将菜单中的信息作为一个数据块单独发送到服务器,更加安全)。
另一个属性anction用来表示对表单进行处理的脚本的地址,即表示表单提交到服务器后,由谁来处理这些数据。
在<form>标签中,会用到<input></input>标签,input标签常用到的属性有:type,value。
Type用来制定要创建的控件类型,value指定控件的初始值。
⑤<a></a>,超链接的符号,可以用它的href属性来制定连接到那个位置上去。
⑥<imag></imag>表示嵌入一张图片到网页中。
它其中的属性width,height等可以设置图片显示时候的宽高。
CSS的学习总结:(1)、CSS它的目标就是将结构与表现相分离,也就是让html的标签只专注于定于网页内容的结构,CSS来决定这些网页的内容如何显示。
使用CSS的一大好处就是,简化了网页的格式代码,加快网页的下载显示速度。
同时在进行后期维护的时候,由于结构与表现的分离,更加易于维护。
(2)、CSS中注释的方法是:/*注释内容*/(3)、CSS的选择器分类:①元素选择器:就是某个HTML元素作为选择器,如:a,h1,p,etc;②类选择器,这也是非常常用的一个选择器,它的名字可以任意取,只是在.css文件中定义它的样式时,需要在这个名字前面加一个小黑点,使用它的时候,只需要在html标签中使用class来选择这个样式即可;③ID选择器,它有些类似于类选择器,但又有自身的一些特点,首先,ID选择器前面有一个#号,其次ID选择器的使用时,它需要通过ID属性值来指定,而不是通过class来指定,最后,在一个HTML文档中,ID选择器会使用一次,并且进使用一次;④属性选择器,属性选择器可以根据元素的属性及属性值来选择元素,例如,如果在网页文档中有部分元素包含title这个属性,而我们希望将这些元素都变成红色,以突出显示,这时就可以使用属性选择器简单实现,如:*[title] {color:red};⑤后代选择器,它的别名是包含选择器,其实际效果可以通过这个小例子来进行解释:我只想对<p></p>标签中的em元素引用样式,我可以这样定义:p em {color:red};后代选择器定义时需要注意,样式规则左边的选择器一段包括两个或者多个用空格分隔的选择器(这个选择器可以是其他的任意选择器,而不仅仅是元素选择器)。
⑥子元素选择器,它是相对于后代选择器来讲的,是在其基础上缩小了范围,它只对它后面挨着的元素有效。
样式定义格式:p > em {color:red}⑦相邻兄弟选择器,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,即可使用它。
样式定义格式:h1 + p {color:red}⑧伪类选择器,是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。
如:a:link {color:red}(4)、CSS的样式分为三种:①行内样式,即HTML标签直接使用style属性,它一般用于某个独立的元素。
如:<p style=”color:red; margin:20px”>……</p>。
如果使用了行内样式,一般需要在<head></head>标签内添加:<meta http-equiv=”Content-Style-Type”content=”text/css”>②内嵌样式,它是将<style></style>标签放在<head></head>标签中,如:<style type=”text/css”>P {padding:10px; font-size:16px}</style>③外部样式,这是最建议使用的,因为它将CSS单独保存在一个文件中,通过<link href=”xxx.css” rel=”stylesheet”type=”text/css”>将样式引入进来。
它的优点是可以同时作用于多个页面,而无需重复编写样式,减少了工作量,并且修改时,只需要修改一个.css文件,就可以将整个使用它的页面样式都修改掉。
三种样式的使用顺序在html标签中,如果有多种样式,而规定的样式没有冲突,则叠加,如果有冲突,则最先考虑行内样式,没有的话,再考虑内嵌样式,还没有,就采用外部样式,如果它也没有,就使用html的默认样式显示。
(5)、框模型:padding,border,margin都是可选的,默认值均为0,其中width与height指的是内容区域的宽度和高度,padding,margin,border尺寸的变化,不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
额外需要注意的是:margin的合并,它是指,当两个垂直外边距相遇时,他们将形成一个外边距,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
(6)、CSS定位,它有三种方式,分别是:①相对定位,相对于其默认初始位置,通过设置垂直或水平位置,让这个元素相对于它的起点进行移动。
要进行相对定位,需要在样式中使用:position:relative②绝对定位,绝对定位让元素脱离了文档流,故它不占据空间,定位后生成一个块级元素,而不管原来它在正常流中生成何种类型框。
③浮动,在标准浏览器中,浮动元素脱离了文档流,不占据外围容器空间。
浮动可以向左或者向右,知道它的外边缘碰到包含框或另外一个浮动框的边框为止。
JavaScript的学习总结:(1)、关于javascript的一些语法:javascript是一种弱类型语言,它属于面向对象编程语言。
它也有构成编程语言的一些基本元素,如:数据类型,变量(虽然全部都用var关键字来声明变量,甚至可以不用该关键字),表达式和运算符,数组,控制结构(if(){}else{})和循环结构(for()……),函数,正则表达式等等概念。
其中大部分与其他语言的差不多,只有个别的需要作出说明。
①对象,javascript也属于面向对象编程语言,因此它其中的所有事物都是对象,这点与其他面向对象编程语言相同,一切皆对象(字符串,数值,数组,函数等等)。
当然,虽然javascript有许多内置对象,它也是允许自定义对象的。
对象之中也包含属性与方法,对象访问属性跟方法的方式也与java中的访问方式一样,通过.来进行访问。