Python第五周前端学习之HTML5/ CSS / JS
<!-- html/head/body 文本 - h1-h6 p / br / hr / sub / sup / strong / b / em / del / ins / 列表 - ul(li) / ol(li) / dl(dt/dd) / 图像 - img / figure / figcaption 链接 - a(页面链接/锚链接/功能链接) 表格 - table / tr / td / th / thead / tbody / tfoot 表单 - form / input (text / password / radio / checkbox / file / submit / reset / email / date url/ search) / select / textarea 音视频 - audio / video / (source) --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5笔记</title> </head> <body> <!--controls 控件 autoplay 自动播放 loop --> <audio autoplay loop> <source src="resources/xiaochou.mp3"> </audio> <dl id="top"> <dt> <figure> <figcaption style="text-align: center;">FOR DREAM <br /> <img src="img/bg2.jpg"> </figure> </dt> <dd style="text-align: center;">火拳 艾斯</dd> </dl> <table border="" cellspacing="" cellpadding=""> <caption>海贼王名言</caption> <!-- 作者：zhangli9479@163.com 时间：2018-04-01 描述：thead tbody tfoot --> <tr> <th>姓名</th> <th>名言</th> </tr> <tr> <td>白胡子</td> <td>红发</td> <td>路飞</td> <td>艾斯</td> <td>索隆</td> <td>海贼王</td> </tr> <tr> <td>做我儿子吧！</td> <td>请各位务必给我这个面子</td> <td>我不是天生的王者 但我骨子里流动着不让我低头的血液</td> <td>为什么遇到如此强大的敌人你也不愿逃跑？—— 那是因为身后，有至爱之人。</td> <td>我不管这个世上的人怎么说我，我只想依照我的信念做事，绝不后悔，不管现在将来都一样！</td> <td>这个世界并不是掌握在那些嘲笑者的手中，而恰恰掌握在能够经受得住嘲笑与批评仍不断往前走的人手中。</td> </tr> </table> <form action="" method="post"> <fieldset id=""> <legend>表框名</legend> <input type="text" name="" id="" value="" required=""/> <input type="password" name="" id="" value="" placeholder="占位华语"/> <input type="radio" name="1" id="" value="" />单选一 <input type="radio" name="1" id="" value="" />单选二 <input type="checkbox" name="2" id="" value="" />复选1 <input type="checkbox" name="2" id="" value="" />复选2 <input type="date" name="" id="" value="" /> <input type="email" name="" id="" value="" /> <select name=""> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> <option value="" selected>666</option> </select> <textarea name="" rows="" cols="">我是文本框</textarea> <input type="file" name="photograph" id="photograph" value="浏览文件" /> <input type="submit" name="" id="" value="提交" /> <input type="reset" name="" id="" value="重置" /> </fieldset> </form> <a href="http://www.runoob.com" style="text-decoration: none;color: red;">超链接</a> <a href="#top" style="text-decoration: none;color: red;">锚定</a> <a href="" style="text-decoration: none;color: red;">功能链接</a> </body> </html>
CSS
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS笔记</title> </head> <body> <div class="header"> <h1 style="text-align: center;">基础</h1> <ul style="list-style: none; line-height: 30px;text-align:center;"> <li>标签选择器 id class nthon-child</li> <li>间距 word-spacing 行高 line-height font-size 大小 </li> <li>font-weight 粗细，bold bolder font-style 样式，italic 斜体 letter-spacing </li> <li>text-align: center top bottom left right</li> <li>overflow: hidden scroll;</li> <li>text-decoration: line-through 删除线;</li> <li>块级元素，行级元素，内联元素 用display转换</li> <li>转义字符</li> <li>html是显示，是超文本语言，css是装饰，js是脚本，显示行为</li> <li>样式分为3种，常用的是内部和外联， 内联很少用。样式表冲突时的三大原则</li> <li>就近原则；具体性原则；重要性原则</li> </ul> <iframe src="https://www.liaoxuefeng.com/" frameborder="0" width="800" height="400"></iframe> <iframe src="http://www.runoob.com/js/js-examples.html" frameborder="0" width="800" height="400"></iframe> </div> <div class="nav"> <ul style="list-style: none;text-align: center;"> <li>display 类型转化 - block inline-block</li> <li>position :relative absolute fixed 相对，绝对，固定定位</li> <li>z-index配合定位使用，决定谁在最上面，值越大，在上面，下面被覆盖</li> </ul> </div> <div class="main"></div> <div class="footer"></div> <div class="bottom"></div> </body> </html>
JS
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js笔记</title> </head> <body> <div> <h2>天赐大酒店</h1> <hr /> <h1 >剩余房间数<input type="text" value="10" id="demo" /></h1> <hr /> <input id="join" type="button" onclick="myfunction1()" value="申请入住"> <input id="quit" type="button" onclick="myfunction2()" value="申请退房"> </div> <div> <h2>九九乘法表</h2> <hr /> <div id="tableNine" style="height: 230px;background-color: yellow;"></div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <script type="text/javascript"> function jiujiu(){ var row, col; var string = "<table>"; for (row = 1; row < 10; row++){ string += "<tr>"; for (col = 1; col < row + 1;col++){ string += "<td>"; string += row + "×" + col + "=" + col * row; string += '</td>' } string += "</tr>"; } document.getElementById("tableNine").innerHTML = string + "</table>"; }; jiujiu(); </script> <script type="text/javascript"> function myfunction1(){ var number =parseInt(document.getElementById("demo").value); if (number > 0) { document.getElementById("demo").value = number - 1; window.alert("订房成功"); } else{ window.alert("订房失败") } } function myfunction2(){ var number =parseInt(document.getElementById("demo").value); if (number < 15) { document.getElementById("demo").value = number + 1; window.alert("退房成功"); } else{ window.alert("退房失败") } } </script> </body> </html>
