一.Html使用指令:
1.html注释:
注释: <!-- --> 2.文本标签:
1)标题标签:
<h1>文字</h1>
大小范围:<h1> - <h6>2)水平线标签:
<hr />
水平线一行穿过3)子体标签:
<!-- 子体标签 color属性:标记字体颜色 size:字体大小:1-7-->
<font color="blue" size="7">统一中国</font>4)滚动标签:
<!-- 滚动标签
属性:
behavior 滚动方式:
scroll:交替(穿梭滚动)
alternate:来回滚动: 碰到浏览器边框 再去滚动
slide:滚动一边结束
direction:默认滚动方向: 从右到左left
bgcolor:背景颜色
scrollamount:滚动速度
-->
<
<marquee behavior="slide" bgcolor="yellowgreen" direction="right" scrollamount="25">开始滚动了</marquee>5)div标签:
<!-- div标签
div+css使用 :层级布局
单独使用:块标签,占一行内容 ,自动换行
-->
<div>手机数码</div>6)span标签
<!-- span标签 行内标签
没有什么显示,一般在js里面:简单表单校验
-->
<span>span1</span> 显示:span17)换行标签:
<br />8) 段落标签:
段落标签 标记某一段内容
<p>
DBUtils是java编程中的数据库操作实用工具，小巧简单实用.
</p>9)引用标签(段落缩进标签):
引用标签(段落缩进标签):文章中对上面的某段内容进行解释说明
<blockquote>
BeanHandler ：将ResultSet中第一行的数据转化成类对象 1)
BeanListHandler ：将ResultSet中所有的数据转化成List，List中存放的是类对象 2)
</blockquote>
1) 2)打在一行上.10)pre:原样输出标签,按照当前文本的特定格式去显示:
<pre>
沁园春
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；
大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；
唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
俱往矣，数风流人物，还看今朝.
</pre>11)锚点:
锚点
<a name="mypre"></a>
id ="名称"不唯一
class = "名称"唯一12)列表标签:
<!-- 列表标签:ul li 无序列表
type="disc" 默认实心原点
ol li 有序列表
ol的type="1" 默认1开始
-->
ul type="disc" 默认实心原点
type="square" 默认实心方点
<ul type="square">
<li>用户管理</li>
<li>商品管理</li>
<li>订单管理</li>
<li>分类管理管理</li>
</ul>
<ol type="1">
<li>用户管理</li>
<li>商品管理</li>
<li>订单管理</li>
<li>分类管理管理</li>
</ol> 13)加粗:
<b>中国</b>14)斜体:
<em>中国</em>3.超链接:
1)标签超链接:
用法1:
用法1:href属性
转到外部资源url地址上
target:打开外部资源文档的方式
默认值就是_self:就是当前窗口直接打开
_blank:新建窗口打开
<a href="01_html入门.html" target="_blank">超链接</a><br />
<a href="#foot">跳转底部</a><br/> 跳转底部
<a href="#top">跳转顶部</a><br/> 跳转顶部
href后面:使用url地址(统一资源定位符号) (
协议:
http//域名...使用最多)
http协议
默认在计算机的
C:\Windows\System32\drivers\etc
hosts文件
记录ip地址 绑定的域名
127.0.0.1 localhost 本机
如果没有找到www.baidu.com 对应的ip地址.电脑调用网卡
进行联网操作----DNS服务器(网络运营商)
将大部分常见的ip地址 和域名进行绑定
14.215.177.39 www.baidu.com
访问百度服务器
thunder://迅雷协议
电脑上有迅雷软件,他会自动打开...
ftp协议
mailto:邮件协议
<a href="http://www.baidu.com">链接到百度</a><br/>
<a href="thunder:///www.ygdy8.net/html/gndy/dyzz/index.html">
<<我的青春有个你>>高速通道</a>
<br/>
<a href="mailto:www.mail.com">发送一份邮件</a><br/>用法2:
用法2:作为锚链接使用
1)在当前页面先创建锚点
<a name="锚点名称"><a/>
2)创建条件标记
<a href="#锚点名称">开始跳转</a>
<a href="#foot">跳转底部</a><br/>锚链接
<a name="top"></a><!-- 标记 --> 标记
<a href="#top">跳转顶部</a><br/> 锚链接
<!-- 创建锚点:书签 -->
<a name="foot"></a> 标记
2)在不同页面上使用锚点
a)在链接到的页面上的某个位置打锚点
<a name="锚点名称"><a/>
b)在当前页面的某个位置创建跳转
<a href="url#锚点名称">开始跳转</a>
<!-- 锚点-->
<a name="mypre"></a>
<a href="01_html入门.html#mypre">跳转不同页面的标记位置</a><br/>4.图像标签:
img
src:加载图片资源地址(url)相对路径
width/height:图片宽度/高度
单位:px 或者占当前整个屏幕分辨率的百分比
alt:替代文本,当图片失效的时候,替代文本起作用(对图片解释说明)
title:当前鼠标悬浮在图片上时,提示的文字描述
<img src="img/q.jpg" width="400px" height="400px"
alt="这是洗碗机" title="洗碗机"/><br/>5.表格标签:
1)表格标签:
<!--
表格标签
table
属性:border 边框大小
width/height:宽度和高度
bgcolor:背景色
align:对齐方式
cellspacing:设置边框线和单元格之间距离 0
caption:表格标题标签
子标签:tr:行
td:行中的单元格
th:特殊单元格(表头单元,自动居中加粗)
使用:
单元格合并:
合并行(行合并):rowspan="所占单元格个数"
合并列(列合并):colspan="所占单元格个数"
-->
<table border="1px" width="500px" cellspacing="0" height="400px" align="center" bgcolor="greenyellow">
<caption><b><font color="green">xxx学员信息表</font></b></caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>数学成绩</th>
</tr>
<tr align="center">
<td>2</td>
<td>文章</td>
<td>35</td>
<!-- 合并行 -->
<td rowspan="2">男</td>
<td>78</td>
</tr>
<tr align="center">
<td>3</td>
<td>赵又廷</td>
<td>45</td>
<!-- <td>男</td> -->
<td>88</td>
</tr>
<tr align="center">
<!-- 列合并:合并列 -->
<td colspan="4">平均分</td>
<!-- <td></td>
<td></td> -->
<td>80</td>
</tr>
</table>3.表格应用场景:
1)表格的单元格里面嵌套表格:
早期可以使用表格去布局:
使用table去完成布局
一行一列的表格中进行 嵌套
表格的单元格里面嵌套表格
表格标签嵌套表格标签:早期使用页面布局,可以用,存在弊端
整个表格的宽度和高度一旦设置了,里面的单元的长度也是固定,所以一旦单元格被修改了,
整个布局全部乱套!
div+css:盒子模型 层级布局
区布局的!
<table >
<tr>
<td>
<!-- 第一部分:logo部分 -->
<table width="100%">
<tr>
<td>
<img width="100%" src="img/logo2.png" />
</td>
<td>
<img src="img/header.jpg" width="100%" />
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
<!--
第二部分
-->
<table>
<td bgcolor="black">
<a style="color: white;" href="#">xiaomi手机</a>
<a style="color: white;" href="#">红米手机</a>
<a style="color: white;" href="#">电视</a>
<a style="color: white;" href="#">笔记本</a>
<input type="text" />
</td>
</table>
<!-- 第三部分-->
<table>
<td>
<img src="img/1.jpg" />
</td>
</table>
<!-- 商品图片-->
<!-- 底部版权所有-->
</td>
</tr>
</table>
<p>
<!-- 上下标标签 -->
xxx公司版权所有<sup>©</sup>20210-2022 <sub>®</sub>
</p>6.表单标签:
1)form标签:
form标签 ---表单
两个属性:
action:提交后台的URL地制
method:提交方式
常用两种
get:
1)它是将用户的数据提交到地址栏上,请求服务器,将这些用户的参数携带后台
url?key1=value1&key2=value2&...
2)不安全,不适合隐私数据
3)地址上进行请求,地址栏上的数据有限制的!
post:
1)不会将用户的数据提交地址栏上---f12 进入调试器 NETWORK
在请求头Request headers
FORM DATA
key1=value1&key2=value2&...
2)post方式,相对get方式,安全一些
3)提交的数据大小没有限制!
必须有表单项
文本输入框
input标签 type="text"
密码输入框
input标签 type="password"
这些表单项必须填写属性:name----- 以后必须和当前实体类的属性名称一致!
<body>
<form action="server.html" method="post">
用户名:<input type="text" name="username" /><br />
<!--
转义字符
代表一个空格
 :代表两个空格
