CS50X WEEK8 HTML,CSS,Javascript

In conclusion,用html实现网页架构，css实现网页美化，js实现动态更新网页以及交互界面

宏观架构

Routers(路由器/服务器)

You can imagine how data could take multiple paths from point A and point B, such that when a router is congested(busy), data can flow through another path. Packets of data are transferred from one router to another, from one computer to another.
TCP/IP are two protocols(协议) that allow computers to transfer data between them over the internet.
- IP目前使用最多的版本是IPv4，地址的格式是 #.#.#.#，每段取值 0–255，用来在网络中标识设备在网络中的位置，但它并不是设备的永久唯一身份，因为 IP 会变化（例如路由器重启、运营商动态分配）、会被多个设备共享（NAT）、也会在不同局域网中重复出现，因此不能作为稳定的身份标识。但它在一定程度上可以标识当下IP身份
- In the real world, servers(服务器) do a lot of work for us.
- (Under TCP protocols)Packets are structured as follows:
- TCP, or transmission control protocol, helps keep track of the sequence of packets being sent.
- Further, TCP is used to distinguish web services from one another. For example, 80 is used to denote HTTP and 443 is used to denote HTTPS. These numbers are port(端口/接口) numbers.
- When information is sent from one location to another, a source IP address, a destination IP address, and a TCP port number are sent.
- These protocols are also used to fragment(切分) large files into multiple parts or packets. When a packet is lost, TCP/IP can request missing packets again from the origin server.
- TCP will acknowledge when all the data has been transmitted and received.

DNS

DNS, or domain name systems, is a collection of servers on the internet that are used to route website addresses like harvard.edu(域名) to a specific IP address.

domine name <-> DNS <-> IP
1. 如果在browser上之前查过并保存记录，那么就自动链接IP而跳过DNS
2. 如果没有，查询DNS，越热门越可能这台DNS上储存过，如果DNS上没有，跳到下一台DNS继续查询。
3. 买域名实际上就是买DNS里的映射记录。

DHCP

DHCP is a protocol that ascertains(确定) the IP address of your device.
分配主机一个IP，默认DNS，默认路由

HTTPS

HTTP = hypertext transfer protocol, HTTPS is a secure version of this protocol.
When you see an address such as https://www.example.com you are actually implicitly visiting that address with a / at the end of it.就是说默认进入这个链接的默认页
The path is what exists after that slash(斜杠). For example, https://www.example.com/folder/file.html visits example.com and browses to the folder directory, and then visits the file named file.html.
The .com is called a top-level domain that is used to denote(表示) the location or type of organization associated with this address:
- .com 商业 .edu .gov 政府
- 两个字的顶级域名都是国家缩写，只是有的国家出售了自己的域名使用权
https in this address is the protocol that is used to connect to that web address. By protocol, we mean that HTTP utilizes GET or POST requests to ask for information from a server. When you open the developer tools(右键inspect/检查进入开发者工具) and visit Network, selecting Preserve log, you will see Request Headers. You’ll see mentions of GET:
You can analyze the work of HTTP protocols at . For example, type the following in your terminal window:
```
curl -I https://www.harvard.edu/
// connect URL
```
Notice that the output of this command returns all the header values of the responses of the server.
Further, execute the following command in your terminal window:
```
curl -I http://www.harvard.edu/
```
he server response will show that the response is 301, meaning that the website has permanently moved.(永久重定向)

There are numerous other response codes, such as:

200 OK
301 Moved Permanently
302 Found
304 Not Modified
307 Temporary Redirect
401 Unauthorized
403 Forbidden
404 Not Found
418 I'm a Teapot
500 Internal Server Error
503 Service Unavailable

It’s worth mentioning that 500 errors are always your fault as the developer when they concern a product or application of your creation.

HTML

基本语法

HTML or hypertext markup language is made up of tags, each of which may have some attributes(属性) that describe it.

check hello0.html in src8 now!

<!DOCTYPE html>

<!-- Demonstrates HTML -->
<!-- lang 是language -->

<html lang="en"> 
    <head>
        <title>hello, title</title>
    </head>
    <body>
        hello, body
    </body>
</html>

Indentation(缩进) is not required but does suggest a hierarchy(层次).

You can serve your code by typing http-server. This served content is now available on a very long URL. If you click it, you can visit the website generated by your own code.
When you visit this URL, notice that the file name hello.html appears at the end of this URL. Further, notice, based upon the URL, that the server is serving via port 8080.
The hierarchy of tags can be represented as follows:
use <p> paragraph tags to open and </p>close a paragraph.
<h1>,<h2>,<h3>标题设定

    <ul>
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>

    <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
    </ol>

可用于创建无序清单或有序清单

创建table：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>*</td>
        <td>0</td>
        <td>#</td>
    </tr>
</table>

<tr> for table row <td> for table data

使用照片，src="bridge.png" indicates the path where the image file can be located.而如果没有加载出来，就会发出alt中的消息
```
<img alt="photo of bridge" src="bridge.png">
```
video, the type attribute designates(指定) that this is a video of type mp4. Further, notice how controls and muted are passed to video.(p.s. 我被rickroll了)
```
<video controls muted>
    <source src="video.mp4" type="video/mp4">
</video>
```
可以链接其他网页,the <a> or anchor(锚) tag is used to make Harvard a linkable text. href（hypertext reference）是“链接的目标地址”,是<a>标签中最核心的属性
```
Visit <a href="https://www.harvard.edu">Harvard</a>.
```

