Without saying anything, picture above

I’m sure I can’t cover it. I just had this idea recently. Let’s see if I can sort it out.

Much of it is guesswork, so take the humbler part. Then lead you to see how ferocious the bull man is!!

Don’t say with old husband what language say what technology, say what computer theory, old husband do things that are original are invented alone!!

What did I do in the early days

Who am I?

I’m the great Tim Berners-Deng. I work at CERN. Where is this? European Organization for Nuclear Research.

What am I going to do?

I didn’t know at first, but I was working there and I was working there and I figured out that you could combine hypertext systems with the Internet, and what did you do? It’s a combination of hypertext, TRANSMISSION control Protocol, and domain name system.

Why did I find myself doing this?

Oh, is it for those people who are not worthy? So how can we share the documents? That’s a problem!

What should I prepare first?

  1. You know, I know this thing called hypertext, but people write all this stuff themselves, right? Also did not have a standard what, er 😂, this group of not worry about the person! No, I can’t do anything, so GOd-DD invented HTML(Hypertext Markuguage), which you guys will use to write your documents (a Markdown immediacy) for the rest of your lives. But a little low is the elder brother this is the 1.0 mark is not much to make do with it.
  2. I have another thing to do, which is to display the HTML written by these guys? So, in a fit of genius, DD wrote software to read the HTML I had invented (I was actually writing an HTML reader 😎).
  3. Whoops, what else am I forgetting? I write an HTML reader, and then the HTML asks how do I send it? Brother to but hypertext system, can jump to view at will oh! Yeah, sure, DD will write some server-side software for these guys that will allow them to retrieve HTML documents from the server, using another URI I invented. Bad, how can you get an HTML document transfer protocol? Well, tact as I this also cannot little, oh, the DD I made a transport protocol in Colombia, with its the HTTP (HyperTextTransportProtocol). Oh, that’s totally ok!

So I can give it to them, and mom won’t have to worry about them reading their files anymore. (Because it’s not easy to find and share)

Let me take you to my first website, yes website, I manage the domain I published, info.cern.ch/. Oh, and I named my HTML reader WorldWideWeb, but later renamed it Nexus, so I’ll show you the source code again, thank you.

I made a great decision

I gave away everything I invented for free. Give me a thumbs up! Hats off to Tim Berners-Lee. (Providing jobs is not necessarily great, but creating jobs is always great – don’t argue with me)

That’s what I did in the early days

Ah, innovative, don’t ask me why I have these ideas, in a word, I am good.

Let’s start with how I do HTML reading.

In fact, if you look at my 1.0 specification, you will see that there are not many tags in it, they are the basic common tags, such as A, Plaintext,title, UL/LI, H2, etc. If I’m going to make a specification, I’m going to make my reader say it’s a specification. Let’s go. Skia (blink uses the gui2D library) function name as an example (like drawing on canvas).

  • That elder brother this reader has to use GUI programming, but elder brother is the most vexed is this… Well, I’ve decided, I’m going to put all my labels in a box with a fixed length and width, just like Lego. It’s… severe

  • Next is how I get the HTML document. I initiate a TCP connection with the background server according to THE HTTP protocol, and then send the HTTP content to the background, and the background sends the HTML back to me. I parse and iterate over each HTML tag to generate a tag tree, and then traverse the tag tree in my browser according to step 1. Draw the entire HTML. Ok.

All right, I’m on the server side

Uh, need I say more? Well, my browser sends me a TCP connection using my HTTP protocol and I have to parse it, see what HTML is requested, find it in the file system and go back.

You’re done

Well, my browser and background services are complete and ready for those guys to use. Who will write the HTML file? Their document will be written by them, with markup syntax. What disliking my mark syntax is too simple want more function, ha ha, elder brother have no time.

The next elder brother invention and creation shining course ah!!

The first widely available Web browser using a GUI was Erwise

Next came the Mosaic browser, followed by Netscape

