前端与HTML

• HTML（内容）css（样式）JavaScrip（行为）
• DOM树：

graph TD
douument --> html
html  -->head
html  -->body
head  -->meta
head  -->title
body  -->hr
body  -->p

• 列表：

1. 有序列表：给前面默认加123 ol和li。
2. 无序列表：ul和li。

• 链接：普通链接是跳转，后面加target="_blank"是新窗口打开。
• 图片：后面加alt="Metal movable type"当图片加载不出来后会显示提示。
• 音频：auto src=""后面加controls是表明这个音频用浏览器默认工具播放。
• 视频：video src=""后面加controls是表明这个视频用浏览器默认工具播放。
• 输入：input placeholder="请输入用户名"。
• 滑动块：input type="range"。
• 输入数字：input type="date"。
• 输日期：input type="date"。
• 多行文字：textarea。
• 选择按钮：单选是type="radio"，多选是checkbox。
• 下拉框选择：select option 内容/ /。
• 输入框给提示：input list="countries"/ datalist id="countries"/ option 提示/option

走进前端技术栈

• css是如何工作的

graph TD
加载HTML --> 解析HTML
解析HTML --> 加载CSS
解析HTML --> 创建DOM树
加载CSS --> 解析CSS
解析CSS --> 创建DOM树
创建DOM树 --> 展示页面

• CSS统配选择器：.*{color:red}所有字体都变。
• 属性选择器：[href^="#"]所有以#号开头的超链接应用。[href$=".jpg"]所有以.jpg结尾会应用。
• 伪类：转态伪类a href="..." example.com /a
• 链接 a:visited访问过得变样式 ，a:hover鼠标移动上去后变样式，a:active鼠标单击后变。
• 输入框： :focus{outline:2px solid orange;}点击输入时变样式。
• 组合：例如input.error表示又要input又要class=error。

1. 直接组合：AB ，满足A和B ，input：focus。
2. 后代组合：A B ，选中B，如果它是A的子孙 ，nav a ，a在nav标签下面就行。
3. 亲子组合：A>B ，选中B，如果是A的子元素 ，section>p， p在section标签里。
4. 兄弟选择器：A~ B ，选中B，如果在A后且和A同级， h2~p， h2后边所有的p，且和h2同级。
5. 相邻选择器：A+B ，选中B，如果紧跟A后， h2+p， h2下一个p会被选。

• 颜色：所有颜色都可以用红，绿，蓝组成。所以#000000三种颜色各代表两位数。