HTML+CSS+JavaScript基础知识

原创 2015年07月21日 13:34:30
第一部分:HTML


一、简介HTML
1、HTML(Hyper Text Mark-up Language超文本标记语言)的缩写(标记:就是用来描述网页内容的一些特定符号)。HTML不是编程语言,而是一种描述性的标记语言,用于描述网页内容的显示方式,比如文字的颜色、大小,这些都是利用html标记来实现的。
2、HTML文档的创建方式:
  • 手工直接编写(例如记事本)
  • 通过图形化的HTML开发软件Dreamweaver
  • 由web服务器上的动态网页程序生成

二、HTML的语法

        HTML最基本的语法就是<标记符>内容</标记符>,标记符通常都是承兑使用的,有一个开始标记和一个结束标记。结束标记只是在开始标记的前面加上一个斜杠/当浏览器打开html文件后,就会理解里面的标记符,然后把标记符对应的功能表达出来。

HTML标记的类型:单标记与双标记

1、单标记

  • <标记名称>:单一型,无属性值。如<br/>
  • <标记名称 属性="属性值">:单一型,有属性值。如<hr  width="80%" />
2、双标记
  • <标记名称>...</标记名称>:没有属性值。如<title>...</title>
  • <标记名称  属性="属性值">...</标记名称>:有属性值。如<body  bgcolor="red">...</body>
3、总结
  • 标记与属性、属性之间以空格分隔
  • 属性不区分先后顺序,且属性不是必须的
  • 虽然在HTML中标记不区分大小写,但在XHTML中所有的标记都必须小写,所以建议所有标记都采用小写

三、HTML文档结构

        所有的网页文件,通常由四对标记来构成文档的骨架,它们是:

        <html>:标识网页文件的开始和结束,所有的html元素都要放在这对标记中

                      <head>:标识网页文件的头部信息,如标题、搜索关键字等

                                      <title>标题</title>:标识文件的标题

                      </head>

                      <body>:标识文件的主体部分

                                    正文

                       </body>

         </html>

(一)、meta标记用于定义文件信息

           meta标记用于定义文件信息,对网页文件进行说明,放置于<head></head>之间

  • 设置关键字:<meta name="keywords" content="value">,多个关键字内容之间可以用逗号分隔。
  • 设置描述:<meta name="description" content="value"/>
  • 设置作者:<meta name="author" content="value"/>
  • 设置字符集:<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
  • 设置页面定时跳转:<meta http-equiv="Refresh" content="2;http://www.itcast.com"/>

(二)、网页主体标记body

1、注释:<!--注释内容-->

2、body属性:

           <body  bgcolor="背景颜色" background="背景图片" text="文本颜色" link="链接文本颜色" vlink="访问过的链接文本颜色" alink="激活的链接文本颜色" leftmargin="zuobianjie" rightmargin="右边界" topmargin="上边界"  bottommargin="下边界">

(三)、字体修饰

1、<font>标记:

            <font  color="文本颜色"  size="字号"  face=""></font>


2、字符格式


3、段落控制标记

            <p  align="对齐方式"></p>

属性名称:align,属性值:left(默认)、center、right

4、段落标题

           <hx  align="对齐方式"></hx>

          x取值[1-6]:hx内的文本对自动加粗显示。

          注:hx针对的对象时段落,font针对的对象时任意文本

5、换行:<br/>换行不换段

6、水平直线:<hr/>


(三)、特殊标记

1、定义一个块引用:使用文本缩进

          格式:<blockquote>...</blockquote>

          属性名称:cite,属性值:url,说明:被引用的地址

2、居中标记<center>内容</center>(被废弃的标签)

3、预格式化:<pre></pre>

4、显示已经格式化好的文字,不加此标记的话,HTML浏览器会忽略所有空格和制表符


(四)、列表标记

1、列表标记的用途:列表标记可以创建一般的无需列表、编号列表,以及定义列表的三种方式。还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。

  • 无需列表:<ul>...</ul>
  • 有序列表:<ol>...</ol>
  • 定义列表:<dl>...<dl>
2、无序列表
  • 语法:<ul  type="项目符号类型">    <li  type="项目符号类型">内容1</li>    <li>内容2</li>       </ul>
          
