html,CSS,JavaScript学习笔记
2024-05-12 04:20:39
<html>
<head><title>练习1.1</title>
</head>
<body><p align='center'><font color='black' face='黑体' size='6'><br><<书籍目录>></font></p><p><font color='black' face='黑体' size='5'>第一章：简介</font></p><br><hr color='black' noshade="noshade" width="400px" align='left' size="1"><br><p align='left'><font color='black' face='黑体' size='4'>1.1 关于XX<sup>1</sup>的简介</font><br><font color='black' face='黑体' size='4'>1.2 XX的历史</font><br></p><p><font color='black' face='黑体' size='5'>第二章：深入介绍</font></p><br><hr color='black' noshade="noshade" width="400px" align='left' size="1"><br><p align='left'><font color='black' face='黑体' size='4'>2.1 XX原理分析</font><br><font color='black' face='黑体' size='4'>2.2 XX在实际中的应用</font><br><font color='black' face='黑体' size='4'>2.3 XX在未来展望<sup>2</sup></font><br></p><p><font color='black' face="宋体" size='3'><<b>font</b>>标签的<u>size</u>属性<font size='1'>1</font><font size='2'>2</font><font size='3'>3</font><font size='4'>4</font><font size='5'>5</font><font size='6'>6</font><font size='7'>7</font></font></p><p><font color='black' face="宋体" size='3'><<b>font</b>>标签的<u>color</u>属性<font color='#000000'>文</font><font color='#00000f'>字</font><font color='#708090'>的</font><font color='#2f4f4f'>颜</font><font color='#fffff'>色</font><font color='#fffff'>由</font><font color='#fffff'>黑</font><font color='#fffff'>到</font><font color='#fffff'>白</font></font></p><p><font color='black' face="黑体" size='3'><b><u><i>黑体：</i></u></b> hello world 你好世界</font><br><font color='black' face="楷体" size='3'><b><u><i>楷体：</i></u></b> hello world 你好世界</font><br><font color='black' face="仿宋" size='3'><b><u><i>仿宋字体：</i></u></b> hello world 你好世界</font></p>
</body>
</html>
表格
<html><head><title>标准表格</title></head><body><table border="1" width='50%' align='center' background='img1.jpg' cellpadding='2' cellspacing='1'><caption>一周课程表</caption><thead><tr height='40' valign='top'><th>时间/星期</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th></th><th>周五</th></tr></thead><tbody><tr height='40' valign='middle'><th>9:00</th><td>英语</td><td>语文</td><td>无</td><td>体育</td><td>数学</td></tr><tr height='40' valign='bottom' align='right'><th>10:00</th><td>英语</td><td>语文</td><td>无</td><td>体育</td><td>数学</td></tr><tr><th>11:00</th><td>英语</td><td>语文</td><td>无</td><td>体育</td><td>数学</td></tr><tr><th>12:00</th><td>英语</td><td>语文</td><td>无</td><td>体育</td><td>数学</td></tr></tbody><tfoot><tr><th>总课时</th><th>3</th><th>4</th><th>3</th><th>4</th><th>4</th></tr></tfoot></table></body>
</html>
表格练习
<html><head><title>多彩表格</title></head><body><table border="1" width="400" height="400"><tbody><tr><td colspan="2" bgcolor="red"></td><td rowspan="2" bgcolor="pink"></td><!-- <td></td> --></tr><tr><td rowspan="2" bgcolor="green"></td><td bgcolor="yellow"></td><!-- <td></td> --></tr><tr><!-- <td></td> --><td colspan="2" bgcolor='blue'></td><!-- <td></td> --></tr></tbody></table></body>
</html>
列表
<html><head><meta http-equiv="Content_Type" content='text/html;charset=utf-8'><title>有序列表</title></head><body><h1 align='center'>国家人口排名</h1><ol type='a'><li>中国</li><li>印度</li><li>美国</li></ol><!-- 无序列表 --><h1 align='center'>联合国常任理事国</h1><ul type='disc'><li>中国</li><li>法国</li><li>美国</li><li>英国</li><li>俄罗斯</li></ul></body>
</html>
子窗体互操作
表单
<html><head><title>早餐调查</title></head><body><h1>早餐调查</h1><form action='#' method='get'><p>您每天早上吃早餐吗？</p><p><input type='radio' name="r1" value="yes">是<input type='radio' name="r1" value="no">否</p><p>您经常在早上8点前吃早餐吗?</p><P><input type='radio' name="r2" value="yes">是<input type='radio' name="r2" value="no">否</P><p>您经常吃的早餐有哪些（可以多选）?</p><P><input type='checkbox' name="c" value="油条">油条<input type='checkbox' name="c" value="豆浆">豆浆<input type='checkbox' name="c" value="肉夹馍">肉夹馍<input type='checkbox' name="c" value="胡辣汤">胡辣汤</P><p><input type="submit" value='提交'></p></form></body>
</html>下拉列表框与列表框
<html><head><meta http-equiv="Content-Type" content='text/html;charset=utf-8'/><title>下拉列表框和列表框</title></head><body><h1>下拉列表框和列表框</h1><form><p>下拉列表框：请选择电话区号：<select name='s1'> <option value='010'>北京</option><option value='029' selected>西安</option><option value='028'>成都</option></select></p><p>单选列表框：请选择电话区号：<select name='s2' size='3'> <option value='010'>北京</option><option value='029' selected>西安</option><option value='028'>成都</option></select></p><p>多选列表框：请选择电话区号：<select name='s3' size='3' multiple> <option value='010' selected>北京</option><option value='029' >西安</option><option value='028'>成都</option></select></p></form></body>
</html>多行输入框
<html><head><meta http-equiv="Content-Type" content='text/html;charset=utf-8'/><title>发表文章</title></head><body><h1>发表文章</h1><form><p>文章标题：<input type='text' name='subject' size='40'></p><p>文章正文：<textarea name='content' rows='10' cols='40'>请输入正文：</textarea></p><p><input type='submit' value='提交'></p></form></body>
</html>
使用表格对表单进行布局
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>使用表格布局</title>
</head>
<body><form method="post" action="#"><table width='450' border='0' bgcolor='black' cellspacing='1' cellpadding='2'><!-- <table width="450" border="0" bgcolor="black" cellspacing="1" cellpadding="2"> --><tbody><tr height='30'><td colspan="2" align='center' bgcolor="#CCCCCC"><font size='5'>用户注册</font></td></tr><tr height='30'><td width='150' align='right' bgcolor="#E6E6E6">用户名</td><td width='300' align='left' bgcolor="#E6E6E6"><input name="Username" type='text' maxlength="20" size='15'></td></tr><tr height='30'><td width='150' align='right' bgcolor="#E6E6E6">密码</td><td width='300' align='left' bgcolor="#E6E6E6"><input name="Userpass" type='text' maxlength="20" size='15'></td></tr><tr height='30'><td width='150' align='right' bgcolor="#E6E6E6">重复密码</td><td width='300' align='left' bgcolor="#E6E6E6"><input name="Userpass" type='text' maxlength="20" size='15'></td></tr><tr height='30'><td width='150' align='right' bgcolor="#E6E6E6">性别</td><td bgcolor="#E6E6E6"><input name="sex" type='radio' value='男' checked>男<input name="sex" type='radio' value='女'>女</td> </tr><tr height='30'><td width='150' align='right' bgcolor="#E6E6E6">爱好</td><td bgcolor="#E6E6E6"><input name="like" type='checkbox' value='1'>足球<input name="like" type='checkbox' value='2'>篮球<input name="like" type='checkbox' value='3'>乒乓球</td></tr><tr height='30'><td width='150' align='right' bgcolor="#E6E6E6">省份</td><td bgcolor="#E6E6E6"><select name='province'><option>陕西省</option><option>山东省</option><option>山西省</option><option>河北省</option><option>河南省</option><option>湖南省</option><option>湖北省</option><option>黑龙江省</option><option>辽宁省</option><option>新疆省</option><option>广东省</option></select></td></tr><tr height='30'><td width='150' align='right' bgcolor="#E6E6E6">自我介绍</td><td bgcolor="#E6E6E6"><textarea name="Intro" cols='40' rows='5' id='Intro'></textarea></td></tr><tr height='30'><td colspan="2" align='center' bgcolor="#CCCCCC"><input type="submit" name="send" value='提交'><input type="reset" name="reset" value='重置'></td></tr></tbody></table></form>
</body>
</html>
CSS选择器
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>使用CSS选择器</title><style>p{color:blueviolet}p.c1{font-size: 5em;}p.c2{font-size: 0.5em;}#special{font-size: italic}ul li p{text-decoration: underline}</style>
</head>
<body>
<p class='c1'>应用类选择器c1选择器的段落</p>
<p class='c2'>应用类选择器c2选择器的段落</p>
<p>普通段落</p>
<p id='special'>id属性为special的段落</p>
<ul><li><p>列表段落</p></li><li class='c2'><p>段落列表</p></li>
</ul>
</body>
</html>
网页布局
1.上中下
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>练习5.1</title><style type="text/css">body{background:#42413Cmargin:0;padding:0;text-align:center;}.container{width:778px;background:#FFF;margin: 0 auto;text-align: left;}.header{padding:10px 0;background:#ADB96E;}.content{padding:10px 0;}.footer{padding: 10px 0;background:#CCC49F;}</style></head><body><div class='container'><div class="header"><h1>网页头部</h1></div><div class='content'><h1>网页正文</h1><h1>网页正文</h1><h1>网页正文</h1><h1>网页正文</h1></div><div class="footer"><h1>脚注</h1></div></div></body></html>
博客网页示例
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>HTML博客</title><link href="06_4.css" rel="stylesheet" type="text/css"><style>body {margin : 0; padding : 0; text-align : center; font-size : 13px;background-image : url(06_4_bg.jpg)}.container {width: 778px; margin: 0 auto; text-align:left;}.header {padding-top : 40px; padding-bottom : 20px; padding-left:50px;}/*导航菜单*/.navBar {position:relative; height:30px; width:100%;}.navBar ul {position:relative; margin:0 ; padding:0; height:30px;background:url('06_4.png') 0px -30px repeat-x; }.navBar ul li {padding:0; margin:0; list-style:none; float:left; height:30pxdisplay:inline;}.navBar ul li a {font:12px Arial; color:white; text-decoration:none;line-height:30px; display:block; background:url('06_4.png') 100% -60px no-repeat; padding:0 17px 0 15px; }.navBar ul li a:hover {text-decoration:underline; }.navBar .left { position:absolute; top:0px; left:0px; width:10px;height:30px; display:block; z-index:1; background:url('06_4.png') 0% 0px no-repeat;}.navBar .right { position:absolute; top:0px; right:0px; width:10px;height:30px; display:block; z-index:1; background:url('06_4.png') 100%-90px no-repeat; }/* 侧边栏 */.sidebarLeft {float:left; width:200px;}.sidebarRight {float:right; width:200px;}/* 小面板 */.frame {width:100%;margin-bottom:15px;background-color:white;border:solid 1px gray}.title { margin : 1px ; margin-bottom : 5px; padding : 4px; font-weight :bold; background-image : url(06_04_titlebg.png)}/* 文章、好友列表 */.list{list-style-type:none;padding:5px;margin:0}.list li {padding:3px; border-bottom:dotted 1px #aaf}.mainContent { width:370px;margin:0 auto}.footer {clear : both; position:relative; padding: 10px 0; text-align:center; color:#eee;}</style></head><body><div class="container"><div class="header"><h1>HTML博客</h1><p>http://www.htmlblog.com</p ></div><div class="content"><div class="navBar"><ul><li><a href=" ">首页</a></li><li><a href="#">博客</a></li><li><a href="#">文章</a></li><li><a href="#">帮助</a></li></ul></div><div class="sidebarLeft"><div class="frame"><div class="title">个人资料</div><div style="text-align:center"><img src="img3.jpg"><p style="font-size:1.2em;color:#aaf;font-weight:bold">刘某某</p ></div></div><div class="frame"><div class="title">博客文章</div><ul class="list"><li>HTML简介</li><li>HTML基本概念</li><li>HTML文档结构</li><li>HTML编辑器介绍</li><li>基本元素介绍</li><li>超链接元素</li><li>图片元素</li></ul></div></div><div class="sidebarRight"><div class="frame"><div class="title">我的好友</div><ul class="list"><li>刘德华</li><li>张学友</li><li>郭富城</li><li>黎明</li><li>李宗盛</li></ul></div><div class="frame"><div class="title">友情链接</div><ul class="list"><li>刘德华的博客</li><li>张学友的博客</li><li>郭富城的博客</li><li>黎明的博客</li><li>李宗盛的博客</li></ul></div><div class="frame"><div class="title">访客统计</div><ul class="list"><li>总共访问量：829人</li><li>今日访问量：28人</li></ul></div></div><div class="mainContent"><div class="frame"><div class="title">博文</div><div style="padding:5px"><h3>大家好，这是我的第一篇博客</h3><p style="text-indent:2em">我已经在BLOG安家了，欢迎你“常过来看看”，大家多多交流哦。我们可以一起把这里变成共同的心灵家园，像家一样温暖的地方。</p ><p style="text-indent:2em">我会把一些新鲜有趣的东西记录下来一块与你分享，也希望你能够记住我的BLOG地址，像老朋友一样经常过来做客——你可以把“她”添加到你的收藏夹中，也可以把“她”复制下来告诉你的朋友们。特别希望能通过你，让我认识更多的好朋友。如果还有不了解的，就跟着我一起来看看拥有所有博客知识和维护技巧的博客帮助站吧。<p style="text-indent:2em">我的BLOG地址： http://blog.com.cn/</div></div></div></div><div class="footer"><p>BLOG意见反馈留言板 不良信息反馈 电话：4000000000 提示音后按2键（按当地市话标准计费） 欢迎批评指正</p ><p>简介 | 关于我们 | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | 会员注册 | 产品答疑 </p ><p>Copyright 1996-2010 HTML Corporation, All Rights Reserved</p ><p>HTML公司 版权所有</p ></div></div></body></html>
QQ邮箱登陆界面代码（直接复制登陆界面源代码过来改个格式的）
<!DOCTYPE html><!DOCTYPE html><script>(function() {if(isMobile()) {location.replace("https://w.mail.qq.com");}function isMobile() {return navigator.userAgent.match(/Mobile|iPhone|iPad|Android/i) || Math.min(screen.height,screen.width) <= 480;}})();</script><script>(function(){if(location.protocol=="http:"){document.cookie = "edition=; expires=-1; path=/; domain=.mail.qq.com";location.href="https://mail.qq.com";}})();</script><html lang="zh-cmn"><head><title>登录QQ邮箱</title><meta name="renderer" http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="save" content="history" /><meta http-equiv="Content-Type" content="text/html; charset=gb18030" /><meta name="description" content="QQ邮箱，为亿万用户提供高效稳定便捷的电子邮件服务。你可以在电脑网页、iOS/iPad客户端、及Android客户端上使用它，通过邮件发送3G的超大附件，体验文件中转站、日历、记事本、漂流瓶等特色功能。QQ邮箱，常联系。" /><link rel="stylesheet" type="text/css" href="https://rescdn.qqmail.com/zh_CN/htmledition/style/webp/loginpage4bb408.css" /><link rel="icon" type="images/png" sizes="16*16" href="/zh_CN/htmledition/images/favicon/qqmail_favicon_16h.png"><link rel="icon" type="images/png" sizes="32*32" href="/zh_CN/htmledition/images/favicon/qqmail_favicon_32h.png"><link rel="icon" type="images/png" sizes="48*48" href="/zh_CN/htmledition/images/favicon/qqmail_favicon_48h.png"><link rel="icon" type="images/png" sizes="96*96" href="/zh_CN/htmledition/images/favicon/qqmail_favicon_96h.png"><meta name="theme-color" content="gray"></head><body><script type="text/javascript">var reportPtlogin = (function (){var gbIsPTReport = false,gnPTTimer = setTimeout(function(){reportPtlogin(-1);}, 5000);return function(_anRet){clearTimeout(gnPTTimer);if(!gbIsPTReport){gbIsPTReport = true;var _oImg = document.createElement("img"),_sUserName = document.getElementById("u")&&encodeURIComponent(document.getElementById("u").value) || "",_sDomain = "https://rl.mail.qq.com" || "https://rl.mail.qq.com",_sStat = _sDomain + "/cgi-bin/getinvestigate?stat=loginerr&code=#code#&err=&un="+_sUserName+"&r="+Math.random();_sStat = _sStat.replace("#code#", ({"1":920,"0":921,"-1":922})[_anRet]);_oImg.src = _sStat;_oImg.style.display = "none";document.body.appendChild(_oImg);_oImg = null;}}})();</script><img src="https://ssl.ptlogin2.qq.com/testimg" style="display:none" onload="reportPtlogin(1)" onerror="reportPtlogin(0)" /><div class="container"><div class="header"><a class="header_logo" href="/">QQ邮箱</a><div class="header_link"><a href="http://w.mail.qq.com/cgi-bin/loginpage?f=xhtml">基本版</a> | <a href="http://en.mail.qq.com">English</a> | <a href="http://app.mail.qq.com/" target="_blank">手机版</a> | <a href="http://exmail.qq.com?referrer=index_top" target="_blank">企业邮箱</a></div></div><div class="content"><div id="downError" class="login_msg" style="display:none;"><p><span class="login_msg_warning"></span>由于加载安全组件失败，为了您的帐号安全，无法正常登录邮箱，解决方法：</p><ul><li>按下F5重新刷新页面。</li><li>打开浏览器“选项”菜单，选择“Internet选项”，执行清空缓存功能，确定后按F5刷新本页面。</li><li>如上述方式仍然无法解决问题，请登录<a href="http://maildisk.bbs.qq.com" target="_blank">邮箱论坛通知我们</a>，我们将尽快为您解决。</li></ul></div><div class="content_wrapper"><div class="xm_login_container login_container" id="login"> <div class="xm_login_card"><div class="xm_login_card_tab"><div class="xm_login_card_tab_item" id="wxLoginTab">微信登录</div><div class="xm_login_card_tab_item xm_login_card_tab_item_Active" id="qqLoginTab">QQ登录</div></div><div class="xm_login_card_cnt"><div class="xm_login_card_wx" id="wxLoginCard"><iframe id="login_wx_iframe" class="login_loginBox_wx_iframe" height="100%" width="100%"frameborder="no" scrolling="no" src="https://open.weixin.qq.com/connect/qrconnect?appid=wx5e893ac3cc590290&redirect_uri=https%3A%2F%2Fwx.mail.qq.com%2Flogin%2Flogin%3Fauth_type%3D1%26return_target%3D5%26delegate_url%3Dhttps%253A%252F%252Fmail.qq.com%252Fcgi-bin%252Freadtemplate%253Fcheck%253Dfalse%2526t%253Dloginpage_new_jump_for_xmail&self_redirect=false&response_type=code&scope=snsapi_login&state=state&href=https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwebmail%2Fxmail%2Fres%2Fcss%2Fiframe_wx38793b.css#wechat_redirect"></iframe><div class="xm_login_card_state"><p id="auto_login" data-check="0"><a></a><span>下次自动登录</span></p></div></div><div class="xm_login_card_qq" id="qqLoginCard"><iframe id="login_frame" name="login_frame" height="100%" scrolling="no" width="100%" frameborder="0" test="jostinsu1"src="https://xui.ptlogin2.qq.com/cgi-bin/xlogin?target=self&appid=522005705&daid=4&s_url=https://mail.qq.com/cgi-bin/readtemplate?check=false%26t=loginpage_new_jump%26vt=passport%26vm=wpt%26ft=loginpage%26target=&style=25&low_login=1&proxy_url=https://mail.qq.com/proxy.html&need_qr=0&hide_border=1&border_radius=0&self_regurl=http://zc.qq.com/chs/index.html?type=1&app_id=11005?t=regist&pt_feedback_link=http://support.qq.com/discuss/350_1.shtml&css=https://res.mail.qq.com/zh_CN/htmledition/style/ptlogin_input_for_xmail440503.css"></iframe></div></div></div><div class="login_box second_login_box" style="display:none;" ><div class="login_box_header"><h1 class="login_box_title">登录QQ邮箱</h1></div><div id="msgContainer" class="login_box_msg" style="display:none;"></div><noscript><div class="login_box_msg noScript">您的浏览器不支持或已经禁止网页脚本，您无法正常登录。<a href="/zh_CN/help/error_noscript.html" title="了解网页脚本限制的更多信息" target="_blank"><img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/ico_help1e9c5d.gif" style="margin:0 2px;" align="absmiddle" />如何解除脚本限制</a></div></noscript><div class="login_box_msg noCookie" id="infobarNoCookie" style="display:none">你的浏览器不支持或已经禁止使用Cookie，导致无法正常登录。请<a href="http://service.mail.qq.com/cgi-bin/help?subtype=1&&id=7&&no=1001007#chrome" title="了解Cookie的更多信息" target="_blank">启用Cookie<img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/ico_help1e9c5d.gif" style="margin:0 2px;" align="absmiddle" /></a>后重试。</div><div style="display:none" id="qlogin" class="qlogin"></div><div class="login_operate" id="web_login"><form id="loginform" onsubmit="return QMLogin.checkInput();" method="post" name="loginform" target="_self" autocomplete="on" ><div class="login_submit" style=""><input class="login_button" id="btlogin" name="btlogin" type="submit" value="登录" tabindex="5" /></div></form></div><a class="login_box_forgotpassword" href="https://aq.qq.com/cn2/findpsw/pc/pc_find_pwd_input_account?pw_type=6&aquin=&source_id=2705" target="_blank">忘了密码？</a><div style="display:none;" id="switch" class="lineright" onmouseup="QMLogin.switchMode()"></div></div></div><div class="login_pictures"><div class="login_pictures_picture" style="background-image:url('https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/tg-silence1e9c5d.jpg');background-position:right 40px;"></div><div class="login_pictures_txt"><p class="login_pictures_title">QQ邮箱，常联系！</p><p>到头来，</p><p>我们记住的，</p><p>不是敌人的攻击，</p><p>而是朋友的沉默。</p><p>——马丁·路德·金</p><p class="login_pictures_info">插画来自丑丑(两岁)</p></div> </div></div></div><div class="footer"><a href="http://www.tencent.com" target="_blank">关于腾讯</a> | <a href="http://mail.qq.com/cgi-bin/readtemplate?check=false&t=mail_clause" target="_blank">服务条款</a> | <a href="https://privacy.qq.com/" target="_blank">隐私政策</a> | <a href="http://kf.qq.com/product/email.html" target="_blank">客服中心</a> | <a href="http://mail.qq.com/contact_us.html" target="_blank">联系我们</a> | <a href="http://service.mail.qq.com" target="_blank">帮助中心</a> | <span class="gray">©1998 - 2020 Tencent Inc. All Rights Reserved.</span></div></div><script type="text/javascript">if (typeof window.postMessage !== 'undefined') {window.onmessage = function(event) {var msg = event || window.event; var data;if (typeof JSON !== 'undefined') data = JSON.parse(msg.data);elsedata = str2JSON(msg.data);switch (data.action) {case 'close':ptlogin2_onClose();break;case 'resize':ptlogin2_onResize(data.width, data.height);break;default: break;}}}function str2JSON(str) {eval('var __pt_json='+str);return __pt_json;}function ptlogin2_onResize(width, height) {var login_wnd = document.getElementById("login");if (login_wnd) {login_wnd.style.width = width + "px";login_wnd.style.height = height + "px";login_wnd.style.visibility = "hidden";login_wnd.style.visibility = "visible";}}(function(){var _sLen = document.cookie.length, _nCookieNum = Math.random(),_sTestCookie = ["test", _nCookieNum, "test=test", ";expires=Thu, 01 Jan 9970 00:00:00 GMT",";path=/",";domain=.mail.qq.com"].join("");document.cookie = _sTestCookie;if (document.cookie.length == _sLen){document.getElementById("infobarNoCookie").style.display = "";}_sTestCookie = ["test", _nCookieNum, "test=test", ";expires=Thu, 01 Jan 1970 00:00:00 GMT",";path=/",";domain=.mail.qq.com"].join("");document.cookie = _sTestCookie;})();</script><script type="text/javascript">// 2018-12-25 为支持微信登录添加的逻辑 mark by jostinsufunction ready(fn) {if(document.addEventListener) {document.addEventListener('DOMContentLoaded', function(){ document.removeEventListener('DOMContentLoaded',arguments.callee,false);fn()},false)} else if(document.attachEvent){document.attachEvent('onreadystatechange',function(){if(document.readyState=='complete'){ document.detachEvent('onreadystatechange',arguments.callee); fn()} })}}function getLoginTypeFromCookie(cb) {var cookies = document.cookie.split(';')for (var index=0; index<=cookies.length; index++) {var item = cookies[index]if (typeof item === 'string' && item.indexOf('qm_logintype') !== -1) {var cookie = item.split('=')if (cookie[1] && cookie[1] === 'wx') {cb('wx')} else {cb('qq')}break}}}function init(){document.domain = 'mail.qq.com'var wxLoginTab = document.getElementById('wxLoginTab')var qqLoginTab = document.getElementById('qqLoginTab')var wxLoginCard = document.getElementById('wxLoginCard')var qqLoginCard = document.getElementById('qqLoginCard')// var wxLoginIframe = document.getElementById('wxLoginCard_iframe')// 根据用户上次登录情况选择显示“微信登录”还是'QQ'登录getLoginTypeFromCookie(function(type){if (type === 'wx') {qqLoginCard.style.left = '-100%'clickWxLoginTab()} else {qqLoginCard.style.left = '0'clickQQLoginTab()}})// 添加onload事件，待微信 iframe 样式加载回来再显示出来，不然会有闪烁// if (wxLoginIframe.attachEvent){// wxLoginIframe.attachEvent("onload", hadLoadedWXIframe); // } else { // wxLoginIframe.onload = hadLoadedWXIframe// }// setTimeout(function() { // 兜底的策略，在2s后必须显示微信登录框// hadLoadedWXIframe()// }, 2000)// function hadLoadedWXIframe() {// wxLoginIframe.style = ''// }// 'QQ登录'和‘微信登录’tab的切换事件wxLoginTab.onclick = clickWxLoginTabqqLoginTab.onclick = clickQQLoginTabfunction clickWxLoginTab() {if (wxLoginTab.className.indexOf('xm_login_card_tab_item_Active') === -1) {wxLoginTab.className += ' xm_login_card_tab_item_Active'qqLoginTab.className = qqLoginTab.className.replace(' xm_login_card_tab_item_Active', '')qqLoginCard.style.left = '-100%'}}function clickQQLoginTab() {if (qqLoginTab.className.indexOf('xm_login_card_tab_item_Active') === -1) {qqLoginTab.className += ' xm_login_card_tab_item_Active'wxLoginTab.className = wxLoginTab.className.replace(' xm_login_card_tab_item_Active', '')qqLoginCard.style.left = '0'}}}ready(init)// 2019-09-02 微信登录增加延长登录态逻辑ready(pendState)function pendState() {var target = document.getElementById('auto_login')var targetChild = document.getElementById('auto_login').getElementsByTagName('a')[0]if (document.addEventListener) {target.addEventListener('click', function() {if (target.getAttribute('data-check') == 1) {target.setAttribute('data-check', 0)targetChild.className = ''deletePendStateCookie(-1)} else {target.setAttribute('data-check', 1)targetChild.className = 'xm_login_card_checked'setPendStateCookie(1)}})} else {target.attachEvent('click', function() {target.addEventListener('click', function() {if (target.getAttribute('data-check') == 1) {target.setAttribute('data-check', 0)targetChild.className = ''deletePendStateCookie(-1)} else {target.setAttribute('data-check', 1)targetChild.className = 'xm_login_card_checked'setPendStateCookie(1)}})})}}function setPendStateCookie(day) {var date = new Date()date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000)var expires = '; expires=' + date.toGMTString()document.cookie = 'xm_pstate' + '=' + true + expires + '; path=/; domain=.mail.qq.com'}// 初始化进入页面 删除cookieready(deletePendStateCookie)function deletePendStateCookie() {setPendStateCookie(-1)}</script></body></html>
JavaScript部分
document.write()综合演练
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">var rows=6;var cols=8;document.write('<table width="100%" border="1">');document.write('<caption>动态生成表格</caption>');document.write('<tbody>')for(var row=0;row<rows;row++){if(row%2==0){document.write('<tr bgcolor="#cccccc">');}else{document.write('<tr>')}for(var col=0;col<cols;col++){document.write('<td>'+col+'</td>');}document.write('</tr>')}document.write('</tbody>');document.write('</table>');</script></head>
</html>
3种交互方式
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">alert("现在演示alert、confirm与prompt方法");var name=prompt("请输入您的姓名","匿名");var flag=confirm("请确认您的姓名:"+name);if(flag){alert('确认无误!');}else{alert("确认失败");}</script></head>
</html>
自定义方法（函数）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">function add(a,b){var c=parseInt(a)+parseInt(b);return c;}var a=prompt("请输入第一个数",0);var b=prompt("请输入第二个数",0);var c=add(a,b);alert("计算结果是："+c);</script></head>
</html>
计算多个数的和
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">function add(){var len=arguments.length;var c=0;for(var i=0;i<len;i++){c+=parseInt(arguments[i]);}return c;}document.write("<p>无参数="+add());document.write("<p>1="+add(1));document.write("<p>1,3="+add(1,3));document.write("<p>1,3,5="+add(1,3,5));document.write("<p>1,3,5,7,9="+add(1,3,5,7,9)); </script></head>
</html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">function output(times,char,end){var s='';for(var i=0;i<times;i++){if(char){s+=char;}else{s+='*';}}document.write(s);if(end){document.write(end);}else{document.write("<br>");}}output(20);output(20,'0');output(20);output(20,"H","<hr>");output(6,"<img src='img3.jpg'>","<hr>");</script></head>
</html>
设计一段JavaScript脚本用于计算n个数的和，程序首先询问用户需要计算多少个数的和，然后依次提示用户输入数字，最后在页面上显示运算的结果
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">var nums = prompt("计算多少个数的和？", 3);var sum = 0;for (var i = 0; i < nums; i++) {var a = prompt("请输入第" + (i+1) + "个数", 0);sum+=parseInt(a);document.write(a);if (i == nums-1) {document.write(" = ");} else {document.write(" + ");}}document.write(sum);</script></head><body></body></html
设计一段JavaScript脚本在HTML页面中输出水平线组成的金字塔（提示：通过循环输出<hr>标记，并控制其width属性）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">var i = 5;while(i<=100){document.write('<hr align="center" width="' + i + '%"/>');i+=5;}</script></head><body></body></html
设计一个JavaScript方法，使用字符输出三角形。该方法支持3个参数，分别为三角形高度、输出字符（可省略，默认为*）和输出方向（可省略，默认为输出倒三角）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">function output(rows, char, d) {var start = d?1:rows;var end = d?rows+1:0;var step=d?1:-1;for (var i = start; i != end; i+=step) {for (var j = 0; j < i; j++) {document.write(char?char:"*");}document.write("<br/>");}}output(10, "o", "down");output(10);</script></head><body></body></html>
应用JavaScript中数组的特点实现学生姓名录入的功能，在学生数量未知的情况下使用数组记录每一个录入学员的姓名，录入完毕后全部显示出来：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript数组定义</title>
<script type="text/javascript">var a=new Array();do{var name=prompt('请输入姓名,输入"end"结束','end');a[a.length]=name;}while(name!='end');a.length=a.length-1;alert(a);
</script>
</head>
<body>
</body>
</html>可以综合使用数组与Hash描述更为复杂的数据结构，这种格式被称为JSON（JavaScript Object Notation）格式，JSON具有易于阅读、编写，体积小，易于程序解析等特点，常用于JavaScript与服务器后台程序之间进行数据交换。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JSON</title><script type="text/javascript">function showPerson(p) {document.write('<p>姓名：<b>' + p.name + '</b></p >');document.write('<p>年龄：<b>' + p.age + '</b></p >');document.write('<p>教育经历：</p ><ul>');for (var i = 0; i < p.edus.length; i++) {document.write('<li>' + p.edus[i] + '</li>');}document.write('</ul>');document.write('<p>所获奖励：</p ><ul>');for (var i = 0; i < p.certs.length; i++) {document.write('<li>' + p.certs[i].year + '年：获得' +p.certs[i].content + '</li>');}document.write('</ul>');}var person = {name : '小明', age : 20};person.edus = ['云南第一小学', '西安第二初级中学', '北京第三高级中学'];person.certs = [{ year : 1985, content : '奥林匹克数学小学竞赛一等奖' },{ year : 1999, content : '市优秀少先队员' },{ year : 2004, content : '优秀共青团干部' }];showPerson(person);</script></head><body></body></html>
利用Date对象获取当前时间，并根据当前时间显示欢迎信息，早上12点前显示上午好，12 点至19 点显示下午好，否则显示晚上好。周一到周五显示工作愉快，周六周日显示休假开心：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>问候</title><script type="text/javascript">var d = new Date();document.write("<p>当前时间：" + d.toLocaleString() + "</p >");//判断当前小时if (d.getHours() <= 12) {document.write("早上好！");} else if (d.getHours() >12 && d.getHours() < 19) {document.write("下午好！");} else {document.write("晚上好！");}//判断当前周几if (d.getDay() >= 1 && d.getDay() <=5) {document.write('<font color="green">工作愉快！</font>');} else if (d.getDay() == 6 ||d.getDay() == 0) {document.write('<font color="red">休假开心！</font>');}</script></head><body></body></html>
利用Math.random()方法完成“人物、地点、事件”小游戏，随机从人物、地点和事件数组中抽取一个元素，组成完整的句子：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>人物、地点、事件</title><script type="text/javascript">var names = ['张三', '李四', '王五', '赵六'];var locations = ['餐厅', '商业街', '房顶', '荒郊野岭', '下水道'];var actions = ['学习网页制作', '购物', '吃饭', '发呆', 'K歌'];for (var i = 0; i < 10; i++) {var name = names[Math.floor(Math.random() * names.length)];var loc = locations[Math.floor(Math.random()*locations.length)];var action = actions[Math.floor(Math.random() * actions.length)];document.write(name + '在' + loc+action + '<br/>');}
</script>
</head>
<body>
</body>
</html>
JavaScript并不支持支持多线程运算，所以经常使用setTimeout和setInterval方法模拟线程，如下例所示
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>打字机效果</title><script type="text/javascript">var s = '第三十六期全球超级计算机500强排行榜';var index = 0;function output() {//document.body.innerHTML指body中显示的内容document.body.innerHTML += s.charAt(index);index++;//如果字符串全部输出完毕，停止定时任务if (index>=s.length) window.clearInterval(handler);}//设置定时任务var handler = window.setInterval('output()', 50);</script></head><body></body></html>
getElementById常用于根据id属性获取指定的元素，使用时应注意在HTML文档中不应当存在多个对象具有同一个id的情况。查找出指定的元素对象后可以对对象进行各种操作，下例通过读写对象的innerHTML属性完成页面倒计时的功能：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>倒数计时的窗口</title><style>#sec {color:red;font-size:1.4em;}</style><script type="text/javascript">function countdown() {var sec = document.getElementById('sec');var s = sec.innerHTML; //读取span中的内容s--;sec.innerHTML = s; //设置span中的内容if (s==0) {window.clearInterval(handler);window.open('test1-2.html', 'newName');}}var handler = window.setInterval('countdown()', 1000);</script></head><body><p>本页面将会在<span id="sec">3</span>秒后弹出新的窗口</p ></body></html>
通过location对象可以控制当前页面的跳转或刷新
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>location对象</title><script type="text/javascript">window.setTimeout('window.location="test1-2.html"',3000);</script></head><body><p>本页面将会在3秒后进行跳转</p ></body></html>通过设置href属性的方式进行页面跳转会在浏览器的历史记录中留下痕迹，下例使用replace方法进行跳转：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>location对象</title><script type="text/javascript">window.setTimeout('window.location.replace("test1-2.html")',3000);</script></head><body><p>本页面将会在3秒后进行跳转</p ></body></html>
screen对象也属于window对象的一部分，可通过window. screen进行访问，其中存放着有关显示浏览器屏幕的信息。一般可以通过screen对象获取用户屏幕的分辨率，以修正页面的布局方式，screen对象只有属性没有方法，如表8-9所示。
下例通过screen对象检测用户屏幕的分辨率，如果分辨率过低则认为用户使用移动设备上网，跳转到特定页面：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>screen对象</title><script type="text/javascript">var w = screen.width;var h = screen.height;alert('你当前屏幕的分辨率是' + w + ' x ' + h);if (w < 800 && h < 600) {document.write('检测到您当前使用移动设备或低分辨率显示器，请转入<a href=" ">移动版</ a>');} else {document.write('< a href="newPage.html">进入大屏幕版</ a>');}</script></head><body></body></html>
给定hash变量s结构如下，根据s的内容输出图8-8所示的下拉列表框，要求将id作为<option>的值，name作为现实的文本。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>热卖专辑</title><script type="text/javascript">var s = {};s['刘德华'] = [{id : '001', name : '谢谢你的爱'}, {id : '002', name :'冰雨'}, {id : '003', name : '中国人'}];s['张学友'] = [{id : '004', name : '吻别'}, {id : '005', name : '祝福'},{id : '006', name : '饿狼传说'}];s['Michael Jackson'] = [{id : '007', name : 'Black And White'}, {id :'008', name : 'Dangerous'}, {id : '009', name : 'Thriller'}];for (var singer in s) {document.write("<p>" + singer + " : ");document.write("<select>");var arr = s[singer];for (var i=0; i < arr.length; i++) {document.write('<option value="' + arr[i].id + '">' +arr[i].name + '</option>');}document.write("</select></p >");}</script></head><body></body></html>
古诗填字游戏，将诗词内容存入字符串，每一句用逗号分隔，程序自动在每一句中随机抽取一个字，组成4个选项，让用户选择正确的答案。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>古诗填字</title><script type="text/javascript">var s = '离离原上草,一岁一枯荣,野火烧不尽,春风吹又生,远芳侵古道,晴翠接荒城,又送王孙去,萋萋满别情'.split(',');var right = [];for (var i = 0; i < s.length; i++) {//选出字right[i] = s[i].charAt(Math.floor(s[i].length * Math.random()));//将选出的字替换为（）s[i] = s[i].replace(right[i], '( )');}document.write("<p>" + s + "</p >");var answers = [];answers[0] = right;//得到其他3个错误的答案for (var i = 1; i < 4; i++) {answers[i] = shuffleArray(right);//防止选项重复if (arrayEquals(answers[i], answers[i-1])) {i--;}}//打乱选项的顺序answers = shuffleArray(answers);document.write('<ol type="A">');for (var i = 0; i < 4; i++) {document.write('<li>' + answers[i] + '</li>');}document.write('</ol>');/*判断两个数组内容是否相等*/function arrayEquals(array1, array2) {if (array1.length!=array2.length) return false;for (var i = 0; i < array1.length; i++) {if (array1[i]!=array2[i]) return false;}return true;}/*根据传入数组产生一个内容相同的新数组，但新数组元素的位置经过了随机打乱*/function shuffleArray(array) {var a = [];for (var i = 0; i < array.length; i++) {a[i] = array[i];}for (var i = 0; i < a.length; i++) {var x1 = Math.floor(a.length * Math.random());var x2 = Math.floor(a.length * Math.random());var tmp = a[x1];a[x1] = a[x2];a[x2] = tmp;}return a;}</script></head><body></body></html>
鼠标事件
不同浏览器中，获取事件对象的方式也不尽相同，在IE浏览器中，事件对象本身就是window对象的子对象，可以随时访问；但其他浏览器则不同，为保持浏览器兼容，推荐的做法是在调用事件处理方法时传入event参数，如下例所示：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>onload事件</title><script type="text/javascript">function tag_onclick(who,event){alert('事件名称：'+event.type+',是否按下CTRL键：'+event.ctrlKey);}</script></head><body ><h1 onclick="tag_onclick(this,event)">网页正文</h1><h3 onclick="tag_onclick(this,event)">正文内容</h3><p onclick="tag_onclick(this,event)">第一个段落</p><p onclick="tag_onclick(this,event)">第二个段落</p></body></html>
其他鼠标事件包括鼠标双击事件（ondblclick）、鼠标移出事件（onmouseout）、鼠标移入事件（onmouseover）、鼠标移动事件（onmousemove）、鼠标按下事件（onmousedown）、鼠标松开事件（onmouseup），下面以鼠标移入、移出为例制作动态的效果：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>onmouseover, onmouseout事件</title><style>.highlight {background-color:#ffc;cursor:pointer;}input {border:solid 1px black;background-color : #aaa;font-size:12px;font-weight:300;height:30px;width:120px;}input.highlight {border:solid 1px black;background-color : #ffc;font-size:14px;font-weight:600;width:120px;height:30px;}</style><script type="text/javascript">function init() {var trs = document.getElementsByTagName('tr');for (var i = 0; i < trs.length; i++) {trs[i].onmouseover = function() {this.className = 'highlight';};trs[i].onmouseout = function() {this.className = '';};}}</script></head><body onLoad="init()"><table width="400" border="1"><tbody><tr><td>sdfgsd</td><td>hgj</td><td>3453</td></tr><tr><td>fdh</td><td>324g</td><td>45345</td></tr><tr><td>gdf</td><td>fghdf</td><td>ty45645</td></tr><tr><td>fghfdg</td><td>hfgjhg</td><td>jfgjfgjh</td></tr></tbody></table><p><input type="button" value="普通按钮" onMouseOver="this.className='highlight'" onMouseOut="this.className=''"></p ></body></html>
鼠标滚轴事件
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> onmousewheel事件</title><script type="text/javascript">function img_onmousewheel(who, e) {//whellDelat表示鼠标滚轴的移动方向if (e.wheelDelta > 0) who.width = who.width + 50;if (e.wheelDelta < 0 && who.width > 50) who.width = who.width -50;}</script></head><body><h1>照片浏览</h1><p>可以在照片上滚动鼠标滚轴进行缩放</p ><div id="x"></div><img src="img2.jpg" width="640" onmousewheel="img_onmousewheel(this, event)"/></body></html>
键盘事件
与按键相关的事件有3个：键盘按下事件（onkeydown）、键盘松开事件（onkeyup）和击键事件（onkeypress）。下面演示通过为输入框增加按键事件，保证输入框中只能输入数字，不能输入英文。此例中当判断出按键为非数字时，需要取消本次按键事件，在Java Script中，事件处理函数如果返回false，则表示取消本次事件，如下例所示：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> onmousewheel事件</title><script type="text/javascript">function txt_onkeydown(e){if(e.keyCode==8||e.keyCode==13){return true;}if(e.keyCode>=48&&e.keyCode<=57){return true;}else{return false;}}</script></head><body><h1>请输入您的年龄</h1><p>只能输入数字:<input onKeyDown="return txt_onkeydown(event);" type="text"></p ></body></html>
下面演示了将onchange事件用于下拉列表框的例子，当下拉列表框内容改变后获取当前选中的内容，并根据内容修改网页的背景色，请注意获取下拉列表框当前选中内容的方法：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>onchange事件</title><script type="text/javascript">function select_onchange(value) {//document.body用于获取网页中的body元素document.body.style.backgroundColor = value;}</script></head><body><h1>请选择您的喜欢颜色</h1><form><p>页面背景色改为：<select onchange="select_onchange(this.options[this.selectedIndex].value)"><option value="white">白色</option><option value="green">绿色</option><option value="blue">蓝色</option><option value="yellow">黄色</option><option value="red">红色</option></select></p ></form></body></html>
Javascript表单验证
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Javascript表单验证</title></head><script type="text/javascript">function form_onsubmit(){var name = document.getElementById('txtName').value;if(name == ""){alert("用户名不能为空！");return false;}var pwd = document.getElementById('txtPwd').value;var rePwd = document.getElementById('txtRePwd').value;if (pwd=='' || rePwd=='') {alert("密码不能为空！");return false;} else if(rePwd != pwd){alert("两次输入密码不一致！");return false;}//验证邮件地址var email = document.getElementById('txtEmail').value;if(email == ""){alert("邮件地址不能为空！");return false;}var at = email.indexOf('@');var dot = email.indexOf('.');if(at == -1 || dot == -1 || dot - at < 2){alert("邮件地址格式错误！");return false;}//验证年龄var age = document.getElementById('txtAge').value;if(age == ""){alert("年龄不能为空！");return false;}else if(isNaN(age)){alert("年龄应该是数字！");return false;}//验证性别var sex = document.getElementsByName('rdnSex');if(sex[0].checked==false && sex[1].checked==false){alert("没有选择性别！");return false;}return true;}</script><body><form onSubmit="return form_onsubmit();" method="post" action="x.html"><h1>欢迎您注册成为新用户</h1><table width="400"><tr><td>用户名：</td><td><input type="text" name="txtName" id="txtName"></td></tr><tr><td>密码：</td><td><input type="password" name="txtPwd" id="txtPwd"></td></tr><tr><td>新密码：</td><td><input type="password" name="txtRePwd" id="txtRePwd"></td></tr><tr><td>性别：</td><td><input type="radio" name="rdnSex" value="男">男<input type="radio" name="rdnSex" value="女">女</td></tr><tr><td>年龄：</td><td><input type="text" name="txtAge" id="txtAge"></td></tr><tr><td>邮件地址：</td><td><input type="text" name="txtEmail" id="txtEmail"></td></tr><tr><td colspan="2"><input type="submit" value="确定"></td></tr></table></form></body></html>
html,CSS,JavaScript学习笔记相关推荐
- HTML,CSS,JavaScript学习笔记--导航
陆陆续续花了一个月的时间,把前端三大件HTML,CSS,JavaScript的基本语法学完了,感觉还是收益颇丰的.但是其中的知识远远不止这些,以后学习的过程中在进行补充吧. HTML,CSS学习笔记 ...
- html5+CSS+JavaScript学习笔记（小甲鱼）
第一个程序 <!DOCTYPE html> <html><head><title>第一个程序</title></head> &l ...
- HTML/CSS/JavaScript学习笔记【持续更新】
HTML <font> 标签 定义和用法 <font> 规定文本的字体.字体尺寸.字体颜色. 实例 规定文本字体.大小和颜色: 1 <font size="3& ...
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- 前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 ...
- JavaScript学习笔记之DOM篇，带你全面了解什么是DOM
DOM在前面的JavaScript学习笔记(一)–JS基础里简单提到过,它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型,是JavaScript的重要组成部分,现在带大家详细了解 ...
- CSS入门学习笔记（案例+详解）
CSS入门学习笔记 一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用 二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法 三.CSS选择器 1.元素 ...
- JavaScript学习笔记之入门篇
JavaScript学习笔记之入门篇 JavaScript引入 1. 页面级 js: 2. 外部js文件: JavaScript变量 1. 变量的作用: 2. 声明变量: 3. 变量赋值: 4. 单一 ...
- JavaScript 学习笔记（二）
JavaScript 学习笔记(二) 文章目录 JavaScript 学习笔记(二) 一 JSON 1. JSON 对象 什么是JSON对象 JSON对象与Javascript对象的区别 在JavaS ...
最新文章
- oracle 游标 内联,oracle – EXEC_SQL,EXECUTE IMMEDIATE,DBMS_SQL和内联SQL之间的区别
- django orm级联_django+jquery 实现级联选择菜单
- Hadoop Yarn任务优先级（作业优先级、应用优先级）设置
- 计算机网络传输复用技术,计算机网络 23-24 复用技术 数字传输.ppt
- application/json 四种常见的 POST 提交数据方式
- 如何连动作导入3dmax_教你如何将犀牛（Rhino）模型导入3dmax并进行渲染
- Python中带else子句的for循环执行过程
- 让远程传输大文件变得更快
- 2分钟-实现开机nginx开机自启动脚本（shell篇）
- JavaWeb——swagger使用
- 时间区间页面设计两个框html,elementUI 2个输入框 时间区间月份选择
- PWN--collision
- Path of Equal Weight （30 分）
- SQL Sever 2012学习总结之使用SQL语言创建数据库与表
- 传奇修改map地图教程_传奇gm如何增加或者修改服务器中的地图
- 8051单片机Proteus仿真与开发实例-RS485协议通信仿真
- 主流NoSQL数据库评测之HandlerSocket
- Chrome 安装有道画词取义插件
- php 获取新浪股票行情数据,获取新浪实时股票行情数据
- 【C#】 .NET Reflector 安装与学习