HTML 与 CSS | 青训营

芦苇269
91 阅读8分钟

1.前端语言三件套(三剑客)

  • HTML：超文本标记语言（hyper text markup language），部署网页结构
  • CSS：层叠样式表(cascading stytle sheets)，设计网页的表现样式，美化网页
  • JavaScript：控制网页的行为，HTML和CSS只是实现静态信息，缺乏交互性，网页的交互和动画效果通过JavaScript实现


总结：如果把HTML比做身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。

2.HTML要点提炼

2.1什么是HTML?

HTML： HyperText(超文本) Markup Language(标记语言)

2.2DOM树

将HTML代码转换为对应的树形结构，对应的每一个节点称为DOM节点 image.png

2.3HTML语法
  • 标签和属性不区分大小写，推荐小写
  • 空标签不可以闭合，比如 input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如 required 、redonly

❗注：当标签内部不嵌套别的内容时，就可以不闭合

2.4HTML标签

HTML文档由4个主要标记组成，包括、、、，这4个标记构成了HTML页面最基本的元素。

2.5什么是语义化？
  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应遵循语义来编写HTML
    • 有序列表用 ol ；无序列表用 ul ; 自定义列表用 dl
    • lang 属性表示内容所使用的语言，例如：lang = "ts" 就表示语言使用的是TypeScript
2.6语义化的好处
  • 提高代码可读性
  • 增强可维护性
  • 搜索引擎优化
  • 更方便浏览器解析
  • 提升无障碍性
2.7如何做到语义化？
  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不适用可视化工具生成代码
2.8 开发规范的意义

❗注：团队协作的时候，注重一定的开发规范是很有必要的，规范的目的是为了编写高质量的代码，提升协作效率，降低沟通成本，切实提升系统稳定性，码出质量，让团队成员每天的心情都是愉悦的，大家在一起是快乐的~😀

2.9 补充：HTML5新增、移除的元素
  • 新增元素
    • 绘画 canvas
    • 媒体 video 和 audio 元素
    • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
    • sessionStorage 的数据在浏览器关闭后自动删除
    • 语义化更好的内容元素，比如 article 、footer、header、nav、section
    • 表单控件 ，calendar 、 date 、 time 、 email 、 url 、 search
    • 新的技术 webworker 、 websocket 、 Geolocation
  • 移除元素
    • 纯表现的元素：basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
    • 对可用性产生负面影响的元素：frame 、 frameset 、 noframes

总原则：HTML是传达内容，而不是样式~

3.CSS要点提炼

3.1什么是CSS？

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，文件扩展名为 .css。

3.2 id 选择器和 class 选择器
  • id 选择器：为标有特定 id 的 HTML 元素指定特定的样式，CSS 中 id 选择器以 "#" 来定义
  • class 选择器：用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，在 CSS 中，类选择器以一个点 . 号显示

适用场景：两种在开发环境中的使用都是很多的，但是我个人更偏向于使用 class 选择器，因为我很容易就遗忘 id 属性是独有的，也就是一旦命名，只能供一个元素使用，不能复用，所以根据开发时实际情况来抉择比较好，各有所长，选对用对会让代码更加优美

3.3 伪元素选择器和伪类元素选择器的区别
  • 伪类选择器：向某些选择器来添加效果，如:hover、:active、:focus等
  • 伪元素选择器：用于将特殊的效果添加在选择器上，例如 ::before 、::after 、::first-letter等

区别：本质区别在于是否创建了新的元素。伪类不修改DOM内容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样；而伪元素可能改变DOM结构，创建虚拟的文档树中的元素。

3.4.选择器的特异度（Specificity）

image.png 计算方法：将不同属性分类算出来，然后算出权重，进行比较，得到最高的优先级

3.5.继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值（一般和文字相关的属性可以继承，和盒子模型相关的属性不可继承）

  • 显示继承：利用 **inherit **关键字让原本不可继承的属性变成可继承
3.6初始值（initial）

CSS中，每一个属性都有一个初始值

  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0

可以使用 initial 关键字显示重置为初始值，例如：background-color:initial