3、有序列表
  • 语法:<ol  start="列表起点"  type="项目符号类型">   <li>内容1</li>  <li>内容2</li>   </ol>
4、定义列表
  • 语法:
          <dl>----------定义列表
          <dt>标题1</dt>-----------表示一个项目
                    <dd>内容1</dd>------------表示一个项目下的更详细的内容解释
          <dt>标题2</dt>
                    <dd>内容2</dd>
          <dt>标题3</dt>
                    <dd>内容3</dd>
          </dl>


(五)、图片

1、web上支持的图片格式

  • GIF(图形交换格式):GIF格式文件最多只能保存256种颜色。该格式支持透明色,支持动画效果。
  • JPEG(联合图像专家组):改格式不支持透明色及动画,颜色可达1670万种。
  • PNG(网格可移植格式):该格式支持透明色,但不支持动画,颜色从几十种至1670万种。
2、图片标记:<img  src="图片的路径"/>

3、路径:
  • 绝对路径:提供目标文档的完整主机名称、路径信息、及文档全称
  • 相对路径:从当前文档开始的路径
  • 根相对路径:从站点根目录开始的路径,以/开头
          相对路径时,如果当前文档和目标文档位置平行,则直接书写文档全称;如果当前文档和目标文档所在文件夹位置平行,则书写为文件夹名称/目标文档全称;如果当前文档所在位置和目标文档位置平行,则书写为../目标文档全称。



四、表格


(一)、表格结构和属性

1、因为表格中可以包含任何内容,所以在使用DIV+CSS之前,网页设计师是使用表格对网页内容进行排版与布局的

2、表格基本结构:

  • <table>...</table>--------定义表格
  • <tr>...</tr>----------定义行
  • <td>...</td>-----------定义列(单元格)
  • <th>...</th>-----------定义标题栏(文字加粗)

3、表格的属性<table>



4、<table>标签下的边框设置


4、行的属性<tr>


5、列的属性<td>


(二)、表格的结构化

1、结构化格式:

  • <table>
  • <thead>...</thead>---------表头区
  • <thead>...</thead>---------表体区
  • ..........
  • <tfoot>...</tfoot>----------表尾区
  • </table>
2、直列化格式:<colgroup>...</colgroup>


3、表格的标题:<table>   <caption>...</caption>   </table>


五、超链接

           一个网站由多个网页组成的,网页之间通过连接实现相互关联。


(一)、连接的概念

          实现当前文档到目标文档的一种跳转。

(二)、链接语法

          <a  href=连接的目标   title="注释"   target="打开链接窗口的形式">...</a>

  • _blank:在新窗口中打开
  • _self:在自身窗口中打开(默认)
  • _parent:在上一级窗口中打开
  • _top:在本窗口中打开
(三)、链接的类型

1、内部链接:当前文档和目标文档在同一个站点
  • <a  href=目标文档位置及全称>
2、外部链接:当前文档和目标文档不在同一个站点
  • <a  href=URL>
3、E-mail链接:允许访问者向指定的地址发邮件
  • <a  href=mailto:电子邮件地址>
4、局部链接(锚点):跳转到同一网页或其他文档中的指定位置,
  • 创建锚点:<a  name="锚点名称">...</a>
  • 链接锚点:<a  href="#锚点名称">...</a>

5、空链接:就是没有目标端点的链接

  • <a href="#"></a>
例如:


A、设为首页:<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.sohu.com')">设为首页</a>

B、添加收藏:<a href="#" onClick="javascript:window.external.addfavorite('http://www.sohu.com','搜狐')">加入收藏夹</a>


6、脚本链接:是一种特殊的链接,当单机设置脚本链接的文本或图像时,可以运行相应的JavaScript语句。

例如:

