首页 > 代码库 > 前端开发入门学习笔记（一）
前端开发入门学习笔记（一）
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="http://www.mamicode.com/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，查找下载图片、雪碧图等。
前端开发入门学习笔记（一）