前端开发入门学习笔记

Posted Nico的技术博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发入门学习笔记相关的知识,希望对你有一定的参考价值。

html:超文本标记语言。

html:是一个基础结构。

CSS:就是跟网页做装修的,修饰HTML的基础内容:样式。

javascript:一个网页的行为,动作,动态的东西。

html标准文件格式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>标题</title>
</head>
<!--我是头部 周围包括的符号为注释-->
<body>
这里为网页的主题写作区域
</body>
</html>

CSS:

div行间样式表:<div style="width:100px; height:100px; background:red; font-size:30px;">aaa</div>
写到了DIV的每行,单独定义.每次只能应用到一行,有局限性,很少用到.

div内部样式表:<div id="XX1"></div>id名称最好用英文开头,以#号赋值。
<div id="XX2"></div>可以用#号赋值另外一个div.
<style>
#XX1{
width:100px;
height:100px;
background:red;
}

#XX2{
width:200px;
height:200px;
background:blue;
}
</style>

如此用#号单独赋值ID号以后可单独调用.样式表依然在HTML文件内部。

1.css(文件内的内容)
#div1{
width:100px;
height:100px;
background:red;
}

在主HTML程序中
<head>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div id="div1">aaa</div>
</body>

等于链接到了外部的1.css中的#div的赋值调用,这就是外部样式表.

颜色值.
background-color:(颜色英文red,yellow.)、#16进制颜色模式#ffffff、rgb模式(100,200,300);,红、黄、蓝。

background-color:red;
background-color:#ffffff;
background-color:rgb(30,40,240);
/*CSS的注释*/

background-image:url(image/123.jpg)
默认状态下引用图片背景是平铺的。
background-repeat:no-repeat; 背景不重复。
repeat-x 水平平铺。
repeat-y 垂直平铺。

background-position:10% 30px;(保证有两个值;只有单个值(默认X轴值),第二个值中间)
/*
背景定位: x水平 y垂直
100px 30px(像素值)
10% 20%(百分比)
(单词表述)
left| center | right(X轴属性) top | center | bottom(Y轴属性) */
background-repeat:repeat-x;
background-position:center 0px;
使图片重复平铺居中

width:100px;
height:100px;
background:url(1.jpg)
background-position: -100px -20px;
既可以设置正数也可以设置负数,根据自己的需要来设置。
background-attachment:fixed;
固定背景不动。
属性名称:样式值。
/*单一样式*/

background:#ccc url(image/123.jpg) no-repeat -100px -20px fixed;
/*复合样式 背景样式的合并 统一属性不要拆分*/

边框:

border:1px dashed black;
不同浏览器 粗边框造成不同的效果。
border-top:5px solid yellow;
定义边框顶部
border-left:5px solid blue;
定义边框左边
border-bottom:5px solid green;
定义下边框
border-right:5px solid red;
定义又边框
边框四角可单独定义。

PS前端开发: 切图(抠图)、测量、图片简单处理
得到一张图片:
1)设计师给的PS图片(首页.PSD文件)
2)截图屏幕
3)浏览器插件。F12,查找下载图片、雪碧图等。

 

以上是关于前端开发入门学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

Python全栈100天学习笔记Day48 前后端分离开发入门

Python全栈100天学习笔记Day48 前后端分离开发入门

springmvc学习笔记-入门程序小结

前端基础入门级笔记02:表格列表表单学习,附练习+源码

Sea.js学习笔记

Vuejs入门-----安装+基本语法学习笔记