<a href=javascript:window.open(“http://www.163.com”)>新浪</a>

  • 关闭窗口:输入javascript:window.close()
  • 打开窗口:输入javascript:window.open ('文件名')

六、表单

(一)、表单的功能

          1、表单的作用是从访问您web站点的用户那里获取信息,访问者可以使用诸如文本框、列表框、单选框及复选框之类的表单元素输入信息,然后单击某个按钮提交这些信息。

          2、客户端和服务器端进行交流的途径。

(二)、表单标记

          1、form标记用于创建一个表单,定义表单的开始和结束,它是一个容器,用于包含其他表单元素,例如文本框、单选框等。表单元素必须写在form标记内才有用。

          2、格式:

                    <form  action=URL(处理表单信息的服务器端应用程序) method=处理表单数据的方法(POST/GET)如果不写默认为GET   name=表单名称>...</form>

          3、表单元素标记:

                    A、单行文本框:

                              <input  name="文本框名称"  type="text"  value="初始值"  size="显示字符数"  maxlength="最多容纳字符数"  readonly="readonly"(设置为只读)  disabled="disabled"(设置为不可操作) />

                    B、密码框:

                              <input  name="密码框名称"  type="password"  value="初始值"  size="显示字符数" />

                    C、多行文本框:

                              <textarea  name="文本框名称"  cols="每行的字符数"  rows="显示的行数"></textarea>

                    D、单选框:

                              <input  name="单选框名称"  type="radio"  value="提交值"  checked="checked"(是否被选中)/>

                    E、复选框:

                              <input  name="复选框名称" type="checkbox"  value="提交值"  checked="checked" />

                    F、标注:

                              <label  for="man">男</label>  <input  type="radio"  name="sex"  value="男"  id="man">

                    G、列表框:

  • 菜单式:

          <select  name="列表框名称">

                    <option  selected="selected"(哪个为初始值就添加selected语句)  value="提交值">列表1</option>

                    <option  value="提交值">列表2</option>

                    ......

          </select>

          分组:<optgtoup  label="分组名称"></optgroup>

  • 列表式
          <select  name="列表框名称"  size="显示的行数"  multiple(如果允许多选则有该命令,否则没有此命令)>
                    <option  value="提交值"></option>
                    ......
          </select>


          H、按钮:

                    <input  type="按钮类型(reset重置表单、submit提交表单、button普通按钮)"  name="按钮名称"  value="按钮显示文本" />

          I、图片按钮:

                    <input  name="按钮名称"  type="image"  src="图片路径" />

          J、隐藏域:

                    <input  name="名称"  type="hidden"  value="提交值" />

          K、浏览框:

                    <input  name="名称"  type="file"  size="显示长度" />

          L、表单外框:

                    <fieldset >...</fieldset>--------定义围绕表单中元素的边框

                    <legend>...</legend>---------legend为fieldset定义标题


七、插入多媒体元素标记

          1、Flash动画的插入

                    

          2、插入MP3音乐

          

          3、插入背景音乐

                    <bgsound  src="音乐文件名及路径"  loop="循环次数" />(如果loop=-1即为无限循环)

          4、插入视频wmv格式

                    <embed  src="tmcq.wmv"></embed>

          5、网络流媒体文件的插入

                    <embed src="http://player.youku.com/player.php/sid/XMzA1MDE5MDMy/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">
                    </embed>

          6、滚动字幕

                    <marquee>滚动的文字</marquee>

  • direction="滚动方向"(left、right、up、down)
  • behavior="滚动方式"(scroll、slide、alternet)
  • loop="循环次数"(若未指定则循环不止,loop=infinite)
  • bgcolor=""  
  • onMouseOver="this.stop()"     onMouseOut="this.start()"
  • scrollamount=""
  • scrolldelay=""

八、框架--实现网页之中嵌套网页

          1、框架的功能:

                    将浏览器划分为不同的区域,每个区域可以包含不同的网页。以实现多个网页在一个浏览器窗口中显示的效果。

          2、框架的格式:

                    写框架时,不需要写body语句。

                    <frameset  rows="行数及行高"  cols="列数及列宽"  framespcing="框架间距"  frameborder="是否显示边框(yes,no/0,1)"  border="边框宽度"  bordercolor="边框颜色">

                              <frame  src="文件地址及名称"  name="框架名称"  noresize="是否允许改变尺寸(true/false)"  scrolling="滚动条显示(yes/no/auto)">

                    </frameset>


          3、内嵌式框架

                    <iframe  src="被嵌套的网页地址及名称"  width="宽度"  height="高度"  frameborder="是否显示边框(0,1)"  scrolling="滚动条显示(yes/no/auto)">

                    </iframe>


九、从html迈向xhtml

          


          1、什么是XHTML?

                    XHTML是The Extensible  Hyper  Text  Markup  Language的缩写,xhtml的意思是可扩展标识语言。

                    XHTML是HTML向XML过度的一个桥梁,Xhtml是基于html的,这是更严密、代码更简洁的HTML版本。

          2、DOCTYPE

                    DOCTYPE是document  type(文档类型)的简写,主要用来说明你用的XHTML或HTML是什么版本。浏览器根据DOCTYPE定义的DTD来解释页面代码,并展现出来。所以,建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分。

          3、XHTML1.0提供了三种DTD声明:

  • 过度的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.0.1的标记(但是要符合xhtml的语法),完整代码如下:
<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML1.0 Transitional//EN"  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标记和属性,例如<br>,完整代码如下:
<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML1.0 Strict//EN"  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML1.0 Frameset//EN"  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

          4、XHTML与HTML的区别:

  • XHTML标签必须被正确的嵌套;
  • XHTML标签必须被关闭;
  • 标签名必须用小写字母;
  • 属性名必须用小写,必有值,值必加引号;

第二部分:CSS

一、Web标准简介

          1、什么是web标准?

                    web标准不是某一个标准,而是由W3C和其他标准化组织指定的一系列的标准集合,包含我们熟悉的HTML、XHTML、JavaScript、CSS等。

          2、web标准的目的?

                    在于创建一个统一的用于web表现层的技术标准,以便于通过不同浏览器或终端设备向最终户展示信息内容。

          3、采用web标准的好处?

  • 提高页面浏览速度:使用css方法,比传统的设计方法至少节约50%以上的文件尺寸。
  • 缩短改版时间,将表现(样式/外观)与内容(信息/数据)相分离:只需要简单的修改几个css文件就可以重新设计一个有成千上万页面的站点。
  • 降低网站流量的费用:带宽要求降低(代码更简洁),成本降低。
  • 更容易被搜索引擎搜索到:提高网站在百度或谷歌上的排名。
  • 内容能被更广泛的设备访问:包括屏幕阅读、手持设备、搜索机器人、打印机、电冰箱等等。
          4、web标准的构成?

                    web标准由三部分组成:
  • 结构(structure)
  • 表现(presentation)
  • 行为(behavior)

          5、理解表现和结构的分离

                    基本的概念:内容、结构、表现和行为

  • 内容:就是制作者放到页面内真正想让访问者浏览的信息。
  • 结构:使内容更加具有逻辑性和易用性(类似于一级二级标题、正文、列表等称为结构)
  • 表现:用于修饰内容外观的样式
  • 行为:对内容的交互及操作效果,如通过JavaScript判断表单提交等



二、CSS简介

(一)、概念

          1、CSS是Cascading  Style  Sheets(层叠样式表)的简称。

          2、更多的人把它称作样式表,顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在你丰富的想象力下千变万化。实际上CSS代码都是由一些最基本的语句组成的。

          3、CSS可以作为HTML、XHTML、XML的样式控制语言。


(二)、CSS语法结构

          1、选择符{  属性:值 }

                    例如:body{ font-size : 12px; }

          参数说明:

  • 选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,如body、h1等;也可以是定义了特定的ID或class的标签,如#main选择符表示选择<div  id="main">,即一个被指定了main为id的对象。
  • 属性(Property):选择符的样式属性,如颜色、大小、定位、浮动方式等。
  • 值(Value):指属性的值。
          注:同时可以为一个选择符定义多个属性,每个属性之间用分号分隔。

          2、CSS长度单位


          3、CSS颜色单位


          4、CSS控制字体


(三)、CSS在网页中的应用方式

          1、内联式样式表:直接写在现有的标记中,如:

                    <p  style="color:red">...</p>

          2、嵌入式样式表:使用<style></style>标签嵌入到HTML文件的头部<head>标记内,如:

                    <style  type="text/css">...</style>

          3、外部链接式:将样式表写在一个独立的css文件中,然后再页面head区<head>标记内用<link>标签调用它,如:

                    <link  href="main.css"  rel="stylesheet"  type="text/css">

          4、导入式样式表:导入式样式表和链接式样式表的功能基本相同,只是语法和动作方式略有不同,同样也将导入式样代码写在<head>标记内,如:

                    <style  type="text/css">

                              @import  url(basic.css);

                    </style>


(四)、CSS选择符类型

          1、类型选择符:就是HTML文档中的元素,如:

                    p{属性:值}

          2、类选择符:可以自定义样式,应用于一个或多个网页元素,类在网页中可以出现多次用于定义重复的样式,类以.开头,后面的名称自己定义,类定以后还需要在网页中加入class=类名称,加以调用。如:

                    .warning{属性:值}

                    <p class="warning">...</p>

          3、ID选择符:与类基本相似,只是以英文#开头,因为ID具有唯一性,所以在网页中只能出现一次,用于定义只出现一次的样式。如:

                    #main{属性:值}

                    <p ID="main">...</p>


(五)、CSS样式的特点

          1、继承:

  • 网页中子元素将继承父元素的样子,例如:要控制段落p中的文字大小,可以直接给body标记家样式。

          2、层叠(覆盖):

  • 网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素中的样式
  • 定义后面的样式会覆盖前面的样式
(六)、CSS样式的优先权

          1、四种方式的优先权:内联式【行内样式】-->嵌入式【内部式】-->连接式【外部式】-->@import【导入式】

          2、CSS优先权:就近原则

                    总结:范围越小,优先权越高;

                                离要修饰目标越近的样式,优先权越高。

          3、选择符的优先权:ID>class>类选择符

(七)、CSS控制文本


(八)、CSS控制链接



三、CSS高级

(一)、CSS选择符的详细使用

          1、类型选择符:

  • 就是html文档中的元素[作用于html标记]。如:p{属性:值}

          2、类选择符:

  • 可以自己定义样式,应用于一个或多个网页元素,类在网页中可以出现多次,用于定义重复的样式。类以英文.开头,后面的名字自己定义,类定以后还需要在网页中加入"class=类名称",加以调用。如:  .waring{属性:值}      <p  class="waring">...</p>

          3、ID选择符:

  • 与类基本相似,只是以英文#开头,因为ID具有唯一性,所以在网页中只能出现一次,用于定义只出现一次的样式。如:  #main{属性:值}   <p  ID=main></p>

          4、通配选择符:

  • 用于定义所有元素。如:*{属性:值}

          5、包含选择符:

  • 所有被e1包含的e2。如:table  td{属性:值}
  • 同时给某个元素应用多个类和ID。如:<p  class="a1  a2"   id="a6">...</p>

          6、选择符分组:

  • 将同样的样式定义用于多个选择符,选择符之间用逗号隔开。如:body,div,p{属性:值}

          7、标签指定式选择符:

                    如果既想使用id或class,也想使用标签选择符,那么,

  • h1#content{}:表示针对所有id为content的h1标签;
  • h1.content{}:表示针对所有class为content的h1标签;

          8、组合选择符:

                    将以上选择符组合使用,那么,

  • h1  .content{}:表示在h1下所有class为content的标签;
  • h1  .content,#content  h1{}

(二)、CSS常用属性

          1、CSS控制边框属性:

功能 语法
设置边框粗细 border-top-width:12px
设置边框样式 border-bottom-style:slide(实线)、dashed(虚线)
设置边框颜色 border-right-color:#000000
设置某一边框的属性 border-边框位置:线宽  线型  颜色
设置四条边的属性 border:线宽  线型  颜色

          2、CSS控制背景:

功能 语法
背景 background:颜色  图片 平铺方式  固定方式  位置
背景颜色 background-color:#ccc
背景图片 background-image:url
背景图片的重复方式 background-repeat:【repeat,no-repeat,repeat-x,repeat-y】
背景图片的依附方式 background-attachment:【scroll,fixed】
背景图片的位置 background-position:top【left、center、right】  center【left、center、right】  bottom【left、center、right】,x坐标y坐标(左上角是0,0,单位是像素px)

          3、CSS控制列表:

功能 语法
列表属性 list-style:list-stylet-ype  list-style-position  list-style-image
列表项目类型 list-style-type:none,disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha
列表项目位置 list-style-position:inside,outside
列表项目图片 list-style-image:url,none

          4、CSS控制元素的尺寸:

功能 语法
设置元素的宽度 width:100px
设置元素的高度 height:100px
设置元素最小宽和高 min-width:50px,min-height:50px
设置元素最大宽和高 max-width:50px,max-height:50px
设置元素的外边距 margin:上  右  下  左
设置元素的内边距 padding:上  右  下  左

四、CSS+DIV布局

(一)、网页元素分类

          1、div是什么?

                    div是一个容器,能放置内容,例如:<div>内容</div>。

                    说明:XHTML中每一个标签对象几乎都可以成为一个容器,例如:<h1>标题</h1>。

                    div是xhtml中指定的,专门用于布局设计的容器对象。CSS布局中,div是这种布局的核心对象,做一个简单的布局只需要两样东西div与css,因此也有人称CSS布局为div+css布局。

(二)、盒子模型

          1、盒子模型:W3C组织建议把所有网页中的对象都放到一个盒子中。

  • 设计师可以通过创建定义来控制这个盒子的属性,这些对象包括段落、列表、标题、图片及层<div>。

          2、盒子模型主要定义这四个区域:内容(content)、填充(padding)、边框(border)、边界(margin)。

          3、整个盒子模型在页面中所占的宽度:左边界+左边框+左填充+内容+右填充+右边框+右边界。

          示意图如下:

                    

          3D示意图如下:

                    


(三)、CSS布局

          1、元素的分类:不同的元素在文档类型定义DTD(Document  Type  Difinition)内有默认的分类,可以通过css修改分类的定义。

                    【1】、块级元素:{display:block}

  • 每个块级元素都从一个新行开始,而且其后的元素也需要另起一行开始,如:div[层]、标题、段落、表格、body等;
  • 块级元素只能作为其他块级元素的子元素,而且需要一定的条件;

                    【2】、内联元素:{display:inline}

  • 内联元素不需要在新行显示,而且也不强迫后面的元素换行,如:a、em、span等;
  • 内敛元素可以作为任何元素的子元素;

                    【3】、隐藏元素:{display:none}

  • 当某个元素被设置为display:none时,浏览器会完全忽略这个元素,此元素将不会被显示;

          2、浮动与清除浮动

          【1】、浮动(float)

                    浮动(float)是CSS实现布局的一种方式,包括div在内的任何元素都可以浮动的方式展示。

值:

  • none:不浮动
  • left:对象向左浮动,而右侧的内容流向对象的右侧
  • right:对象向右浮动,而左侧的对象内容流向对象的左侧

          【2】、浮动的清理(clear)

                    清理时浮动的又一个有用的工具,实现拒绝浮动对象对后面对象的影响。

技巧:

  • 当浮动了许多元素之后,突然需要另起一行时,可以制作一个空白的div标签,为其设置clear:both清楚左右的浮动

          【3】、溢出(overflow)

                    设置当前对象的内容超出其指定高度和宽度时,如何管理内容。

  • visible:默认值,不剪切内容,也不添加滚动条;
  • auto:在必须时,对象内容才会被剪切,或显示滚动条;
  • hidden:不显示超过尺寸的内容;
  • scroll:总是显示滚动条;

          【4】、定位(position)

                    设置对象的定位方式。

  • static:静态定位,页面中没一个对象的默认值;
  • absolute:绝对定位,将对象从文档流中分离出来,通过设置left、right、top、bottom四个方向,相对于父级元素进行绝对定位;
  • relative:相对定位,对象不从文档流中分离出来,通过设置left、right、top、bottom四个方向,相对于自身位置进行相对定位;

          4、CSS布局方式

  • 默认文档流方式:以默认的html元素的结构顺序显示;
  • 浮动布局方式:通过html元素的float属性显示;


  • 定位布局方式:通过设置html元素的position属性显示;

#box{

          width:300px;

          height:300px;

          position:relative;

}

