语言：交流工具
人与人之间的沟通交流，我们会用到各种语言，比如：汉语，英语……；
作为一个前端工程师，要与浏览器沟通交流，就要用到浏览器所能识别的语言；
前端开发语言介绍
html（Hypertext Markup Language）—— 结构
超文本标记语言
css（Cascading Style Sheets）—— 样式
层叠样式表
js（javascript）—— 行为
-------------------------基本结构-------------------------------------
<标记------<html>标签-------<html></html>标签对
<!DOCTYPE HTML>声明文档类型
<html>
------<head>
-----------<meta charset="utf-8" />代码编码格式-----单标签：直接在后面斜杠结束的标签叫做单标签。注意：文件本身也有编码格式，只有文件本身编码格式和代码编码格式相同才不会出错
------------<title></title>
------</head>
------<body></body>
</html>
utf-8国际标准，gb2312中文简体标准
-------------------------样式表出现的位置-----------------------------------
1、行间样式表<div style="........."></div>
2、内部样式<style>.............</style>
3、外部样式<link href="" rel="stylesheet" />
-------------------------html注释-------------------------------------
<!-- 注释 -->
-------------------------常见样式-------------------------------------
属性：属性值
width：宽度
height：高度
background：背景
background-color
background-image
background-repeat
background-position
background-attachment
border边框
border-style（solid dashed dotted（IE6不兼容））**线的样式在每个浏览器中会表现微小差异
border-color
border-width
border-top
border-bottom
border-left
border-right
小技巧：宽和高为零，有border可画三角形等小技巧
padding内边距
padding-top
padding-right
padding-bottom
padding-left
padding: top right bottom left;
margin外边距
margin-top
margin-right
margin-bottom
margin-left
margin：top right bottom left
外边距的问题
1、上下margin会叠加；
2、父子级包含的时候，子级的margin-top会传递给父级（解决办法：用padding代替）
******父级若有边框，不会出现此问题
盒模型
结构样式：
width
height
background
border
padding
margin
复合属性：一个属性多个属性值的命令，叫做复合属性
文本样式设置
font-size:文字大小（一般为偶数，默认16px，火狐15px）
font-family：字体（中文默认宋体）
color：文字颜色
line-height：行高（文字永远在行高的中间，不是理解成字与字之间的距离）
text-align：文本对齐方式
text-indent：首行缩进（em缩进字符）
font-weight:文字着重
font-style：文字倾斜
text-decoration：文本修饰
letter-spacing：字母间距
word-spacing：单词间距（以空格为解析单位）
常见复合属性
background
border
padding
margin
font：font-style|font-weight|font-size/line-height|font-family
解析式语言：代码越短，解析越快（复合样式写在一起就短了）
-------------------------前端开发工具-----------------------------------
Photoshop（切图、修图、测量）
WebStorm
浏览器：两大类
1、IE：IETester（IE6、IE7、IE8）、IE9、IE10……
2、标准：firefox（fireBug）、chrome、safari、oprea…
-------------------------谢谢欣赏，来自秒味课堂笔记---------------------------
�
�
网友评论