前端与 HTML | 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第1天

本堂课重点内容

课程主要通过前端要解决的基本问题和 HTML 是什么来进行讲解，介绍了前端的相关定义和对应的技术栈，以及 HTML 的基础知识，以下是课程重点内容。

1. 前端工作的定义
2. 前端技术栈拆解与分析
3. HTML 作用解析
4. HTML 语义化

详细知识点介绍

标题标签

一共有h1~h6六个标签，对应不同标题

<div>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</div>

列表标签

分别是有序列表、无序列表和自定义列表。有序列表会有数字表明顺序，无序列表则都是小黑点，自定义列表构成形式类似于key-value的形式。

<div>
    <!-- 有序列表 -->
    <ul>
        <li>阿凡达</li>
        <li>泰坦尼克号</li>
        <li>复仇者联盟</li>
    </ul>
    <!-- 无序列表 -->
    <ul>
        <li>🍌</li>
        <li>🍎</li>
        <li>🍓</li>
    </ul>
    <!-- 自定义列表 -->
    <dl>
        <dt>导演</dt>
        <dd>陈凯哥</dd>
        <dt>主演</dt>
        <dd>张国荣</dd>
        <dd>张丰毅</dd>
    </dl>
</div>

链接标签

可以引用一些资源或跳转到其他页面的标签，例如a标签、img标签、audio标签和video标签。其中a标签的target属性可以使其打开新页面跳转。

<!-- 跳转到指定页面 -->
<a href="https://www.bytedance.com/">
    字节跳动官网
</a>
<!-- 显示图片 -->
<img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" />
<!-- 播放音频 -->
<audio src="assets/music.ogg" ></audio>
<!-- 播放视频 -->
<video src="assets/video.mp4" ></video>

输入标签

可以让用户输入一些内容，例如input标签、textarea标签（长文本输入框）、select标签（下拉框）和datalist标签（提示选项）

  <!-- 默认文本输入框 -->
  <input placeholder="请输入用户名">
  <!-- 滑动型输入器 -->
  <input type="range">
  <!-- 数字输入框 -->
  <input type="number" min="1" max="10">
  <!-- 日期选择器 -->
  <input type="date" min="2023-01-01">
  <!-- 输入提示 -->
  <input list="countries">
  <datalist id="countries">
    <option>Greece</option>
    <option>Abcde</option>
    <option>Tom</option>
  </datalist>

文本标签

表示引用的标签有blockquote、cite和q标签。blockquote标签表示长引用，引用一段话；cite标签表示短引用，引用一个作品名字；q标签也表示短引用。

  <blockquote>天才并不是自生自长在深林荒野的怪物，是由...</blockquote>
  <cite>小王子</cite>
  <q>hello</q>

HTML 语义化

HTML中的元素、属性和属性值都拥有某些特定含义，开发者应该遵循语义来编写HTML以便于修改、维护页面。

课后个人总结

虽然 HTML 是前端的基础，很早就学了，但是今天看完课程视频依然学到了许多新知识。例如自定义列表，类似于key-value的形式来自定义列表、input的type属性的各种取值以及datalist的输入提示等等。即便是很早学过的东西，再次学一遍依然有很多可以新知识可以学。