第一节课学习

首先对前端开发三件套进行了功能性上的简单介绍
前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
css在html文件中的运用

一、基础认知

CSS引入方式

- 内嵌式:CSS 写在style标签中

·提示: style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

外联式:CSS 写在一个单独的.css文件中

·提示:需要通过link标签在网页中引入

行内式: CSS 写在标签的style属性中

·提示:基础班不推荐使用，之后会配合js使用

javascript在html文件中的运用

css在javascript中的应用

html 标签分类

html head标签

第二节课学习

- 对html进行了基础的学习

html部分，学习了无序列表、有序列表、超链接、音频视频和图片的插入、文字排版布局大小、加粗、下划线、删除线、input标签-按键。例子如下： `

<!--无序列表-->
<h2>想吃什么</h2>
<ul>
    <li>鸡腿</li>
    <li>杨国福</li>
    <li>拉面</li>
</ul>

<!--定义列表-->
<h2>霸王别姬</h2>
<dl>
    <dt>导演：</dt>
    <dd>陈凯歌</dd>
    <dt>主演：</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
</dl>

<!--超链接-->
<!--替换网页-->
<a href="http:www.bytedance.com/"></a>
<!--打开新网页-->
<a href="http:www.bytedance.com/"
target="_blank">
</a>

<!--图片以及若图片未加载出来显示的文字-->
<!--和编程文件在同一个文件夹下，直接./加文件名-->
<img src="./1.jpg" alt="我是替换文本"
width="400" title="这是title文字，鼠标悬停的时候显示"/>
<img src="D:\2.jpg" width="200">
<img src="https://img2.baidu.com/it/u=505564260,2726110224&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500">
<br>

<!--音频-->
<audio src="/assets/music.ogg" controls></audio>

<!--视频-->
<video src="/assets/video.mp4" controls></video>

<!--用户交互-->
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>可输入多行文字，可随意调整大小</textarea>
<p>     <!--type=checkbox可选择多个-->
    <label><input type="checkbox"/>🍎</label>
    <label><input type="checkbox"checked />🍉</label>
</p>
<p>     <!--type=radio,且name相同，中间之能选择一个-->
    <label><input type="radio" name="sport" />🏀</label>
    <label><input type="radio" name="sport" />⚽</label>
</p>
<p>  <!--下拉选择-->
    <select>
        <option>🐱</option>
        <option>🐕</option>
        <option>🐖</option>
    </select>
</p>
<!--文字输入选择-->
<input list="countries"/>
<datalist id="countries">
    <option>China</option>
    <option value="Greece"></option>
</datalist>

<!--引用部分-->
<!--快捷引用（长引用）-->
<blockquote cite="http://t.cn/RfjKO0F">
    <p>
    天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的<br><!--换行-->
    民众产生、长育出来的，所以没有这种民众，就没有天才。
    </p>
</blockquote>
<!--短引用:作品名-->
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<!--之前文中引用过的具体内容-->
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
<!--引用代码（可长可短）-->
<p><code>const</code>对比const声明创建一个只读的常量</p>

<pre><code>
    const add=(a,b) =>a+b;
    cpnst mutiply=(a,b)=>a*b;
</code></pre>

<!--强调重要程度-->
<p>再投资之前,<strong>一定要做风险评估</strong>。</p>

<!--语气强调-->
<p>猫<em>肯定是</em>可爱的动物。</p>

第三节课学习

对于css进行了较为深入的学习

CSS简介

1、什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

2、为什么使用CSS

实现内容与样式的分离，便于团队开发

样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

3、CSS作用

页面外观美化

布局和定位

2、CSS应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

2.3 外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签或 @import指令引入

我的学习感受

掘金老师的课对于初学者来说还有一定的难度，我会搭配更加基础的课来更好的理解，并扩大我的知识面，有些难以理解的地方，我也会多听几遍，达到更好的理解，我推荐bilibili网站上黑马程序员的html和css课程。

我的学习建议

我认为预习是非常重要的，可以根据课表提前预习一下知识，可以帮助更好的跟上掘金课程老师的脚步
自己实际打代码，实际操作也是非常有用的，按照代码内容编号序号，给自己更深的记忆空间
可以找一些网站，实际分析它们的代码和布局排版

技术学习总结笔记 | 青训营