字节跳动第四届前端青训营笔记
一、HTML部分HTML在解析时会构建一个DOM树，这里包含了所有标签及它们之间的关系，CSS的样式也是根据DOM树进行查找然后嵌入的。
1.1常见标签常见的标签如：
文字类：h1~h2、p、span
列表类：ul/ol、li
表格类：dl、dt、dd
链接：a
视频图片音频：img、audio、video
input：代码如下，来自韩老师上课PPT：
inputplaceholder="请输入用户名"brinputtype="range"brinputtype="number"min="1"max="10"brinputtype="date"min="-02-10"brtextareaHey/textareabr!--选项按钮--!--checkbox多选--divlabelinputtype="checkbox"/??/labellabelinputtype="checkbox"checked/??/label/div!--radio单选--divlabelinputtype="radio"name="sport"/?/labellabelinputtype="radio"name="sport"/??/label/div!--selction和option组成下拉选项--divselectoption??/optionoption??/optionoption??/option/select/div!--这里用户可以自己输入，也可以下拉选择--!--datalist--inputlist="countries"/datalistid="countries"optionGreece/optionoptionUnitedKingdom/optionoptionUnitedStates/option/datalist
效果：
1.2一些新学到的标签blockquote标签表示文本块引用，用途是专门将某个文本块以不同于正常文本流的外观进行显示,默认情况下,这种文本块只是简单地左右缩进。cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。code标签表示这段文本是源程序代码，文本变为等宽字体。q标签表示前文所述的一段话。pre标签可定义预格式化的文本。被包围在pre标签中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体,最常见应用就是用来表示计算机的源代码。
二、CSS基础部分css的三种引入方式：外链、嵌入和内联。CSS工作原理如下图所示，在解析HTML时单独加载CSS，解析完成后根据DOM树，CSS样式被加载到对应的DOM节点上去。
2.1选择器标签选择器：直接使用标签名称
id选择器：带#号，根据id选择
类选择器：带.号，根据class选择
属性选择器：
[attribute]的选择器：表示含有attribute的元素
[attribute=值]的选择器：表示含有attribute并且有对应值的元素
[attribute^=值]的选择器：表示含有attribute并且以对应值开头的元素
[attribute$=值]的选择器：表示含有attribute并且以对应值结尾的元素
伪类选择器
状态伪类：:link、:hover、:visited、:focus等
结构伪类：:first-child、:last-child、:nth-child等
2.2组合2.3颜色和字体rgb使用三元素进行组合，每两位数代表一个颜色的程度，组合为了六位数。
字体一般指定多个，通用字体有五种。
中英文混排时，英文字体一般写在中文字体前面
使用WebFonts，通过
font-face就可以设定自己的font-family，url可以给一个网页链接。style
font-face{font-family:"Megrim";src:url(