JavaWeb--HTML、CSS、JavaScript详细学习笔记(内含丰富⽰例代码)**
Java Web–HTML、CSS、JavaScript学习笔记
**
HTML(Hyper Text Markup Language超⽂本标记语⾔):控制的是页⾯的内容,是由标签组成的语⾔,能够展⽰超⽂本的效果。CSS:控制的是页⾯的布局,视觉效果等
C/S结构:Client—Server 客户端到服务器
B/S结构:Browser—Server 浏览器到服务器
页⾯由三部分组成:内容(结构)、表现、⾏为。
内容(结构):是我们在页⾯中可以看到的数据。我们称之为内容。⼀般内容,我们是使⽤html技术来展⽰。
表现:指的是这些内容在页⾯上的展⽰形式。⽐如说,布局,颜⾊,⼤⼩等等。⼀般使⽤CSS技术实现。
⾏为:指的是页⾯中元素与输⼊设备交互的响应。⼀般使⽤javaScript技术实现。
html⼀些标准格式:
<html>
<head>
<title>放⼊标题</title>
</head>
<body>
<font color = “red”> 今天的天⽓真好哇</font>
</body>
</html>
标签就相当于java类 ⼤括号 中存放的是⽹页的说明性内容,例如标题。 中存放的是展⽰给⽤户看的信息。
HTML⽂件中注意事项:
HTML⽂件的拓展名为html或者htm。htm是⽼的命名规范,html是新的命名规范。
HTML⽂件由浏览器直接解析执⾏,⽆需编译,直接由上倒下⼀次执⾏。
HTML标签通常由开始标签和结束标签组成。例如:<html> </html> <font> </font>
开始标签和结束标签之间的内容叫做内容体。
HTML没有内容体的标签叫做空标签。仅由⼀个标签组成。例如:<br/> ⾃关闭
HTML标签不区分⼤⼩写,为了⽅便阅读,建议使⽤⼩写。
HTML标签是有属性的,格式为:属性名 = “属性值”,属性值⽤引号引起,引号包括单引号和双引号。
HTML标签建议包裹嵌套,不建议交叉嵌套。
<!DOCTYPE html><!--约束,声明-->
<html lang="zh_CN"><!--html标签表⽰html的开始,lang="en":表⽰的是⽀持英语,lang="zh_CN"表⽰中⽂-->
<!--html标签中⼀般分为两部分,分别是head和body-->
<head><!--表⽰头部信息,⼀般包含三部分,title标签,css样式,js代码-->
<meta charset="UTF-8"><!--表⽰当前页⾯使⽤的UTF-8字符集-->
<title>标题</title><!--表⽰标题-->
</head>
<body><!--表⽰的html页⾯显⽰的主体内容-->
hello
</body>
</html>
标签分为基本属性和事件属性:
1.基本属性
bgcolor:表⽰背景颜⾊属性
onclick:表⽰单机(点击)事件
alert():是JavaScript语⾔提供的⼀个警告框函数,它可以接收任意参数,参数就是警告框的函数信息。常⽤的特殊字符:
< 对应<
> 对应>
空格对应
标题标签:
<h*></h*> *为1到6
如:<h1></h1> <h2></h2> 其中h1最⼤,h6最⼩
标签还能调节属性
超链接:
在⽹页中点击之后可以跳转的内容都是超链接。
<a></a>表⽰超链接,
href属性设置链接的地址。
target属性设置哪个⽬标进⾏跳转。
_self 表⽰当前页⾯
_blank 表⽰打开新页⾯来进⾏跳转
列表标签:
分为:⽆序列表,有序列表
<ul></ul>⽆序别表
<li></li>表⽰列表元素
例如:
<ul>
<li>赵四</li>
<li>赵五</li>
<li>赵六</li>
<li>赵七</li>
</ul>
<ol></ol>有序列表
例如:
<ol>
<li>赵四</li>
<li>赵五</li>
<li>赵六</li>
<li>赵七</li>
</ol>
Img标签
作⽤是显⽰图⽚
img标签是图⽚标签,⽤来显⽰图⽚
src属性可以设置图⽚的路径
width属性设置图⽚的宽度
height属性设置图⽚的⾼度
border属性设置边框⼤⼩
alt属性当指定路径不到图⽚时,⽤来代替显⽰的⽂本内容
在javaSE中路径也分为相对路径和绝对路径
相对路径:
从⼯程名开始算起
盘符/⽬录/⽂件名
在web中路径分为相对路径和绝对路径两种
相对路径:
. 表⽰当前⽬录
… 表⽰上⼀级⽬录
html radio点击变颜⽂件名 表⽰当前⽂件所在⽬录的⽂件,相当于./⽂件名(只是./可以省略)
table标签是表格标签
src属性可以设置图⽚的路径
width属性设置图⽚的宽度
height属性设置图⽚的⾼度
border属性设置边框⼤⼩
cellspacing设置单元格间距
tr是⾏标签
b标签是加粗标签
th是表头标签
td是单元格标签
align设置单元格对齐⽅式
colspan属性设置跨列
rowspan属性设置跨⾏
iframe标签可以在页⾯上开辟⼀个⼩区域显⽰⼀个单独页⾯
iframe标签和a标签组合使⽤的步骤:
1.在iframe标签中使⽤name属性定义⼀个名称
2.在a标签的target属性上设置iframe的name属性值
表单标签:
什么是表单?
表单是html页⾯中,⽤来收集⽤户信息的所有元素集合,然后把这些信息发送给服务器
form标签就是表⽰表单
<input type="text"/> 表⽰⽣成⼀个⽂本输⼊框
value属性设置输⼊框内的默认初始内容
<input type="password"> 表⽰密码输⼊框
<input type="radio"/> 表⽰的是单选框
性别:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>⼥
可以⽤name属性来达到分组的效果,同⼀只组内的单选只能选⼀个
checked=“checked” 还可以⽤这个标签来达到⼀上来的默认选项,表⽰默认选中
<input type="checkbox"/> 表⽰的复选框
<select></select>这个对标签表⽰的是下拉⽂本选择框
<option></option>这对标签是下拉列表中的选项
selected = “selected” ⽂本框中的默认选项
<textarea></textarea>表⽰多⾏⽂本输⼊框 (起始标签和结束标签中的内容是默认值)
rows属性设置可以显⽰⼏⾏的⾼度
cols属性设置每⾏可以显⽰⼏个字符宽度
<input type="reset"/> 表⽰的是重置按钮 value属性修改按钮上的⽂字
<input type="submit" value="点我就是提交啊"/> 表⽰的是提交按钮
<input type="button" value="俺就是⼀个普普通通的⼩按钮"/> 表⽰的是创建⼀个按钮
<input type=”file”/> 表⽰的是⽂件上传域
<input type=”hidden”/> 表⽰的是隐藏域(应⽤场景,当我们要发送某些信息,⽽这些信息,不需要⽤户参与,就可以使⽤隐藏域,提交的同时发送给服务器)
<form></form>是表单标签
action属性设置的是提交的服务器地址
method属性设置的是提交的⽅式 GET或POST
1.表单在提交的时候,数据没有发送给服务器的三种情况:
1)表单项没有name属性值
2)单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
3)表单项不在提交的form标签中
2.GET请求的特点是:
1)浏览器地址中的地址是:action属性[+?+请求参数]
请求参数的格式是:name=value&name=value
例如:password=abc&sex=girl&hobby=java
2)不安全(例如提交的密码等会显⽰出来)
3)它有数据长度的限制
method=”get”:此⽅法可传送UPL中的表单内容:UPL?name=value&name=value。
注释:如果表单值包含⾮ASCII字符或者超过100个字符,则必须使⽤method=”post”。
method=”post”:此⽅法可传送request主体中的表单内容
3.POST请求的特点是:
1)浏览器地址栏中只有action属性值
2)相对于GET请求要更加的安全
3)理论上没有数据长度的限制
其他的标签:
div标签:默认独占⼀⾏
span标签:它的长度是封装数据的长度
p段落标签:默认会在段落的上⽅或下⽅各空出⼀⾏来(如果已有就不再空)
CSS技术介绍
CSS是【层叠样式表单】,是⽤于(增强)控制⽹页样式并允许将样式信息与⽹页内容分离的⼀种标记性语⾔。
语法规则:
选择器p{
font-size: 80px;
}
选择器:浏览器根据“选择器”决定CSS样式影响的元素(标签)。
属性(property):是你要改变的样式名,并且每个属性都有⼀个值。属性和值被冒号分开,并由花括号包围,这样就组成了⼀个完整的样式声明(declaration),例如:p{color:blue;}
多个声明:如果要定义不⽌⼀个声明,则需要⽤分号将每个声明分开。虽然最后⼀条声明的最后可以不加分号(但是尽量在每条声明的末尾都加上分号)
CSS和HTML的结合⽅式
第⼀种:
在标签的style属性上设置”key:value value;”,修改标签的样式。
这样使⽤的缺点:
1)如果标签多了。样式多了。代码量会⾮常的庞⼤。
2)可读性很差
3)CSS代码没什么复⽤性可⾔
第⼆种:
在head标签中,使⽤style标签来定义各种⾃⼰需要的CSS样式。
格式如下:
xxx {
key : value value;
}
这样使⽤的缺点:
1)只能在同⼀页⾯复⽤代码,不能在多个页⾯中复⽤CSS代码。
2)维护起来不⽅便,实际的项⽬中会有成千上万的页⾯,要到每个页⾯中去修稿,⼯作量太⼤。
第三种:
把CSS样式写成⼀个单独的CSS⽂件,再通过link标签引⼊即可复⽤
使⽤html的标签,导⼊CSS样式⽂件。
CSS选择器
标签名选择器:
标签名选择器的格式是:
标签名{
属性:值;
}
标签名选择器的作⽤是,可以决定哪些标签被动地使⽤这个样式。
id选择器
#id属性值{
属性:值;
}
id选择器,可以让我们通过id属性选择性的去使⽤这个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 5px;
border: 2px aquamarine dotted;
}
</style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
class选择器(类型选择器)
class类型选择器的格式是:
.class属性值{
属性:值;
}
class类型选择器,可以通过class属性有效地去使⽤这个样式。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论