HTML、CSS、JavaScript

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[
&#91;&#42;&#93;: 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.  
&#91;&#42;&#93;: 这篇幻灯片许多内容摘引自[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>
```

---

### 标签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>
```

<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>
```

<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'>&lt;style&gt;</span> element in the <head> section

- **External** - by using a <span style='color:#ff0066'>&lt;link&gt;</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'>&lt;h1&gt;</span> element to blue, and the text color of the <span style='color:#ff0066'>&lt;p&gt;</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'>&lt;head&gt;</span> section of an HTML page, within a <span style='color:#ff0066'>&lt;style&gt;</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'>&lt;head&gt;</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 &lt;script&gt; Tag

The HTML <span style='color:#ff0066'>&lt;script&gt;</span> tag is used to define a client-side script (JavaScript).

The <span style='color:#ff0066'>&lt;script&gt;</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>

</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 &lt;head&gt; or &lt;body&gt;**

You can place any number of scripts in an HTML document.

Scripts can be placed in the <span style='color:#ff0066'>&lt;body&gt;</span>, or in the <span style='color:#ff0066'>&lt;head&gt;</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>

<p>(myFunction is stored in an external file called "myScript.js")</p>

</body>
</html>
```
]

.pull-right[
<iframe height=350 width='100%' srcdoc='<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<p>(myFunction is stored in an external file called "myScript.js")</p>

</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)