2015年12月12 html笔记

Html是一种语言，是一种超文本标记语言，不是编译运行的。主要是开发网页的，可以展现文字图片视频声音。

Html是网站开发的基础。是静态网页不能交互的。

1.运行原理

Html文件使用浏览器打开

除了自己测试外都是远程访问html文件

Html的基本结构

不管这个html文件有多复杂，它的基本结构是

</head>

<body>

<b>第一行文字</b>

<p><font color=red>hahah</font></p>

<font size=8>hahah</font></br>

<font color=red>hahah</font>

</body>

字符实体

html超链接元素

使用超链接可以让网页连接到另外的页面

举例

Html的图片元素

特别说明：src可以是外部网站的一个图片url

表格的主要用途

表格的主要用途是显示数据和图片，并且布局

案例

*********表格*********</br>

</table>

表格的

<th>和<td>标签都是用于表格单元格显示的。不同的是<th>在单元格中加粗显示。

<th>：定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体。

Td元素用来创建数据单元格

<tbody> 标签表格主体（正文）

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

例

<tr align=center><td colspan=3>星期一菜谱</td></tr>

</table>

Html无序列表 ul li 查手册（文字布局 ——列表）

例：

</ul>

html有序列表

例

<ol type="a" start=”B”> start=”B” 从B开始算

</ol>

Html的框架标记（元素） frameset/frame

例：

基本语法

</feameset>

代码：aa <body bgcolor="yellow">

周杰伦

</body>

Bb <body>

歌词..................

</body>

All:<frameset cols="50% ,*" frameborder="0">frameborder="0"中间的线没有了

<frame src="aa.html" noresize> noresize用户不能改变框架比例

</frameset> 特别说明all.html没有body

Html的表单元素

介绍：html的表单元素，主要是用于让用户输入数据，并提交给服务器。

基本语法：

各种元素【输入框，文本域，密码】

</form>

例：login.html

用户名：<input type="text" name="username"/></br>

密码：<input type="password" name="pwd"/></br>

</form>

从上面的案例可以看出：

（1）表单元素的格式

Type=text(文本框) password（密码框） hidden（隐藏框） checkbox（复选框）

Radio（单选框） submit（提交按钮） reset（重置按钮）image（图片按钮）

Name=是你给该表单元素取名

（2）action指定把请求交给那个页面一般是（.jsp/servlt/）

Input元素举例说明：

代码：

名字：<input type="text" name="username"/><br/>

密码：<input type="password" name="pwd"/><br/>

******喜欢的水果******<br/>

*******选择性别*********<br/>

**********隐藏（即可提交数据，同时不影响界面）*****<br/>

*****下拉选择*****<br/>

请选择出生地

</select>

**********文本域（请留言）*********<br/>

******选择要上传的文件******<br/>

<input type="file" name="myfile"/>请选择文件

Html加强

<h1> <h6> 标签来定义的

<a href="http://www.w3cschool.cc">这是一个链接</a>

图像<img src="w3cschool.png" width="104" height="142">

<hr> 标签在 HTML 页面中创建水平线

<hr />

隐藏注释

定义一个tips标签，然后在访问

网页布局

先从上到下布局，从左到右 div只是声明，css控制显示

<title>用div占块布局</title>

<style> //CSS控制

div{

width:300px;

height:200px;

background:blue;

}

#main{

background:green;

}

#footer{

background:gray;

}

</style>

</head>

<body>

<div id="header"></div> //div布局

</body>

2. Div的浮动float

<style>

#lside{

width:200px;

height:100px;

background:#960;

float:left;

}

#rside{

width:200px;

height:100px;

background:red;

float:left; //clear:left//清楚浮动

}

</style>

</head>

<body>

</body>

</html>

父div中有两个子div，父div有没有被撑起来，撑起来多少

</head>

<style>

#i{

margin:0px;

padding:0px;}//清出css的边框

#container{

width:1002px;

background:gray;

}

#header{

height:120px;

background:red;

}

#main{

height:600px;

background:black;

}

#lside{

height:600px;

width:700px;

background:pink;

float:left;

}

#rside{

height:600px;

width:302px;

background:purple;

float:right;

}

#footer{

height:120px;

background:green;

}

</style>

<div id="container"> //有利于总体控制

