Python第五周前端學習之HTML5/ CSS / JS
阿新 • • 發佈：2018-04-02
oct 我不 strong 描述 列表 rap arch center string
<!-- 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> <!-- 作者：[email protected] 時間：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>
Python第五周前端學習之HTML5/ CSS / JS