资源描述

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

《HTML+CSS+JS视频教程学习记录.docx》由会员分享，可在线阅读，更多相关《HTML+CSS+JS视频教程学习记录.docx（128页珍藏版）》请在冰点文库上搜索。

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

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

01、简介

介绍课程的结构。

。

02、HTML介绍

Javase：

面向对象、数据库、网络、文件。

。

--->可以开发桌面程序（管理系统、游戏、QQ）

Javaweb开发：

各大门户网站。

。

HTML：

超文本标记语言，是一种标记语言，主要的用途是开发网页，使用HTML可以展现文字、图片、视频、声音。

。

HTML是web开发（网站开发）的基础。

发展历程：

第一个HTML版本-->....--->HTML4.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的表单元素主要用于让用户输入数据并提交给服务器

基本语法：

各种元素（输入框、下拉列表、文本框、密码框）

案例：

登录界面

登录界面

用户名：

密码：

说明：

（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：

.style1{

width:

300px;

height:

200px;

border:

1pxsolidred;

}

test1.html:

1	2	3	5
1	2	3	5

10、初识CSS：

利用myeclipse来开发：

40px;color:

green;font-weight:

bold;">栏目三

从使用span元素我们可以看到，css的基本语法：

<元素名style=“属性名:

属性值;属性名:

属性值；”/>

元素可以是HTML的任意元素，属性名和属性值要参考文档。

使用CSS可以统一网站的风格举例：

DOCTYPEhtml>

test1.html

.style1{

font-size:

20px;

color:

blue;

font-style:

italic;

margin-left:

50px;

}

栏目一

栏目二

栏目三

栏目四

栏目五

CSS的滤镜体验（将图片由彩色变为黑白的）。

CSS选择器（类选择器、id选择器、HTML元素选择器、通配符选择器）：

（1）类选择器：

举例：

my.css：

.style1{

font-weight:

bold;

font-size:

20px;

background-color:

purple;

}

page.html:

DOCTYPEhtml>

HtmlPage1.html

新闻一

新闻二

新闻三

新闻四

新闻五

（2）id选择器：

语法规则：

案例：

#style2{

font-size:

30px;

background-color:

silver;

}

在HTML文件中如果要引用id选择器，则

<元素id=“id选择器的名称”>

（3）HTML元素选择器：

body{

color:

orange;

}

当一个元素同时被id选择器和类选择器、HTML选择器修饰时，优先级是：

id选择器>类选择器>HTML元素选择器>通配符选择器

11、通配符选择器：

margin（外边距）特别说明：

（1）margin:

10px5px15px20px;

上外边距是10px；右外边距是5px；下外边距是15px；左外边距是20px

（2）margin:

10px5px15px;

上外边距是10px；右外边距和左外边距是5px；下外边距是15px

（3）margin:

10px5px;

上外边距和下外边距是10px；右外边距和左外边距是5px

（4）margin:

10px;

所有4个外边距都是10px

padding（内边距）同上，规律一样！

选择器深入探讨：

（1）父子选择器：

效果图（非常重要变成了红色）：

源代码：

HTML:

这是一则非常重要的新闻

CSS:

.style2span{

font-style:

italic;

color:

red;}

注意：

1、子选择器标签必须是HTML可以识别标记的元素；

2、父子选择器可以有多级；

.style2spanspan{

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选择器为准。

link{color:

#FF0000}/*未访问的链接*/

visited{color:

#00FF00}/*已访问的链接*/

hover{color:

#FF00FF}/*当有鼠标悬停在链接上*/

active{color:

#0000FF}/*被选择的链接*/

12、选择器练习块元素行内元素：

行内元素（inlineelement）：

特点是只占内容的宽度，默认不换行，行内元素一般放文本或者其他的行内元素。

span1

块元素（blockelement）:

特点是不管是内容是多少，都要换行，同时占满整行，块元素可以放文本、行内元素、块元素。

div1