</div>

</div>

</body>

</html>

常见错误1.不加doctype，导致低版本IE.解析效果不一样，出新debage

2.id不能是数字

3.文件编码与charset声明不一致

3.<title>盒子margin</title> 控制盒子的边框

<style>

#cont{

width:1000px;

height:1000px;

background:green;

}

div{

width:400px;

height:200px;

background:blue;

float:left;

}

#test{

margin:10px; //四个方向都生效

margin-top/margin-right/margin-bottom/margin-left//选择不同的方向上的盒子宽度

Margin：10px 20px ；这样上下是10px，左右是20px；

background:red;}

#test2{

background:pink;}

#test3{

width:1000px;}

</style>

</head>

<body>

</div>

</body>

</html>

<style>

#container{

margin:0 auto;

width:1002px;

background:gray;

}

#header{

height:128px;

background:orange;

}

#main{

height:600px;

background:green;

}

#lside{

float:left;

height:600px;

width:700px;

background:pink;}

.four{ 因为four是class类所以是.访问

width:330px;

height:280px;

background:red;

float:left;

margin:10px; //四个小块都加上了边框

}

#rside{

float:right;

width:302px;

height:600px;

background:purple;

}

#footer{

height:120px;

background:blue;}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

<title>盒模型 border</title>

<style>

div{

width:300px;

height:300px;

background:blue;

/*整体边框*/

border:20px solid green;

/*设置一个方向上的边框*/

/*border-top:10px solid orange;*/

/*单独设置边框的3要素之一*/

/*border-style:dashed;*/

}

</style>

</head>

<body>

<div>

盒子的border

3要素宽(border-width)，形状(border-style)，颜色(border-color)

</div>

</body>

*设置一个方向上的边框*/

border-top:10px solid orange;

<title>css画三角形</title>

<style>

div{

width:200px;

height:200px;

background:black;

}

#trip{

width:0px;

height:0px;

border-top:100px solid transparent; //透明边框

border-right:100px solid transparent;

border-bottom:100px solid transparent;

border-left:100px solid red;

}

</style>

</head>

<body>

</body>

内联框架（iframe元素）：允许在一个网页文本块中插入和显示另一个网页

Javascript

循环

控制结构

var arr=['赵'，'钱'，'孙'];

for(var i=0;i<arr.length;i++) //调用length属性

{

comsole.log(arr[i]);

}

var obj={name:'lisi',age:29,area:'bj'};//对象

for(var k in obj) //把对象赋值给变量k

{

console.log(k+'~'+obj[k]); //打印obj对象

}

</script>

对象操作：一个是属性和方法

var str='helloworld';

console.log(str.length); //属性的值

console.log(str.substr(2,3));//对象自身的方法的调用

var arr=['春','夏','冬','秋']; //数组

console.log(arr.join(','));

var str='东，南，西，北';

console.log(str.split(','));

</script>

<style>

#test1{

width:300px;

height:300px;

}

#test1{

background:green;

}

#test2{

width:300px;

height:300px;

background:red;

}

</style>

function ch(){

var div=document.getElementById('test1');

div.id="test2";//改变对象的属性

}

</script>

</head>

<body>

<h1>特效是什么</h1>

<div id="test1" onclick="ch();"></div> //当点击的处发onclcik

</body>

</html>

function toggle(){

var test1=document.getElementById('test1');

test1.src='off.jpg';//改变对象的属性

}

</script>

</head>

<body>

</body>

</html>

<title>灯泡开关循环闪烁</title>

function toggle(){

var test1=document.getElementById('test1');

if(test1.src.indexOf('on')>=0)

{

test1.src='off.jpg';//改变对象的属性

}else{

test1.src="on.jpg";

}

</script>

</head>

<body>

</body>

</html>

title>找对象</title>

</head>

<body>

<h1>关键是找对象</h1>

<div>

</div>

//用id查询返回值是个对象

//alert(document.getElementById('test1'));

//用标签来查询返回对象的集合，即使只找到一个对象，也包装成对象的集合

// alert(document.getElementsByTagName('p').length);

ps=document.getElementsByTagName('p');

ps[1].style.background='green'; //数组操作

//对于表单元素，可以用name来查询，返回值是对象列表

alert(document.getElementsByName('username')[0].value);

document.getElementsByName('username')[0].value='lusi';

//按类名查找，返回对象集合

document.getElementsByClassName('test2')[0].style.background='red';

alert(document.getElementById('test1').childNodes.length);

</script>

<body>

<div class="test1" onclick="t();" style=”width:300px;height:300px;border-bottom:1px solid black; }//内联Style

