HTML
HTML (HyperText Markup Language) defines the meaning and structure of web content
CSS (Cascading Style Sheets) describe a web page's appearance/presentation
JS (Javascript) describe a web page's functionality/behavior
"HyperText" refers to links that connect web pages to one another
Some elements have no content and are called empty elements
the <title> element is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.
<a> — "a" being the short form for "anchor"
href — hypertext reference
if you want to include a quote within the quotes where both the quotes are of the same type(single quote or double quote), you'll have to use HTML entities for the quotes
No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code
The HTML head is the contents of the <head> element, the head's content is not displayed on the page. Instead, head's job is to contain metadata about the document
we need to respect semantics, and use the right element for the right job
HTML is parsed permissively because when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct. The web would probably not be as popular as it is today, if it had been more strict from the very beginning
HTML Markup Validatioin - Markup Validation Service
Elements like <img> and <video> are sometimes referred to as replaced elements. This is because the element's content and size are defined by an external resource (like an image or video file), not by the contents of the element itself.
you shouldn't alter the size of your images using HTML attributes, You should use an image editor to put your image at the correct size before putting it on your webpage
A figure doesn't have to be an image, A figure could be several images, a code snippet, audio, video, equations, a table, or something else
<figure>
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341">
<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
<video controls width="400" height="400"
loop muted
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
A document is usually a text file structured using a markup language — HTML is the most common markup language, but you will also come across other markup languages such as SVG or XML.
CSS
[Css rule]
Selector: {
Property:value; /* declaration*/
}
A property paired with a value is called a CSS declaration. CSS declarations are put within CSS Declaration Blocks. And finally, CSS declaration blocks are paired with selectors to produce CSS Rulesets (or CSS Rules).
When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:
- The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
- The browser displays the contents of the DOM
using the universal selector in large web pages can have a perceptible impact on performance: web pages display slower than expected, it is often used in combination with other selectors (see Combinators)
Selector(選擇器)
- Simple selector(簡單選擇器)
* 元素選擇器 p { color:red; }
* 類選擇器 .fruit { color:red; }
* ID選擇器 #artist { color:red; }
- Attribute selector(屬性選擇器)
* 存在和值 (全文匹配) 屬性選擇器: 嘗試匹配精確的屬性值
* 子串值 (局部匹配) 屬性選擇器: “僞正則選擇器”,並不是真正的正則表達式
- Pseudo selector(僞選擇器)
*僞類選擇器: when it is in a certain state.
a:hover
*僞元素選擇器: to select a certain part of an element.[href^=http]::after
- Combinators (組合符): relationships of elements
data-* 屬性被稱爲 數據屬性。它們提供了一種在HTML屬性中存儲自定義數據的方法，由此，這些數據可以輕鬆地被提取和使用.
The font-size refers to the height of each glyph.
The default base font-size given to web pages by web browsers before CSS styling is applied is 16 pixels.
The rem (root em) works in exactly the same way as the em, except that it will always equal the size of the default base font-size; inherited font sizes will have no effec.
What selectors win out in the cascade depends on three factors:
- Importance
- Specificity
- Source order
element selectors have low specificity. Class selectors have a higher specificity, so will win against element selectors. ID selectors have an even higher specificity, so will win against class selectors. A sure way to win against an ID selector is to use !Important
It makes sense for web developers' stylesheets to override user stylesheets, so the design can be kept as intended, but sometimes users have good reasons to override web developer styles, as mentioned above — this can be achieved by using !important in their rules.
Margins have a specific behavior called margin collapsing: When two boxes touch against one another, the distance between them is the value of the largest of the two touching margins, and not their sum.
Block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as normal flow, because without any other instruction, our boxes lay out as block or inline boxes.
The type of box applied to an element is specified by the display property. There are many different values available for display
CSS Validator: http://jigsaw.w3.org/css-validator/
Everything in normal flow has a value of display, used as the default way that elements they are set on behave
JS
In the external case, we did not need to use the DOMContentLoaded event because the async attribute solved the problem for us. We didn't use the async solution for the internal JavaScript example because async only works for external scripts
There are actually two ways we can bypass the problem of the blocking script — async and defer
- If your scripts don't need to wait for parsing and can run independently without dependencies, then use async.
- If your scripts need to wait for parsing and depend on other scripts load them using defer and put their corresponding <script> elements in the order you want the browser to execute them.