深海拾贝—HTML ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 1 天。笔记内容：我的见解之前端

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

前端应该关注的几个方面：

美观、功能、无障碍、安全、兼容、性能、体验

深海拾贝：无障碍是以前自己从未注意到的地方，设计一个真正优秀的作品也应该考虑到少数人以及一些特殊场景的使用体验

深海拾贝：dl dt dd标签

多个dt对一个dd，一个dt对多个dd

<dl>
  <dt>UP主</dt>
  <dd>棋手战鹰</dd>
  <dd>棋士连笑</dd>
  <dd>柯洁</dd>
  <dt>九天玄女人间体</dt>
  <dt>生化围棋创始人</dt>
  <dt>可爱青春美少女的表姐</dt>
  <dd>鹰酱</dd>
</dl>

深海拾贝：label标签

label 标签为鼠标用户改进了可用性，如果在 label 元素内点击文本，就会触发此控件。

radio和name的组合保证同一name下的选项只能选择一个

for属性可把 label绑定到另外一个元素，请把 for属性的值设置为相关元素的id属性的值。
```
<label for="one">关注🦅酱喵</label>
<input type="radio" name="cute" id="one" />
<br />
<label for="two">关注小🐟喵</label>
<input type="radio" name="cute" id="two" />
```

深海拾贝：下拉选择

//方法一：
<select>
  <option>鹰酱</option>
  <option>小俞</option>
  <option>柯洁</option>
  <option>连笑</option>
</select>

//方法二：
<input list="names"/>
<datalist id="names">
  <option>鹰酱</option>
  <option>小俞</option>
  <option>柯洁</option>
  <option>连笑</option>
</datalist>

深海拾贝：引用

文字引用：blockquote与cite

<blockquote>
棋手战鹰是中国女子围棋职业二段选手，在2021全国女子围棋甲级联赛中取得了2-16的“优异战绩”，后因直播间逛贴吧看到一些偏激言论破防而一战成名，直播特色是抽象，现在已经俨然成为了b站一姐，她坦然面对2-16的战绩，成为宣传围棋知识的大使。
</blockquote>
<p>一些人读到这些介绍后涌入她的直播间感受她与柯洁和连笑的<cite>快乐围棋</cite></p>

代码引用：code

<p><code>const</code>用来声明变量</p>
<pre>
  <code>
    const a=114514
    const b=191280
  </code>
</pre>

留一个坑：注意到字节跳动官网不能被嵌入到页面跳转，希望搞懂是如何实现这个效果的

深海拾贝—HTML ｜ 青训营笔记

深海拾贝—HTML ｜青训营笔记