JavaScript基础-1
为什么需要JavaScript?JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需 浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意.
JavaScript简介JavaScript是一种可以与HTML标记语言混合使用的脚本语言,其编写的程序可以直接在浏览器中解释执行。对于很多初学者而言,往往会将JavaScript脚本语言与JAVA编程语言混为一谈。实际上从本质上来说,这二者并没有什么必然的联系。
Javascript的国际标准是ECMAScript。
js的声明学习:
在head标签中使用script标签进行js代码域的声明
作用:声明js代码域
特点:js的代码只会作用于当前网页
在head标签中使用script标签引入外部声明好的js文件
<-script src=”相对路径” type=”text/javascript” charset=”utf-8”>
作用:引入外部声明好的js文件
...
css学习-4
css的定位学习
position
相对定位:relative
作用:相对元素原有位置移动指定的距离(相对的自己的原有位置)
可以使用top,left,right,bottom来进行设置。
注意:其他元素的位置是不改变的。
绝对定位:absolute
作用:可以使用元素参照界面或者相对父元素来进行移动
注意:如果父级元素成为参照元素,父元素必须使用相对定位属性
默认情况下是以界面为基准进行移动的。
固定定位:fixed
作用:将元素固定现在页面的指定位置,不会随着滚动条的移动而改变位置。
以上定位都可以使用top,left,right,bottom来进行移动。
z-index:此属性是用来声明元素的显示级别的。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意
元素可拥有负的 z-index 属性值。
Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
说明
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更 ...
css学习-3
css的盒子模型学习
div标签:
块级标签,主要是用来进行网页布局的,会将其中的子元素内容作为一个独立的整体存在。
特点:
默认宽度是页面的宽度,但是可以设置。
高度默认是没有的,但是可以设置。(可以顶开)
如果子元素设置了百分比的高或者宽,占据的是div的百分比,不是页面的。
盒子模型:
外边距:margin
作用:用来设置元素和元素之间的间隔。
居中设置:margin:0px auto;上下间隔是0px,水平居中。
可以根据需求单独的设置上下左右的外边距。
边框:border
作用:用来设置元素的边框大小
可以单独设置上下左右
内边距:padding
作用:设置内容和边框之间的距离
注意:内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距
内容区域:
作用:改变内容区域的大小。
设置宽和高即可改变内容区域的大小。
注意:进行页面布局时要清除整个页面的内外边距
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,b ...
css学习-2
css的选择器学习
标签选择器:
标签名{样式名1:样式值1;……}
作用:会将当前网页内的所有该标签增加相同的样式
id选择器:
#标签的id属性值{样式名1:样式值1;……}
作用:给某个指定的标签添加指定的样式
class类选择器:
.类选择器名{样式名1:样式值1;……}
作用:给不同的标签添加相同的样式
全部选择选择器
‘*’{样式名1:样式值1;……}
作用:选择所有的HTML标签,并添加相同的样式
组合选择器:
选择器1,选择器2,……{样式名1:样式值1;……}
作用:解决不同的选择器之间重复样式的问题
子标签选择器
选择器1 子标签选择器{样式名1:样式值1;……}
属性选择器:
标签名[属性名=属性值]{样式名1:样式值1;……}
作用:选择某标签指定具备某属性并且属性值为某属性值的标签
css学习-1
CSS声明学习
在head标签中使用style标签声明:
作用:此声明一般声明当前网页的公共样式或者给某个标签的单独样式
在head标签中使用link标签引入外部声明好的css文件
<-link rel=”stylesheet” type=”text/css” href=”路径”/>
作用:此声明相当于调用,解决了不同网页间样式重复使用的问题.一次声明,随处使用
在标签上使用style属性进行声明:
作用:此声明会将css样式直接作用于当前标签。
问题:不同的声明给同一个标签操作了同一个样式,会使用谁的?
如果Css的声明全部在head标签中,则遵循就近原则,谁离标签近,谁就会被显示。12345678910111213141516171819202122<html> <head> <meta charset="UTF-8"> <title>css的声明学习</title> <!--引入外部声明好的css文件--> <link rel="s ...
HTML学习-6
表单标签-form
作用:收集并提交用户数据给指定服务器
属性:
action:收集的数据提交地址也就是URL
method:收集的数据的提交方式
get :适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.
post:适合大量数据,安全,隐式提交
注意
表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.
提交的表单项数据为键值对,键为name属性的值,值为用户书写value的数据
form标签会收集其标签内部的数据(name值和value值)
form表单的数据提交需要依赖于submit提交按钮.
form表单标签的使用:在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式,提交给action属性所指明的提交地址.表单域标签学习:
作用:给用户提供可以进行数据书写或者选择的标签.
使用:
文本框:input标签
type:
text 收集少量的文本数据,用户可见
password 收集用户密码数据
name:数据提交的键,也会被js使用( ...
HTML学习-5
内嵌标签-iframe
iframe
属性:
src:要显示的网页资源路径。可以是本地(相对路径)也可以是网络资源(URL)
注意:默认当前页面打开及加载src指向的资源
width:设置显示区域的宽度
height:设置显示区域的高度
name:设置内嵌区域的名字,结合超链接标签的target属性使用。src属性为空
作用:
在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.
1234567891011121314<html> <head> <title>内嵌标签学习</title> <meta charset="UTF-8"/> </head> <body> <h3>内嵌标签学习</h3> <hr /> <a href="http://www.baidu.com" target="_if">百度一下</a> < ...
HTML学习-4
表格标签
标签
table :声明一个表格
tr:声明一行,设置行高及改行所有单元格的高度.
th:声明一个单元格,表头格.默认居中加黑显示
td:声明一个单元格,默认居左显示原始数据
注意:
行高即改行所有单元格的宽度
单元格的宽度即列宽
属性:
border:给表格添加边框(默认为0不显示)
width:设置表格的宽度
height:设置表格的高度
cellpadding:设置内容距边框的距离(css中设置table的cellpadding属性值无效)
cellspacing:设置边框的大小css中同上)
特点:
默认根据数据的多少进行表格的大小显示
单元格的合并-rowspan colspan
第一步:
首先确保表格是一个规整的表格
第二步
根据要合并的单元格,找到其所在的源码位置
第三步
行合并:在要合并的单元格中的第一个单元格上使用属性rowspan=”要合并的单元格的个数”,并删除其他要合并的单元格完成合并
列合并:在要合并的单元格中的任意一个上使用属性colspan=”要合并的单元格的个数”,并删除要合并的其他单元格
表格标签宽高设置
一个 ...
相对路径与绝对路径
相对路径从当前文件出发查找另一个文件所经过的路径
相对路径:即相对于当前文件的路径,前端开发中比较常用的路径表示方法
相对路径更方便更改,相对比较灵活,但是如果不慎易造成链接失效,并且容易被人抄袭。
绝对路径从根盘符出发所查找文件的路径
绝对路径:即主页文件或者目录在硬盘上真正的路径
绝对路径的话能避免这个问题,但是灵活性上相对较弱。
路径问题
符号表示
/ :表示根目录
./ :表示当前目录
../ : 表示上一级目录
../../:表示上两级目录(依次类推)
同级
同级就是指图片和.html文件储存在同一个文件中
格式:src=”596c68fdd8bcf.jpg”
含义:在.html文件所在文件夹中查找名称叫做596c68fdd8bcf.jpg的图片
下级
下级就是存储图片的文件夹和.html文件在同一个文件夹中
格式:src=”图片/596c68fdd8bcf.jpg”
含义:在。html文件所在文件夹中查找名称为图片的文件夹然后在图片文件夹中找到叫做- 596c68fdd8bcf.jpg的图片
上级
上级存储图片的位置和存储代码的文件夹在同一个文件夹中
...
HTML学习-3
列表标签
无序列表-ul li
ul li:该标签中书写列表内容,一个li标签代表列表中的一行数据
特点: 默认数据前有一个黑圆圈符号.
有序列表-ol li
ol li:该标签中书写列表内容,一个li标签代表列表中的一行数据
特点:会自动的给列表进行顺序编码,格式从小到大并且是连续的.
属性:type:可以改变顺序编码的值,可以是1 a A I,,默认使用阿拉伯数字进行顺序编码
自定义列表-dl dt dd
dl dt:数据的标题 dd:数据的具体内容,一个dd表示一条数据.
1234567891011121314151617181920<ul> <li>北京</li> <li>上海</li> <li>商丘</li></ul><ol type="I"> <li>打游戏</li> <li>打球</li> <li>看电影</li></ol><dl> ...