作为一个本科学机械的跨考生,从来没有接触过前端技术,今天来谈一谈学习一个月以来的心得。
从名字可以很轻易的想到前端是用户接轨的,前端开发是创建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)
- 固定定位的包含块为视口即可视窗口,可以让一些元素始终固定在视口的某个位置,与页面不同。
总结
一个月的学习深深地感受到了自己需要学的东西真的有很多,同时学习的同时也要多动手,增强自己的实战能力。很多知识真的是一看就会一用就错。前端开发非常灵活,实现同一效果可能会有很多种做法。接下来的目标就是增强自己的动手能力和独立思考能力。