”>点击div，使其背景红绿交替宽高增加5px 下边框增粗1px；</div>

</body>

<title>无标题文档</title>

<style>

div{

width:300px;

height:300px;

border-bottom:1px solid black;

}

.test1{

background:green;}

.test2{

background:red;

}

</style>

//封装函数，使其变成外联

function getStyle(obj,attr){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];}

function t(){

var div=document.getElementsByTagName('div')[0];

if(div.className.indexOf('test1')>=0)

{

div.className='test2';}

else{

div.className='test1';

}

//alert(div.style.width);

alert(getStyle(div,'width'))

return;

div.style.width=parseInt(div.style.width)+5+'px';//parseInt字符串转数字

div.style.height=parseInt(div.style.height)+5+'px';

div.style.borderBottomWidth=parseInt(div.style.borderBottomWidth)+1+'px';

}

</script>

<body>

<div class="test1" onclick="t();" >点击div，使其背景红绿交替宽高增加5px 下边框增粗1px；</div>

</body>

<title>获取运动时的style属性</title>

<style>

div{

width:300px;

height:300px;

border-bottom:1px solid black;

}

.test1{

background:green;}

.test2{

background:red;

}

</style>

//封装函数

function getStyle(obj,attr){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];}

function t(){

var div=document.getElementsByTagName('div')[0];

if(div.className.indexOf('test1')>=0)

{

div.className='test2';}

else{

div.className='test1';

}

//alert(div.style.width);

//alert(getStyle(div,'width'))

//return;

div.style.width=parseInt(getStyle(div,'width'))+5+'px';//parseInt字符串转数字

div.style.height=parseInt(getStyle(div,'height'))+5+'px';

div.style.borderBottomWidth=parseInt(getStyle(div,'borderBottomWidth'))+1+'px';

}

</script>

</head>

<body>

<div class="test1" onclick="t();" >点击div，使其背景红绿交替宽高增加5px 下边框增粗1px；</div>

</body>

<title>js动态删除节点</title>

function del(){

var lis=document.getElementsByTagName('li');

var lastli=lis[lis.length-1];

lastli.parentNode.removeChild(lastli);

}

</script>

</head>

<body>

<ul>

</ul>

</body>

<title>js增加节点</title>

function add(){

var li=document.createElement('li');//创建节点

var txt=document.createTextNode('冬');//创建文字节点

li.appendChild(txt);//传参，把txt加入到li中

document.getElementsByTagName('ul')[0].appendChild(li);//创建的节点加入到父节点

}

</script>

</head>

<body>

<ul>

</ul>

<title>暴力操作节点</title>

</head>

<body>

</body>

function add3(){

var ul=document.getElementsByTagName('ul')[0];//找到ul

ul.innerHTML='<li>春</li><li>夏</li><li>秋</li>';

}

function add1(){

var ul=document.getElementsByTagName('ul')[0];//找到ul

//alert(ul.innerHTML);//读了html

ul.innerHTML+='<li>冬</li>';

}

</script>

var area=[ //地区数组

['朝阳','海淀','门头沟'],

['淮南','淮北','合肥']

];

function ld(){

var sel=document.getElementById('prov');//判断当前选择的值

//alert(sel.value);

var opt='';

if(sel.value=='-1'){

document.getElementById('city').innerHTML=opt;

return;

}

for(var i=0,len=area[sel.value].length;i<len;i++)

{opt=opt+'<option value="'+i+'">'+area[sel.value][i]+'</option>';

}

//alert(opt);

document.getElementById('city').innerHTML=opt;

}

</script>

</head>

<body>

</select>

</select>

<title>定时器是浏览器带给的功能</title>

function bang(){

document.getElementsByTagName('img')[0].src='off.jpg';

}

setTimeout('bang()',3000);

</script>

</head>

<body>

</body>

</html>

<title>定时器是浏览器带给的功能</title>

