1. The Internet
2. The Web
A GET request will start with:
GET / HTTP/1.1
Host: www.example.com
...
A response for a successful request will start with:
HTTP/1.1 200 OK
Content-Type: text/html
...
可以通过浏览器查看每一个获得的文件的请求和回复。
为什么输入Domain后，浏览器会自动在前面加上www，是因为会接收到301的Reply，浏览器会自动识别，然后重新发送新的请求：
ubuntu@c-test-node:~/C$ curl -I -X GET http://harvard.edu
HTTP/1.1 301 Moved Permanently
Server: Varnish
Retry-After: 0
Location: https://harvard.edu/
Content-Length: 0
Accept-Ranges: bytes
Date: Wed, 31 Aug 2022 14:46:03 GMT
Via: 1.1 varnish
Connection: close
X-Served-By: cache-syd10135-SYD
X-Cache: HIT
X-Cache-Hits: 0
Strict-Transport-Security: max-age=300
Other **HTTP status codes** include:
418 I'm a Teapot: An April Fool’s joke years ago
500 Internal Server Error: Buggy code on a server might result in this status code, like segfaults we might have seen in C.
参数：http://domain/path?key1=value1&key2=value2
3. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
hello, title
</title>
</head>
<body>
hello, body
</body>
</html>
常见的Tag：
4. CSS
方式1：写在Tag里的style属性。
<main style="font-size: medium;">
Welcome to my home page!
</main>
方式2：写进head中的styleTag里。
<head>
<style>
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
</style>
</head>
方式3：写进CSS文件，然后导入。
<head>
<link href="MyCSS.css" rel="stylesheet">
</head>
CSS文件使用选择器来确定CSS的作用范围：
Class Selector: .ClassName（Tag中包含class="ClassName"）
ID Selector: #ID（Tag中包含id"ID"）
Attribute Selector: selector[key="value"]
The attribute selectors will affect tags with those attributes.
可以使用浏览器的Development Tool，选择HTML标签，可以找到对应的CSS选择器和CSS格式。被选择的标签会在网页中高亮显示。
可以直接在网页中右键选择Inspect，这样可以直接跳转到Development Tool中对应的标签。
可以直接在Development Tool修改CSS格式以及删减HTML标签，可以很方便地查看不同的CSS格式的呈现效果如何。
5. JavaScript
方式1：在head中的script标签中添加JavaScript代码。然后在需要使用的Tag中引用这个代码。
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function greet()
{
let name = document.querySelector('#name').value;
alert('hello, ' + name);
}
</script>
<title>hello</title>
</head>
<body>
<form onsubmit="greet(); return false;">
<input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>
方式2：在head中的script标签中添加JavaScript代码，直接在代码中指定这段代码的作用范围。
document.querySelector('form').addEventListener('submit', function(e) {
let name = document.querySelector('#name').value;
alert('hello, ' + name);
e.preventDefault(); // 阻止Event实际生效
});
例子1：切换颜色
<!DOCTYPE html>
<html lang="en">
<head>
<title>background</title>
</head>
<body>
<button id="red">R</button>
<button id="green">G</button>
<button id="blue">B</button>
<script>
let body = document.querySelector('body');
document.querySelector('#red').addEventListener('click', function()
{
body.style.backgroundColor = 'red';
});
document.querySelector('#green').addEventListener('click', function() {
body.style.backgroundColor = 'green';
});
document.querySelector('#blue').addEventListener('click', function() {
body.style.backgroundColor = 'blue';
});
</script>
</body>
</html>
例子2：Blink
<!DOCTYPE html>
<html lang="en">
<head>
<script>
// Toggles visibility of greeting
function blink()
{
let body = document.querySelector('body');
if (body.style.visibility == 'hidden')
{
body.style.visibility = 'visible';
}
else
{
body.style.visibility = 'hidden';
}
}
// Blink every 500ms
window.setInterval(blink, 500);
</script>
<title>blink</title>
</head>
<body>
hello, world
</body>
</html>
例子3：自动补全
<!DOCTYPE html>
<html lang="en">
<head>
<title>autocomplete</title>
</head>
<body>
<input autocomplete="off" autofocus placeholder="Query" type="text">
<ul></ul>
<script src="large.js"></script>
<script>
let input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
let html = '';
if (input.value) {
for (word of WORDS) {
if (word.startsWith(input.value)) {
html += `<li>${word}</li>`;
}
}
}
document.querySelector('ul').innerHTML = html;
});
</script>
</body>
</html>
例子4：获取坐标
<!DOCTYPE html>
<html lang="en">
<head>
<title>geolocation</title>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(function(position) {
document.write(position.coords.latitude + ", " + position.coords.longitude);
});
</script>
</body>
</html>