#first{

          width:300px;

          height:300px;

          position:absolute;

          top:10px;

          right:20px;

}

#second{

          width:300px;

          height:300px;

          position:absolute;

          top:100px;

          left:200px;

}

<div  id="box">

          <div  id="first">...</div>

          <div  id="second">...</div>

</div>


          5、清除浮动的方式

                    【1】、额外标签法:w3c推荐,在浮动元素的最后添加一个空标签

.clear{

          clear:both;

}

<div  id="box">

          <div  id="first">...</div>

          <div  id="second">...</div>

          <div  class="clear">...</div>

</div>

          【2】、overflow方法:

#box{

          width:300px;

          height:300px;

          overflow:hidden;

}

<div  id="box">

          <div  id="first">...</div>

          <div  id="second">...</div>

</div>

          【3】、利用伪对象after方法(网上最流行的清除浮动代码)

.clearFix:after{

          clear:both;

          display:block;

          visibility:hidden;

          height:0;

          line-height:0;

          content:"";

}

.clearFix{zoom:1}


第三部分:JavaScript


一、JavaScript简介

          1、JavaScript概述

           JavaScript是基于对象和事件的脚本语言。

            特点:

  • 安全性(不允许直接访问硬盘),他可以做的是信息的动态交互。
  • 跨平台性。(只要是可以解释执行JS的浏览器都可以执行,和平台无关)

          2、JavaScript和Java的不同之处

  • JS是Netscape公司的产品,Java是SUN(现在是Oracle)公司的产品。
  • JS是基于对象,Java是面向对象。
  • JS只需要解释执行,Java需要先编译成字节码文件,再执行。
  • JS是弱类型,Java是强类型。

          3、JavaScript和HTML结合的方式

          想要将其他代码融入html中,都需要以标签的形式

  • 代码放在<script>...</script>标签中
  • 使用script标签的src属性引入一个js文件,方便后期更新,及维护。例如:<script  type="javascript"  src="test.js"></script>

