HTML+CSS+JS视频教程学习记录.doc

01、简介介绍课程的结构。02、HTML介绍Java se：面向对象、数据库、网络、文件。-可以开发桌面程序（管理系统、游戏、QQ）Java web开发：各大门户网站。HTML：超文本标记语言，是一种标记语言，主要的用途是开发网页，使用HTML可以展现文字、图片、视频、声音。HTML是web开发（网站开发）的基础。发展历程：第一个HTML版本-.-HTML 4.01-HTML5.0/ XHTML（发展的两个分支）W3C：是制定Web（html、xml、css、xhtml.）标准的机构。03、HTML元素和属性Html运行原理：（1） 本地运行：使用浏览器打开html文件（2） 远程访问运行：将html文件放在远程服务器上，所有的浏览器都可以访问到http的底层协议是TCP/IP协议Html的开发工具：记事本、DW、frontpage、vs、myeclipse。HTML的基本结构：不管这个html有多复杂，它的基本机构是 元素就是标记如果没有内容，可以这样写： 04、HTML菜谱案例练习菜谱案例源码：菜谱 星期一菜谱 素菜 清炒茄子 花椒扁豆 小葱豆腐 炒白菜 荤菜 鱼香肉丝 油焖大虾 海参鲍鱼 青椒肉丝 效果：05、HTML列表和框架以及综合练习：Html无序列表： Html有序列表： Html框架标记元素：基本语法：案例：aa.html :周杰伦的歌bb.html :歌词。all.html :注意：all.html中不能带body标记效果：06、HTML表单Form和常用元素综合案例：介绍：HTML的表单元素主要用于让用户输入数据并提交给服务器基本语法：各种元素（输入框、下拉列表、文本框、密码框）案例：login.html :登录界面登录界面用户名：密  码：说明：（1） 表单元素的格式：type = text(文本框) password(密码框) hidden(隐藏框：即可提交数据，同时不影响界面) checkbox(复选框) radio(单选框) submit(提交按钮) reset(重置按钮) img(图片按钮)name 是你给表单元素取的名字（2） action 指定把请求交给哪个页面Input元素的举例说明：input元素举例名字：密码：*复选框*西瓜苹果梨子*单选框*男女*隐藏*select下拉选择*请选择你的出生地：-请选择-北京上海重庆湖北*文本域*请在这里输入*选择要上传的文件*请选择文件07、HTML加强（各种字体、entities）：（1） 新窗口本窗口父窗口整个浏览器窗口08、HTML加强（文字布局、表格进阶、多媒体页面）以及企业邮箱登录界面：09、div+css开山篇（基本概念：为什么需要div+css布局）：1、 div+css介绍2、 案例：my.css ：.style1width:300px;height:200px;border:1px solid red;test1.html :1235123510、初识CSS：利用myeclipse来开发： 栏目三从使用span元素我们可以看到，css的基本语法：元素可以是HTML的任意元素，属性名和属性值要参考文档。使用CSS可以统一网站的风格举例： test1.html .style1 font-size: 20px; color: blue; font-style: italic; margin-left: 50px; 栏目一 栏目二 栏目三 栏目四 栏目五 CSS的滤镜体验（将图片由彩色变为黑白的）。CSS选择器（类选择器、id选择器、HTML元素选择器、通配符选择器）：（1）类选择器：举例：my.css：.style1font-weight: bold;font-size: 20px;background-color: purple;page.html : HtmlPage1.html 新闻一 新闻二 新闻三 新闻四 新闻五 （2） id选择器：语法规则：案例：#style2font-size: 30px;background-color: silver;在HTML文件中如果要引用id选择器，则（3） HTML元素选择器：bodycolor:orange;当一个元素同时被id选择器和类选择器、HTML选择器修饰时，优先级是：id选择器 类选择器 HTML元素选择器 通配符选择器11、通配符选择器：margin（外边距）特别说明：（1）margin:10px 5px 15px 20px;上外边距是 10px ；右外边距是 5px ；下外边距是 15px ；左外边距是 20px （2）margin:10px 5px 15px;上外边距是 10px ；右外边距和左外边距是 5px ；下外边距是 15px （3）margin:10px 5px;上外边距和下外边距是 10px ；右外边距和左外边距是 5px （4）margin:10px;所有 4 个外边距都是 10px padding（内边距）同上，规律一样！选择器深入探讨：（1） 父子选择器：效果图（非常重要变成了红色）：源代码：HTML:这是一则非常重要的新闻CSS:.style2 spanfont-style: italic;color:red; 注意：1、子选择器标签必须是HTML可以识别标记的元素； 2、父子选择器可以有多级； .style2 span span font-style: italic; color:red; 3、父子选择器适用于id选择器和class选择器。（2）一个元素被id和class同时修饰的时候，id选择器的优先级更高。（3）一个元素最多只能有一个id选择器，但是可以有多个类选择器。效果图（让“新闻二”变成斜体、有下划线）：思路：1、 可以给“新闻二”配置id选择器新闻二#special_1 font-style: italic;text-decoration: underline;2、 可以再指定一个class选择器（之间用空格隔开）新闻二.special_1 font-style: italic;text-decoration: underline;注意：1、在引用多个class选择器的时候，用空格隔开； 2、当class选择器发生冲突时，以在.css文件中最后出现的那个class选择器为准。a:link color: #FF0000 /* 未访问的链接 */a:visited color: #00FF00 /* 已访问的链接 */a:hover color: #FF00FF /* 当有鼠标悬停在链接上 */a:active color: #0000FF /* 被选择的链接 */12、选择器练习 块元素 行内元素：行内元素（inline element）：特点是只占内容的宽度，默认不换行，行内元素一般放文本或者其他的行内元素。span1块元素（block element）:特点是不管是内容是多少，都要换行，同时占满整行，块元素可以放文本、行内元素、块元素。div1块元素和行内元素的转换：如果希望一个元素按照块元素方式显示，则在css文件中加：display: block;如果希望一个元素按照行内元素方式显示，则在css文件中加：display:inline;13、标准流、非标准流、盒子模型：流：在网页设计中指元素（标签）的排列方式标准流：元素在网页中就像流水，排在前面的元素（标签）内容在前面出现，排在后面的元素内容在后面出现。这是默认的布局方式。非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局，让某个元素脱离它本身的位置。盒子模型原理图：细节说明：1、HTML元素都可以看成一个盒子； 2、盒子模型的参照物不一样，则使用的CSS属性就不一样； 3、如果不希望破坏整个外观，则尽量使用margin来布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到外边去，但是盒子本身没有变化。14、盒子模型经典案例：源代码：.css文件：bodyborder: 1px solid red;border-left:1px solid black;margin: 0px auto;width: 1000px;height: 500px;.s1border: 2px solid blue;width:100px;height: 150px;margin-top: 50px;margin-left: 30px;.s2border: 1px solid black;width: 70px;height: 60px;margin-top: 10px;margin-left: 10px;.s3width: 50px;height: 50px;margin:5px 10px;盒子模型的综合案例（可以当做模板使用）:效果图：源代码：box2.html: box2.html 天空 box2.css:bodymargin:0px;padding:0px;/*用于控制显示的位置*/.div1width: 500px;height:500px;border:1px solid #b4b4b4; margin-left: 100px; margin-top: 20px;/*faceul用于控制显示图片区域的宽度和高度*/.faceulwidth:220px;height:370px;border:1px solid red;list-style-type: none;padding: 0;/*用于控制单个图片区域的大小*/.faceul liwidth: 50px;height: 72px;border:1px solid blue;float: left;/*左浮动*/margin-left: 15px;margin-top: 15px;.faceul imgwidth: 40px;height: 40px;margin-top: 5px;margin-left: 6px;.faceul afont-size: 12pt;margin-left: 11px;a:LINK text-decoration: none;color:black;a:HOVER text-decoration: underline;color:blue;15、盒子模型经典案例-浮动：效果图;源代码：youku.html youku.html 优酷牛人更多牛人 天空 天空 天空 明星空间更多空间 天空 天空 天空 优酷公益更多公益官网 天空 天空 天空 youku.css:bodywidth: 900px;height:500px;border: 1px solid gray;margin: 0px;.div1width: 400px;height:400px;border: 1px solid red;margin-top: 100px;margin-left: 400px;.div1 amargin-left: 200px;color:blue;.div1 spanmargin-left:20px;font-weight: bold;a:LINK text-decoration: none;a:HOVER text-decoration: underline;.faceul/*border:1px solid blue;*/width: 400px;height: 80px;padding: 0px;.faceul lilist-style-type: none;float: left;margin-left: 46px;/*border:1px solid pink;*/width: 70px;height: 80px;.faceul li imgwidth: 60px;height: 55px;margin-left: 5px;margin-top: 0px;.faceul li spanfont-size: 0.5pt;浮动：浮动是一个重要的概念：分为左浮动、右浮动、清除浮动。浮动必要性：因为默认情况下，div是纵向排列的，如下图：如果希望1div向右面显示，这时我们使用右浮动：float: right;如果希望所有元素横向排列，则使用左浮动：float: left;特别注意：如果一行宽度不够排下所有的div，则会自动换行：如果有某个div过大，则会卡住别的div：16、清除浮动 CSS定位详解：浮动的进一步理解：如果一个元素右/左浮动，则：（1） 它本身会尽可能向右/左浮动，直到碰到边框或者别的浮动元素，特别强调浮动对块元素和行内元素都生效；（2） 元素向右/左浮动，就相当于让出自己的左/右边，别的元素就会在它的左/右边排列。清除浮动：CSS-定位：特别说明： 对static而言，left和right不生效 relative的参照点是它原来的位置，根据top和left设定的值进行移动案例：效果图：源代码： div1 div2 div3 div4 .s1width: 100px;height: 60px;background-color:pink;margin-left: 10px;float: left;#specialposition: relative;/*这里使用相对定位*/left: 40px;/*在原来的位置，向右移动多少；若希望向左移动，则值为负*/top: 100px;/*在原来的位置，向下移动多少；若希望向上移动，则值为负*/ 绝对定位（强调：absolute定位是对离自己最近的那个非标准流盒子而言）案例（本案例中，离div2最近的非标准流盒子是body）：效果图：源代码： div1 div2 div3 div4 .s1width: 100px;height: 60px;background-color:pink;margin-left: 10px;float: left;#specialposition: absolute;/*这里使用绝对定位*/left: 40px;/*在原来的位置，向右移动多少；若希望向左移动，则值为负*/top: 100px;/*在原来的位置，向下移动多少；若希望向上移动，则值为负*/17、仿sohu网站首页面布局：效果图：代码： sohu.html 登录表单 设为首页 超链接 招生 广告 房地产广告 bodywidth: 950px;margin: 0 auto;font-size: 12px;.topwidth: 950px;height: 22px;/*登录部分*/.loginwidth: 416px;height: 22px;background-color: green;float: left;/*设为首页*/.indexpagewidth: 105px;height: 20px;background-color: gray;float: left;margin-left: 80px;/*超链接*/.myhrefwidth: 200px;height: 20px;float: right;background-color: #b4b4b4;.middlewidth:950px;height: 80px;margin-top: 10px;/*图标部分*/.logowidth: 50px;height: 80px;float: left;.imgwidth: 80px;height: 80px;/*导航条部分*/.navigatewidth: 860px;height: 80px;float: right;background-color: red;.bottomwidth: 950px;height: 200px;margin-top: 10px;/*招生*/.recruitwidth: 80px;height: 200px;float: left;background-color: green;/*广告*/.adwidth: 400px;height: 200px;float:left;background-color: orange;margin-left: 10px;/*房地产广告*/.estatewidth: 250px;height: 200px;float: left;margin-left: 10px;background-color: blue;/*广告图片*/.img1width: 170px;height: 180px;.ad_imgwidth:190px;height:190px;float: right;border: 1px solid gray;text-align: center;padding-top: 10px;18、js基本介绍：js是用于web开发的脚本语言，js在客户端执行。脚本语言是什么：（1） 脚本语言往往不能独立使用，它和html、jsp、php、asp、配合使用。（2） 脚本语言也有自己的变量、函数、控制语句（顺序、分支、循环）（3） 脚本语言实际上是解释性语言（即在执行时，直接执行源码）（4） js-浏览器（js引擎来执行）因为js是由浏览器来解释执行的，因此存在一个问题，不同类型的浏览器可能对js的支持不一样。17、 js运行原理、js开发工具、js基本语法：JS的位置：随意（head或者body中）JS必须用/JS代码如果没有使用包起来，则浏览器会将其视为普通文本。在一个HTML（JSP、PHP、ASP）文件中，可以出现多对片段，则浏览器会按照先后顺序依次执行。JS变量的类型究竟是怎样决定的呢？（1） JS是弱数据类型语言：即在定义变量的时候，统一使用var表示即可，甚至可以去掉var这个关键字（2） JS中的变量的数据类型是由JS引擎来决定的JS的命名规范（变量函数）：（1） 使用大小写字母、数字、下划线、$可以命名（2） 不能以数字打头（3） 不能使用JS的关键字、保留字（4） 命名区分大小写（5） 单行注释：/ 多行注释：/* */18、 JS基本数据类型、JS运算符：JS的数据类型：（1） 基本数据类型（通过typeof可以看到变量的具体数据类型）：数值、字符串、布尔型特殊数值：NaN(not a number)、infinity(无穷大)、isNaN()、isFinite()举例：var v1 = abc;var v2 = 890;window.alert(v1是+typeof v1);window.alert(v2是+typeof v2);（2） 复合类型：数组、对象（3） 特殊类型：null、undefine（变量未定义/虽定义但未赋值）JS数据类型的转换：1 自动转换2 强制转换（使用系统函数，如：parseInt()、parseFloat()）JS的运算符：+ 、- 、*、/、%、+、-、+=、-=、/=、%=%：取余，通常用于判断两个数是否能够整除，用于整数。19、 JS运算符、JS移位运算：介绍了mpt()和document.writeln()函数：var val = mpt(请输入值：);document.writeln(你的输入是：+val);注意：浏览器会认为这里的val是字符串，如果进行两个数直接相加（“+”），浏览器会认为是字符串的拼接，要在计算前进行强制转换，用到了parseFloat()或者parseInt()关系运算符：= = = !=逻辑运算符：& | !注意：| 将返回第一个不为false的那个值（或对象），或者是最后一个值（若全为false的话），返回的结果不一定是布尔值。JS也有位运算、移位运算，其规范和JAVA一致。20、 JS三大流程控制：顺序、分支（if else switch）、循环说明：（1） JS的switch语句数据类型可以是JS支持的任何数据类型（数组和对象除外）；（2） case后面的数据类型可以任意（数组和对象除外）；（3） break作用：跳出整个switch；（4） 若没有匹配的值，则执行default23、JS三大流程控制、JS调试技巧：调试技巧：在IE8中，可以通过调试工具对JS代码进行调试，尤其是页面比较复杂的情况下很有用。在chrom中可以用开发者工具进行调试（F12）。其中console()函数可以在控制台看到输出。24、JS案例讲解、JS自定义函数：JS函数：（1） 函数的必要性：减少代码冗余；（2） 函数的基本概念：为完成某一功能的代码（指令、语句）的集合（3） 基本语法：function 函数名（参数列表）/代码return 值; /可选（4） 如果其他的html、php。文件要使用某个JS的自定义函数，就把自定义函数单写到JS文件中，在需要的地方引入即可。25、JS系统函数、JS函数调用方式：函数调用的方式：（1） 普通调用：函数名（实际参数。）（2） 通过指向函数的变量去调用：var myvar = 函数名;myvar(实际参数);（3） 关于接受函数返回值的问题：var myvar = test(abx);/test是自定义函数window.alert(myvar);/如果test函数没有返回值，但是又接受了，则返回的就是undefined；/如果有返回值，则是什么就返回什么，myvar会接收这个返回值。26、JS函数调用过程内存分析、JS函数细节：JS函数的调用过程内存分析：分析图：特别强调：JS函数支持可变参数，比如：function abc2()/在js中有一个arguments，可以访问所有传入值window.alert(arguments.length);/遍历所有的参数for(var i = 0; i = arguments.length; i+)window.alert(argumentsi);可以这样调用：abc2(20,30,15,20);abc2(4,hello);abc2();27、JS一维数组、一维数组细节：JS中的数组可以存放各种数据类型（数值、字串、对象。）案例：var weight = 3,5