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

非常开心能够参加这一届的字节跳动的青训营，参加这次的青训营看到了很多的大佬，又一次认识到了人外有人，自己还是需要继续努力

- 前端

什么是前端？

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

HTML

全名：（HyperText Markup Language）

HTML模板

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

DOM树

DOM树是W3C制定的标准接口规范，DOM树结构可以精确的描述出HTML文档之间各个标签当中的关联性，就是在HTML解析之后，会形成DOM树，流程如下图

CSS则是被解析成CSS规则树，浏览器就是跟这两个规则树来渲染页面。
JS就是根据DOM树来访问HTML结点对象，并对它进行增删改查的操作。

一些课上的HTML标签

自定义列表（dl,dt,dd）

dl: 表示创建一个自定义列表结构,内部只能存放dt和dd, dt和dd是同级关系。

dt: 定义主题或者定义术语，表示一个列表的主题。

dd: 定义解释项，表示解释和说明前面的主题内容。例如：

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

最后会输出：

导演：: 陈凯歌
主演：: 张国荣; 张丰毅; 巩俐
上映日期：: 1993-01-01

播放器（audio,video）

<audio 
  src="/assets/music.ogg"
  controls
></audio>

<video
  src="/assets/video.mp4"
  controls
></video>

两个标签都有一个src属性和一个control属性：

src主要是定义音频地址
control属性，要有这个属性的存在，才会允许用户对音频进行播放暂停等操作
此外还有autoplay,crossorigin,disableremoteplayback等属性

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

总结：

第一节课讲的都是比较基础的内容，都是前端的定义还有HTML一些标签的具体使用，还有语义化的标准等，到最后还讲了一些CSS基础的内容为下午的课程做铺垫，但CSS部分还是留到CSS的笔记一起归纳吧。俗话说，基础要打劳，虽说讲的很基础，但也不能松懈，有时候就是因为基础没有打劳错过了很多机会，接下来再继续加油吧~

前端与HTML|青训营笔记

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