这是我参与[第五届青训营]笔记创作活动的第一天
本课堂重点内容:
- 前端工作如何定义。
- 对前端的技术栈进行拆解和分析。
- 简单介绍 html 中的一些常用标签。
- HTML 的作用解析。
- HTML 的语义化。
详细知识点介绍:
前端技术栈：
HTML(内容)、CSS(样式)、JavaScript(行为) 通过 网络协议 与服务器的交互。
前端应关注的方面:
功能、美观、安全、兼容、性能、体验、无障碍。
HTMl 语法:
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，如： input、meta
- 属性值用双引号包裹
- 某些属性值可以省略，如 required = true 可以省略为 required
标签用法:
- 列表对于排名比较敏感时(如票房排行)，用 ol 有序列表
- 列表对于排名无所谓时，用 ul 无序列表
- 如果用列表描述一部电影，采用 dl 描述列表，dt 表示标题，值or具体描述放在 dd 中， dt 和 dd 是多对多的关系，多个 dt 可以对应一个 dd ，反之亦然
- input 通过 type 来控制 input的类型
- input 如果要实现多选一， 可以给需要实现的 input 一个相同的 name 值
- 如果要实现用户输入之后出现提示框的功能，需要给 input 一个 list 属性，然后在 input 下面添加一个 datalist 标签，给 datalist 标签一个 id 属性，值与 input 的 list 属性的值相同，在 datalist 标签中添加 option，option 代表具体的提示项
- blockquote 标签 快捷引用，又称长引用，一般用于直接引用别人的一段话, 它有一个 cite 属性，用来表示引用来源于
- cite 标签和 q 标签都是短引用，不同点在于 cite 多用于作品的名字或者章节，q 多用于具体的内容
- code 标签用来引用短代码，在 code 标签外包裹一个 pre 标签可以引用多行代码
实践练习例子:
dl 描述列表:
<h2>霸王别姬</h2>
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>
input 标签:
<p>
<label><input type="checkbox" />🍎</label>
<label><input type="checkbox" checked />🍏</label>
</p>
<p>
<label><input type="radio" name="sc" />⚽</label>
<label><input type="radio" name="sc" />🏀</label>
</p>
<p>
<select>
<option>🥑</option>
<option>🥩</option>
<option>🥓</option>
</select>
</p>
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
课后个人总结:
- cite 标签容易与 q 标签混淆，二者相近都是短引用，但 cite 标签多用于作品名字或者章节，q 标签多用于具体的内容
- 如果需要引用多行代码，可以在 code 标签外包裹一个 pre 标签
- input 标签通过 type 来控制 input 的类型，不同的 type 具有不同的效果，容易混淆