二、JavaScript语法

          1、变量

              通过关键字var来定义,弱类型即是不用指定具体类型。

              例如:var  x  =  12; x  =  "hello";

              注:JS中特殊的常量undefined,当变量没有初始化就被使用,该变量的值就是undefined(未定义)。

          2、语句

  • 判断结构(if语句)

                     注:在JS中0就是false,非0就是true(通常用1表示)

  • 选择结构(switch语句)

                     注:没有具体类型限制

  • 循环结构(while语句,do...while语句,for语句)

          3、函数

  • 一般函数

                     格式:

                               function  函数名(形式参数...)

                               {

                                        执行语句;

                                        renturn  返回值;

                               }

                     函数是多条语句的封装体,只有被调用才会被执行。

                     注意:调用有参数的函数,但没有给其赋值,函数一样可以运行;或者调用没有参数的函数,给其传值,也一样运行。简单地说,只要写了函数后面的小括号,函数就可以运行。

                     其实,在函数中有一个参数数组对象(arguments),该对象将传递的参数都封装在一个数组中。例如:

                                 function  demo(){

                                          alert(arguments.length);

                                }

                                demo(123,"hello",true);//调用函数,弹出对话框的结果为3。

                      通过for循环遍历该数组,如:

                               for(var  x=0;x<arguments.length;x++){

                                      alert(arguments[x]);

                               }

                      函数在调用时的其他写法:

                              var  show  =  demo()//show变量接收demo()函数的返回值

                              var  show  =  demo  //这种写法是可以的,意为show和demo是一个函数,那么该函数也通过show()的方式运行

  • 动态函数

                     通过JS的内置对象function实现,例如:

                             var  demo  =  new  function("x,y";"alert(x+y)";);

                             demo(4,6);

                      和一般函数不同的是,动态函数、参数及函数体都可以通过参数传递,动态指定。

  • 匿名函数

                     格式:function(){...},例如:

                              var  demo  =  function(){...}

                              demo();

                      通常在定义事件属性的行为时,较为常用。

                      匿名函数就是一种简写格式。

          4、数组

                    方便操作多元素的容器,可以对其中的元素编号。

                    特点:可以存任意元素,长度是可变的。

                    格式:

                              var  arr  =  new  Array();

                              arr[0]  =  "hello";

                              arr[1]  =  123;

                              var  arr  =["hello",123,true,"abc"];

                              for(var  x=0;x<arr.length;x++){

                                        alert(arr[x]);

                              }

          5、对象

                    JS除了已经提供的内置对象外,也可以自定义对象。

                              例如:

                              function  Person(){}

                              var  p  =  new  Person();

                              p.name  =  "zhangsan"

                              p.age  =  13;

                              p.function(){

                                        alert("run");

                              }

                              或:

                              funtion  Person(){

                                        this.name  =  name;

                                        this.age  =  age;

                              }

                              var  p  =  new  Person("zhangsan",13);


                    with语句

                              格式:

                                        with(对象){}

                              应用:

                                        当调用一个对象中多个成员时,为了简化调用,避免"对象. "这种形式的重复书写,可以写成:

                                                  var p = new Person(“zhangsan”,20);

                                                  with(p)

                                                  {

                                                             alert(name+”,”+age);

                                                  }

                                         with语句定义了某个对象的作用域,在该域中可以直接调用该对象的成员。

                    for...in语句

                              用于遍历对象属性。

                              例:

                                  var p = new Person(“zhangsan”,20);

                                  for(x in p){

                                          alert(x);//结果是两个对话框,一个是name,一个是age

                                          alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组,要通 过指定的元素名获取元素的值。

                                   }


