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

一、前端技术栈

HTML -> 内容、框架
CSS -> 样式
JavaScript -> 行为
网络协议：客户端与服务端进行交互
Vue、React、Regular：前端的一些技术框架

二、前端开发应该关注的方面

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

HTML

DOM树

浏览器拿到HTML后会将其代码解析生成一个树形结构，称为DOM树，其中每一个节点称为DOM节点

部分语法规范

空标签可以不闭合

<!--没有Content的标签称为空标签，例如以下-->
<img src="xxx" alt="xxx"/>
<audio src="xxx" />
<meta charset="utf-8" />

<!--有Content的标签不是空标签，比如-->
<h1>我不是空标签</h1>

<!--空标签可以不闭合，直接写为这种格式: <xxx/> -->
<br/>
<input />

部分属性值默认值为true时，属性值可以省略，标签会自动将其设置为默认值，或者写出属性值但不需要设置值。但是如果属性默认值不是true或false，那么就不能省略。

<!--显示音频播放器控件和自动播放，属性值可以省略-->
<audio autoplay controls>
    <source src="xxx" type="audio/mp3">
</audio>

<!--设置表单必填项，required属性值不可省略-->
<input required="学号"/>

部分需要区分的HTML标签

三种列表

有序列表ol -> li

这种列表默认地会给每个列表项前面加上数字索引1、2、3……

<h1>有序列表</h1>
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

无序列表ul -> li

一般用于列表项没有严格的前后顺序

<h1>无序列表</h1>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

一般我们会使用以下CSS代码清除其默认样式(每个列表项左边的小点)：

ul{
    list-style:none;
}

定义列表dl -> dt -> dd

这是一种key:value 形式的列表，<dt>中放描述的标题，其后的<dd>中放该描述的值

<h1>定义列表</h1>
<h3>致命魔术</h3>
<dl>
  <dt>导演:</dt>
  <dd>克里斯托弗·诺兰</dd>

  <dt>分类:</dt>
  <dd>惊悚、科幻、悬疑</dd>
  
  <dt>主演:</dt>
  <dd>休·杰克曼</dd>
  <dd>克里斯蒂安·贝尔</dd>
</dl>

前端与HTML | 青训营笔记