-->
密  码:<input type="password" name="password" /><br />
<input type="submit" value="登录" />
</form>
</body>2)input标签:
<!--
input标签
type="text" :文本输入框
type="password" :密码输入框
type="radio" 单项按钮
type="checkbox" 复选框
type="date" 日期组件
type="email" 邮箱:邮箱必须符合邮箱格式@,不能够提交
type="file" 文件上传
type="button" 普通按钮,必须value属性
特殊按钮
type="submit" 提交按钮 value="xx"
type="rest" 重载按钮
select 标签:下拉菜单
option:下拉选项
textarea:文本域
这些必须要指定name属性:给系统后台标记前台输入的内容
-->
<body>
<form action="server.html" method="get">
<!-- h5的属性:placeholder -->
用户名:<input type="text" placeholder="请输入用户名" name="username" /><br />
密  码:<input type="password" placeholder="请输入密码" name="password" /><br />
性别:
<!-- radio: 看同一组信息
必须相同的name属性
-->
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女<br />
技能:
<!-- 看同一组信息
必须相同的name属性
-->
<input type="checkbox" name="tec" value="mysql" />mysql
<input type="checkbox" name="tec" value="JavaSE" />JavaSE
<input type="checkbox" name="tec" value="html" />html
<input type="checkbox" name="tec" value="js" />js
<input type="checkbox" name="tec" value="Jbdc" />Jdbc<br/>
出生日期:
<input type="date" name="birthday" /><br/>
邮箱:
<input type="email" name="email" /><br/>
籍贯:
<!-- 下列菜单:原生的 -->
<select name="jg" >
<option value="请选择">请选择</option>
<option value="西安市">西安市</option>
<option value="咸阳市">咸阳市</option>
<option value="渭南市">渭南市</option>
<option value="宝鸡市">宝鸡市</option>
</select><br />
上传照片:
<input type="file" name="photo" /><br />
普通按钮:
<input type="button" value="点我试试" /><br />
<input type="submit" value="注册" />    <input type="reset" value="清空" />
</form>
</body>3)案例:(表单嵌套表格)
<html>
<head>
<meta charset="utf-8">
<title>格式优雅的表单</title>
<style>
/*使用css的id选择器*/
#formId{
width: 380px;
height: 280px;
/*CSS样式代码*/
margin-left:400px;
margin-top: 100px;
background-color:whitesmoke;
}
</style>
</head>
<body>
<!-- 引入css -->
<div id="formId">
<form action="server.html" method="get">
<table border="1px" cellspacing="0" width="380px" height="300px" >
<caption>xx后台管理系统</caption>
<tr>
<td>
用户名
</td>
<td>
<input type="text" placeholder="输入用户名" name="username" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" placeholder="输入密码" name="password" />
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" placeholder="输入密码" name="repassword" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="date" name="birthday" />
</td>
</tr>
<td>
籍贯
</td>
<td>
<select name="jiguan">
<option value="请选择">请选择</option>
<option value="西安市">西安市</option>
<option value="宝鸡市">宝鸡市</option>
<option value="渭南市">渭南市</option>
<option value="咸阳市">咸阳市</option>
<option value="神木市">神木市</option>
</select>
</td>
<tr align="center">
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
7.CSS样式:
1)三种使用方式:
方式1:行内样式(内联样式)只能一次性控制一个标签
在html标签上给定一个属性:style="样式名称1:样式值1;样式名称2:值2;.."
弊端:1.只能一次性控制一个标签
2.html标签带和style样式混合使用,不利于后期维护!
----方式2-------------------------------------------------
方式2:内部样式:不需要每一次给html标签写style
在head标签体中
子标签:style标签
选择器{
样式名称1:样式值1;
样式名称2:值2;
...
...
}
<!-- 内部样式-->
<style>
/* 标签名称选择器*/
/* div{
color: red;
font-size: 30px;
} */
</style>
----方式3-------------------------------------------------
方式3:外部方式: 创建一个.css文件 :将样式代码放进去
哪个html页面要使用CSS文件,导入外部css文件
选择器:
标签名称选择器{
样式名称1:样式值1;
样式名称2:值2;
}
<!-- 外部方式
前端开发人员:用是这种方式
link标签导入外部css文件
rel:固定写法:关联层叠样式库中的样式
-->
<link href="css/my.css" rel="stylesheet" />2)标签名称选择器:
标签名称选择器 (element元素选择器)
标签名称{
样式名称1:value1;
样式名称2:value2;
}
例:
div{
font-size: 20px;
color: green;
}3)class选择器:
在html标签上指定class属性
.class属性值{
样式名称1:value1;
样式名称2:value2;
}
注意:在同一个html页面上,多个标签可以使用同一个class属性值
使用注意: class选择器 > 标签选择器4)id选择器:
id选择器
在html标签上指定id属性
#id属性值{
样式名称1:value1;
样式名称2:value2;
}
注意:在同一个html页面上,id属性值必须唯一,否则通过js 获取不到标签对象!
document.getElementById("id属性值"):获取标签对象的id属性值必须唯一!
id选择器优先级 >class选择器> 标签选择器
id选择器 #div1{
font-size: 40px;
color: darkblue;
}
<div class="d1" id="div1"> <span>span标签</span></div>
5)子元素选择器:
子元素选择器
代码
selector1 selector2{
样式名称1:value1;
样式名称2:value2;
}
selector2选择器它控制的html标签是selector1选择控制的标签的子标签
子元素选择器 #div1 span{
color: dimgrey;
font-size: 50px;
}
<span>span标签</span>6)并集选择器:
并集选择器
selector1,selector2,selector3..{
样式名称1:value1;
样式名称2:value2;
}
并集选择器 #div1,#div2{
color:darkorange ;
font-size: 50px;
}
<div class="d1" id="div1"> <span>span标签</span> </div>
<div id="div2"><<金刚川>></div>
7)通用选择器:
通用选择器:
*{
color:deeppink ;
font-size: 30;
}8)伪类选择器:
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<!--
锚伪类:针对某个标签的状态
状态分为:
link:表示没有访问过的状态
hover:表示鼠标经过的状态
active:激活状态---鼠标点击了,没有松开
visited:已经访问过的状态
书写样式:
选择器:状态名称(不区分大小写){
书写样式;
}
-->
<style>
/*
选择器:状态名称(不区分大小写){
书写样式;
}
*/
/* 没有访问过的状态*/
a:link{
color: darkblue ;
/* 去掉文本修饰:下划线*/
text-decoration: none;
font-size: 15px;
}
a:visited{
color: darkgray ;
/* :下划线*/
text-decoration: underline;
font-size: 20px;
}
/* 鼠标经过的状态*/
a:hover{
color: deeppink ;
/* :下划线*/
text-decoration: underline;
font-size: 25px;
}
/* 激活状态:点击了,没有松开*/
a:active{
color: greenyellow ;
/* :下划线*/
text-decoration: none;
font-size: 35px;
}
/*
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
*/
</style>
</head>
<body>
<!--
写一个表格标签:3行4列,鼠标每经过一行的时候,设置背景色蓝色:
背景色的样式属性:
background-color:blue;
-->
<a href="06_表单标签_1.html">点我试试</a>
</body>***案例:(鼠标划过表每行):
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.trClass:hover{
/*背景色的样式*/
background-color: blue;
}
</style>
</head>
<body>
<table border="1px" width="500px"
height="400px" align="center" cellspacing="0">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr class="trClass">
<td>1</td>
<td>张</td>
<td>20</td>
<td>西安市</td>
</tr>
<tr class="trClass">
<td>2</td>
<td>李四</td>
<td>26</td>
<td>西安市</td>
</tr>
<tr class="trClass">
<td>3</td>
<td>王五</td>
<td>23</td>
<td>咸阳市</td>
</tr>
<tr class="trClass">
<td>4</td>
<td>文章</td>
<td>35</td>
<td>西安市</td>
</tr>
</table>
</body>
</html>9)CSS文本样式属性:
<head>
<meta charset="utf-8">
<title>CSS文本样式属性</title>
<style>
.trClass:hover{
/*背景色的样式*/
background-color: blue;
}
/* CSS文本属性
color:值; 设置文本的颜色
text-align:值; 设置文本的对齐方式
text-decoration:值:(默认值:none:没有下划线
underLine:下划线
overLive:上划线
line-through:中划线
)
letter-spacing:字符间距
word-spacing:字间距(单词间距)
系统认为两个字组成一个单词
line-height:行高: 字符的行高
*/
.trClass{
/* 文本颜色 */
color: orange;
/* 设置文本的对齐方式 */
text-align: center;
/* 设置文本装饰 */
text-decoration: underline;
letter-spacing: 10px;
word-spacing: 10px;
line-height: 60px;
}
</style>
</head>
<body>
<table border="1px" width="500px"
height="400px" align="center" cellspacing="0">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr class="trClass">
<td>1</td>
<td>张三</td>
<td>20</td>
<td>西安 咸阳 宝鸡 渭南</td>
</tr>
<tr class="trClass">
<td>2</td>
<td>李四</td>
<td>26</td>
<td>西安市</td>
</tr>
<tr class="trClass">
<td>3</td>
<td>王五</td>
<td>23</td>
<td>咸阳市</td>
</tr>
<tr class="trClass">
<td>4</td>
<td>文章</td>
<td>35</td>
<td>西安市</td>
</tr>
</table>
</body>10)CSS字体样式属性:
<head>
<meta charset="utf-8">
<title>14_CSS字体样式属性</title>
<!-- 引入谷歌字体 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<!--
字体的样式
font-family:字体库中的类型(黑体,宋体,楷体...)
-->
<style>
#p1{
/* 体库中的类型 */
/* font-family: "楷体"; */
/* 字体大小 */
/* font-size: 20px ; */
/* font-style:字体的样式:字体是斜体/正体 */
/* font-style: italic; */
/* 字体的粗细程度
bold:适当加粗
bolder:相对bold 字体粗细程序大一些
*/
/* font-weight: bolder; */
/* 将字体的所有属性样式声明在一个样式代码
简写属性
font: font-style font-weight font-size/line-height font-family
*/
font:normal bolder 50px "楷体";
}
</style>
<!-- 引入谷歌的字体文件-->
</head>
<body>
<p id="p1">hello,html And CSS,这个字体属性</p>
<p>hello,html And CSS,这个字体属性</p>
<p>hello,前端</p>
</body>11)css背景:
1>背景颜色:
<style>
body{
//背景颜色 background-color
background-color: darkgray;
//背景图片ackground-image:url(图片地址)
背景图片:如果没有全尺寸(整个视口)那么大,那么当前的图片就x轴y轴重复
background-image: url(img/q.jpg );
}
</style>2>设置背景图片是否重复:
background-repeat:
设置背景图片是否重复以及如何重复
repeat-x:x轴重复
repeat-y:y轴重复
repeat:x轴y轴都重复(默认值)
no-repeat:不重复
background-repeat: no-repeat; 3>设置图片的起始位置:
background-position:设置图片的起始位置
默认值就是left top 左上
right top 右上
center center 居中
background-position: left top;4>背景的简写熟悉呢:上面所有的属性书写一块:
background:background-color background-image background-repeat background-position
举例:
background: darkseagreen url(img/q.jpg) no-repeat center top;12.css边框设置:
1>边框的颜色:
边框的颜色:四个边
border-color:颜色(每个边默认颜色)
border-left-color: red ;
border-right-color: blue;
border-top-color: darkgray;
border-bottom-color: green;2>框的宽度:
borderwidth:分辨率(每个边默认宽度)
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px; 3>边框的样式:
边框要想显示必须设置边框的样式
单实线:solod
虚线:dashed
双实现:double
点:dottoed
border-left-style: double;
border-right-style: dotted;
border-top-style: solid;
border-bottom-style: dashed;
border-style: solid(每个边默认颜色)4>边框的简写属性:
边框的简写属性
border:border-with border-style boder-color
border: 4px solid #000;5>案例:
<style>
#di1{
注意:颜色 宽度 样式必须一块使用.
/**
* 边框的颜色/宽度/样式:都有简写属性
* 1)设置的时候:默认方向
* 2)某个边没有颜色/宽度/样式,会补齐对边的颜色/宽度和样式
* border-color:上 右 下 左
* border-width:上 右 下 左
* border-style: 上 右 下 左
*/
* 边框的简写属性
* border:border-with border-style boder-color
*/
border: 4px solid #000;
width: 200px;块标签的宽度
height: 200px;块标签的高度
}
</style>
</head>
<body>
<div id="di1">这是div块标签</div>
</body>13.浮动:
1>CSS浮动属性:
当前某个框如果设置了浮动属性,那么就会脱落当前文档流(html文档标签顺序),
其他框随着移动,浮动的框碰到其他外边框就停止了!
float:left,rigth :左浮动/浮动2>案例:
<head>
<meta charset="utf-8">
<title>SCC浮动</title>
<style>
#log{
line-height: 50px;
}
#id1{
/* width: 200px;
height: 200px;
border: 1px solid #000;
background-color: blue ; */
float: left;
}
#id2{
/* width: 200px;
height: 200px;
border: 1px solid #000;
background-color: blue ; */
float: left;
}
#id3{
/* width: 200px;
height: 200px;
border: 1px solid #000;
background-color: blue ; */
float: left;
}
#id5{
line-height: 40px;
background-color: #000000;
}
.dd{
color: white;
text-decoration: none;
}
#clear{
clear: both;
}
</style>
</head>
<body>
<div id="log">
<div id="id1">
<img src="img/img/logo2.png" />
</div>
<div id="id2">
<img src="img/img/header.jpg" />
</div>
<div id="id3">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">管理</a>
</div>
</div>
<div id="clear"></div>
<div id="id5" >
<a class="dd" href="#">首页</a>
<a class="dd" href="#">手机数码</a>
<a class="dd" href="#">笔记本</a>
<a class="dd" href="#">服务器</a>
<a class="dd" href="#">鞋靴</a>
</div>
</body>14.盒子模型:
设置外边距:上 右 下 左
margin: 100px 0 0 400px;
btnDiv{
margin: 20px 0 0 150px;
}
说明:针对块标签进行距离设置.15.css定位:
html标签---网页结构搭建好
css代码--- 给网页标签加入修饰(颜色,图片,背景色,边框...)
完成一些特殊的效果:点击/触发相关的时间(双击/鼠标经过...)
javascript来完成!
定位属性:position
绝对定位absolute:针对父标签进行移动
div1针对body(浏览器进行移动:向下,向右移动)
相对定位relative
当前元素针对以前的位置进行移动
固定定位fixed:不会随着浏览器的滚动条而滚动,永远处在某个位置
给固定的值
left
top
left:向右移动
top:向下移动
#adv{
width: 220px;
height: 180px;
border: 1px solid #000;
/* 固定定位 */
position: fixed;
left: 550px;
top: 180px;
}二.javascript:
1.定义变量以及数据类型:
javascript:是一个弱类型语言,语法结构不严谨!
js中定义变量
用var来定义
注意事项:
1)js中,不存在重复定义,后面定义的变量会前面的变量名覆盖掉!
2)js中,使用var可以定义任何数据类型,var可以省略不写
typeof(变量名):可以查看当前变量的数据类型,js中通过值判定的数据类型
js变量的类型:
a)无论整数还是小数,都是number类型(基本数据类型)----Number:js内置对象
b)无论数据是字符串还是字符,都是string类型(基本类型)---String:内置对象
c)boolean类型:true/false----- Boolean内置对象
d)object-----Object内对象:所有js对象(自定义/js内置对象)的模板
e)undefined:未定义类型,当前变量没有赋值,没有意义!2.打印输出:
内部方式:
//js中常用的一些函数
document.write("hello,javscript!") ; //向浏览器中写入内容
//在控制台打印内容
console.log("hello,javascript") ;
//弹对话提示框
/**
* window出窗口对象,顶级对象,频繁使用,可以省略
*/
/* window.alert("hello,javascript") ; */
alert("hello,高圆圆") ;
<!-- 外部方式
前端人员使用这个方式
引入外部xx.js文件
引入外部js文件,必须有开始有结束的script
-->
<script src="js/my.js"></script>3.运算符_流程控制语句:
1)运算符:
1>赋值运算符, = ,+=,-=
2>比较运算符: >,<,>=,<=,==
3>逻辑双与&& 逻辑双或||
4>三元运算符:(表达式)? 执行成立的结果:执行不成立的结果;
2.选择结构语句:
if
switch
循环语句
for
while
do-while
var week = 3 ;
var b = 3 ; 不同之处
switch(week){
case 1:
document.write("星期一<br/>") ;
break ;
case 2:
document.write("星期二<br/>") ;
break ;
case b:
document.write("星期三<br/>") ;
break ;
default:
document.write("周末") ;
break ;
}3.函数定义格式:
function 函数名称(方法名)(参数名称1,参数名称2,参数名称....){
业务操作;
可以写 /也可以显示结果;
}4.调用函数:
a)定义函数的里面return语句
采用赋值调用
var 变量名 = 函数名称(实际参数列表) ;
输出结果
b)定义的函数的时候里面没有return语句
单独调用
函数名称(实际参数列表) ;5.定义函数的注意事项:
定义函数的注意事项
1)函数中的形式参数不能携带var
2)js中的函数式可以有return语句,不需要返回值类型,格式始终function 函数名称(形参列表){}
3)js是一个弱类型语言,没有重载的概念,后面的定义将前面相同的函数覆盖了
4)如果函数的形式参数个数小于实际参数个数,结果是NaN(没值,有一个形式参数没有赋值),但是函数依然调用了
函数的形式个数小于实际参数个数,结果是将前面的实际参数赋值形参,将多余实际参数去除了,得出结果!
5)函数里面存在默认的数组arguments名称,目的就是将实际参数绑定给形式参数,赋值...3.for-in语句:
for-in类似于Java中的增强for循环
格式
for(var 变量名 in 对象名称){
输出变量名
}
应用场景:遍历对象的属性或者数组的内容
for(var x in arr){
document.write(arr[x]+"<br/>") ;
}
document.write("<hr/>") ;
//创建一个对象
var s = new Student("高圆圆",20) ;
for(var i in s){
document.write(s[i]+"<br/>") ;
}4.事件编程:
1>三要素:
1)事件源:一般都指定的是html标签
2)编写事件监听器:编写一个函数
3)绑定事件监听器,绑定这个函数 举例:onclick绑定单击事件2>DOM编程思想:
获取标签对象,使用标签对象访问属性! 3>js中dom操作方法:
//js中dom操作:docuement.getElementById("id的属性值") ;
var inputObj = document.getElementById("month") ;
//测试
//alert(inputObj.value) ;
var month = inputObj.value ;4>案例:
<body>
<input type="text" id="month" placeholder="请输入月份" />
<input type="button" value="查询" onclick="clickButton()" /><!-- 事件源 -->
</body>
<script>
//定义一个函数----点击查询的点击事件
function clickButton(){
//获取input type="text"文本输入框的标签对象 input
//js中dom操作:docuement.getElementById("id的属性值") ;
var inputObj = document.getElementById("month") ;
//测试
//alert(inputObj.value) ;
var month = inputObj.value ;
//alert(typeof(month)) ;
//选择结构语句判断
//if...else if...else
//Js:string == number类型:string--->默认转换成number类型然后在比较!
/* if(month == 3 || month== 4 || month ==5){
alert("春季") ;
}else if(month == 1 || month == 2 || month==12){
alert("冬季") ;
}else if(month == 6 || month ==7 || month == 8){
alert("夏季") ;
}else if(month == 9|| month ==10 || month==11){
alert("秋季");
}else{
alert("对不起,没有改月份...") ;
} */
//类型转换函数:js
//将字符串---->number 整数
var month = parseInt(month) ;
// alert(typeof(month)) ;
switch(month){ //string---String
case 1: //number---Number
case 2:
case 12:
alert("冬季") ;
break ;
case 3:
case 4:
case 5:
alert("春季") ;
break ;
case 6:
case 7:
case 8:
alert("夏季") ;
break ;
case 9:
case 10:
case 11:
alert("秋季") ;
break ;
default:
alert("非法数据") ;
break ;
}
}
</script>5.自定义对象方式:
方式1:
方式1:
类似Java中有参构造函数
定义对象:跟函数定义一样
function 对象(函数名称)(形式参数名称){
/
this.属性名称1 = 参数名称1;
...
}
创建对象
var 对象名 = new 对象(实际参数) ;
function Person(name,age,address){
//添加了属性赋值 :this代表当前对象的地址值引用
this.name = name ;
this.age = age ;
this.address = address ;
//追加方法
this.speak = function(){
alert("会说英语") ;
}
} */
//创建对象
//var p = new Person("高圆圆",42,"西安市鄠邑区") ;方式2:
//方式2:类似于Java中无参构造方法
//定义对象
/* function Person(){}
//创建对象
var p = new Person() ;
//追加属性
p.name = "赵又廷" ;
p.age = 45 ;
p.address="宝鸡市" ;
//追加方法
p.speak= function(){
alert("会说日语") ;
} */方式3:
//方式3:利用Object:所有Js对象的模板
//直接创建
/* var p = new Object() ;
//追加属性
p.name = "张佳宁" ;
p.age = 31 ;
p.address = "上海市";
//追加方法
p.speak=function(){
alert("会说英语") ;
} */方式4:
//方式4:字面量值的方式----json数据格式
//json数据格式---简化js对象的书写方式
/**
*{
"key1":value1,
"key2":value2,\
} ;
学生 id 姓名,年龄,性别,地址
var student = {
"id":1,
"name":"张三",
"age":20,
"gender":"男",
"address":"西安市"
}
*/
//json串
var students = [
{"id":1,"name":"李四","age":25,"gender":"男","address":"西安市"},
{"id":2,"name":"王五","age":22,"gender":"女","address":"西安市"},
{"id":3,"name":"赵六","age":27,"gender":"男","address":"西安市"}
] ;
//创建Person对象
var p = {
//追加属性
"name":"张三",
"age":20,
"address":"西安市" ,
//追加方法
"speak":function(){
alert("hello") ;
}
} ;6.内置对象:
1>字符串对象创建:
语法格式:var 对象名 = new String("xx") ;
var s1 = new String("hello") ;
js中创建字符串使用下面这种方式
var s1 = "hello" ; 2>String常用的内置方法:
charAt(var index):获取指定索引出的字符
charAt(var index):获取指定索引出的字符
concat(var str):拼接功能,在尾部连接新的字符串
fontcolor(red/gerenn...使用RGB的写法#000/#00F/#0F0/#F00/#C90..)
split(var str):使用特定符号将字符串拆分字符串数组
substr(var begin,var length):从指定位置开始,进行截取指定长度
substring(start, end):从start开启,截取到指定end-1处的字符3>Date内置对象:
//创建日期对象
//var 对象名= new Date() ;
//获取年:
//getFullYear();
var year = date.getFullYear();
document.write(year+"年") ;
//获取年中的月份值
//getMonth():0-11之间的整数,需要+1
document.write((date.getMonth()+1)+"月")
//月中的日期 getDate()
document.write(date.getDate()+"日  ") ;
//时
document.write(date.getHours()+":") ;
//分
document.write(date.getMinutes()+":") ;
//秒
document.write(date.getSeconds()) ;4>网页定时器有两种:
<h4>当前系统时间是</h4>
<!-- 获取span标签对象,设置它的innerHTML属性,加入文本内容
innnerHTML="<h3>时间...</h3>" ; 渲染标题标签
innerText= "<h3>时间...</h3>" ; 将h3直接打印出来... 普通文本
-->
<span id="spanTip"></span>
<script>
//id="spanTip"获取span标签对象
/* var span = document.getElementById("spanTip") ;
span.innerHTML = "<h3>hello,高圆圆</h3>" ; */
//span.innerText = "<h3>hello,高圆圆</h3>"
/**
* 网页定时器有两种
* setInterval("任务函数",毫秒数):每经过这个毫秒数,重复执行这个任务
* setTimeout("任务函数",毫秒数):经过这个毫秒数后执行一次任务
*/
function genDate(){
//创建日期对象,将日期字符串拼接好之后,动态设置到span标签对象的文本内容中
var date = new Date() ;
//日期字符串
var dataStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "
+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
//id="spanTip"获取span标签对象
var span = getElementByIddocument.("spanTip") ;
span.innerHTML = "<h4>"+dataStr+"</h4>" ;
}
//开启定时器
setInterval("genDate()",1000) ;//1秒重复执行任务,生成时间
</script>5>正则表达式:
概念:
是一种规则，约束用户在表单中输入的数据.
数量词相关的语法
X---代表任意字符
X+:代表X字符出现一次或者多次
X?:X字符出现0次或者一次
X*:X字符出现0次或者多次
范围相关的语法
X{n,m} :X字符至少出现n次,但是不超过m次
X{n,}:X字符至少出现n次
X{n}:X字符恰好出现n次
其他
\d----等价于 X[0-9]:X字符是0-9中的数字字符
\w----等价于于[A-Za-z0-9_]:数字或者字母
定义正则表达式:
var reg(正则表达是对象) = /正则表达式/;
用户在输入了字符串数据,需要正则表达式对象所表达的内容进行匹配
正则表达式对象内置一个方法 test(用户输入的字符串数据)----boolean true/false
if(正则表达式对象.test(用户输入的字符串)){
//成立..
}else{
//不成立...
}
var reg(正则表达是对象) = /正则表达式/; 不完全匹配
如果需要精确匹配---类似于Java ^ $的符号
边界匹配符号
^:以...字符开头
$:以...字符结尾
7.dom编程:
1>方式1:document对象的集合获取标签对象:
<script>
//all属性:获取的页面中所有的标签对象,返回的节点列表
//forms属性:获取的页面中的所有form表单对象
//imags属性:获取的页面中的所有img对象
//links属性:获取的页面中的所有带有href属性的标签 超链接代表:a
//var nodeList = document.all ;
//var nodeList = document.forms ;
// var nodeList = document.images ;
var nodeList = document.links ;
alert(nodeList.length) ;
//遍历数组
for(var i = 0 ; i < nodeList.length ; i++){
//nodeName:获取节点的名称
alert(nodeList[i].nodeName) ;
}
</script>2>方式2:通过节点关系获取对象:
<script>
/*获取第一个a节点对象*/
var aNode = document.links[0] ;
alert(aNode.nodeName) ;
//获取它的父节点:body
var bodyNode = aNode.parentNode ;
alert(bodyNode.nodeName) ;
//获取boydNode所有的子节点对象
var childNodeList = bodyNode.childNodes ;
alert(childNodeList.length) ;
//遍历元素
/* for(var i = 0 ; i < childNodeList.length ; i ++){
//属性:nodeType:节点的类型
//标签节点类型---1
//注释的类型 --- 8
//空格换行的文本类型---3
//alert(childNodeList[i].nodeName+"---"+childNodeList[i].nodeType+"<br/>") ;
if(childNodeList[i].nodeType == 1){
alert(childNodeList[i].nodeName+"<br/>") ;
}
}*/
//获取第二个a标签对象
var lastANode = document.links[1];
//获取它的上一个兄弟节点
var previous = lastANode.previousSibling;
alert(previous.nodeName) ;
var nextSibling = previous.nextSibling;
alert(nextSibling.nodeName) ;
< /script>3>docuemtn对象的方法:
body>
<!--
当鼠标光标移出文本框,失去焦点,onblur属性 触发blur事件,
把用户输入的用户名获取到,弹框出来
方式1:
document.getElementById("id属性值") ; 前提条件:id不能重复,必须唯一
方式2;
document.getElementsByClass("所有的同名的class属性值")
获取的标签对象列表
方式3;
document.getElementsByTagName("所有的同名的标签名称");
获取的标签对象列表
方式4;
document.getElementsByName("所有的同名的name属性");
获取的标签对象列表
-->
用户名:<input type="text" id="username" name="username" class="c_user" onblur="getUserName()" placeholder="输入用户名" />
</body>
</html>
<script>
function getUserName() {
//通过id="username"获取input标签对象u
var inputObj = document.getElementById("username");
//var inputObj = document.getElementsByClassName("c_user")[0];
// var inputObj = document.getElementsByTagName("input")[0] ;
// var inputObj = document.getElementsByName("username")[0] ;
//获取它的vlaue属性,输入的内容
var username = inputObj.value ;
alert(username) ;
}
</script>4>事件编程的分类:
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
点击相关事件:
click:单击
dbclick:双击
焦点相关的事件
focus:获取焦点
blur:失去焦点
选项卡发生变化的事件
change ---下列菜单 select
鼠标经过事件
mouseover
鼠标移出事件
mouseout
页面载入事件
load事件
-->
<style>
#d1{
width: 150px;
height: 150px;
border: 1px solid #000;
}
</style>
</head>
<!--页面载入事件:load:一般body中使用
需要将body的内容加载完毕后就执行这个函数
-->
<body onload="myLoad()" id="mybody">
<input type="button" value="单击" onclick="myClick()" /><br>
<input type="button" value="双击" ondblclick="mydbClick()" /><br>
用户名:<input type="text" onblur="myBlur()" id="username" value="请输入用户名" onfocus="myFocus()" size="20px"/>
<span id="spanTip"></span><br/>
籍贯:
<select onchange="myChange()" id="jiguan">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
</select>
<!--城市所在的下拉菜单-->
<select id="city">
<!--获取到了id="city"所在的select标签对象,动态的添加它innerHTML属性;标签文本
城市---数组
var arr = ["西安市","渭南市","咸阳市","宝鸡市"] ;
<option value="城市">城市...</option>
-->
</select>
<br/>
<!--鼠标经过事件-->
<div id="d1" onmouseover="myMouseOver()" onmouseout="myOut()">
立刻咨询
</div>
</body>
</html>
<script>
/* function myLoad(){
alert("body的内容全部加载了") ;
}*/
document.getElementById("mybody").onload =function (){
alert("页面载入完毕") ;
} ;
function myOut() {
alert("触发了鼠标移出事件") ;
}
function myClick() {
alert("单击事件触发了..." ) ;
}
function mydbClick() {
alert("触发双击事件..." ) ;
}
function myFocus(){
//dom
//通过id="username"获取input标签对象
var input = document.getElementById("username") ;
//将value的值清空掉
input.value = "" ;
}
function myBlur() {
//通过id="username"获取input标签对象,同时获取输入的内容
var username = document.getElementById("username").value ;
//获取id="spanTip"所在标签对象span
var span = document.getElementById("spanTip");
//如果当前用户名的内容不是"高圆圆",不可用;
if(username!="高圆圆"){
//设置span标签对象的文本内容
span.innerHTML = "对不起,不符合格式".fontcolor("red") ;
}else{
span.innerHTML = "恭喜您,可用".fontcolor("green") ;
}
}
//myChange
function myChange(){
//onchange:当选项变化时,就会触发绑定这个函数
//通过id="jiguan",获取select标签对象,同时它的value的内容
var jiguan = document.getElementById("jiguan").value;
//alert(jiguan) ;
//获取id="city"所在的select标签对象,设置select的文本内容
var city = document.getElementById("city");
//每次选项卡变化,需要情况id="city"所在标签对象的innerHTML的值
city.innerHTML ="" ;
//判断
if("陕西省"==jiguan){
//定义陕西省所在的城市的数组
var arr = ["西安市","渭南市","咸阳市","宝鸡市"] ;
//遍历数组
for(var i = 0 ; i < arr.length ; i++){
//获取到每一个城市
// <option value="城市">城市...</option>
//设置城市所在的select标签对象的标签文本innerHTML
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}
if("山西省"==jiguan){
//定义陕西省所在的城市的数组
var arr = ["太原市","大同市","晋中市","运城市"] ;
//遍历数组
for(var i = 0 ; i < arr.length ; i++){
//获取到每一个城市
// <option value="城市">城市...</option>
//设置城市所在的select标签对象的标签文本innerHTML
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}
if("广东省"==jiguan){
//定义陕西省所在的城市的数组
var arr = ["东莞市","深圳市","广州市","佛山市"] ;
//遍历数组
for(var i = 0 ; i < arr.length ; i++){
//获取到每一个城市
// <option value="城市">城市...</option>
//设置城市所在的select标签对象的标签文本innerHTML
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}
}
function myMouseOver() {
// alert("触发了");
//完成定时器
//setInterval("任务函数",毫秒数):每经过多少毫秒重复执行这个 任务
//setTimeout("任务函数",毫秒数):经过毫秒数执行一次任务
setTimeout("myTask()",3000) ; //myTask任务
}
function myTask() {
//打开页面
//window很多方法
//open("url地址","打开方式_blank/_slef","宽和高度...")
//window.open("03_js_dom方式3_docuemtn对象的方法.html","_blank") ;
//前端有几种进行页面跳转
//1)超链接的a标签的href属性
//2) window.open方法
//3)window对象.location对象---href属性也可以重新载入新的地址
/* window.location.href*/
location.href="01_js的dom编程_方式1_document对象的集合获取标签对象.html"; //本地地址/后台服务器地址
}
</script>三.前端框架 Jquery:
1.jQuery概念:
是一个快速、小巧且功能丰富的 JavaScript 库,封装了大量的函数库,包含动画效果,dom操作比原生js更简单,封装Ajax(后期使用)2.使用步骤:
1>导js库:
将文件导入Web应用文件下的js文件中并书写.
格式:<script src="js/jquery-1.11.3.min.js"></script>2>页面载入事件:
$(document).ready(function () {
alert("Jq页面载入事件触发了") ;
})
//后期优化个格式:
$(function(){
//alert("Jq页面载入事件触发了") ;
//获取input标签对象
//通过Jquery的id选择器--获取Jq对象
//var $input = $("#username") ;
//alert($input) ;
//获取到input标签对象,加入blur失去焦点事件
$("#username").blur(function () {
//将$("#username"):Jq对象---js对象
/* var inputObj = $("#username").get(0) ;
alert(inputObj.value) ;*/
//val():获取当前默认值(或者输入的内容)
var username = $(this).val() ;
alert(username) ;
}) ;
}) ;
1309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