I can say more about that

  1. This guy didn’t have enough HTML tags and added a few
  2. He also thinks that I design HTTP is no protocol, and also came a cookie
  3. More even he also came to a JS, put in the browser, convenient and user interaction (MMT, brother just want to let you share the document ah !!!! , nonsense, documents can also be interactive documents!
  4. Well, he didn’t like my protocol for confidentiality, so he added SSL

    Internet Explorer (shameless hooligan of browser, obviously, I can’t help it)

    Opera, Safari, Firefox, Chrome, etc.

    How has the Web changed our lives

So so fierce Netscape, eat melon masses now why all can’t see? Please refer to theBrowser wars, I feel bad

Ha ha, I am I

Given that there are so many browsers, they all have their own arbitrary HTML tags, and the tag styles can be implemented differently. So I spearheaded the creation of the W3C-World Wide Web Consortium to come up with standards, and you all have to do what I say, ok? For example, the HTML standard, if I say what the tags are, what the functions are, what the interactions are, what does it look like? You can take this! (Of course this is not true, I have to consider the implementation of the major browser vendors and the needs of front-line developers.)

Hey, there will be a crowd at this time, we often see CSS? Js, cookie is Netscape, what about CSS?

Ashamed of ah, they these turtle sun all dislike the style that I design not good-looking, I want to say, see a document to want what style, want what style? If you don’t give it to me, I’m going to have to set the width myself, and I’m going to have to do it myself, MMT. Why is this not easy to maintain? Separation of structure from style? Why don’t you go to heaven? Documents to maintain? MMT. (Obviously we doctor Li are definitely not like me, we are definitely open and tolerant…)

And then someone stepped upGo on, melon eaters

You don’t have to tell me this thing is still working.

The history of the Web has come about step by step. To sum up: I think the core idea of the Web still lies in Dr. Li’s initial idea, sharing and openness! Not now some goose or other what always screen what! If he has the ability to shield and does it, it means that he has begun to walk on the path of disobedience. The farther he goes, the narrower our world really becomes.

Ps: Here are some summaries of CSS that came with building the first version of my browser. When I started thinking about the implementation of my browser I started to see some problems like how do elements count widths, how do they position, how do they lay out? It makes sense to discover the existence of these properties in federated CSS.

I’d like to pick up a few things about CSS from my crude browser implementation above

Layout, what is layout, I think the overall frame of the page

Our 1.0 version didn’t support anything, and there’s really nothing in CSS that is specifically for layout right now except the Grid and Flexbox, which are great for layout, but if you have browser compatibility issues, you’re going to get screwed. So how does Flexbox work in our version? I don’t know, have to look at flexbox spec 😇, so what did we use for layout before? Is to use positioning to do layout work.


When we looked at my 1.0 version we didn’t have positioning support which meant that the tags were all lined up one by one, so obviously the need to move a little bit left and a little bit right wasn’t going to work. So how do we locate? According to the specification is to use the flow algorithm. Normal flow, float flow and Absolutely flow. As for the specific have to gnaw norms here someone summed up, very good, obviously if we follow this algorithm, our 1.0 also line !!!!

  • Insert a floating problem, add I want my 1.0 implementation text to be laid out around elements how do I do that? Thinking about it, I realized that it would be best to separate him from the normal positioning. I could give him a special tag, like float: Left, so I know it wants text around it, so I put the text behind it around it, and it doesn’t participate in the calculation of other elements, but it still occupies the position of the parent element, but it doesn’t participate in the calculation of other attributes like height, etc. Obviously my idea is very childish, in fact, can refer to the specification to realize the algorithm is how!! See Xinxu Zhang on float


Typography here refers to typesetting of text, such as line spacing and line height, which we didn’t allow you to set in version 1.0 because we didn’t parse them. Well, that’s easy to implement, just add all of these properties to the drawText, but should we just give the trip spacing property? Obviously not in CSS right now. It’s calculated from the line-height, vertical-align value. So baseline all text typesetting should have a vertical comparison ah, people vertical alignment with who ah. Wait, wait, wait. It’s all here

Cascade and inheritance

We didn’t have styles that you could adjust in the first version, but with CSS it’s different, you have styles that the HTML author wrote, you have styles that my browser customized, you have styles that CSS, so what do you do with all these styles, and then you have the concept of cascading and weights. My browser can use these to decide which style to use. And I want all of my fonts to be 12px so, I can’t set every tag. My browser can implement a concept of inheritance. I read the font size of the top layer and I set all of its children to inherit it.

The cartridge model

Our 1.0 implementation didn’t take any of this into account. We fixed width, size, etc. But we can also see from this that all of our elements end up having a size. In our version, we actually put all of our elements into the same box. CSS is also a box model, which feels very similar to our idea of putting all the elements into a box so that they are rectangular, and the layout is easy to implement! It’s just that the CSS box is a bit more complicated than ours. It also has margin,padding,border, etc. But at the very least, I think my argument for why it’s a box is pretty compelling, easy to implement, easy to understand.

Block-level elements and inline elements

Why these differences? In our 1.0, it was all block level. No, in our 1.0, there was no way to put two plaintext tags on one line. How embarrassing, I wrote two plaintext tags, one saying ‘I’ and the other saying ‘you’, f** K and f** K. So you have the left and right of the inline elements. There are some tags we don’t want to wrap…

Nesting of block-level elements and inline elements

Inline elements should not be nested within block-level elements that do not match semantics and are not handled uniformly by browsers. Try not to. But block-level elements can be nested inline and block-level elements, and the point here is that if a block-level element has a block-level source, it’s either an IFC, which obviously means it’s either full of block-level elements or it’s full of inline elements, but we can mix both, right? Why is that? The W3C specification regenerates an anonymous block-level element for the inline element. In fact, it is possible to think about it, for example, let our 1.0 version to implement, obviously is also according to the specification to go relatively simple, when we parse the block level element then his internal layout only two ways.

Landing and IFC

Since we had a block-level and inline, obviously, our version 1.0 if you want to achieve them, that means we see different tags should adopt different ways of drawing, because our block-level elements to wrap, line not line, then we will adopt different ways of rendering of different elements, so there will be a landing and IFC, But the fact is that not all block-level elements trigger BFC. There are certain conditions that must be met. In my opinion, we have not only BFC and IFC rendering methods, but also one of the default block-level elements.

Values and units

In our 1.0, obviously I defined it myself, but if WE use CSS, how do we convert the units of CSS? Should we draw 1px for his 1px? It seems to be true on the PC, but not on the mobile. Speaking of units, what is the width of the canvas set for our browser? Whether it’s the same width as the device or larger, I have too much practice to say. We actually have the terminology viewport here. Obviously we had to take this into account with the 1.0 update, and there were more units than px, REM, EM,pt, etc. What did we have to take into account when implementing it? I was fooled. Let’s see!


  1. css wiki
  2. html wiki
  3. Browser wars
  4. http wiki
  5. netscape