clow.jpg
html（Hypertext Markup Language）—— 结构
超文本标记语言
css（Cascading Style Sheets）—— 样式
层叠样式表
js（javascript）—— 行为
html超文本标记语言
< 标记
<html> 标签
<html> </html> 标签对
<!DOCTYPE HTML> 声明文档类型
<meta charset="utf-8"/> 代码编码格式
单标签：直接在后面斜杠结束的标签叫做单标签。
行间样式表
<div style="……"></div>
内部样式表
<style>…………</style>
外部样式表
<link href="style.css" rel="stylesheet"/>
属性：属性值；
width 宽度
height 高度
background 背景
background-attachment: fixed; 背景是否滚动
background-color: gray; 背景颜色
background-image: url(bg.jpg); 背景图
background-repeat: no-repeat; 背景图是否重复
background-position: center 0px; 背景图位置
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-top会传递给父级；（内边距替代外边距）
外边距复合：margin: top right bottom left;
box.png
盒子大小 = border + padding + width/height
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border
结构样式：
width 宽度
height 高度
background 背景
border 边框
padding 内边距
margin 外边距
复合属性：一个属性多个属性值的命令，叫做复合属性。
font-size 文字大小（一般均为偶数）
font-family 字体（中文默认宋体）
color 文字颜色（英文、rgb、十六位进制色彩值）
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；
width 宽度 height 高度
background 背景 border 边框
padding 内边距 margin 外边距
font-size 文字大小 font-family 字体
color 文字颜色 line-height 行高
text-align 文本对齐方式 text-indent 首行缩进
font-weight 文字着重 font-style 文字样式
text-decoration 文本修饰 letter-spacing 字母间距
word-spacing 单词间距
图片（单标签）alt属性 是图片名字，是给百度搜索引擎抓取使用；
a标签： 链接/下载/锚点
target 链接打开方式
blank 新窗口
self 当前窗口
<base target="_blank"/> 定义页面链接默认打开方式
div 块
img 图片（单标签）
a 链接、下载、锚点
h1-h6 标题
p 段落
strong 强调（粗体）
em 强调（斜体）
span 区分样式
ul 无序列表
ol 有序列表
li 列表项
dl 定义列表
dt 定义列表标题
dd 定义列表项
SEO ：搜索引擎优化；
部分方法：
a、页面标签语义化；
b、使用对SEO有利的标签：h1/h2/h3/strong/em……
c、提高页面关键词密度；
d、……等等；
SEM：搜索引擎营销；（包含SEO）
id选择符（#）
群组选择符（，）
class选择符（.）
类型选择符(div……)
包含选择符（div p）
通配符（*）
基础选择符的优先级
类型 < class < id < style(行间) < js
测试：
A、#header #div1 .box1 div .section p .link{………………}
B、#some .base #font #call a{………………}
伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。）
link 未访问（默认）
hover 鼠标悬停（鼠标划过）
active 链接激活（鼠标按下）
visited 访问过后（点击过后）
A四个伪类的顺序：
link visited hover active
（love hate 记忆方法！）
a伪类的应用：
a、四个伪类全用(搜索引擎、新闻门户、小说网站)
b、一般网站只用（ a{} a:hover{} ）
IE6不支持a以外其它任何标签的伪类；
IE6以上的浏览器支持所有标签的hover伪类；
css reset 原则：
但凡是浏览默认的样式，都不要使用。
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
块的特征
1、默认独占一行
2、没有宽度时，默认撑满一排
3、支持所有css命令
内嵌(内联、行内)的特征
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析
display：block 显示为块
使内联元素具备块属性标签的特性
display：inline 显示为内嵌
使行块属性标签具备内联元素的特性
Inline-block的特点和问题
特性：
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度
问题：
1、代码换行被解析；
2、ie6 ie7 不支持块属性标签的inline-block;
这么一段HTML，请挑毛病：
<P> 哥写的不是HTML，是寂寞。<br><br> 我说：<br>不要迷恋哥，哥只是一个传说
空格符
标准：
<p>哥写的不是HTML，是寂寞。</p>
<p>我说：<br/>不要迷恋哥，哥只是一个传说</p>
最佳：
<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>，是寂寞。</p>
<p><cite>我</cite>说：<br/><q>不要迷恋哥，哥只是一个传说</q></p>
title 元素的额外信息
html标签：http://www.w3school.com.cn/tags/index.asp
前端规范
1、所有书写均在英文半角状态下的小写；
2、id，class必须以字母开头；
3、所有标签必须闭合；
4、html标签用tab键缩进；
5、属性值必须带引号；
6、
7、/* css注释 */
8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
9、p,dt,h标签 里面不能嵌套块属性标签；
10、a标签不能嵌套a；
11、内联元素不能嵌套块；
回顾:inline-block 特性：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、标签之间的换行间隙被解析（问题）
5、ie6 ie7不支持块属性标签的inline-block（问题）
float浮动：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层
float:left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素。
清浮动方法
1.加高
问题：扩展性不好
2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）
3.inline-block 清浮动方法：
问题：margin左右自动失效；
4.空标签清浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）
5.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。
6.after伪类 清浮动方法（现在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
7.overflow:hidden 清浮动方法；
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；
overflow:hidden;溢出隐藏（裁刀！）
浮动兼容性问题
IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。
a、IE6
b、浮动
c、横向margin
d、块属性标签（加display:inline;)
IE6下 li部分兼容性问题：
a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)
b、IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；）
vertival-align / img问题
vertical-align 垂直对齐方式
a、加垂直对齐方式的同排元素都要加垂直对齐方式；
b、垂直对齐方式可以解决元素下方间隙问题；
图片下方间隙问题
a、display:block; (改变标签本身特性)
b、overflow:hidden; (必须知道图片高度)
d、vertical-align (暂时最完美的方案)
网友评论