HTML+CSS+JS视频教程学习记录文档格式.docx
《HTML+CSS+JS视频教程学习记录文档格式.docx》由会员分享，可在线阅读，更多相关《HTML+CSS+JS视频教程学习记录文档格式.docx（128页珍藏版）》请在冰点文库上搜索。
title>
菜谱<
/title>
/head>
body>
tablecellspacing='
0'
bordercolor='
purple'
align='
center'
width='
400px'
height='
180'
border='
1'
>
tralign='
tdcolspan='
3'
星期一菜谱<
/td>
/tr>
tdrowspan='
2'
素菜<
td>
清炒茄子<
花椒扁豆<
小葱豆腐<
炒白菜<
荤菜<
鱼香肉丝<
油焖大虾<
海参鲍鱼<
imgwidth='
70'
src='
李敏镐.jpeg'
/img>
青椒肉丝<
/table>
/body>
/html>
效果：
05、HTML列表和框架以及综合练习：
Html无序列表：
ultype=“”>
li>
/li>
/ul>
Html有序列表：
oltype=“”start=“”>
/ol>
Html框架标记元素：
基本语法：
案例：
aa.html:
bodybgcolor=“yellow”>
周杰伦的歌<
bb.html:
bodybgcolor=“purple”>
歌词。
all.html:
framesetcols=“50%,50%”frameborder=“0”>
framesrc=“aa.html”noresize/>
framesrc=“bb.html”/>
/frameset>
注意：
all.html中不能带body标记
06、HTML表单Form和常用元素综合案例：
介绍：
HTML的表单元素主要用于让用户输入数据并提交给服务器
formaction=“url”method=“提交的方法（get、post），默认是get”>
各种元素（输入框、下拉列表、文本框、密码框）
/form>
login.html:
登录界面
h1>
登录界面<
/h1>
formaction="
ok.html"
method="
post"
用户名：
inputtype="
text"
name="
username"
/>
/br>
密&
nbsp;
&
码：
password"
pwd"
submit"
value="
登录"
reset"
重新填写"
说明：
（1）表单元素的格式：
inputtype=“”name=“”/>
type=text（文本框）password（密码框）hidden（隐藏框：
即可提交数据，同时不影响界面）checkbox（复选框）radio（单选框）submit（提交按钮）reset（重置按钮）img（图片按钮）
name是你给表单元素取的名字
（2）action指定把请求交给哪个页面
Input元素的举例说明：
input元素举例
名字：
user"
请输入名字。
"
/>
密码：
***复选框***
checkbox"
v1"
西瓜<
v2"
苹果<
v3"
梨子<
***单选框***
radio"
sex"
男<
女<
***隐藏***
hidden"
123"
hide"
***select下拉选择***
请选择你的出生地：
selectname="
bired"
optionvalue="
----请选择----<
/option>
beijing"
北京<
shanghai"
上海<
chongqing"
重庆<
hubei"
湖北<
/select>
***文本域***
textareacols="
30"
rows="
10"
请在这里输入<
/textarea>
***选择要上传的文件***
file"
myfile"
请选择文件
07、HTML加强（各种字体、entities）：
（1）<
ahref=“#”target=“值”>
/a>
ahref=“url1”target=“_blank”>
新窗口<
ahref=“url2”target=“_self”>
本窗口<
ahref=“url3”target=“_parent”>
父窗口<
ahref=“url4”target=“_top”>
整个浏览器窗口<
ahref=“url5”target=“指向frame的名字”>
08、HTML加强（文字布局、表格进阶、多媒体页面）以及企业邮箱登录界面：
09、div+css开山篇（基本概念：
为什么需要div+css布局）：
1、div+css介绍
2、案例：
my.css：
.style1{
width:
300px;
height:
200px;
border:
1pxsolidred;
}
test1.html:
linkhref="
my.css"
type="
text/css"
rel="
stylesheet"
divclass="
style1"
table>
tr>
1<
2<
3<
5<
/div>
10、初识CSS：
利用myeclipse来开发：
spanstyle="
font-size:
40px;
color:
green;
font-weight:
bold;
栏目三<
/span>
从使用span元素我们可以看到，css的基本语法：
元素名style=“属性名:
属性值;
属性名:
属性值；
”/>
元素可以是HTML的任意元素，属性名和属性值要参考文档。
使用CSS可以统一网站的风格举例：
!
DOCTYPEhtml>
test1.html<
metahttp-equiv="
keywords"
content="
keyword1,keyword2,keyword3"
description"
thisismypage"
content-type"
text/html;
charset=UTF-8"
styletype="
>
.style1{
font-size:
20px;
color:
blue;
font-style:
italic;
margin-left:
50px;
}
/style>
spanclass="
栏目一<
栏目二<
栏目四<
栏目五<
CSS的滤镜体验（将图片由彩色变为黑白的）。
CSS选择器（类选择器、id选择器、HTML元素选择器、通配符选择器）：
（1）类选择器：
举例：
my.css：
font-weight:
background-color:
purple;
page.html:
HtmlPage1.html<
linkrel="
href="
type="
/link>
<
spanclass="
新闻一<
新闻二<
新闻三<
新闻四<
新闻五<
（2）id选择器：
语法规则：
#style2{
30px;
silver;
在HTML文件中如果要引用id选择器，则
元素id=“id选择器的名称”>
（3）HTML元素选择器：
body{
orange;
当一个元素同时被id选择器和类选择器、HTML选择器修饰时，优先级是：
id选择器>
类选择器>
HTML元素选择器>
通配符选择器
11、通配符选择器：
margin（外边距）特别说明：
（1）margin:
10px5px15px20px;
上外边距是10px；
右外边距是5px；
下外边距是15px；
左外边距是20px
（2）margin:
10px5px15px;
右外边距和左外边距是5px；
下外边距是15px
（3）margin:
10px5px;
上外边距和下外边距是10px；
右外边距和左外边距是5px
（4）margin:
10px;
所有4个外边距都是10px
padding（内边距）同上，规律一样！
选择器深入探讨：
（1）父子选择器：
效果图（非常重要变成了红色）：
源代码：
HTML:
style2"
这是一则<
span>
非常重要<
的新闻<
CSS:
.style2span{
red;
1、子选择器标签必须是HTML可以识别标记的元素；
2、父子选择器可以有多级；
.style2spanspan{
font-style:
color:
3、父子选择器适用于id选择器和class选择器。
（2）一个元素被id和class同时修饰的时候，id选择器的优先级更高。
（3）一个元素最多只能有一个id选择器，但是可以有多个类选择器。
效果图（让“新闻二”变成斜体、有下划线）：
思路：
1、可以给“新闻二”配置id选择器
aclass="
#"
id="
special_1"
span>
#special_1{
text-decoration:
underline;
2、可以再指定一个class选择器（之间用空格隔开）
style1special_1"
.special_1{
1、在引用多个class选择器的时候，用空格隔开；
2、当class选择器发生冲突时，以在.css文件中最后出现的那个class选择器为准。
a:
link{color:
#FF0000}/*未访问的链接*/
visited{color:
#00FF00}/*已访问的链接*/
hover{color:
#FF00FF}/*当有鼠标悬停在链接上*/
active{color:
#0000FF}/*被选择的链接*/
12、选择器练习块元素行内元素：
行内元素（inlineelement）：
特点是只占内容的宽度，默认不换行，行内元素一般放文本或者其他的行内元素。
s1"
span1<
块元素（blockelement）:
特点是不管是内容是多少，都要换行，同时占满整行，块元素可以放文本、行内元素、块元素。
s2"
div1<
块元素和行内元素的转换：
如果希望一个元素按照块元素方式显示，则在css文件中加：
display:
block;
如果希望一个元素按照行内元素方式显示，则在css文件中加：
inline;
13、标准流、非标准流、盒子模型：
流：
在网页设计中指元素（标签）的排列方式
标准流：
元素在网页中就像流水，排在前面的元素（标签）内容在前面出现，排在后面的元素内容在后面出现。
这是默认的布局方式。
非标准流：
在实际网页布局中，我们可能需要使用非标准流的方式来布局，让某个元素脱离它本身的位置。
盒子模型原理图：
细节说明：
1、HTML元素都可以看成一个盒子；
2、盒子模型的参照物不一样，则使用的CSS属性就不一样；
3、如果不希望破坏整个外观，则尽量使用margin来布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到外边去，但是盒子本身没有变化。
14、盒子模型经典案例：
imgclass="
s3"
src="
images/sky2.jpg"
.css文件：
border:
1pxsolidred;
border-left:
1pxsolidblack;
margin:
0pxauto;
width:
1000px;
height:
500px;
.s1{
2pxsolidblue;
100px;
150px;
margin-top:
.s2{
1pxsolidblack;
70px;
60px;
10px;
.s3{
5px10px;
盒子模型的综合案例（可以当做模板使用）:
效果图：
box2.html:
box2.html<
box2.css"
div1"
ulclass="
faceul"
imgsrc="
images/sky1.jpg"
ahref="
天空<
box2.css:
0px;
padding:
/*用于控制显示的位置*/
.div1{
500px;
1pxsolid#b4b4b4;
100px;
/*faceul用于控制显示图片区域的宽度和高度*/
.faceul{
220px;
370px;
list-style-type:
none;
0;
/*用于控制单个图片区域的大小*/
.faceulli{
72px;
1pxsolidblue;
float:
left;
/*左浮动*/
15px;
.faceulimg{
5px;
6px;
.faceula{
12pt;
11px;
LINK{
black;
HOVER{
blue;
15、盒子模型经典案例---浮动：
效果图;
youku.html
youku.html<
de
升级会员 