这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
笔记重点：
- 前端定义
- html语义化
- css工作方式
- css继承
- 布局方式
主要是一些介绍类知识点，因此主要记录不太了解的知识
需要着重注意的有： css继承父元素的计算值而非使用值
- 什么是前端
使用web技术栈解决人机交互问题的工程师 包括跨终端技术：pc/客户端小程序/ARVR 2. 技术栈 3. 注意点：
注重用户体验 功能/性能/美观
HTML介绍
超文本标记语言：
- 超文本：图片/链接/表格
- 标记语言：
<h1></h1>
补充部分：
head中保存不需要展示在浏览器上的信息
dl为定义列表，定义属性-属性值
dt-列表符号:
- dt-标题
- dd-内容
html语义化
-
定义
- html中的元素、属性和属性值所有某种含义，如nav指导航栏；ol值有序列表，ul是无序列表
-
语义化的目的：
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-方便盲人阅读
- 好处：
- 可读性
- 可维护性
- 搜索引擎优化
- 无障碍特性
css
css文字样式
-
css工作方式
-
选择器中
伪类分为状态性(如hover/focus)和结构性伪类(根据dom节点在dom树种的位置选择)
-
字体引用 需要对url的资源进行裁切——
format()url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2"); -
注意事项 html中多个空格或换行符会被合并成一个 css中使用
white-space:nowrap进行展示，规定段落中的文本不进行换行 -
继承 一般跟文字相关都是可以继承的，跟和模型相关的都是不能继承的
- 值继承
6. css值中计算值与使用值的区别：
计算值是指使用css文件可以算出的值——仅用css，如em
使用值是指可能涉及其他参数的值——涉及窗口大小，如100%,关键字
css继承父级元素的计算值
布局layout
-
布局是确定内容的大小和位置的算法
-
布局分类：
- 常规流(文档流)
- 浮动
- 绝对定位
-
width和height属性：当容器(父元素)有指定高度时，百分数才升效
-
padding属性可以设置百分比，是相对于容器的宽度
-
css画三角形：content的with和height为0时，只显示边框，将其他边设置为透明，可得到三角形
-
margin
- margin：auto时会由居中效果；
- margin在垂直方向上会有合并
-
overflow属性控制溢出
前面是学过的知识，主要汇总不太熟的部分，后面部分包括块级行级元素，是未了解过的知识，因此重新学习，详细记录
