作为一个本科学机械的跨考生，从来没有接触过前端技术，今天来谈一谈学习一个月以来的心得。
从名字可以很轻易的想到前端是用户接轨的，前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发有很多的技术，最基础的技术HTML、CSS和js分别实现了不同的功能。举一个不太恰当的比喻，如果把页面当做一个人，那么HTML 就规定了这个人身上都有什么器官，CSS则规定了每个器官的外观、位置等，js规定了这些器官可以实现什么样的功能。
HTML和CSS
- HTML：Hyper Text Markup Language 超文本标记语言；
- CSS：Cascading Style Sheets 层叠样式表；
一定要区别二者的功能。HTML规定了页面有什么东西，该东西表示什么含义；CSS规定了页面长什么样子。进行设计时，HTML代码要注意语义化，只需考虑页面中必须的元素，不要为了追求某一样式添加不必要的元素，元素的任何样式都可以通过CSS代码调整（比如一些网站的背景图和一些美化的图标，不需要在HTML代码中额外添加一个img元素，只用在CSS中使用background属性就可以达到目的）
好用的辅助网站
MDN web docs可以查一些HTML和CSS的技术文档。用法：需要查询的标签、元素、属性等+.mdn搜索
元素周期表可以查询可以使用的元素标签。
HTML总结
一些有用的知识
- span元素：无语意，仅用于设置样式。可以用于给一段文字中的一部分设置不同样式。
- lorem：乱数假文，没有任何实际含义的文字，可以随机生成英文片段用于测试格式。
- 以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）到了HTML5，已经弃用这种说法。因为HTML追求语义化而不关注样式，行级块级暴露了样式。
- 空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格。例外：在pre元素（预格式化文本元素）中的内容不会出现空白折叠。
- $占位符:同时添加多个元素时，使用可以生成序号。
实体 （ HTML Entity）
实体字符通常用于在页面中显示一些特殊符号。
- &单词;
- &#数字;
实体字符的空格不会空白折叠
a元素
- href属性（hyper reference）：通常表示跳转地址
1.普通连接：跳转到外部链接。
2.锚链接#：跳转到业内链接，与id属性配合使用。
（id属性：全局属性，表示元素在文档中的唯一编号）
3.功能链接：点击后，触发某个功能
执行JS代码，javascript:
发送邮件，mailto:
拨号，tel: - target属性：表示跳转窗口位置。
target的取值：
_self：在当前页面窗口中打开，默认值
_blank: 在新窗口中打开
路径
- 站内资源：当前网站资源
- 站外资源：非当前网站资源
- 绝对路径：url地址（协议名：//主机名：端口号/路径）
- 相对路径：./表示当前资源所在目录；…/表示返回上一级目录
元素包含关系
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
- 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
demo
百度新闻首页
<body>
<header>
<div>
<div>
<ul>
<li><a href="">网页</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="">百度首页</a></li>
<li>
<a href="">用户名</a>
<ul>
<li><a href="">我的主页</a></li>
</ul>
</li>
<li>
<a href="">百度新闻客户端
<img src="./img/sncode.png" alt="">
</a>
</li>
</ul>
</div>
</div>
<div>
<div>
<a href=""><img src="./img/logo.png" alt=""></a>
</div>
<div>
<input type="text">
<button>百度一下</button>
<a href="">帮助</a>
</div>
</div>
<ul>
<li>
<a href="">首页</a>
</li>
</ul>
<div></div>
</header>
<!-- 主体 -->
<div>
<!-- 左边 -->
<div>
<!-- 新闻列表 -->
<div>
<a href="">要点新闻</a>
</div>
<!-- 新闻 -->
<div>
<ul>
<li>
<h3><a href="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sapiente non
accusantium dolor ratione sint dolores mollitia velit maiores iusto, animi dolorem
itaque labore est nihil, cumque quia, quos doloremque.</a></h3>
</li>
</li>
</ul>
</div>
</div>
<!-- 右边 -->
<div>
<!-- 幻灯片 -->
<div>
<!-- 轮播图 -->
<div>
<!-- 图片 -->
<div>
<div>
<a href="">Lorem ipsum dolor sit amet.</a>
<a href=""><img src="./img/banner/banner1.jpg" alt=""></a>
</div>
<div>
<a href="">Lorem ipsum dolor sit amet.</a>
<a href=""><img src="./img/banner/banner2.jpg" alt=""></a>
</div>
</div>
<ul>
<li></li>
<li></li>
</ul>
<div>
<span><</span><span>></span>
</div>
</div>
<div>
<a href=""><img src="./img/adv1.png" alt=""></a>
<a href=""><img src="./img/adv2.jpg" alt=""></a>
</div>
</div>
<!-- 热搜词 -->
<div>
<div>
<h4>新闻热搜词
<span>HOT WORDS</span>
<span></span>
</h4>
</div>
<ul>
<li><a href="">Lorem.</a></li>
</ul>
</div>
<!-- 百家号 -->
<div>
<h4>
百家号
<span>baijiahao</span>
<span></span>
</h4>
<div>
<!-- 左边 -->
<div>
<ul>
<li><a href=""><span>Lorem ipsum dolor sit.</span><img src="./img/test.jpg" alt=""></a></li>
</ul>
</div>
<!-- 右边 -->
<div>
<ul>
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
这个demo中摹写了百度新闻首页需要用到的HTML元素，写HTML代码的时候一定要注意语义化，善于使用容器，注意分区，提升模块化思想。写代码时，一定要脑子里有一个清晰的思路，注意加一写注释便于维护提高可读性。
CSS
一些有用的知识
CSS规则 = 选择器 + 声明块
-
选择器：选中元素。
1. ID选择器：选中的是对应id值的元素 #+id值
2. 元素选择器 元素名
3. 类选择器 .+类名
4. 伪类选择器 :+伪类名
5. 伪元素选择器 ::+伪元素名 -
声明块 ：出现在大括号中声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
-
CSS代码书写位置
-
内部样式表：书写在style元素中
-
内联样式表，元素样式表：直接书写在元素的style属性中
-
外部样式表**[推荐]**：将样式书写到独立的css文件中。（通过link标签引入）
1). 外部样式可以解决多页面样式重复的问题 2). 有利于浏览器缓存，从而提高页面响应速度 3). 有利于代码分离（HTML和CSS），更容易阅读和维护
-
-
继承：子元素会继承父元素的某些CSS属性（通常，跟文字内容相关的属性都能被继承）
常见样式
-
color：元素内部的文字颜色
1.预设值：定义好的单词
2. 三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。
rgb表示法：rgb(0, 255, 0)
hex（16进制）表示法：#红绿蓝 -
font-size：元素内部文字的尺寸大小
1.px：像素，绝对单位，简单的理解为文字的高度占多少个像素。
2.em：相对单位，相对于父元素的字体大小。
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。 -
font-family：文字类型
（必须用户计算机中存在的字体才会有效。使用多个字体，以匹配不同环境。sans-serif，非衬线字体可以万能使用） -
text-decoration：文本修饰，给文本加线。
a元素
del元素：错误的内容
s元素：过期的内容 -
line-height：每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中行高可以设置为纯数字，表示相对于当前元素的字体大小
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
-
比较重要性
重要性从高到底：作者样式表：开发者书写的样式1）作者样式表中的!important样式 2) 作者样式表中的普通样式 3) 浏览器默认样式表中的样式 -
比较特殊性：看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（x x x x）
1. 千位：如果是内联样式，记1，否则记0 2. 百位：等于选择器中所有id选择器的数量 3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量 4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量 -
比较源次序
代码书写靠后的胜出
应用：
-
重置样式表
书写一些作者样式，覆盖浏览器的默认样式
常见的重置样式表：normalize.css、reset.css、meyer.css -
爱恨法则（love）四个伪类选择器的顺序
link > visited > hover > active
属性值的计算过程
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行。渲染每个元素的前提条件：该元素的所有CSS属性必须有值一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
特殊的两个CSS取值：
- inherit：手动（强制）继承，将父元素的值取出应用到该元素
- initial：初始值，将该属性设置为默认值
确定声明值：参考样式表中没有冲突的声明，作为CSS属性值
层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
使用默认值：对仍然没有值的属性，使用默认值
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子组成部分
-
内容 content
width、height，设置的是盒子内容的宽高 内容部分通常叫做整个盒子的**内容盒 content-box** -
填充(内边距) padding：盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom padding: 简写属性 padding: 上 右 下 左 填充区+内容区 = **填充盒 padding-box** -
边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色（简写属性） 边框样式：border-style 边框宽度：border-width 边框颜色：border-color 边框+填充区+内容区 = **边框盒 border-box** -
外边距 margin
边框到其他盒子的距离 margin-top、margin-left、margin-right、margin-bottom 简写属性margin
行盒的盒模型
1. 盒子沿着内容沿伸
2. 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
3. 内边距（填充区）
水平方向有效，垂直方向不会实际占据空间。
4. 边框
水平方向有效，垂直方向不会实际占据空间。
5. 外边距
水平方向有效，垂直方向不会实际占据空间。
行块盒
display：inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块，为其父元素的内容盒
-
每个块盒的总宽度，必须刚好等于包含块的宽度，宽度的默认值是auto，margin的取值也可以是auto，默认值0
auto：将剩余空间吸收掉 width吸收能力强于margin 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收 在常规流中，块盒在其包含快中居中，可以定宽、然后左右margin设置为auto。 -
每个块盒垂直方向上的auto值
height:auto， 适应内容的高度
margin:auto， 表示0 -
百分比取值
padding、宽、margin可以取值为百分比 以上的所有百分比相对于包含块的宽度。 高度的百分比： 1）. 包含块的高度取决于子元素的高度，设置百分比无效 2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度 -
上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。 两个外边距取最大值。
浮动
应用场景
1. 文字环绕
2. 横向排列
浮动基本特点
修改float属性值为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
默认值为none
当一个元素浮动后，元素必定为块盒(更改display属性为block)
浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子考上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及css属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的
解决高度坍塌的代码
.clearfix::after {
content: "";
display: block;
clear: both;
}
定位
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position
定位属性
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
定位下的居中
某个方向居中：
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并
练习用的demo和遇到的问题
- 设置border时要注意，可能会引起尺寸变化从而导致
- 页面格式异常。
- 只要有浮动，一定要清除高度坍塌，不然可能会导致格式异常。
- 把一些公共样式创建一个类，可以大大减少代码冗余。
- rgba存在第四位，可以设置透明度，取值是0-1之间，如(255,255,255,0.2)
- 固定定位的包含块为视口即可视窗口，可以让一些元素始终固定在视口的某个位置，与页面不同。
总结
一个月的学习深深地感受到了自己需要学的东西真的有很多，同时学习的同时也要多动手，增强自己的实战能力。很多知识真的是一看就会一用就错。前端开发非常灵活，实现同一效果可能会有很多种做法。接下来的目标就是增强自己的动手能力和独立思考能力。
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
