前端基础知识之HTML

[1: What does a doctype do?]

1: doctype是html文件的第一行代码,意味着它的前面有注释都不行。所以要要写在<html>标签前面,而且它不属于html标签。
2: doctype的作用是告诉浏览器以哪种模式去渲染当前的这个html文件
3: doctype可能的取值有哪些?目前来说总共有8种:
    1: HTML5
        <!doctype html>
    2: HTML 4.01 Scrict
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    3: HTML 4.01 Transitional
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    4: HTML 4.01 Frameset
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    5: XHTML 1.0 Strict
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    6: XHTML 1.0 Transitional
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    7: XHTML 1.0 Frameset
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    8: XHTML 1.1
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

那么以上不用的doctype之间的差别有哪些呢?我总结了一张表:
前端基础知识之HTML

[2: What's the difference between full standards mode, almost standards mode and quirks mode?]

1: 三者的差别

1: full standards mode

HTML和CSS的行为完全(几乎是完全)按照W3C制定的标准。

2: quirks mode

HTML和CSS的行为不按照W3C的标准,就跟在Netscape Navigator 4和Internet Explorer 5一样

3: almost standards mode

HTML和CSS的行为几乎按照W3C制定的标准,但是有极少部分的行为与quirks mode一样

2: 三种模式产生的历史原因

在W3C标准制定之前,就已经有很多网站跑在Netscape Navigator 和Internet Explorer上了,如果浏览器都按照W3C的标准去实现的话,以前的那些网站就会坏掉。为了兼容以前的网站,所以产生了quirks mode,浏览器会按照W3C标准以前的简析方式去工作。

3: 浏览器怎么知道按哪种模式去解析

浏览器根据doctype来确定处于哪种模式!引发不同模式的doctype在不同的浏览器下面会不一样。但是有一条相同的就是:没有doctype,在任何浏览器下面都会引发quirks模式。所以千万不要那样做,just don't!
不同的浏览器的不同模式引发的原因可以参考:
https://hsivonen.fi/doctype/#...

3: What's the difference between HTML and XHTML?
4: Are there any problems with serving pages as application/xhtml+xml?
5: How do you serve a page with content in multiple languages?
6: What kind of things must you be wary of when design or developing for multilingual sites?
7: What are data- attributes good for?
8: Consider HTML5 as an open web platform. What are the building blocks of HTML5?
9: Describe the difference between a cookie, sessionStorage and localStorage.
1: 先直观地感受一下三者的用法
1:cookie

//定义一个cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
//定义第二个cookie
document.cookie = "age=16; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
//获取cookie
document.cookie; //"username=John Doe; age=16"

cookie的定义和获取都是字符串,当定义了多个cookie的时候,document.cookie会把所有的cookie放在一个字符串里面返回,以分号分隔。

2: localStorage

//往localStorage里面创建第一个item
localStorage.setItem('name', 'rose');
//往localStorage里面创建第二个item
localStorage.setItem('age', 15);
//读取第一个item
localStorage.getItem('name'); //'rose'
//读取第二个item
localStorage.getItem(''age); //15

3: sessionStorage
//往sessionStorage里面创建第一个item

sessionStorage.setItem('name', 'rose');
//往localStorage里面创建第二个item
sessionStorage.setItem('age', 15);
//读取第一个item
sessionStorage.getItem('name'); //'rose'
//读取第二个item
sessionStorage.getItem(''age); //15

从以上可以看出,localStorage和sessionStorage的用法是一样的。但是他们在过期时间上有区别:

10: Describe the difference between <script>, <script async> and <script defer>.
11: Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
12: What is progressive rendering?
13: Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
14: Have you used different HTML templating languages before?

相关推荐