三、window对象

1、navigator对象

  • appName属性:浏览器的名称
  • AppVersion属性:浏览器的版本号

2、location对象

  • href属性:获取或者设置地址

3、screen对象

  • height与availHeight属性:获取屏幕的高度,是否去除任务栏
  • width与availWidth属性:获取屏幕的宽度,是否去除任务栏

4、event对象

  • keyCode属性:获取键盘按键
  • returnValue属性:获取或者设置某个属性的返回值
  • srcElement属性:获取某个事件的源对象

5window方法

  • confirm:弹出一个确认对话框,返回值的值为true或false
  • focus:使某个元素获得焦点,并执行onfocus时间制定的代码
  • moveBy与moveTo:移动
  • open:打开窗口,可以制定标题、打开方式、窗口属性(标题栏、滚动条、可变大小等)
  • prompt:显示一个提示框,有一条消息和一个输入框
  • setTimeout与clearTimeout:间隔多长时间之后执行
  • setInterval与clearInterval:每间隔多长时间执行














相关文章推荐

HTML+CSS网页设计与布局从入门到精通摘要

HTML网页文档结构: 1.首先应该明确一个概念,HTML不是一种编程语言,而是一种描述性的标记语言,用于描述超文本中内容的显示方式。 2.标记:标记放在HTML文件的开头,并没有什么实质性的功能,只...

