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

本堂课重点

前端工作的定义
前端技术栈拆解与分析
HTML 作用解析
HTML 语义化

什么是前端？

前端工作方向

解决GUI人机交互问题
跨终端：PC/移动浏览器客户端/小程序 VR/AR等。
Web技术栈

前端关注重点

功能、性能、兼容、美观、安全、无障碍、用户体验等。

前端技术栈

HTML

常用标签介绍

常用的HTML标签:p标签、h1~h6标签、ol/ul>li标签、dl>dt>dd标签、a标签、img标签、input标签等。

ol/ul>li标签

有序列表(ol/li):

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

代码执行结果：

无序列表(ul/li):

<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

代码执行结果：

dl>dt>dd标签

<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

代码执行结果：

a标签

<a href="#">超链接</a>

input标签 input标签应用广泛，可以是文本框，可以显示范围、日期，也可以是单选或复选框。（注意：单选需要name相同）

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>
<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>