Day 2 Full stack 2021-05-16

1 Web架构

CDN stands for “Content Delivery Network” and the technology provides a way of serving assets such as static HTML, CSS, Javascript, and images over the web much faster than serving them from a single origin server. It works by distributing the content across many “edge” servers around the world.
https://medium.com/videoblocks-engineering/web-architecture-101-a3224e126947

2 html 运行过程

HTML的结构包括头部（head），主体（body）两部分，其中头部描述浏览器所需的信息，而主体部分则包含所要说明的具体内容。

https://www.jianshu.com/p/8398221d79ed

3 Html Inline vs block element

A block-level element always starts on a new line.A block-level element always takes up the full width available (stretches out to the left and right as far as it can).A block level element has a top and a bottom margin, whereas an inline element does not.

An inline element does not start on a new line.An inline element only takes up as much width as necessary.

https://www.w3schools.com/html/html_blocks.asp

4 Html 语义元素（ semantic element ）

A semantic element clearly describes its meaning to both the browser and the developer.Examples of non-semantic elements: 

 and  - Tells nothing about its content.Examples of semantic elements: 

, , and 

 - Clearly defines its content.

https://www.w3schools.com/html/html5_semantic_elements.asp

4 HTML Accessibility

Always write HTML code with accessibility in mind!Provide the user a good way to navigate and interact with your site. Make your HTML code as semantic as possible.

如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。更便于SEO优化 — 比起使用非语义化的

标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。

https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/HTML

https://www.w3schools.com/html/html_accessibility.asp

5 HTML 注释

   用于在 HTML 插入注释。

HTML 的跨浏览器兼容问题（Cross Browser Compatible）

6 在 HTML 中插入 CSS 的方式，为什么不推荐 inline style

三种：

Inline styles — Using the style attribute in the HTML start tag.

Embedded styles — Using the