HTML、CSS、JavaScript基础知识

HTML、CSS、JavaScript的基础知识,不全,遇到不明白的再补吧。

HTML+CSS+javaScript 基础知识(三)

1.标签 标签用于为用户输入创建HTML表单。 表单能够包含input元素,textarea元素,select元素,fieldset元素等 表单用于向服务器传输数据,但是表单本身并不可见。现在,...

HTML+CSS+javaScript基础知识(四)

1.标签和标签 select元素可以创建单选或多选菜单。option元素定义下拉列表中的一个选项(一个条目)。 浏览器将标签中的内部作为标签的菜单或是滚动列表中的一个元素显示。 option元素...

html+css+javascript 基础知识(一)

1.      HTML5的文档类型定义(DTD)声明     在编写HTML5文档时,要求指定文档类型,以确保浏览器能在HTML5的标准模式下进行渲染。 2.      HTML标签 标签的作用是...

html+css+javascript 基础知识(二)

1.      HTML标签 标签是代表换行的单标记。在文档中需要换行处添加或其中一个实现换行,但二者不能同时使用。 2.      HTML标签 标签,在HTML5中重新定义为主题结束,而不是...

html+css3前端基础知识

  • 2017年07月09日 14:56
  • 20.32MB
  • 下载

html+css基础知识点整合

  • 2017年05月27日 13:16
  • 1.17MB
  • 下载

html与css基础知识回顾

一.关联css样式的三种方法: 二.标签属性和描述 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML+CSS+JavaScript基础知识
举报原因:
原因补充:

(最多只允许输入30个字)