这两天心血来潮学习了前端，自己也做了个小小的网页，不好看QAQ 不过网页上集结了很多零碎的知识，在这里先马克一下。图片地址：https://github.com/lesroad/html-css-js-1
html
<!DOCTYPE html> <html> <head> <title>my!</title> <script src = "3.js"></script> <link rel = "stylesheet" type = "text/css" href = "2.css"> <!--头部定义外部样式表--> <style> /*头部定义内部样式表*/ .cities { /*类选择器*/ background-color:black; color:white; margin:20px; padding:20px; text-align:center; } #shuxing1 /*id选择器*/ { color: red; text-decoration:line-through; } body { background: url('https://www.dreamwings.cn/wp-content/uploads/2016/08/background.png') no-repeat right top; background-attachment:fixed; } a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ </style> </head> <body onload = "load()"> <h1 class = "cities" id = "shuxing1">lesroad</h1> <!--一级标题--> <h2>这是错误的！</h2> <!--二级标题--> <a href = "http://www.baidu.com" target = "_blank"><h2>打开百度</h2></a> <hr/> <h3>hello kitty</h3> <p style = "font-size: 40px; color:#66ccff">23333</p> <!--内联样式表--> <!--段落--> <br/> <p class = "shuxing2">hhhhhh</p> <hr/> <div class = "cities"> <p id = "daan">123</p> <script> function Fun1() { document.getElementById("daan").innerHTML = "爱就像蓝天白云晴空万里忽然暴风雨"; } </script> <p><button onclick = "Fun1()">歌曲</button></p> </div> <br/> <!--图片--> <a href = "https://www.cnblogs.com/lesroad"> <img border="0" src="2.png" alt="hjkhj" width = "128px" target = "_blank"> </a><br/> <hr/> <!--表格--> <table border = "1"> <tr> <th>Head</th> <td>is</td> <td></td> </tr> <tr> <td>(1,1)</td> <td>(1,2)</td> <td>(1,3)</td> </tr> <tr> <td>(2,1)</td> <td>(2,2)</td> <td>(2,3)</td> </tr> </table> <hr/> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> <!--表单--> <form> 用户名<br/> <input type = "text" name = "123"> <br/> 密码<br/> <input type = "password" name = "123"> <br/><br/> <input type = "submit" value = "提交"><br/> 性别<br/> <input type = "radio" name = "123" > Male<br/> <input type = "radio" name = "123"checked> Female<br/> <select> <option>苹果</option> <option>香蕉</option> </select> <input type = "date"> <input type = "color"> <br/><br/> </form> <!--图片分区相应图--> <a href = "http://www.w3school.com.cn/tags/tag_area.asp" target = "_blank">链接</a><br/> <img src = "圆.png" width = "128" usemap = "#map1" alt = "圆"><br/><br/> <form> <!--定位获取坐标--> <input type = "image" src = "方.png"> </form> <img src = "方.png" usemap = "#map2" alt = "方"><br/> <map name = "map1"> <area href = "https://www.baidu.com/" shape = "circle" coords = "64, 64, 64" target = "_blank"> </map> <map name = "map2"> <area href = "https://baike.baidu.com/item/%E6%A9%99/25420?fr=aladdin" shape = "rect" coords = "19, 30, 93, 106" target = "_blank"> <area href = "https://baike.baidu.com/item/%E9%9D%92/6923#viewPageContent" shape = "rect" coords = "122, 31, 197, 106" target = "_blank"> </map> <br/> </body> </html>
css
.shuxing2 { color:purple; } h3 { text-align:center; }
js
var p = prompt("password?", ""); while(p !== "5265") { p = prompt("password?", ""); } if(p == "5265") { alert("Welcome!"); document.write("<h1>"+"Welcome!"+"</h1>"); }