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

1、HTML+CSS+JS视频教程学习记录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）本地运行：使用浏览器打

2、开html文件（2）远程访问运行：将html文件放在远程服务器上，所有的浏览器都可以访问到http的底层协议是TCP/IP协议Html的开发工具：记事本、DW、frontpage、vs、myeclipse。HTML的基本结构：不管这个html有多复杂，它的基本机构是 元素就是标记如果没有内容，可以这样写： 04、HTML菜谱案例练习菜谱案例源码：菜谱 星期一菜谱 素菜 清炒茄子 花椒扁豆 小葱豆腐 炒白菜 荤菜 鱼香肉丝 油焖大虾 海参鲍鱼 青椒肉丝 效果：05、HTML列表和框架以及综合练习：Html无序列表： Html有序列表： Html框架标记元素：基本语法：案例：aa.html :周杰

3、伦的歌bb.html :歌词。all.html :注意：all.html中不能带body标记效果：06、HTML表单Form和常用元素综合案例：介绍：HTML的表单元素主要用于让用户输入数据并提交给服务器基本语法：各种元素（输入框、下拉列表、文本框、密码框）案例：login.html :登录界面登录界面用户名：密  码：说明：（1）表单元素的格式：type = text(文本框) password(密码框) hidden(隐藏框：即可提交数据，同时不影响界面) checkbox(复选框) radio(单选框) submit(提交按钮) reset(重置按钮) img(图片按

4、钮)name 是你给表单元素取的名字（2）action 指定把请求交给哪个页面Input元素的举例说明：input元素举例名字：密码：*复选框*西瓜苹果梨子*单选框*男女*隐藏*select下拉选择*请选择你的出生地：-请选择-北京上海重庆湖北*文本域*请在这里输入*选择要上传的文件*请选择文件07、HTML加强（各种字体、entities）：（1）新窗口本窗口父窗口整个浏览器窗口08、HTML加强（文字布局、表格进阶、多媒体页面）以及企业邮箱登录界面：09、div+css开山篇（基本概念：为什么需要div+css布局）：1、div+css介绍2、案例：my.css ：.style1width

5、: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选择器（类选择

6、器、id选择器、HTML元素选择器、通配符选择器）：（1）类选择器：举例：my.css：.style1 font-weight: bold; font-size: 20px; background-color: purple;page.html : HtmlPage1.html 新闻一 新闻二 新闻三 新闻四 新闻五 （2）id选择器：语法规则：案例：#style2 font-size: 30px; background-color: silver;在HTML文件中如果要引用id选择器，则（3）HTML元素选择器：body color:orange;当一个元素同时被id选择器和类选择器、HTM

7、L选择器修饰时，优先级是：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（内边距）同

8、上，规律一样！选择器深入探讨：（1）父子选择器：效果图（非常重要变成了红色）：源代码：HTML: 这是一则非常重要的新闻CSS:.style2 span font-style: italic; color:red; 注意：1、子选择器标签必须是HTML可以识别标记的元素； 2、父子选择器可以有多级； .style2 span span font-style: italic; color:red; 3、父子选择器适用于id选择器和class选择器。（2）一个元素被id和class同时修饰的时候，id选择器的优先级更高。（3）一个元素最多只能有一个id选择器，但是可以有多个类选择器。效果图（让“新

9、闻二”变成斜体、有下划线）：思路：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 c

10、olor: #00FF00 /* 已访问的链接 */a:hover color: #FF00FF /* 当有鼠标悬停在链接上 */a:active color: #0000FF /* 被选择的链接 */12、选择器练习 块元素 行内元素：行内元素（inline element）：特点是只占内容的宽度，默认不换行，行内元素一般放文本或者其他的行内元素。span1块元素（block element）:特点是不管是内容是多少，都要换行，同时占满整行，块元素可以放文本、行内元素、块元素。div1块元素和行内元素的转换：如果希望一个元素按照块元素方式显示，则在css文件中加：display: block

11、;如果希望一个元素按照行内元素方式显示，则在css文件中加：display:inline;13、标准流、非标准流、盒子模型：流：在网页设计中指元素（标签）的排列方式标准流：元素在网页中就像流水，排在前面的元素（标签）内容在前面出现，排在后面的元素内容在后面出现。这是默认的布局方式。非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局，让某个元素脱离它本身的位置。盒子模型原理图：细节说明：1、HTML元素都可以看成一个盒子； 2、盒子模型的参照物不一样，则使用的CSS属性就不一样； 3、如果不希望破坏整个外观，则尽量使用margin来布局，因为padding可能会改变盒子的大小（相当

12、于这个盒子有弹性），margin如果过大，盒子内容被挤到外边去，但是盒子本身没有变化。14、盒子模型经典案例：源代码：.css文件：body border: 1px solid red; border-left:1px solid black; margin: 0px auto; width: 1000px; height: 500px;.s1 border: 2px solid blue; width:100px; height: 150px; margin-top: 50px; margin-left: 30px;.s2 border: 1px solid black; width: 70

13、px; height: 60px; margin-top: 10px; margin-left: 10px;.s3 width: 50px; height: 50px; margin:5px 10px;盒子模型的综合案例（可以当做模板使用）:效果图：源代码：box2.html: box2.html 天空 box2.css:body margin:0px; padding:0px;/*用于控制显示的位置*/.div1 width: 500px; height:500px; border:1px solid #b4b4b4; margin-left: 100px; margin-top: 20px

14、;/*faceul用于控制显示图片区域的宽度和高度*/.faceul width:220px; height:370px; border:1px solid red; list-style-type: none; padding: 0;/*用于控制单个图片区域的大小*/.faceul li width: 50px; height: 72px; border:1px solid blue; float: left;/*左浮动*/ margin-left: 15px; margin-top: 15px;.faceul img width: 40px; height: 40px; margin-top: 5px; margin-left: 6px;.faceul a font-size: 12pt; margin-left: 11px;a:LINK text-decoration: none; color:black;a:HOVER text-decoration: underline; color:blue;15、盒子模型经典案例-浮动：效果图;源代码：youku.html youku.html meta http-equiv=de