【青训营】- 第1天HTML基础【青训营】todolist 项目部署学习：轻服务组队：9组开发工具：VSCode、J

青训营todolist

项目部署学习：轻服务
组队：9组
开发工具：VSCode、JS Bin
课程表
预习、复习
课程、课件
笔记 ~~有一个想法：实现一下课程表~~（作为深色模式浅色模式切换的案例作业）

HTML

html5是最新的html标准。 梦幻联动第3天课程《Web标准和前端开发》

web技术包括html、http、url。
web支持的语言包括html、css、js，还有第4种web语言WebAssembly/wasm。

~~（震惊深入浅出通俗易懂绝了只有我不知道学到亿点点这个同学很超前 666666）~~

~~有一个想法：生成一个弹幕图/动图~~（来表达我对老师和同学们的喜爱）

其中wasm引起了我的注意。wasm是设计补充js，本地解码速度比js解析快得多，让高新能的Web App应用在浏览器上运行成为可能。官网评价推荐语很燃很热血很感动，让我很兴奋。

“wasm进一步拓展web技术的应用场景，让以往无法想象的应用成为可能。让web技术社区不再满足于浅尝辄止的保守应用，终于可以大胆地将其作为一个正式选型方案，这也势必会大力推进相应行业场景的探索发展。期待看到更多wasm应用大放异彩。”

“wasm使我们得以将更多桌面端的软件高效地移植web，同时也可以在web种使用C/C++、Rust、Go来优化需要大量计算的模块。wasm日渐成熟，将促进更多的应用从桌面延伸到web，这将赋予本就强大的web更加丰富的功能。”

主流浏览器

Chrome、Firefox、Opera、Safari、Edge

常用标签

内联元素、块级元素、行内块级元素十分重要。

display显示属性:inline、block、inline-block

none 不显示
block 块状显示
- 默认独占一行，高度自适应内容高度
- 排列方式从上到下排列
- 可以直接通过宽高改变大小
inline 内联显示
- 默认的大小为内容大小
- 排列方式从左到右
- 不可以直接通过宽高改变大小
inline-block 内联块显示
- 默认大小为内容大小
- 排列方式从左到右
- 可以直接通过宽高改变大小

<!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 {
      /* 自适应内容的宽度
       * 内联块显示，则同时具有内联和块状元素的特质
      */
      display: inline-block;
      background-color: tan;
      /* width:200px; */
      /* padding: 50px; */
    }
    img {
      background-color: grey;
      width:200px;
      /* padding: 50px; */
    }
    a {
      /* 一般情况下，但凡遇到内联元素
       *我们都会直接让他呈块状显示 */
      display: block;
      /* float: left */
      background-color: thistle;
      width:200px
      /* padding: 50px; */
       }
    span {
      /* 隐藏 */
      /* display: none; */
    }
  </style>
</head>
<body>
  <!-- display显示属性
    1、none 不显示
    2、block 块状显示
      a、默认独占一行，高度自适应内容高度
      b、排列方式从上到下排列
      c、可以直接通过宽高改变大小

    3、inline 内联显示
      a、默认的大小为内容大小
      b、排列方式从左到右
      c、不可以直接通过宽高改变大小

    4、inline-block 内联块显示
      a、默认大小为内容大小
      b、排列方式从左到右
      c、可以直接通过宽高改变大小

  -->
  
  <!-- block块状元素：div -->
  <div class="">
    <p>div：我是块状显示。</p>
  </div>
  <!-- inline-block内联块元素（行内可替换元素）：img -->
  <img src="https://code.h5jun.com/images/dave.min.svg" alt="">
  <!-- inline内联元素：a -->
  <a href="\img.jpg">a：我是内联显示。</a>
  
  <span>我是内联span元素。</span>
</body>
</html>

~~有一个想法：把老师给的图例原样实现。~~（老师的课件图例也很形象好记。）

我去看别的同学的笔记，列举得很详细，里面的标签比我多，突然怀疑回忆自己没上课。发现不会的太多了，先把老师提到的标签弄清楚。

1. `figure、figcaption`是html5新增标签。

figure定义独立的流内容，比如图标、插图、代码。
figcaption用来为figure元素定义标题，第一个或最后一个。

2. `blockquote、cite`

blockquote块引用，40px左右缩进。
cite表示该引用的url，如论文、文件、书籍、电影。

3. `dl、dt、dd`键值对

<figure>
    <!-- 图标 -->
    <img src="https://">
    <!-- 代码 -->
    <code>code</code>
    
    <blockquote cite="http://">
    </blockquote>
    
    <figcaption>
        标题<cite>来自《小册》</cite>
    </figcaption>
</figure>

<dl>
    <dt>key</dt>
    <dd>value</dd>
</dl>

4. 语义化标签：`<time>、<adress>、<mark>、<code>、<small>`

便于阅读、可维护性高（可读性强）
让机器能够更好地解析

<head></head>
<section>
  <article class="">
    <figure>
      <img src="https://" alt="">
      <blockquote cite="https://">
      </blockquote>
      <figcaption>
          标题<cite>来自《书》</cite>
          <small>免责声明、注意事项</<small>>
      </figcaption>
    </figure>
  </article>
</section>
<footer></footer>

5. `<picture>`

通过包含0个或多个<source>和1个<img>来为不同的设备场景提供相应的图像版本。

（老师对标签的描述好生动好到位）

6. `<video>、<audio>`

4种视频播放页面效果。

  <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>

6. 其他标签

同样是meta的name="viewport"，不同大站点的对应的content属性字段丰富多样，个性化程度很高。

<!-- 生产环境页面代码 -->
<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"
/>

<!-- JS Bin工具默认代码 -->
<meta name="viewport" content="width=device-width" inital-scale=1.0>

<!-- 网站图标 -->
<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>
<!-- css文件 -->
<link rel="stylesheet" href="dark.css">
<!-- js文件 -->
<script type="text/javascript" src="dark.js">

~~有一个想法：做一个视频播放页。

思考笔记定位：最全？最深入？最系统？最有意思？而我希望多年以后，看到这篇文章可以记起来这是我当时用心写的笔记。

【青训营】- 第1天HTML基础【青训营】- 第1天CSS基础&UI设计

[【青训营】- 第2天跟着月影学JavaScript]

[【青训营】- 第3天Web标准于前端开发] [【青训营】- 第3天前端必须知道的开发调试知识]

[【青训营】- 第4天TypeScript入门]

[【青训营】- 第5天React实战]

[【青训营】- 第6天前端动画实现]

[【青训营】- 第7天Node.js基础入门]

[【青训营】- 第8天Node.js实践] [【青训营】- 第8天Web开发的安全之旅]

[【青训营】- 第9天HTTP实用指南]

[【青训营】- 第10天前端进阶指南之前端工程化]

[【青训营】- 第11天JavaScript中的设计模式]

[【青训营】- 第12天小程序开发入门] [【青训营】- 第12天走进Web多媒体技术]

[【青训营】- 第13天不同技术框架的游戏实现]

【青训营】- 第1天HTML基础

青训营todolist

HTML

主流浏览器

常用标签

1. figure、figcaption是html5新增标签。

2. blockquote、cite

3. dl、dt、dd键值对

4. 语义化标签：<time>、<adress>、<mark>、<code>、<small>

5. <picture>

6. <video>、<audio>