本帖最后由 小石姐姐 于 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>
|
|
收藏
淘帖
踩
