前端编程基础（HTML,CSS,JavaScript）
2020-07-06
21:40:04
前段编程入门，今天刚学，整了一天还是那样，总结一下。
浏览器的加载过程：1，生成dom树。
2，加载资源，读取html，CSS，JavaScript文件。
3，执行CSS，进行渲染。
1，首先编程实现了HTML的最基本运行：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="mycss.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(document).ready(function () { $(".div1").append("<p>this is new line</p>"); $("body").append(" <div class=\"div1\">\n" + " 这是一个div\n" + " </div>"); }); </script> </head> <body> <p class="div1">hello html</p> <input type="text" placeholder="请输入用户名"> <div class="div1"> 这是一个div </div> <p>hello html</p> <div class="div2"> 这是一个div2 </div> </body> </html>
2，CSS为上面的HTML渲染:
div.div1{ width: 100px; height: 100px; background-color: aqua; line-height: 100px; }
3，结合HTML编程和JavaScript的应用：（最终成果）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 7 <script> 8 $(document).ready(function () { 9 console.log($("#info")[0].nodeName) 10 // console.log($("#info").text()) 11 // console.log($("#info").html()) 12 // console.log($(".teacher_info").html()) 13 // console.log($("#info").children().first().text()) 14 console.log($(".name").siblings().first().text()) 15 $(".name").addClass("bobby") 16 // 通过javascript修改dom树 17 console.log($(".name").attr("class")) 18 //通过控制台来获取name的class属性，一个class可以有好几个属性方便CSS操作 19 $(".age").attr("data","20") 20 //通过attr获取值和修改值， 21 }) 22 </script> 23 </head> 24 <body> 25 <div id="info"> 26 <p style="color: blue;">讲师信息</p> 27 <div class="teacher_info"> 28 python全栈工程师，3年工作经验，喜欢钻研python技术，对爬虫， 29 web开发以及机器学习有浓厚的兴趣，关注前沿技术以及发展趋势。 30 <p class="age">年龄：20</p> 31 <p class="name">姓名：Liam</p> 32 <p class="work_years">工作年限：3年</p> 33 <p class="position">工作职位：python开发工程师</p> 34 </div> 35 <p style="color: blueviolet">课程信息</p> 36 <table class="courses"> 37 <tr> 38 <th>课程名</th> 39 <th>讲师</th> 40 <th>地址</th> 41 </tr> 42 <tr> 43 <td>MySQL从删库到跑路</td> 44 <td>Liam</td> 45 <td><a href="https://coding.imooc.com/class/78.html">访问</a></td> 46 </tr> 47 <tr> 48 <td>python爬虫分布式项目</td> 49 <td>Liam</td> 50 <td><a href="https://coding.imooc.com/class/78.html">访问</a></td> 51 </tr> 52 <tr> 53 <td>C++从入门到精通</td> 54 <td>Liam</td> 55 <td><a href="https://coding.imooc.com/class/78.html">访问</a></td> 56 </tr> 57 <tr> 58 <td>PHP从放弃到坚持放弃</td> 59 <td>Liam</td> 60 <td><a href="https://coding.imooc.com/class/78.html">访问</a></td> 61 </tr> 62 <tr> 63 <td>Java_Web零基础入门</td> 64 <td>Liam</td> 65 <td><a href="https://coding.imooc.com/class/78.html">访问</a></td> 66 </tr> 67 </table> 68 </div> 69 </body> 70 </html>
总结：代码就是要多敲，多模仿，多犯错。
还有pycharm比sublime_text要好用的多。
^_^
