HTML+CSS+JS视频教程学习记录文档格式.docx
- 文档编号:8638834
- 上传时间:2023-05-12
- 格式:DOCX
- 页数:128
- 大小:2.80MB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML CSS JS 视频教程 学习 记录