获取输入：属性action使得最后我们把数据在google上查询，a form tag opens and provides the attribute of what action it will take. The input field is included, passing the name q and the type as search.

<form action="https://www.google.com/search" method="get">
    <input name="q" type="search">
    <input type="submit" value="Google Search">
</form>

or
<form action="https://www.google.com/search" method="get">
    <input autocomplete="off" autofocus name="q" placeholder="Query" type="search">
    <button>Google Search</button>
</form>
// autofocus是光标自动聚焦，一个页面只能设置一次

HTML更多地需要自己的查询与学习，菜鸟教程，启动！！

Regular Expressions 正则表达式

Regular expressions or regexes 可以用于确认对方输入是否符合某种特定格式
```
<input autocomplete="off" autofocus name="email" placeholder="Email" type="email">
    <button>Register</button>
```
email type是在官网文档中储存的一种格式，会自动检查输入符不符合Email格式，当然也可以用pattern attribute 去自己实现：
```
<input autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email">
    <button>Register</button>
```
.表示任意字符,+表示多个xx(前面跟的.所以就是多个任意字符) \. 是为了转义考虑，！for more

CSS

CSS, or cascading style sheet 是一种标记语言，助力网页格式美化，CSS is filled with properties(其实还是属性), which include key-value pairs.
在home0.html中，style attributes are provided to the <p> tags.font-size设置段落字体大小，text-align设置文字对齐方式
而为了减少重复性，可以在body tag处提前设计全体的对齐属性为中心对齐，见home3.html:Notice that <div> tags are used to divide up this HTML file into specific regions.
semantic tags(语法标签)：可以使用header直接表示标题，footer就表示尾部，main表中间，三者有不同的初始风格.
注意的是，程序语言混用在同一个文件里并不是好事，所以要开始考虑一点一点脱离，可把这些移到head里，见home6.html,Notice all the style tags are placed up in the head in the style tag wrapper. Also, notice that we’ve assigned classes, called centered, large, medium, and small to our elements, and that we select those classes by
- 再锐利一点，直接把css文件单独做出来，见home7.html和home7.css，这个习惯在javascript中也应保留

Frameworks

third-party libraries called frameworks that we can utilize with our HTML files.就是别人写好了可以直接用的模板。

Bootstrap is one of these frameworks that we can use to beautify our HTML and easily perfect design elements.It can be utilized by adding the following link tag in the head of your html file:
```
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>bootstrap</title>
</head>
```
此处可拿phonebook0和phonebook1做对比，里面的语法可能得看官方文档，因为我不是很懂，我不懂，但是看到复刻了google还是很震撼，我觉得大概率我需要用到这个——在我的final project里。learn more.

JavaScript

恭喜，我们再次回到了程序语言的环节，JavaScript用于实现页面的互动性 - 接下来看到hello1.html，结合AI我们来分析一下，这段代码的 <form> 使用 onsubmit 属性，在用户点击提交按钮时执行 greet() 函数，并通过 return false 阻止表单真正提交。顶部 <script> 中定义的 greet() 会读取文本框中 id 为 name 的输入值（通过 document.querySelector('#name').value），然后用 alert() 弹出 “hello, 用户输入的名字”。换句话说，这段代码演示了如何在表单提交时触发 JavaScript，并从输入框中获取用户输入。 - onsubmit可以使表单被填交时先执行一个后面指定的脚本，return flase可以阻止表单真正提交，否则页面就会刷新，在确认页面显示的东西后页面就会重载 - document.querySelector(selector) 会返回页面中第一个符合 CSS 选择器的元素，这是一种DOM查询方案，而DOM 是浏览器把网页结构表示成的对象树，JavaScript 可以通过它来操作页面。 - again,不要把不同语言混到一起，并且习俗上也认为onsubmit和JavaScript混一起也不好，可以改为hello3.html.这段代码使用 DOMContentLoaded(确保 JavaScript 在页面加载完成后再运行，避免脚本找不到元素。把DOM拎出来后后面的字面就是内容加载完毕) 来确保 整个 HTML 页面加载完成后 再执行 JavaScript。等页面准备好后，脚本会给 <form> 添加一个 submit 事件监听器。当用户提交表单时，这个监听器会运行：读取 id 为 name 的输入框内容，并用 alert() 弹出 “hello, xxx”。同时，e.preventDefault() 会阻止表单的默认提交行为，避免页面刷新。 - # 这个符号不是随便写的，它来自 CSS 选择器语法.#name 的 # 表示“选择 id 为 name 的元素”。 - e.g

<input id="name">
<input class="name">
<input>

对应的选择器： | 选择器 | 选到谁 | |--------|--------| | #name | id="name" 的那个 | | .name | class="name" 的那个 | | input | 第一个 <input> |

再次更新hello5.html,<p> 一开始是空的，但 JavaScript 用 innerHTML 动态修改了它的内容，所以页面上才会显示文字。DOM 是可变的，不是写死的。这下我们实现了动态调整，innerHTML的意思就是把标签内部内容替换成所提供的字符串，而为什么name是<p>的节点，是因为我们有一个let语句赋值把<p></p>元素存到变量name里
接下来看background.html这个实例工程，其中用了bottontag，这个只要看懂上面的文字，看懂这个并不难，注意相应条件改成了click
blink作为一个被删除的官方效果，可以看看，window.setInterval takes in two arguments: A function to be called and a waiting period (in milliseconds) between function calls.
最后一个是自动完成，我不是很懂，不写了。
Learn more on JavaScript documentation