3.7.布局是什么？

image.png 布局相关的技术：

  • 常规流（文档流）：行级、块级、表格布局、FlexBox、Grid布局
  • 浮动
  • 绝对定位
3.8 盒子模型

image.png

  • width:
    • 指定为 content box 宽度
    • 取值为 长度、百分数、auto
    • auto 由浏览器根据其他属性确定
    • 百分数相对于容器的 content box 宽度
  • height：
    • 指定为 content box 高度
    • 取值为 长度、百分数、auto
    • auto 取值由内容计算得来
    • 百分数相对于容器的 content box 高度
    • 容器有指定高度时，百分数才生效

image.png

  • padding：
    • 指定元素四个方向的内边距
    • 百分数相对于容器宽度
  • border：
    • 指定容器边框样式、粗细和颜色
  • margin：
    • 指定元素四个方向的外边距
    • 取值为 长度、百分数、auto
    • 百分数相对于容器宽度
    • 使用 margin:auto水平居中

❗ margin collapse：margin在垂直方向上有合并，只会取较大值

  • overflow：对于内容溢出的时候的一些处理

image.png

怪异盒子模型 怪异盒模型又称IE盒子模型，怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高。 计算盒子宽：width(content + padding + border) 计算盒子高：heigth(content + padding + border) 样式设置：box-sizing: border-box;

4. 行级 VS 块级

1.display属性：
  • block 块级盒子
  • inline 行级盒子
  • inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
  • none 排版时完全忽略
2.常规流 Normal Flow：
  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

image.png

2.1行级排版上下文
  • Inline Formatting Context(IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直
    • 对齐避开浮动(float)元素*
2.2块级排版上下文
  • Block Formatting Context(BFC)
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;
2.3BFC内排版规则：
  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFC内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠（用于清除浮动的一个技巧）
2.4 Flex Box 是什么？
  • 一种新的排版上下文
  • 它可以控制子级盒子的：摆放的流向、摆放顺序、盒子宽高、水平和垂直方向的对齐、是否允许折行
  • 主轴：justify-content
  • 侧轴：align-items

align-items 比较特殊的一个属性值就是 baseline （基线对齐）

  • Flexibility

image.png
❗ 注：可以缩写成 **flex **属性，书写起来会更加美观简洁

2.5 Grid布局
  • display : grid使元素生成一个块级的 Grid 容器
  • 使用 grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列
  • grid line 网格线
2.6 float 浮动
  • 可以实现文字环绕效果

❗ 其他就不用过度了解了，以前没有 flex 布局之前 ，float 会被用于实现一些排版效果，但是现在有了更方便的属性，float 只关注其最基本的作用。

2.7 position 属性

1.static 默认值，非定位元素 2.relative 相对自身原本位置偏移，不脱离文档流

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 流内其他元素当它没有偏移一样布局

3.absolute 绝对定位，相对非 static 祖先元素定位

  • 脱离常规流
  • 不会对流内元素布局造成影响

4.fixed 相对于视口绝对定位

  • 脱离常规文档流

5.sticky 粘性定位

  • 允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了

🔗mdn--CSS布局--定位

2.8 学习建议
  • 充分利用 MDN 和 W3C CSS 规范
  • 好奇心 + 使用开发者工具
  • 持续学习

4. 个人小结

其实 HTML 和 CSS 部分的内容真的很多很杂，但是这俩兄弟也是前端语言中最基本、重要的部分，俗话说的好，基础不牢，地动山摇，首先是第一遍学习的时候，一定不要怕麻烦，多动手多思考，遇见比较难的知识点就做好笔记，好记性不如烂笔头（想起来我第一遍听黑马粉红老师的课的时候写了小半本笔记本呢）其次，很多属性和标准也一直在更新，就是一定要培养持续学习的好习惯，学了不等于会用，要多用，根据不同的开发要求来多练习（github上面有很多好项目），不断精进。加油加油，此时想起一句话特别适合结尾：道阻且长，行则将至！🌞

avatar
文章
阅读
粉丝