本帖最后由 小石姐姐 于 2018-1-18 14:54 编辑
html总结
1、HTML的概述
HTML:Hyper Text Markup Language --- 超文本标记语言.
* 标记语言:指的是通过一组标签的形式描述事物的一门语言.
* 超文本:比普通的文本更强大.
2、HTML的作用
HTML是用来制作页面(静态页面).
3、HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML.
4、HTML的使用、HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
1.5、HTML的标签结构
根标签<html></html>
<head></head> html的头标签
<body></body>
1.6、HTML的字体标签
<font>标签:html的字体标签
<font>标签的属性
<font 属性名=“属性值” 属性名=“属性值”></font>
Color属性:字体的颜色
英文单词设置:black,red,green,blue
使用16进制数设置:#FFFFFF,
Size 属性: 字体的大小
Face属性:是什么字体
1.7、HTML的排版标签
标题标签:h标签<h1>到<h6>
<h1>一级标题</h1>
<h2>二级标题</h2>
段落标签:<p></p>
字体加粗标签<b></b>
字体斜体标签<i></i>
字体下化线<u></u>
居中<center></center>
从别的地方复制过来的文字,不被转义就用:<pre></pre>(原生标签)
<hr/>横线
第2 章、网站图片页面显示
2.1、图片标签<img>
属性: src:图片来源
Width:图片的宽度
Height:图片的高度
Alt:图片找不到显示的内容
第3章 、列表页面的显示
3.1、列表标签(有序列表,无序列表)
有序列表<ol>
<li></li>
</ol>
属性:type:1: 数字字符 a: 英文字符 i: 罗马字符
Start的属性只对数字有效果(从几开始)
无序列表<ul>
<li></li>
</ul>
属性:type disc:实心点 circle:空心圆 square:方块
.3.2、HTML的超链接标签<a>
属性: href :链接的路径
Target:打开的方式
Target=”_self”:在自身页面打开
Target=“-blank”:在新打开一个窗口
Target=”_parent”
第4 章:网站首页的显示
4.1、表格标签
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
* left
* center
* right
<td>的属性:
* colspan=”列数”
* rowspan=”行数”
4.2、HTML的表单标签(<form>)
HTML的表单标签:<form>
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
***** GET方式和POST方式的区别?
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
Get和post的区别:
1、数据都展示到地址栏
2、有大小限制
3、get方式数据是在请求行中
Post
1、 数据不会展示在地址栏
2、 数据没有大小限制
3、 Post的数据是在请求体中
HTML中表单元素:
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”submit”> :提交按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
* <select> :下拉列表.
* <textarea> :文本域.
第5章HTML5的扩展的表单标签
<input type=”email”> 邮箱格式
<input type=”date”> 日期格式
<input type=”number”> 数字格式
<input type=”color”> 颜色格
Day02(div+css)(2018-1-13)
第1 章HTML的框架标签
1.1、 框架结构标签<frameset>
标签与body标签是冲突,有frameset就可以没有body
属性: rows 横切
Cols 竖切
使用<frame>标签 frame代表切分的每个部分
1.2、特殊字符标签
;空格
> <
< >
第2章 div+css
2.1Div块标签
<div></div>默认一个div独占一行
<span></span> 默认在同一行
2.2、css:层叠样式表
Css的基本语法
通常包含2个部分:一个选择器,一个声明
* 选择器{属性:属性值;属性:属性值...}
2.3、css的引入样式
行内样式:直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
页面内样式:在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
border:1px soild green; soild实线,线的颜色是绿色
}
</style>
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件. rel="stylesheet"指定是样式表
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
2.4、Css选择器(元素选择器,ID选择器, 类选择器)
元素选择器:
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器:
#d1{
border:2px solid red;
}
类选择器:
.divClass{
border:2px solid yellow;
}
2.5、其他选择器(属性选择器、后代选择器、并例选择器、子元素选择器)
属性选择器
<style>
input[type="text"]{
background-color: red;
}
</style>
后代选择器
div span 查找的是所有div中的所有的span元素.
h1 strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
并例选择器
input【type=“text”】,input【type=“password”】{
border:1px
}
子元素选择器
div > span找这个div中的第一层级的span元素.
h1 > strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
2.6、display:none和 visibility:hidden的区别
Display消失了但是位置也消失
VISibility 消失了但是位置还占有
2.7、/*这个可以让div自己去根据屏幕的大小去居中显示*/
margin: 0 auto;
2.8、placeholder属性提供一种提示(hint),描述输入域所期待的值
<td>用户名:</td>
<td><input type="text" name="username" placeholder="请输入用户名" /></td>
2.9、去除<a>标签的下化线(Text-decoration)
规定添加到文本的修饰 Text-decoration:none 无下化线
3.0超链接的伪类(设置鼠标悬停的炫酷)
/*鼠标移动到连接上*/
a:hover {
background: red;
}
3.1、css样式(字体背景、文本、列表):css的声明
背景:
文本:
字体
列表
Day03javascript(2018-1-15)
第一章、js的概述
1.1、什么是js:
运行在浏览器的脚本语言
1.2、javascript的组成(ECMAScript、DOM、BOM)
ECMAScript:JavaScript的基本的语法:核心
BOM:Browser Object Model :浏览器对象模型
DOM:Document Object Model :文档对象模型
其他的脚本语言:
JavaScript,ActionScript,Flex
JS的用途:
使页面更加丰富,使页面动起来!!!
1.3、js基本语法
① 区分大小写
② 弱变量类型语言:(与Java不同)
* Java
* int i = 3;
* String s = “abc”;
* JavaScript:
* var i = 3;
* var s = “abc”;
③ 分号可有可无:
④ 变量命名:
1.4、js的数据类型
JS将数据类型分成两类:
* 原始类型:
* undefined:未定义类型
* boolean:布尔类型
* number:数字类型
* string:字符或字符串.
* null:空
* 引用类型:
* 对象类型.对象类型默认值是null.
1.5、js的运算符
JS中的运算符与Java中基本一致!
JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.
1.6、js的语句
JS中的语句与Java的语句一致!
1.7、js的通常开发的步骤
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.
定义函数:
* function 函数名称(){
// 函数体
}
* window.onload = function(){
}
常用事件:onclick,ondblclick,onmouseover,onmouseout,onload...
1.8、js的引入方式(2种)
通常两种方式:
一种:页面内直接编写JS代码,JS代码需要使用<script></script>.
二种:将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
将js的代码定义成一个文件引入:
<script src="../js/check.js"></script>
获得页面中的元素:
* document.getElementById(“”);
正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
1.9、用户名、密码、邮箱的校验
<script type="text/javascript">
/*通过function关键字来定义函数*/
function checkForm(){
//找到我们想要操作的元素,找元素的动作需要交给DOM对象中docment来去获取
var username = document.getElementById("username").value;
if(username == ""){
alert("对不起,用户名不能为null");
/*这个返回值一定要加,因为我们onsubmit的事件就是看这个返回值,默认返回的是true*/
return false;
}
var email = document.getElementById("email").value;
/*判断email是否符合正则*/
if(!email.match('[0-9]{6,10}')){
alert("对不起不符合规则");
return false;
}
}
</script>
<body>
<form method="get">
<table style="border: 1px solid blue;" align="center" cellspacing="10px">
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"></td>
</tr>
</table></form>
2.0、使用js完成图片滚动的效果(使用setinterval和settimeout)
<script type="text/javascript">
window.onload = function(){
var i = 1;
/*设置定时*/
setInterval(function(){
i++;
/*需要不断的改变img的src*/
/*获取到img*/
if(i==3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src = "../img/"+i+".png";
},3000);
}
</script>
<body>
<img id="img1" src="../img/1.png" width="100%" />
</body>
2.1、HTML的window对象
* setInterval(); :每隔多少毫秒执行某个表达式.
* setInterval(“change()”,5000);
* setTimeout(); :隔多少毫秒执行一个该表达式.
* setTimeout(“change()”,5000);
清除定时的方法
2.2、定时弹广告
<script>
//setTimeout 执行一次之后就不会再出现了,不用清除
var time;
window.onload = function() {
//先显示图片的方法
//页面加载的时候需要设置定时
time = window.setInterval("show();", 3000);
}
function show() {
var im = document.getElementById("imggg");
im.style.display = "block";
window.clearInterval(time);
window.setInterval("hide();", 3000);
}
//隐藏广告的方法
function hide() {
var im = document.getElementById("imggg");
im.style.display = "none";
window.clearInterval(time);
}
</script>
<body>
<!--图片是隐藏的-->
<img style="display: none;" id="imggg" src="gg.jpg" width="100%" />
</body>
2.3、还剩下几秒,跳转到哪个页
<script>
/*window.onload是页面加载完成后,才会触发,这个时候我们找标签,肯定能够找到
script哪里都可以放,但是我们要知道放在上面和下面的区别
*/
var id;
var i = 4;
window.onload = function() {
//设置一个定时,我们知道每次设置完定时,我们系统会给这个一个唯一的id,这个id用来结束定时用的
id = setInterval(function() {
//document.getElementById("demo").innerHTML
document.getElementById("f").innerHTML = i;
if(i == 1) {
//清除定时
clearInterval(id);
//需要跳转到主页
/*跳转的动态方式使用location的href可以完成*/
location.href = "../伪类效果/伪类效果.html";
}
i--;
}, 1000);
}
function change() {
//document.getElementById("demo").innerHTML
document.getElementById("f").innerHTML = i;
if(i == 1) {
//清除定时
clearInterval(id);
}
i--;
}
</script>
<body>
还剩下
<font id="f">5</font>秒,回到主页面;
</body>
2.4、54321间隔3秒出现
//定时出现54321
/*var id = setInterval("change();", 1000);
var i = 5;
function change() {
alert(i);
if(i == 0) {
window.clearInterval(id);
}
i--;
}*/
2.5、innerHTML和innerText的区别
innerHTML:获取元素最简单方法
innerText:会将网页标签一起取出
2.6、伪类的效果(onmouseover onmouseout)
<style type="text/css">
div{
text-align: center;对齐元素中的文本
line-height: 100px; 设置行高
margin:10px;外边框
width: 100px;
height: 100px;
background: red;
color: white;
border-radius: 50px;使用图片来创建边框
float: left;浮动
}
</style>
</head>
<script type="text/javascript">
function change1(div1){
//document.getElementById("div1").style.background = "green";
div1.style.background="green";
}
function change2(){
//document.getElementById("div1").style.background = "red";
div1.style.background="red";
}
</script>
<body>
<!--需要给每个div设置鼠标悬停和鼠标离开的事件-->
Onmouseover鼠标指针移动到指定对象上发生
Onmouseout鼠标离开
<div id="div1">百度</div>
<div>新浪</div>
<div>搜狐</div>
<div>腾讯</div>
</body>
2.7、点击事件(onclick事件)
<script>
function chen() {
//获取ID为div的控制权
var v1 = document.getElementById("div1");
v1.innerHTML = document.getElementById("but");
// v1.innerHTML="我爱小可爱";
// v1.innerText="点我,出现奇迹";
// var but = document.getElementById("but");
// var a = but.innerHTML;
// v1.innerHTML = a;
v1.style.background = "blueviolet";
}
</script>
<body>
<button id="but">点我,出现奇迹</button>
<div id="div1"></div>
</body>
2.8、js中的BOM对象
* alert(); --弹出对话框
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm(); --弹出一个确认窗口
* prompt(); --弹出一个可输入的对话框
* open(); --打开一个新窗口
Navigator :包含的是浏览器的信息.
Screen:用来获得屏幕信息:
History:浏览器的历史对象:
Location:包含URL信息的对象
2.9、js事件的总结
* onload :
* onclick :
* onsubmit :
* onfocus :
* onblur :
* onchange :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
键盘操作事件:
* onkeydown :
* onkeyup :
* onkeypress:
鼠标操作事件:
* onmousemove:
* onmouseout:
* onmouseover:
* onmousedown
* onmouseup
Day04(2018-1-16)js的高级
第一章js完成注册页面表单提示及校验(js的输出、js的事件)
1.1、js的输出
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
1.2、js的事件总结
* onfocus :获得焦点.
* onblur :失去焦点.
* onsubmit :提交的时候.
Onload :页面加载事件
Onclick :点击事件
Onchange:下拉列表改变事件
Ondblclick:双击摸个元素的事件
键盘操作事件:
Onkeydown:
Onlkeyup:
Onkeypress:
鼠标操作事件:
Onmousemove:
Onmouseout:
OnMOusedown:
Onmouseup:
1.3、js完成注册页面表单提示及校验2
<script>
//有参数的 按钮方法里面需要传参数
function tip(id, content) {
document.getElementById(id).innerHTML = "<font color='red'>"+content+"</font>";
}
/*无参的方法里面要注意方法名必须不一样,按钮事件触发的事件不需要传参数
*
* function tip(){
document.getElementById("usenamespan").innerHTML= "<font color='red'>用户名必须由数字和字母组成</font>";
}
function tipa(){
document.getElementById("passwordspan").innerHTML="<font color='red'>密码必须是6 位</font>";
}*/
//失去焦点的时候
function shi(id, Counter) {
if(document.getElementById("username").value==""){
document.getElementById("usenamespan").innerHTML="<font color='red'>用户名不能为null</font>";
}
}
</script>
1.4、js获得表格的行数
* 获得到控制的表格元素:
* var tab1 = document.getElementById(“tab1”);
* var len = tab1.rows.length;
1.5、js完成后台数据展示隔行换色(js获得表格的行数)
<script>
window.onload = function() {
//获得要操作的对象的控制权
var tb1 = document.getElementById("tb1");
//遍历每一行
for(var i = 1; i < tb1.rows.length; i++) {
//判断=1的时候第一行的表头颜色为红色
if(i==1){
tb1.rows.style.background ="red";
}else{
if(i % 2 == 0) {
//偶数行
tb1.rows.style.background = "palevioletred";
}else{
//奇数行
tb1.rows.style.background ="darkcyan";
}
}}
}
</script>
1.6、表格中的tbody和 thead标签
function changeColor(){
获取thead中的那一行然后进行改变颜色
var th1 = document.getElementById("th1");
th1.style.background = "blue";
// 获得操作的表格的控制权:
var tab1 = document.getElementById("tab1");
// 获得tbody中的所有的行.
var len = tab1.tBodies[0].rows.length;
for(var i = 0;i< len ;i++){
if(i % 2 == 0){
tab1.tBodies[0].rows.style.backgroundColor = "green";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}
1.7、js完成复选框的全选的效果
2种方式:
⑴、function getall(){
找到所有的c1
var c1=document.getElementsByName("c1");
//遍历所有的c1的checkBox,让其状态和ch的状态一样
for (var i=0; i<c1.length;i++) {
c1.checked=document.getElementById("ch").checked;
}
}
⑵、function checkAll(){
// 获得上面的复选框
var selectAll = document.getElementById("selectAll");
// 判断这个复选框是否被选中.
var ids = document.getElementsByName("ids");
if(selectAll.checked == true){
// 上面复选框被选中:获得下面所有的复选框,修改checked属性
for(var i = 0 ;i<ids.length;i++){
ids.checked = true;
}
}else{
// 上面复选框没有被选中:获得下面所有的复选框,修改checked属性
for(var i = 0 ;i<ids.length;i++){
ids.checked = false;
}
}
}
第二章、 js中的DOM
2.1、Dom概述、
DOM:Document Object Model:文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
DOM的使用:
知道document,element,attribute中的属性和方法
2.2、Document的常用的操作(获得元素)
⑴、获得元素:
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
⑵、创建元素:
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
⑶、添加节点:
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
⑷、删除节点
* element.removeChild(); -- 删除元素
2.3、【使用DOM完成对ul中添加一个li元素】
*我们要找控件可以,但是必须保证页面加载完*/
window.onload = function(){
var u1 = document.getElementById("u1");
var lie = document.createElement("li");
var txt = document.createTextNode("三亚");
lie.appendChild(txt);
u1.appendChild(lie);
}
2.4、二级联动
// 定义数组:二维数组:
var arrs = new Array(5);
arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
arrs[4] = new Array("长春市","吉林市","四平市","延边市");
function changeCity(value){
// 获得到选中的省份的信息.
var city = document.getElementById("city");
// 清除第二个列表中的内容:
for(var i=city.options.length;i>0;i--){
city.options = null;
}
// city.options.length = 0;
// alert(value);
for(var i= 0 ;i< arrs.length;i++){
if(value == i){
// 获得所有的市的信息.
for(var j=0;j<arrs.length;j++){
// alert(arrs[j]);
// 创建元素:
var opEl = document.createElement("option");// <option></option>
// 创建文本节点:
var textNode = document.createTextNode(arrs[j]);
// 将文本的内容添加到option元素中.
opEl.appendChild(textNode);
// 将option的元素添加到第二个列表中.
city.appendChild(opEl);
}
}
}
}
2.5、js的内置对象( Array、boolean、Date、Math、String、)
⑴Array:
⑵、Boolean:
⑶、Date:
* http://www.baidu.com?time=new Date().getTime();
⑷、Math对象:
⑸、String对象:
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr();
2.6、js的全局函数:
* parseInt();
* parseInt(“11”);
* parseFloat();
* parseFloat(“32.09”);
* 编码和解码的方法:
// 解码
* decodeURI();
* decodeURIComponent();
// 编码
* encodeURI();
* encodeURIComponent();
eval函数:
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);
2.6、全局函数设置点击图片的宽度变大
function getman() {
var img1 = document.getElementById("im1");
var imgw = img1.style.width;
console.log(imgw);
imgw=parseInt(imgw);
img1.style.width = imgw + 10 + "px";
}
2.7、随机数
<script>
/*[0,1)*/ // 0-2; 只要整数
var num = Math.random()*2;
num = Math.round(num);//四舍五入后的值
alert(num);
</script>
|
|