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

该篇文章主要记录在青训营课堂相关重点内容及自己掌握不熟内容，希望笔记可以帮助自己查漏补缺。

一、课堂重点内容

html常用标签及重点标签介绍
html语义化标签使用及html语义化规范的好处
css基础使用，字体设置等等
css布局与定位相关技术，flex弹性布局，Grid布局，绝对定位等等

二、课堂主要知识点

第一课前端与HTML

HyperText Markup Language

1.列表

1.1 有序列表<ol></ol>
1.2 无序列表<ul></ul>
1.3 key-value形式列表 <dl><dt></dt><dd></dd></dl>

2.链接重点属性

属性 target="_blank"(新窗口打开）

3.图片和影像

//img属性alt——图片无法显示时提示文字

//音频
<audio
    src = ""
    controls<!--浏览器默认显示-->
>
</audio>

//视频
<video
    src = ""
    controls//浏览器默认显示
>
</video>

4.输入

<input placeholder="请输入用户名">
<input type = "range">//可滑动选择框
<input type="number" min="1" max="10">
<input type="data" min="2018-02-10">//日期选择框
<textarea>Hey</textarea>//长文本框
<lable><input type="chekbox"/></label> //选择框 type="radio"只能选一个

//下拉选择框
<select>
    <option></option>
</select>

//加属性给用户提示
<input list = "countries"/>
<datalist id="countries">
    <option></option>
    <option></option>
</datalist>

5.文本

<!--快捷长引用-->
<blockquote cite="http://">
    <p>
        锄禾日当午
    </p>
</blockquote>

<!-- 短引用 cite标签 引用作品名字 斜体 q标签是具体内容引用-->
<p>
    我喜欢<cite>小王子</cite>
    沃兹基硕德讲过<q>balabaa</q>
</p>

<!--引用代码-->
<pre><code></code></pre>

<!-- 表示强调 strong加粗 em斜体-->
<strong></strong>
<em></em>

6.内容划分

7.html语义化好处

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

8.html总结

在学习html时，要注意html语义化规范，而不是求简单方便滥用标签。对于html的一些重要标签，要多回顾练习，以求能够熟练使用。

第二课 CSS基础

Cascading Style Sheet 层叠样式表

1.一些选择器

通用选择器 *

id：#

属性选择器

伪类

伪类分为状态性伪类和结构伪类

状态性伪类

a:link{}//默认状态
a:visited{}//访问过
a:hover{}
a:active{}
:focus{}//输入框

结构伪类

li:first-child{}//选中第一个li
li:last-child{}

组合

选择器组

可选用type类型进行选择

body,h1,h2,h3,h4,ul{
    margin:0;
    padding:0
}

[type="checkbox"],[type="radio"]{
    box-sizing:border-box;
    padding:0
}

2.颜色字体

颜色 alpha 透明度 rgba(255,0,0,0.5)

字体 font-family

大小 font-size(em是相对的单位)

字重 font-weight：100

行高 line-height

使用Web Fonts

<style>
@font-face{
    font-family:"Megrim";
    src:
        url(http://) format('woff2')
}
</style>

显式继承

一些属性是不会继承的，配置inherit属性就可以

*{
    box-sizing：inherit;
}
//原本不会被继承的box-sizing属性设置后即可被继承

html{
    box-sizing:border-box
}

3.CSS

4.布局

三种布局相关技术：

常规流、浮动和绝对定位

width——指定content box宽度（长度百分数 auto）

padding——指定元素四个方向的内边距（四个值——上右下左；两个值——上下、左右）

border——指定容器边框样式、粗细和颜色（三种属性 border:1px solid #ccc [border-width、style、color] 可组合border-left-width）

margin——指定元素四个方向的外边距（长度百分数 auto）
- 使用 margin：auto——水平居中
- margin collapse 折叠
box-sizing：border-box（宽高包括整个border在内的宽高）
overflow:hidden --处理溢出内容 overflow:scroll--滚动