The teenstodolist

  • Project Deployment Learning: Light services
  • Team: 9 groups
  • Development tools: VSCode, JS Bin
  • The curriculum
  • Preview and review
  • Courses and courseware
  • notes

One idea: Implement the class schedule (as a case work on switching between dark and light modes)

HTML

Html5 is the latest HTML standard. Dream Linkage Day 3 “Web Standards and Front-end Development”

  1. Web technologies include HTML, HTTP, and URL.
  2. Web supported languages include HTML, CSS, JS, and a fourth Web language, WebAssembly/ WASM.

(Shocked, simple and easy to understand. Only I don’t know. This student is very advanced.)

Have an idea: generate a bullet screen/GIF (to express my love for teachers and students)

Wasm caught my eye. Wasm is designed to complement JS with native decoding speeds much faster than JS parsing, making it possible for high-powered Web apps to run in browsers. Very burning very blood very touched, let me very excited.

“Wasm further expands the use of Web technologies, making previously unimaginable applications possible. The web technology community will no longer be content with merely dabbling in conservative applications, but will finally be bold enough to embrace them as a formal selection solution, which will surely promote the exploration and development of corresponding industry scenarios. Look forward to seeing more wASM applications shine.”

“Wasm allows us to efficiently port more desktop software to the Web, while also optimizing computation-intensive modules on the Web using C/C++, Rust, and Go. As WASM matures, it will enable more applications to move from the desktop to the Web, which will enrich the already powerful Web.”

Major browsers

Chrome, Firefox, Opera, Safari, Edge

Commonly used tags

Inline elements, block-level elements, and inline block-level elements are important.

Display Display properties :inline, block, inline-block

  1. None is not shown
  2. Block display
    • Default exclusive row, height adaptive content height
    • Arrangement from top to bottom
    • You can change the size directly by width and height
  3. Inline display
    • The default size is content size
    • The arrangement goes from left to right
    • You can’t change the size directly by width and height
  4. Inline-block displays an inline block
    • The default size is content size
    • The arrangement goes from left to right
    • You can change the size directly by width and height
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="https://favicon.ico" type="image/x-icon"> <link rel="Bookmark" href="favicon.ico"> <title>display</title> <style type="text/ CSS "> div {/ background-color: tan; /* width:200px; */ /* padding: 50px; */ } img { background-color: grey; width:200px; /* padding: 50px; */ display: block; / / display: block; / / display: block; /* float: left */ background-color: thistle; width:200px /* padding: 50px; */ * display: none; */ } </style> </head> <body> <! -- display display attribute 1, none display not 2, block display block a, default exclusive line, A, the default size is the content size. B, the arrangement mode is left to right. C, the width and height cannot be changed directly A, the default size is content size B, the arrangement from left to right C, can be directly changed by width and height --> <! Div --> <div class=""> <p> DIV: I am block display. </p> </div> <! - the inline - block inline block elements (line replaceable element) : img - > < img SRC = "https://code.h5jun.com/images/dave.min.svg" Alt = "" > <! -- Inline elements: a --> <a href=" img.jpg"> A: I'm inline. </a> <span> I am an inline span element. </span> </body> </html>Copy the code

I have an idea: the teacher gave the legend as is. (The teacher’s courseware legend is also very vivid and easy to remember.)

I went to look at other students’ notes, which were very detailed and contained more labels than mine. Suddenly, I wondered if I had missed the class. Find not too much, first the teacher mentioned the label clear.

1. Figure, figcaptionIt’s a new html5 tag.

  • figureDefine separate stream content, such as ICONS, illustrations, and code.
  • figcaptionUsed tofigureThe element defines the title, first or last.

2. Blockquote, cite

  • blockquoteBlock reference, indent around 40px.
  • citeThe URL that represents the reference, such as papers, files, books, movies.

3. Dl, DT, DDKey/value pair

<figure> <! <img SRC ="https://"> <! </code> </code> <blockquote ="http://"> </blockquote> < figure caption> </figure>Copy the code
<dl>
    <dt>key</dt>
    <dd>value</dd>
</dl>
Copy the code

4. Semantic labels:<time>, <adress>, <mark>, <code>, <small>

  • Easy to read and maintain (readable)
  • So the machine can parse it better
<head></head> <section> <article class=""> <figure> <img src="https://" alt=""> <blockquote cite="https://"> </blockquote> <figcaption> <cite> from </cite> <small> </ small> </figcaption> </figure> </article> </section>  <footer></footer>Copy the code

5. <picture>

Provide versions of images for different device scenarios by including zero or moreand one .

(The teacher’s description of the label is so vivid and accurate.)

6. < video >, < audio >

Four kinds of video playback page effects.

<figcaption> video1 <video src="https://" autoplay poster="posterimage.jpg"> </video> </figcaption> <figcaption> video2 <video controls src="videofile.mp4" autoplay poster="posterimage.jpg"> </video> </figcaption> <figcaption> video3 <video  controls> <img src="https://lf3-cdn-tos.bytescm.com/dark.webm" type="video/webm"> <img src="https://lf3-cdn-tos.bytescm.com/dark.mp4" type="video/mp4"> </video> video4 </figcaption> <figcaption> <audio controls src="videofile.mp4"> <code>code</code> </audio> </figcaption>Copy the code

6. Other labels

The same meta name=”viewport”, the corresponding content property fields of different large sites are rich and varied, with a high degree of personalization.

<! <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, Maximum-scale =1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover" />Copy the code
<! <meta name="viewport" content="width=device-width" inital =1.0>Copy the code
<! <link rel="shortcut icon" href="https://favicon.ico" type="image/x-icon"> <link rel="Bookmark" href="https://favicon.ico"> <! -- css --> <style> .body { color: #222 } </style> <! <link rel="stylesheet" href="dark.css"> <! <script type="text/javascript" SRC ="dark.js">Copy the code

~~ have an idea: make a video playback page.

Orientation of thinking notes: The most complete? The most deeply? The system? Most interesting? And I hope that years from now, when I read this article, I will remember that it was a careful note that I wrote.

Youth Camp – Day 1 HTML Basics – Day 1 CSS Basics &UI Design

[[Youth Camp] – Day 2 Learn JavaScript with moonlight shadow]

[Youth Camp] – Day 3 Front-end development of Web standards]

[Youth Camp] – Day 4 getting Started with TypeScript]

[Youth Training Camp] – Day 5 React

[[Youth Training Camp] – Day 6 front-end animation implementation]

[[Youth Camp] – Day 7 Basics of Node.js]

[youth Camp] – Day 8 Node.js Practice] [Youth Camp] – Day 8 Web development security journey]

[[Youth Camp] – Day 9 HTTP Practical Guide]

[[Youth Camp] – Day 10 Front End Advancement Guide Front End Engineering]

[[Youth Camp] – Day 11 Design Patterns in JavaScript]

[Youth Camp] – Day 12 Introduction to small program development] [Youth Camp] – Day 12 Into Web multimedia technology]

[[Youth Camp] – Day 13 Game implementation of different technical frameworks]