HTML+CSS+JS.docx

HTML+CSS+JS1 HTML1.1 html简介一、什么是html: 1.HTML : (Hyper Text Markup Language)超文本标记语言。二、常见的扩展名: .txt 记事本 .jpg/.png 图片 .doc/.docx word文档 .xls/.xlsx Excel表格 .ppt PPT .exe 应用程序 .zip/.rar 压缩包 .avi/.rmvb/.mp4 视频 .mp3 音频三、HTML的基本结构: TFBOYS直播间 TFBOYS - 左手右手一个慢动作，右手左手慢动作重播。 1.2 常见标签1.2.1 标题标签1.标题标签: n:代表16这是标题1这是标题1 特性： 字体加粗、自动换行、默认有行高（会跟字体前后保持距离） 标题（Heading）是通过 - 等标签进行定义的。 定义最大的标题。 定义最小的标题。2.居中属性(CSS替代)：标题居中：3.添加背景色：bgColor=red/blue1.2.2 段落标签特性： 自动换行、p 元素会自动在其前后创建一些空白。 这是段落。这是段落。这是段落。段落元素由 p 标签定义。 1.2.3 换行标签: 可插入一个简单的换行符。 To breaklinesin aparagraph,use the br tag.1.2.4 水平线标签: 标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 This is header 1This is some text 1.3 列表标签1.3.1 有序标签1、结构： 卜鹏 田璐 欧阳春 2.属性：type: 1 =有序以数字开头 i =有序以罗马i开头 I =有序以罗马I开头 a=有序以字母a开头 A=有序以字母A开头 1.3.2 无序标签1、基本结构 卜鹏 田璐 欧阳春 2.属性：type: circle(圆形) | disc(实心圆) | square（方块）1.4 图片标签1、图片标签 1)src指定的路径特点:1.会在当前目录下为基点，去找图片2.如果图片在当前目录的img文件夹里面。 src=img/xxx.jpg3.如果图片在当前目录的上一级目录。 src=./xxx.jpg 2)设置图片大小 width=200 height=400 3)图片和文字同时出现的时候，我们希望文字出现在图片的中间。 方案1：在img标签中添加一个align=center,只有一行文字的时候是OK的。 方案2：align=left，文字居中，可以使用 4)鼠标移到图片上，有文字提示信息。title=提示信息5)当图片不存在的时候的提示信息。alt=您找到图片不存在 6)去掉图片的默认边框：border=0 1.5 超链接标签一、超链接标签： 1)指定要跳的网址： 当我们要跳到别人的网址的时候 要重点注意：加http:/ 当我们要跳到自己的网址的时候，不写http:/，跳自己网址的规则跟找图片的规则一致。 2)要求新开一个选项卡： target=_self(默认，自身打开页面),target=_blank(新开一个页面),target=_toptarget=framename(用于框架集)3)使用图片做超链接： 二、a标签和 Name 属性,做页内跳转。 Jump to the Useful Tips Section Text to be displayedUseful Tips Section 1.6 表格标签1.表格标签： 1.表格默认没有边框： 在table标签中，添加border=12.表格居中 在table标签中，添加align=center3.调整表格的宽度和高度 在table标签中，添加 width=666 height=3334.调整某一列的宽度： 第一行的这一列。5.取消单元格和单元格之间的间距: cellspacing=06.单元格跟格子里面内容的间距： cellspadding=107.表头：将第一行的td改成th。 8.表格合并： 8.1.先画满一个表格：最多行、最多咧 8.2.列合并： 1.保留前面的一个格子，将剩下的要合并的格子删除。 2.将保留下来的这个格子添加colspan=2表示该格子占多少列。8.3.行合并 1.保留前面的一个格子，将剩下的要合并的格子删除。 2.将保留下来的这个格子添加rowspan=2表示该格子占多少行。 9.rules属性： rules=all （全部）/cols（竖线）/rows （横线） 1.7 表单标签1.7.1 form标签表单标签：1、将表单中的数据提交到那里去？ action=a.html 在实际开发中，它会被替换成ASP,JSP等动态页面。2、表单以什么方式提交?method=get/post get 将信息显示在地址栏上，信息携带数量有限。 /用在超链接上面 post 信息将不会显示在地址栏上，信息携带不限。/用在表单上面，注册，登陆等等。3、表单标签只有写了name属性的，才能够携带值。 只读：readonly = readonly 数据不能修改，但是能够携带数据禁用 : disabled =disabled 数据不能修改，并且不能携带数据 1.7.2 Fieldset 标签健康信息：身高：体重：1.7.3 文本框 输入姓名： 输入密码 默认值： 帅哥。 value属性 1.7.4 密码框密码：1.7.5 单选框男 如果出现多个单选按钮，并且你希望，只能选中其中的一个那么，你就需要将这多个单选按钮分为一组。分组的方法就是在你要分为一组的每一个单选按钮中都添加name属性，并且给name属性同样的值 男女 单选复选 默认选中 ：男 1.7.6 多选框 篮球足球球 复选 默认选中 ：球 1.7.7 按钮3、提交按钮与重置按钮 图片按钮： 1.7.8 下拉列表框 select标签的作用：提供了一个框option标签的作用：提供可以选择的项 selected 默认选中谁。 帅哥 帅哥1 帅哥2 帅哥3 美女1.7.9 多行文本框cols: 表示每行能写多少个字rows:表示能写多少行1.7.10 文件框文件框：1.7.11 隐藏框隐藏框： 不可见，只携带信息。1.8 框架和框架集1.8.1 框架集与框架框架集：设置框框消失： frameborder=0责任：将一个页面划分成多个页面的一个标签。重要事项：您不能与 标签一起使用 标签。 1.去掉body标签2.写上3.划分： 1)横着划分：rows=30%,* 将页面横着分成两部分，一部分占页面空间的30%，另一部 2)竖着划分：cols=30%,* 将页面竖着分成两部分，一部分占页面空间的30%，另一部分占这个页面空间的剩余空间。4.分好的页面给谁框架：设置成不可调用：noresize=noresize设置取消滚动条：noresize=noresize作用是指定到哪个页面：src=1.html 1.8.2 内帧标签内帧标签： 属性：frameborder=1/0 规定是否显示框架周围的边框。 scrolling=yes ,no,auto 规定是否在 iframe 中显示滚动条。 百度一下2 CSS2.1 CSS的简介CSS:Cascading Style Sheets重叠样式表，作用：美化我们的页面。 CSS 语法由三部分构成：选择器、属性和值：selector property: value 第一个css: 1.head标签中，title标签下面写一个style标签。 2.找到要进行化妆(用CSS装饰)的标签： 3. p 装饰的内容:装饰的值; p text-align: center; color: black; font-family: arial; 2.2 选择器2.2.1 标签选择器标签选择器: 直接用标签的名字，凡是叫这个标签的都会使用该样式。p color: red;页面所有的p标签里面的文字都是红色的。 一次性指定多个标签使用该样式。body,table,img border:0;td, ul, ol, ul, li, dl, dt, dd font-family: Verdana, sans-serif; 2.2.2 类选择器类选择器 ：哪个标签使用它，哪个标签就有该样式。 .demo1 color: green; .demo2 font-size: 30px; font-weight: bold; font-style: italic; 陈磊童鞋，哈哈哈哈哈，傻笑 陈磊童鞋，哈哈哈哈哈，傻笑 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 2.2.3 id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 # 来定义。 #a1 color: blue; 大家都来2.2.4 派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。.abc li color: red; class=abc的子标签的li都会使用到这个样式。 adfadfasdfasd adfadfasdfasd adfadfasdfasd adfadfasdfasd adfadfasdfasd 2.2.5 优先级id选择器 类选择器 标签选择器 如果是等级相同的选择器，使用就近原则。2.3 化妆效果2.3.1 对字体化妆字体化妆： 颜色：color:red大小: font-size:20px粗细: font-weight:bold/normal倾斜: font-style:italic/normal类型: font-family:微软雅黑2.3.2 对段落化妆段落化妆： 首行缩进: text-indent: 2em; 字符间距：letter-spacing: 1px; 行间距：line-height: 24px; 对齐方式：text-align:left/center/right 控制段落字母： text-transform: uppercase(全变大写)、lowercase（全变小写） capitalize （首字母大写） 划线：text-decoration：none(没有) underline（下划线） overline（上划线） line-through（贯穿线） blink （文本闪烁） 2.3.3 对图片化妆背景图片一、背景图片的指定： background-image: url(1.jpg);背景图片的特性： 当图片无法铺满需要填充的标签的时候。图片会自动往水平和垂直方向重复平铺，直至铺满。 设置图片平铺的效果：background-repeat: no-repeat 不平铺repeat x,y都平铺(默认)repeat-x x方向平铺(水平方向)repeat-y y方向平铺(垂直方向) 二、抠背景图： 背景图是一张大的图片，我们要将大图片中的小图片抠出来。关键点：使用background-position: 0px 100px;两个值分别代表背景图片上下移动、左右移动，上移动为负数，下移动为正数。左移动为负数，右移动为正数。基本步骤：1.设置div的大概宽高2.使用background-position属性将背景图的小图片的左上角与div的左上角对齐。3.重新设置div宽高，使它刚好跟小图片同宽高。 图片一、宽高和等比例缩放。max-width: 600px;max-height: 600px; 二、切图。position: absolute;clip: rect(0px 200px 200px 0px);rect(参数1 参数2 参数3 参数4)参数1：跟上面保持多少距离参数2：跟左边保持多少距离 参数3：跟上面保持多少距离参数4：跟左边保持多少距离 2.3.4 对边框化妆边框化妆：四个边框：大小、颜色、类型(solid实线、dashed虚线)border: 1px #a4bed4 solid; 4个边框border-top: 1px #a4bed4 solid; 上边框border-left: 1px #a4bed4 solid; 左边框border-bottom: 1px #a4bed4 solid; 下边框border-right: 1px #a4bed4 solid; 右边框2.3.5 对超链接化妆a text-decoration: none; a:link color: #FF0000 /* 未访问的链接 */a:visited color: #00FF00 /* 已访问的链接 */a:hover color: #FF00FF /* 鼠标移动到链接上 */a:active color: #0000FF /* 选定的链接 */ class=a标签下的a标签，在鼠标移动到连接上的时候的效果 .a a:hover color:red; .b a:hover color:yellow;2.4 布局2.4.1 浮动2.4.2 盒子模型2.4.3 相对布局和绝对布局1, 静态布局。 就是我们平时写的内容，它就是在静态布局中的。2，相对布局。position:relactive;相对于原来所在位置，进行移动。left:跟左边保持距离。top: 跟上边保持距离。right:跟右边保持距离。bottom:跟下边保持距离。 3，绝对布局。/该标签的父标签应该设置成相对布局。position:absolute。上一级标签的相对布局标签。left: 跟左边保持距离。top: 跟上边保持距离。right: 跟右边保持距离。bottom:跟下边保持距离。 2.4.4 DIV+CSS布局2.5 引入方式2.5.1 外部引入2.5.2 内部引入2.5.3 嵌套引入3 JavaScript3.1 Javascript简介3.1.1 1、变量1.1、变量简介_ 弱类型，没有数据类型(var ) 1.2、变量作用域在函数中的变量就是局部变量，在script变量就是全局变量 1.3、强制类型转换注意转换的方式Number(xx)可以完成转换，如果有字符就无法转换parseInt(xx)3.1.2 2、基本操作2.1、常用语法_ 常用语法和其他程序设计语言(c,java)基本类型 2.2、简单对象定义_ 简单对象创建对应js而言没有类的概念，只有对象的概念对象创建基本认识：使用函数就可以创建对象 2.3、对象基础_ 对象定义基础Javascript有多种定义对象的方式，以下演示了其中的一种方式（并不是常用的方式），但是需要完全掌握这种方式，其他的创建方式都是这种方式的变形。 3.1.3 3、简单事件处理_ 简单的事件处理 3.1.4 4、浏览器对象窗口对象window对象，对应window对象而言是浏览器的默认对象，这个对象中的所有方法都不用加window，如:alert,confirm等使用window.open可以打开相应的窗口，参数根据帮助文档具体查询，在打开窗口的页面可以通过window.opener来获取父类窗口进行处理。 Screen对象等3.1.5 常用知识withWith介绍for in语句使用for in可以变量对象中的属性 默认对象DateDate处理日期 ArrayArray数组对象，没有大小限制，和java的List类似 StringString处理字符串信息，常用方法如下所示 类型测试数据类型测试 定时器setTimeoutsetTimeout：表示间隔一段时间执行某个方法，执行一次 setIntervalsetInterval：表示间隔一段时间就执行某个方法，时间一到就执行使用setInterval这个函数的方法和setTimeout基本类似，主要是这个方法会返回一个计时器对象，通过这个对象可以轻松的关闭计时器。特别注意，在设置fontSize的时候需要在标签的style中先设置，否则没有值。 3.2 DOM模型和事件处理3.2.1 1、基本操作getElementById,getElementsByName,getElementsByTagName，这三个方法都是属于document的。1.1、getElementByIdgetElementById表示根据id获取，获取的是一个元素 1.2、getElementsByNamegetElementsByName表示通过属性的name的值获取，获取的是数组1.3、getElementsByTagName()getElementByTagName表示根据标签名称获取，获取的是数组 3.2.2 2、节点操作2.1、parentNode2.2、firstChild2.3、lastChild3.2.3 3、事件处理3.1、常用的事件方式_ 常规的事件处理方法无法批量的为节点添加事件，所以一般都是要通过如下方式进行事件操作使用这种方式可能带来的问题如下所示 3.2、event参数和window.event_ Event和window.event对于以上事件的处理方式而言，会默认传递一个event的参数来获取一些事件信息，但是对于IE和firefox的获取方式不一致，IE使用window.event,Firefox使用event获取.所以需要使用如下方法解决 3.3、window.onload事件_ 以上问题的解决方案有两种2.1