HTML、CSS|青训营笔记

这是我参与[第五届青训营]伴学笔记创作活动的第1天

前端技术栈

HTML--CSS--JavaScript--HTTP 开发环境：IE/Edge Chrome Firefox Safari

HTML

HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合
• 属性值推荐用双引号包裹
• 某些属性值可以省略

标题

h1-h6

列表

• 有序列表
• 无序列表
• 自定义列表

链接

• a href targrt
• img src alt
• audio src controls
• video src controls

输入

• input type placeholder name
• textarea
• select option
• datalist option

引用

• blockquote 引用
• cite 短引用
• q 具体的引用

语义化标签

CSS

Cascading Style Sheets

在页面中使用CSS的方法

• 外链 link(推荐)
• 嵌入 style
• 内联 p style(不推荐)

CSS是怎样工作的

选择器

• 通配选择器 *{ }
• 标签选择器 p{ }
• id选择器 #logo{ } //唯一的
• 类选择器 .logo{ }
• 属性选择器 [disabled]{ }
• 伪类选择器 a:hover{ }
  • 直接组合 input:focus
  • 后代组合 nav a
  • 亲子组合 section>p
  • 兄弟选择器 h2~p
  • 相邻选择器 h2+p

颜色

• RGB
• HSL
• alpha 透明度 rgba hsla

布局相关技术

• 常规流
  • 行级 span em strong cite code
    行级排版上下文IFC（只包含行级盒子的容器会创建一个IFC）
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一个盒子在行内的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动元素
  • 块级 body artice div main section h1-h6 p ul li
    BFC内排版规则
    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠
  • 表格布局
  • FlexBox 一种新的排版上下文 他可以控制子级盒子的：
    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行
  • Grid布局
• 浮动
• 绝对定位