HTML基础（1）

1.前端开发语言介绍

HTML（Hypertext Markup Language）—— 结构—— 超文本标记语言

CSS（Cascading Style Sheets）—— 样式—— 层叠样式表

JS（javascript）—— 行为—— 客户端脚本语言

2.样式表出现的位置

行间样式表：<div style="……"></div>

内部样式表：<style>…………</style>

外部样式表：<link href="style.css" rel="stylesheet"/>

3.注释

<!-- html 注释 -->

/* css 注释 */

注意有空格

4.样式详解

属性：属性值；

width 宽度

height 高度

复合样式一：background 背景

　　　　　　background-color 背景颜色

　　　　　　background-image 背景图像

　　　　　　background-repeat 背景图是否重复

　　　　　　background-attachment 背景图是否固定

　　　　　　background-position 背景图显示的位置

复合样式二：border 边框

　　　　　　border-width 边框宽度

　　　　　　border-style 边框样式

　　　　　　border-color 边框颜色

　　　　　　边框样式：

　　　　　　　　solid 实线

　　　　　　　　dashed 虚线

　　　　　　　　dotted 点线（IE6不兼容）

复合样式三：padding 内边距

　　　　　　padding-top 上边内边距

　　　　　　padding-right 右边内边距

　　　　　　padding-bottom 下边内边距

　　　　　　padding-left 左边内边距

　　　　　　padding: top right bottom left;

　　　　　注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。

复合样式四：margin 外边距

　　　　　　　外边距的问题：1、上下外边距会叠压；

　　　　　　　　　　　　　   2、父子级包含的时候子级的margin会传递给父级；（内边距替代外边距）

　　　　　　　外边距复合：margin: top right bottom left;

5.盒模型（标准）

盒子大小 = border + padding + width/height

盒子宽度 = 左border+左padding+width+右padding +右border

盒子高度 = 上border+上padding+height+下padding+下border

6.常见样式 — 文本设置

font-size 文字大小（一般均为偶数）

font-family 字体（中文默认宋体）

color 文字颜色（英文、rgb、十六位进制色彩值）

line-height 行高

text-align 文本对齐方式

text-indent 首行缩进（em缩进字符，1em=[font-size] 相当于1个字）

font-weight 文字着重

font-style 文字倾斜

text-decoration 文本修饰

letter-spacing 字母间距

word-spacing 单词间距（以空格为解析单位）