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.
4 Html 语义元素（ semantic element ）
A semantic element clearly describes its meaning to both the browser and the developer.Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.Examples of semantic elements: <form>, <table>, and <article> - 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优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
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 <style> element in the head section of a document. 只能用在head部分。
External style sheets — Using the <link> element, pointing to an external CSS file.
Using the inline styles are generally considered as a bad practice. As style rules are embedded directly inside the HTML tag, it causes the presentation to become mixed with the content of the document; which makes the code hard to maintain and negates the purpose of using CSS.
https://www.tutorialrepublic.com/css-tutorial/css-get-started.php
7 CSS box model
All HTML elements can be considered as boxes.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
https://www.w3schools.com/css/css_boxmodel.asp
8 . CSS 选择器的用法，伪类
CSS selectors are used to "find" (or select) the HTML elements you want to style.We can divide CSS selectors into five categories:Simple selectors (select elements based on name, id, class)Combinator selectors (select elements based on a specific relationship between them)Pseudo-class selectors (select elements based on a certain state)Pseudo-elements selectors (select and style a part of an element)Attribute selectors (select elements based on an attribute or attribute value)
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
9 display 和 visibility 的区别
visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！
10 BEM(Blocks, Elements and Modifiers) 介绍
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.
BEM makes your code scalable and reusable, thus increasing productivity and facilitating teamwork.
block：模块，名字单词间用 - 连接element：元素，模块的子元素，以 __ 与 block 连接modifier：修饰，模块的变体，定义特殊模块，以 -- 与 block 连接
主要是采取统一的规范，简单易懂，可以通用和维护。
https://jiandanxinli.github.io/2016-08-11.html
11 css position
position 属性的五个值：static relative fixed absolute sticky
static : HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
https://www.runoob.com/css/css-positioning.html
