class: center, middle, inverse, title-slide # HTML、CSS、JavaScript ## 一课知网页 🌱 ### 吴燕丰 ### 江西财大,金融学院 ### 2020/10/30 --- ### HTML HTML: **H**yper**T**ext **M**arkup **L**anguage, 超文本标记语言 - HTML is the standard markup language for Web pages. - With HTML you can create your own Website. 中文教程网站: [https://www.runoob.com/html/html-tutorial.html](https://www.runoob.com/html/html-tutorial.html) 英文教程网站<sup>[*]</sup>: [https://www.w3schools.com/html/default.asp](https://www.w3schools.com/html/default.asp) .footnote[ [*]: Only if you can bypass [the Great Firewall of China](https://baike.baidu.com/item/great%20firewall). Recommended for those want to learn English as a tool. [*]: 这篇幻灯片许多内容摘引自[https://www.w3schools.com](https://www.w3schools.com) ] --- ### HTML + CSS + JavaScript Three **languages** all web developers **must** learn: 1. **HTML** to define the content of web pages 2. **CSS** to specify the layout of web pages: **C**ascading **S**tyle **S**heets, 层叠样式表 3. **JavaScript** to program the behavior of web pages: 一种高级的、解释型的编程语言 #### CSS - CSS is the language we use to style an HTML document. - CSS describes how HTML elements should be displayed. - [https://www.w3schools.com/css/default.asp](https://www.w3schools.com/css/default.asp) #### JavaScript - JavaScript is the programming language of the Web. - [https://www.w3schools.com/js/default.asp](https://www.w3schools.com/js/default.asp) --- ### 样例 .pull-left[ ```{} <!DOCTYPE html> <html> <head> <title> This is a title </title> </head> <body> <h1> This is heading 1 </h1> <p>Hello world!</p> </body> </html> ``` ] <br> .pull-right[ <iframe style="border:none;" height='270' width='90%' srcdoc="<!DOCTYPE html> <html> <head> <title>This is a title</title> <style> body {background-color: lightgray;} </style> </head> <body> <h1>This is heading 1</h1> <p>Hello world!</p> </body> </html> "> </iframe> ] --- ### 标签 HTML Tags - `<h1>` - `<h6`>:1至6级标题 - `<p>`:段落 - `<a>`:`<a href='url'>link text</a>`,超链接 + `<a href="http://www.yyschools.com/courses/">课件链接</a>`:<br> [课件链接](http://www.yyschools.com/courses/) - `<img>`:`<img src="img_chania.jpg" alt="Flowers in Chania">`,图片 - `<table>`:表 + `<tr>`:**t**able **r**ow,表格行 + `<td>`:**t**able **d**ata,表格数据,表格一个单元格 .pull-left[ ```{} <table> <tr> <td>11</td> <td>12</td> </tr> <tr> <td>21</td> <td>22</td> </tr> </table> ``` ] <br> .pull-right[ <iframe style="border:none;background-color: lightgray;" height='245' srcdoc="<table style='width:100%;border: 1px solid black;border-collapse: collapse;'> <tr style='border: 1px solid black;border-collapse: collapse;'> <td style='border: 1px solid black;border-collapse: collapse;'>11</td> <td style='border: 1px solid black;border-collapse: collapse;'>12</td> </tr> <tr> <td style='border: 1px solid black;border-collapse: collapse;'>21</td> <td style='border: 1px solid black;border-collapse: collapse;'>22</td> </tr> </table>"> ] --- ### 标签 HTML Tags - `<ul>`:**u**nordered **l**ist,未排序编号列表 + `<li>`:**l**ist **i**tem,列表条目 - `<ol>`:**o**rdered **l**ist,排序编号列表 + `<li>`:**l**ist **i**tem,列表条目 .pull-left[ ```{} <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <ol> <li>Item</li> <li>Item</li> <li>Item</li> </ol> ``` ] <br> .pull-right[ <ul style='background-color: lightgray;'> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <ol style='background-color: lightgray;'> <li>Item</li> <li>Item</li> <li>Item</li> </ol> ] --- ### 标签class属性 ```{} <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html> ``` <iframe width='100%' srcdoc='<!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html>'> </iframe> --- ### 标签class属性 ```{} <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: green; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html> ``` <iframe width='100%' srcdoc='<!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: green; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html>'> </iframe> --- ### 标签id属性 ```{} <!DOCTYPE html> <html> <head> <style> #note1 { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span id="note1">Important</span> Heading</h1> <p>This is some <span id="note2">important</span> text.</p> </body> </html> ``` <iframe width='100%' srcdoc='<!DOCTYPE html> <html> <head> <style> #note1 { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span id="note1">Important</span> Heading</h1> <p>This is some <span id="note2">important</span> text.</p> </body> </html>'> </iframe> --- ### 标签样式(styles)- CSS CSS can be added to HTML documents in 3 ways: - **Inline** - by using the <span style='color:#ff0066'>style</span> attribute inside HTML elements - **Internal** - by using a <span style='color:#ff0066'><style></span> element in the <head> section - **External** - by using a <span style='color:#ff0066'><link></span> element to link to an external CSS file --- ### Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the <span style='color:#ff0066'>style</span> attribute of an HTML element. The following example sets the text color of the <span style='color:#ff0066'><h1></span> element to blue, and the text color of the <span style='color:#ff0066'><p></span> element to red: .pull-left[ ```{} <h1 style="color:blue;"> A Blue Heading </h1> <p style="color:red;"> A red paragraph. </p> ``` ] <br> .pull-right[ <iframe height=180 width='100%' srcdoc='<h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p>'></iframe> ] --- ### Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <span style='color:#ff0066'><head></span> section of an HTML page, within a <span style='color:#ff0066'><style></span> element. .pull-left[ ```{} <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> ``` ] .pull-right[ <iframe height=380 width='100%' srcdoc=' <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> '></iframe> ] --- ### External CSS An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <span style='color:#ff0066'><head></span> section of each HTML page: .pull-left[ ```{} <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> ``` ] .pull-right[ <iframe height=380 width='100%' srcdoc=' <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> '></iframe> ] --- ### External CSS The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is what the "styles.css" file looks like: "styles.css": ```{} body { background-color: powderblue; } h1 { color: blue; } p { color: red; } ``` --- ### HTML JavaScript The HTML <script> Tag The HTML <span style='color:#ff0066'><script></span> tag is used to define a client-side script (JavaScript). The <span style='color:#ff0066'><script></span> element either contains script statements, or it points to an external script file through the src attribute. Example: ```{} <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> ``` --- ### HTML JavaScript .pull-left[ ```{} <!DOCTYPE html> <html> <body> <h2> Use JavaScript to Change Text </h2> <p> This example writes "Hello JavaScript!" into an HTML element with id="demo": </p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html> ``` ] .pull-right[ <iframe height=400 width='100%' srcdoc='<!DOCTYPE html> <html> <body> <h2>Use JavaScript to Change Text</h2> <p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html>'> </iframe> ] --- ### HTML JavaScript JavaScript can change styles: ```{} document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; ``` **JavaScript in <head> or <body>** You can place any number of scripts in an HTML document. Scripts can be placed in the <span style='color:#ff0066'><body></span>, or in the <span style='color:#ff0066'><head></span> section of an HTML page, or in both. --- ### External JavaScript Scripts can also be placed in external files: .pull-left[ ```{} <!DOCTYPE html> <html> <body> <h2>External JavaScript</h2> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">Try it</button> <p>(myFunction is stored in an external file called "myScript.js")</p> <script src="myScript.js"></script> </body> </html> ``` ] .pull-right[ <iframe height=350 width='100%' srcdoc='<!DOCTYPE html> <html> <body> <h2>External JavaScript</h2> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">Try it</button> <p>(myFunction is stored in an external file called "myScript.js")</p> <script src="myScript.js"></script> </body> </html>'> </iframe> ] --- ### External JavaScript ['myScript.js'](myScript.js): ```{} function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } ``` --- class: middle, center ### End! 搭建网站所需要的知识: - [HTML: https://www.runoob.com/html/html-tutorial.html](https://www.runoob.com/html/html-tutorial.html) - [CSS: https://www.runoob.com/css/css-tutorial.html](https://www.runoob.com/css/css-tutorial.html) - [JavaScript: https://www.runoob.com/js/js-tutorial.html](https://www.runoob.com/js/js-tutorial.html) - [Python](https://www.runoob.com/python3/python3-tutorial.html) - [Python CGI编程](https://www.runoob.com/python/python-cgi.html) --- ### More Words! **Full Stack Web Developer** A full stack web developer is a person who can develop both **client** and **server software**. In addition to mastering HTML and CSS, he/she also knows how to: - Program a **browser** (like using JavaScript, jQuery, Angular, or Vue) - Program a **server** (like using PHP, ASP, Python, or Node) - Program a **database** (like using SQL, SQLite, or MongoDB) 学习网站: - [MongoDB 教程](https://www.runoob.com/mongodb/mongodb-tutorial.html) - [MySQL 教程](https://www.runoob.com/mysql/mysql-tutorial.html) - [服务端脚本 指南](https://www.runoob.com/web/web-scripting.html) - [Web Development Roadmaps](https://www.w3schools.com/whatis/default.asp) - [ubuntu 下搭建开发LAMP环境](https://blog.csdn.net/huxiaotong_exp/article/details/54379395)