HTML学习思维导图
2014-10-06 19:04
260 查看
http://www.zixue.it/data/attachment/forum/201401/21/235003luj5trkebkd2udk5.jpeg
一、html结构：
主要包括3部分：doctype、head、body
1）doctype:文档类型,XHTML1.0提供了3中DTD供可供选择
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2）head:包括meta charser和title,也能包括css。
3）body:各种div及html标签。
二、div布局
1、布局原则：从上到下、从左到右、从大到小
2、盒模型：块状元素div看成盒子。
1）盒子有自己的宽width和高height;
2)盒子与盒子之间的距离称为外边距margin：
margin后面可以跟1~4个值，按照上、右、下、左的顺序为四个方向分配值，没有分配到的取对边的值。
普通元素及父子元素在竖直方向上存在margin重叠现象，即相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值；关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。
3）盒子的厚度称为边框border。border的3要素：宽 形状 颜色。
border的3要素可单独定义，也可以和4个方向按需要结合。
4）盒子与内部内容的距离称为padding：定义方式同margin。
3、普通div无论宽度是多少都独占一行，要实现2个div并排显示，就要用浮动float，如float:left/right;
浮动元素后面再来一个普通元素，那这个元素会跑到浮动元素的下面，所以要使它正常显示，要清除浮动clear，如clear:left/right/both;
三、css效果
1、选择器
常用的有id选择器、类选择器、标签选择器、派生选择器
第一 id选择器 #xxx
第二 class选择器 .xxx
第三 标签选择器 div p body 等
第四 派生选择器 div p{} .a .b{} 等 表示所有空格后面的选择器生效
第五 子代选择器 div > p 只有大于号后面的选择器生效 不继承下去了
第六 群组选择 div,p,a{} 记住 是逗号 不是小数点，表示div p a标签都生效
第七 伪类选择器 比如 a:link 让鼠标放上去的时候生效
第八 通用选择器 比如 p *{} 表示p标签后面的所有标签都生效
第九 相邻选择器 比如 p+div{} 表示 p后面的第一个div生效 后面的 都无效
第十 属性选择器 比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效
2、控制效果
1）段落控制：text-indent:首行缩进
text-align:水平文字方向
text-decoration:文本装饰线
letter-spacing:字符间距
text-transform:字母大小写转换
2）文本控制：color:颜色
font-style:字体样式
font-weight:字体粗细
font-size:字体大小
line-height:行高
font-family:字体
3）背景控制：background-color:背景色
background-image:背景图片
background-repeat:背景图重复
background-attachment:背景图粘贴方式
background-position:背景图位置
背景色和背景图同时设置时，优先显示背景图，同时设置为了当背景图被删除或缓冲慢时，设置一个与背景图色调相近的背景色，使网站的视觉效果不会反差太大。
当背景图比元素还大时，就需要调background-positin来实现。
4）css引入方式
①页内style标签即在head部分加入style标签：
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
②外部css文件,在head部分加入link：
<link rel="stylesheet"type="text/css" hre="xxx.css"/>
③行内style标签,直接在页面的标签里加style属性：
<div style="border:1px redsolid;">测试信息</div>
④import导入即在head部分加入@import：
<style type="text/css">
@import url(xxx.css);
</style>
5）初始化
因为各浏览器对于元素有默认css参数，而且可能不一致，那么同样一段代码在不同浏览器之间显示效果就不一样。那么就需要统一对常用元素常用css参数手动设定统一效果。
四、html标签
分为2大类：无语义标签和有语义标签。
之前学过的div和span都是无语义标签，div是布局分块的块状元素，span是选择文字用的内联元素。
有语义标签，每个标签的名字就能看出它的作用，有标题h1~h6，段落p,图片img，视频embed，超链接和锚点a，无序列表ul,有序列表ol，表格table。
一、html结构：
主要包括3部分：doctype、head、body
1）doctype:文档类型,XHTML1.0提供了3中DTD供可供选择
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2）head:包括meta charser和title,也能包括css。
3）body:各种div及html标签。
二、div布局
1、布局原则：从上到下、从左到右、从大到小
2、盒模型：块状元素div看成盒子。
1）盒子有自己的宽width和高height;
2)盒子与盒子之间的距离称为外边距margin：
margin后面可以跟1~4个值，按照上、右、下、左的顺序为四个方向分配值，没有分配到的取对边的值。
普通元素及父子元素在竖直方向上存在margin重叠现象，即相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值；关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。
3）盒子的厚度称为边框border。border的3要素：宽 形状 颜色。
border的3要素可单独定义，也可以和4个方向按需要结合。
4）盒子与内部内容的距离称为padding：定义方式同margin。
3、普通div无论宽度是多少都独占一行，要实现2个div并排显示，就要用浮动float，如float:left/right;
浮动元素后面再来一个普通元素，那这个元素会跑到浮动元素的下面，所以要使它正常显示，要清除浮动clear，如clear:left/right/both;
三、css效果
1、选择器
常用的有id选择器、类选择器、标签选择器、派生选择器
第一 id选择器 #xxx
第二 class选择器 .xxx
第三 标签选择器 div p body 等
第四 派生选择器 div p{} .a .b{} 等 表示所有空格后面的选择器生效
第五 子代选择器 div > p 只有大于号后面的选择器生效 不继承下去了
第六 群组选择 div,p,a{} 记住 是逗号 不是小数点，表示div p a标签都生效
第七 伪类选择器 比如 a:link 让鼠标放上去的时候生效
第八 通用选择器 比如 p *{} 表示p标签后面的所有标签都生效
第九 相邻选择器 比如 p+div{} 表示 p后面的第一个div生效 后面的 都无效
第十 属性选择器 比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效
2、控制效果
1）段落控制：text-indent:首行缩进
text-align:水平文字方向
text-decoration:文本装饰线
letter-spacing:字符间距
text-transform:字母大小写转换
2）文本控制：color:颜色
font-style:字体样式
font-weight:字体粗细
font-size:字体大小
line-height:行高
font-family:字体
3）背景控制：background-color:背景色
background-image:背景图片
background-repeat:背景图重复
background-attachment:背景图粘贴方式
background-position:背景图位置
背景色和背景图同时设置时，优先显示背景图，同时设置为了当背景图被删除或缓冲慢时，设置一个与背景图色调相近的背景色，使网站的视觉效果不会反差太大。
当背景图比元素还大时，就需要调background-positin来实现。
4）css引入方式
①页内style标签即在head部分加入style标签：
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
②外部css文件,在head部分加入link：
<link rel="stylesheet"type="text/css" hre="xxx.css"/>
③行内style标签,直接在页面的标签里加style属性：
<div style="border:1px redsolid;">测试信息</div>
④import导入即在head部分加入@import：
<style type="text/css">
@import url(xxx.css);
</style>
5）初始化
因为各浏览器对于元素有默认css参数，而且可能不一致，那么同样一段代码在不同浏览器之间显示效果就不一样。那么就需要统一对常用元素常用css参数手动设定统一效果。
四、html标签
分为2大类：无语义标签和有语义标签。
之前学过的div和span都是无语义标签，div是布局分块的块状元素，span是选择文字用的内联元素。
有语义标签，每个标签的名字就能看出它的作用，有标题h1~h6，段落p,图片img，视频embed，超链接和锚点a，无序列表ul,有序列表ol，表格table。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML 学习思维导图
- JavaScript、HTML、CSS学习—思维导图
- 学习Html之后总结的超全的思维导图！
- HTML学习思维导图
- JavaScript、HTML、CSS学习—思维导图
- html学习思维导图
- 东软学习html思维导图
- HTML tag 学习
- 网站制作初步 第二步部分 学习HTML语言
- 学习html
- SQL Server 2005中的T-SQL增强 转载：WWW.CHINAHTML.COM 学习
- HtmlTextWriter类的学习
- HTML语言学习笔记之四
- 第一天学习的总结(span,html控件,web控件,botton,随机数)
- HtmlTextWriter学习笔记
- javascript学习手记(Html)meta标签之详解
- PHP学习第七节---- PHP结合HTML打印表格
- html的学习
- HTML语言学习笔记之二
- 我学习html的顺序