fffff

docs/document/HTML & CSS/docs/1. Web Development Fundamentals/CSS/1. Style target.md

@@ -0,0 +1,167 @@
+# Style Selector
+
+## Class selector
+
+Use `.` to select a element with class.
+
+Synopsis: `[<parent_pattern>].<class_name>{}`
+
+```css
+.class_name {
+
+}
+/* matches to all paragraph with the class */
+p.class_name {
+
+}
+```
+
+> [!WARNING]
+> Space matters in selector.
+> See: [Recusive child selector](#Recusive-child-selector) 
+
+```css
+/* matches recursive children with class `foo` after a paragraph */
+p .foo {
+
+}
+/* matches paragraph with class `foo` */
+p.foo {
+
+}
+```
+
+## Attribute selector
+
+```css
+/* matches to all element have `href` attribute */
+[href] {
+  color: blue;
+}
+/* matches to all anchors have `href` attribute */
+a[href] {
+  color: blue;
+}
+```
+### Exact match
+
+```css
+/* matches all anchors have the exact value */
+a[href="foo.com"] {
+}
+```
+
+### Contains operator
+
+```css
+/* matches all anchors contains the value */
+a[href*="foo"] {
+  color: blue;
+}
+```
+
+### Starts-with operator
+
+```css
+/* matches all anchors starts with the value */
+a[href^="https"] {
+  color: blue;
+}
+```
+
+### Ends-with operator
+
+```css
+/* matches all anchors ends with the value */
+a[href$=".com"] {
+  color: blue;
+}
+```
+
+### Operator composition
+
+One can combine different patterns:
+
+```css
+[href$=".com"][href^="https"] {
+
+}
+```
+## Relational selector
+
+> [!TIP]
+> Use `*` to represent an all pattern
+
+### Recusive child selector
+
+Use a space to represent recursive child selection.
+
+Synopsis: `<parent_pattern> <child_pattern> {}`
+
+```css
+/* matches to all anchors of paragraph recursively */
+p a {
+
+}
+```
+
+### Direct child selector
+
+Use `>` to represent direct child selection.
+
+Synopsis: `<parent_pattern> > <child_pattern> {}`
+
+```css
+/* matches to all first level anchors under a  paragraph recursively */
+p > a {
+
+}
+```
+
+### Adjacent sibling selector
+
+Use `+` to represent a direct neighbor of certain pattern.
+
+Synopsis: `<parent_pattern> + <child_pattern> {}`
+
+```css
+/* matches a achor right after paragraph */
+p + a {
+
+}
+```
+
+```html
+<p>foo</p>
+<a></a> <!-- matched! --> <!-- [!code highlight]  -->
+<a></a> <!-- not matched --> <!-- [!code error]  -->
+```
+
+### General sibling selector
+
+Use `~` to represent a direct neighbor of certain pattern.
+
+Synopsis: `<parent_pattern> ~ <child_pattern> {}`
+
+```css
+/* matches all achors right after paragraph */
+p ~ a {
+
+}
+```
+
+```html
+<p>foo</p>
+<a></a> <!-- matched! --> <!-- [!code highlight]  -->
+<a></a> <!-- matched! --> <!-- [!code highlight]  -->
+```
+
+## Pseudo class
+
+Pseudo classes are some built in pattern from css for selecting in some trivial scenarios.
+Pseudo classes starts with `:`, can be used as a single pattern too just like `.`
+
+### First/Last child
+
+- `:first-child`: selects first child of a parent, it's surely a **first** version of `>`
+- `:first-of-type`: selects first children of a parent having the distinct tag name.

docs/document/HTML & CSS/docs/1. Web Development Fundamentals/HTML/Common Elements.md

@@ -0,0 +1,138 @@
+#
+
+## Anchor(Hyperlink)
+
+- Normal hyperlink
+    - `<a href="https://www.foo.com"></a>{:html}`
+- Downloadable hyperlink
+    - `<a href="https://www.foo.com/bar.jpg" download></a>{:html}`
+    - `<a href="https://www.foo.com/bar/" download></a>{:html}`
+
+> [!IMPORTANT]
+> Must specify a protocol for external links.
+
+- Jump to section
+    - `<a href="#<element_id>">foo</a>{:html}`
+    - `<a href="#">foo</a>{:html}`: jump to top
+
+- Email
+    - `<a href="emailto:[email protected]">Email Me!</a>{:html}`
+
+## Video & Audio
+
+- Auto play video
+    - `<video autoplay src="./foo.mp4"></video>{:html}`
+- With controls
+    - `<video controls src="./foo.mp4"></video>{:html}`
+- Looping play
+    - `<video loop src="./foo.mp4"></video>{:html}`
+- Providing message if client doesn't support `<video>`
+    - `<video src="./foo.mp4">Video not supported in your broswer</video>{:html}`
+
+> [!NOTE]
+> Same for `<audio>`
+
+## List & Table
+
+List and Table are groups of related elements commonly used together.
+
+### List elements
+    - `<ul>`: unordered list
+    - `<ol>`: ordered list
+    - `<li>`: list item
+    - `<dl>`: description list
+        - `<dt>`: description term
+        - `<dd>`: description detail
+
+`<li>` in `<ol>` is ordered, while in `<ul>` is not.
+
+```html
+<body>
+  <ul>
+    <li>foo</li> <!-- [!code highlight]  -->
+    <li>bar</li> <!-- [!code highlight]  -->
+    <li>
+      <ol>
+        <li>1</li> <!-- [!code highlight]  -->
+        <li>2</li> <!-- [!code highlight]  -->
+        <li>3</li> <!-- [!code highlight]  -->
+      </ol>
+    </li>
+  </ul>
+</body>
+```
+
+`<dl>` is kind a list of pair of content to be described and the description content.
+
+```html
+<body>
+  <dl>
+    <dt>foo</dt>
+    <dd>I am foo</dd>
+    <!-- like a pair -->
+    <dt>bar</dt>
+    <dd>I am bar</dd>
+  </dl>
+</body>
+```
+
+### Table
+
+- `<table>`
+    - `<th>`: table header
+    - `<tr>`: table row
+        - `<td>`: table data
+        - other `<td>`...
+    - `<thead>`: head of table, just for grouping
+    - `<tbody>`: data body of table, just for grouping
+    - `<tfoot>`: table footer, can be used for data aggregation like sum of the values
+
+```html
+<table>
+    <thead>
+      <tr>
+        <th>name</th>
+        <th>age</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>John</td>
+        <td>18</td>
+      </tr>
+      <tr>
+        <td>Jane</td>
+        <td>18</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th>Row Count</th>
+        <th>2</th>
+      </tr>
+    </tfoot>
+</table>
+```
+
+Should be equivalent to(besides the style):
+| name | age |
+| -------------- | --------------- |
+| John | 18 |
+| Jane | 18 |
+|Row Count|2|
+
+## Container elements
+
+### Div
+
+### Span
+
+### Article & Figure
+
+- `<article>`
+    - `<figure>`: a wrapper for image
+        - `<img>`: image contained
+        - `<figcaption>`: description for the image
+    - `<p>`: just for normal paragraph
+        - `<mark>`: mark the content with light yellow background by default
+        - `<time>`: mark a time, useful for SEO

docs/document/HTML & CSS/docs/1. Web Development Fundamentals/HTML/HTML Basics.md

@@ -39,6 +39,8 @@ Since HTML5 we got a more concise syntax.
 
 ## Structure of html
 
+A common structure of html:
+
 - `<!DOCTYPE ..>`
 - `<html>`
     - `<head>`
@@ -49,4 +51,48 @@ Since HTML5 we got a more concise syntax.
         - `<style>`: internal css
         - `<script>`: links to or contains JavaScript code.
     - `<body>`: the actually page
-        - other elements...
+        - `<header>`
+             - `<nav>`: navigation
+        - `<main>`: main page in the middle, shoule be unique
+            - `<section>`: different sections in main page
+        - `<aside>`: can be a sidebar like toc in left or right
+        - `<footer>` 
+
+> [!IMPORTANT]
+> It's just an example! It can be any form.
+
+## Metadata
+
+`<meta>` is used for defining a many metadata of the html page.
+`name` attribute as the key, `content` attribute is the value for the metadata.
+
+- `viewport`: visible area
+
+```html
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- [!code highlight]  -->
+  <title>I am foo</title>
+</head>
+</html>
+```
+
+- `keywords`: simply for SEO, not really useful in these days.
+
+`<meta name="keywords" content="typescript, tutorial">{:html}`
+
+- `desc`: description for the page, should be shown in search results.
+
+`<meta name="desc" content="a tutorial website">{:html}`
+
+## HTML entities
+
+A escaping for characters.
+
+`&nbsp;{:html}` for example.
+
+> [!TIP]
+> [Full list of HTML entities](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)