function bang(){

//document.getElementsByTagName('img')[0].src='off.jpg';

var inp=document.getElementsByName('time')[0];

var time=parseInt(inp.value)-1;

inp.value=time;//给input付一个新值

if(time==0){

document.getElementsByTagName('img')[0].src='off.jpg';

}

setInterval('bang()',1000);

</script>

</head>

<body>

</body>

</html>

<title>定时器取消能/title>

function bang(){

//document.getElementsByTagName('img')[0].src='off.jpg';

var inp=document.getElementsByName('time')[0];

var time=parseInt(inp.value)-1;

inp.value=time;

if(time==0){

document.getElementsByTagName('img')[0].src='off.jpg';

clearInterval(clock);//清除倒计时

}

var clock=setInterval('bang()',1000);//把定时器的返回值赋给一个变量

</script>

</head>

<body>

</body>

<title>定时器取消setTimeout每n秒执行一次</title>

var clock=null;//存放全局变量的返回值

function bang(){

//document.getElementsByTagName('img')[0].src='off.jpg';

var inp=document.getElementsByName('time')[0];

var time=parseInt(inp.value)-1;

inp.value=time;

if(time==0){

document.getElementsByTagName('img')[0].src='off.jpg';

clearTimeout(clock);//清除倒计时

}else{

setTimeout('bang()',1000)

}

click=setTimeout('bang()',1000);

</script>

</head>

<body>

<h1>setTimeout每n秒执行一次</h1>

</body>

</html>

function t1(){

//alert('你来了');

document.getElementsByName('username')[0].style.border='1px solid red';

}

function t2(){

document.getElementsByName('username')[0].style.border="";

}

</script>

</head>

<body>

<p>

用户：<input type="text" name="username" onfocus="t1();" onblur="t2();"/>//onfocus="t1();获得焦点事件 onblur失去焦点事件

</p>

<p>

Email：<input type="text" name="email" />

</p>

</body>

<title>鼠标经过事件</title>

<style>

div{

width:200px;

height:200px;

background:#933;

}

</style>

function t1(){

alert('鼠标');

}

</script>

</head>

<body>

<h1>鼠标经过事件</h1>

</body>

</html>

<title>表单提交事件</title>

<style>

div{

width:200px;

height:200px;

background:#933;

}

</style>

function t1(){

alert('鼠标');

}

function t2(){

alert('请填写完整')

return false;

}

</script>

</head>

<body>

<h1>鼠标经过事件</h1>

<form action="表单.html" onsubmit="return t2();">//onsubmit="return t2();阻止表单的提交

</form>

</body>

<title>onload事件：加载</title>

function t1(){

document.getElementsByTagName('p')[0].style.border='1px solid blue';

alert("haha;");

}

</script>

</head>

</body>

</html>

与onclick=“bian()”等价

与style等价

<style>

div{

width:300px;

height:300px;

border:1px solid blue;

}

</style>

</head>

<body>

<div>

<p>

<ul>

</ul>

</p>

</div>

</body>

function bian(){

document.getElementsByTagName('div')[0].style.border="1px solid red";//改对象

}

document.getElementsByTagName('div')[0].onclick=bian;

</script>

<title>触发事件查询</title>

</head>

<body>

</body>

document.getElementsByTagName('img')[0].onmouseover=function(ev)//访问img

{ console.log(ev);

alert('住手！');

};

</script>

</html>

<style>

img{

width:130px;

height:130px;

position:relative;

left:0px;

right:0px;

}

</style>

</head>

<body>

<pre>

1.事件对象包含事件的相关的信息，如鼠标，时间，触发的DOM对象等

2.事件对象被系统传递给事件函数的第1个参数

3.事件对象的属性在IE/w3c略有不同

4.一个重要的事件属性：target,srcElement,代表事件发生所在的DOM对象

</pre>

</body>

document.getElementsByTagName('img')[0].onmouseover=function(ev)//访问img

{ /*console.log(ev);

alert('住手！');

this.style.left=ev.pageX+10+'px';//ev.pageX鼠标偏移量

this.style.top=ev.pageY+10+'px';

};

</script>

posted @ 2016-09-18 21:00 sunli0205 阅读(130) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sunli0205

2015年12月12 html笔记

图像<img src="w3cschool.png" width="104" height="142">

公告