HTML 学习思维导图

先用div布局 用CSS控制显示 根据需要用有语义标签或无语义标签

先用div布局 用CSS控制显示 根据需要用有语义标签或无语义标签

编码与charset 不一致 则会导致乱码

如果id取名字用 数字命名 则会导致css文件无效

如果不声明DOCTYPE 低版本IE 显示效果不一样

盒子长 width+border-left+border-right+margin-left+margin-right+padding-left+padding-right

盒子高 height+border-top+border-bottom+margin-top+margin-bottom+padding-top+padding-bottom

盒子里面 文本占地的大小 等于width和height的大小 与padding margin border无关

padding会导致 所占空间发生变化 可以破坏布局

解决方法 为了不破坏布局 在增加padding后 要减少原来width和height的值

父子div 竖直方向margin会重叠 父DIV 与外界的margin值为子DIV的margin 子DIV与父DIV之间的margin 无效

普通元素 margin会重叠 值为重叠margin 的最大值

块元素(block element)

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易，也是CSS layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表

内联元素(inline element)

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体(不推荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码(在引用源码的时候需要)

dfn - 定义字段

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线(不推荐)

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 定义变量

text-decoration none 默认。定义标准的文本。的一条线。

text-decoration overline 定义文本上的一条线。

text-decoration line-through 定义穿过文本下的一条线。

text-decoration blink 定义闪烁的文本。 //IE不支持 火狐下可以使用

text-decoration inherit 规定应该从父元素继承 text-decoration 属性的值。

text-decoration underline 定义文本下的一条线。

background-color文本背景颜色

color 文本字体的颜色

text-indent 首行文本的缩进

text-align 文本对齐 方式 left center right

letter-spacing 字体间的距离

text-transform none 默认值 不变text-transform uppercase 文本全大写text-transform lowercase 文本全小写

text-transform 每个单词首字母大写

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

white-space 值为normal时 去除空白字符

white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符 ，与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在
CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

当 white-space 属性设置为 pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行。

衬线字体及无衬线字体的区别是 字体是否大小整齐 无衬线字体 在字体拐弯处明显大小不一样

有衬线字体 一般都用左标题 无衬线字体一般用于正文

程序员一般常用宋体 Courier New Courier New 9pt, Verdana, Lucida Cons

background-attachment : scroll默认值 滚动 fiixed背景固定

background-color : transparent 默认值 背景透明

background-color：颜色 背景颜色

background-image：none默认值 无背景 url（背景路径）背景图片

background-position：left top center right 可以选择背景所在的位置

background-repeat：repeat-x X轴平铺 repeat-y Y轴平铺 no-repeat 背景图片不重复

background-position：X值 Y值

以左上角为原点 分别 向右 和向下 X Y值为正 反之像素则为负

background-position：100px 200px；

background-position：-100px -200px；

background-position：100px -200px；

background-position：-100px 200px；

id选择器 class 选择器 标签选择器 派生选择器（必须有家谱关系）

通用选择器 *{} 相邻同胞选择器（相邻的标签） 群组选择器 div，p{}

属性选择器 abbr[title]{color:#FF0000;}

p[title='app']{　color:#FF0000;}

子代选择器 后代的第一个子元素#links > a {color:blue;}

伪类选择器

定位范围越精确的优先级 越大

直接写在标签里的的style优先级最高，然后是id > class >tag

html中 <style>间的CSS优先级</style> 大于 link引入过来的优先级

@import 优先级 大于link的优先级
http://bbs.aseoe.com/thread-1200-1-1.html