周报
2013-09-06 18:33
295 查看
本周学习知识点：
1.HTML基础：标签，表格，列表，表单，样式
2.HTML高级：框架
3.CSS样式，选择器
4.DIV和CSS的概念
5.DIV+CSS定位
一．HTML
概念
1.HTML(hypertext markup language)超文本标记语言，在网页上显示文字,图片,视频,音频等
2.html的标签是由属性名和属性值构成 <标签 属性名=属性值>
二．HTML
元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
例 body元素：
<body>
<p>This is my first paragraph.</p>
</body>
三．HTML属性
注意：html所有的标签，都会有title、class、name、id、style属性
Style属性：style所包含不同的样式同时使用，不同的样式之间使用 （；）隔开
Style属性 淘汰了，bgcolor ，align font
使用 background-color text-align font-family font-size 等来代替
四：HTML超链接
Href属性：指向目标连接
Target属性：_blank 弹出一个新的窗口 _self （替换当前窗口） _parent 在父窗口基础上打开（火狐的话）
Name属性：使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
<a name="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>
五．Html 表格：
1、表格边框：border属性
2、表格中的表头：<th>
3、带有标题的表格：<caption></caption>
4、跨行、跨列的单元格 colspan rowspan
5、单元格边距：cellpadding 单元格内容和边框之间的距离
6、单元格间距：cellspacing cellspacing 单元格与单元格之间的距离
六．表单的重要性：
浏览器 和 php（服务器）进行交互，可以通过地址栏传递参数，也可以通过表单提交数据，但是，在地址栏传递数据 安全性低，所以通常使用 表单 post方式来提交
Name属性，用来找到某个表单的
Action 属性，表单提交的地址
Method属性，表弟那提交的方式，get post
Enctype属性，如果需要上传图片，enctype属性的值，必须是 multipart/form-data
文本域 <input type="text" name="firstname" />
单选按钮 <input type="radio" name="sex" value="male" /> Male
复选框 <input type="checkbox" name="car" />
下拉列表 <select> 和 <option> 预选值selected
文本域 <textarea>
表单提交 action 属性、提交方式 和 submit提交按钮
隐藏域 hidden属性
七．Html 框架的学习：
1.框架集，是通过frameset标签来实现的；Rows属性，将整个窗口横向分割成几部分；Cols属性，将整个浏览器窗口纵向分割成几部分
Frameset与body不见面
<frameset rows="20%,*" frameborder="1">
<frame src="top.htm"/>
<frameset cols="10%,*" noresize>
<frame src="left.htm" name="frame1"/>
<frame src="right.htm" name="frame2"/>
</frameset>
2.iframe 活动框架
Noresize属性，控制框架的边框不能拖动
Name属性，通过name属性找到这个框架
用法非常灵活
属性控制框架的大小 width height
打开超链接后在哪里显示内容，是通过target属性实现的
<a href="ldh.htm" target="agou">刘德华</a>
<a href="zxy.htm" target="agou">张学友</a>
<iframe src="bottom.htm" height="300px" name="agou"/>
八.CSS
1.cascade style sheets的缩写，简称层叠样式表
2.由于样式和html内容写在一起，导致代码特别紊乱，于是提出思想：
Html内容 和 显示 相分离;Html 只负责写内容，搭建框架;CSS只负责装饰内容，装饰框架
九．CSS的四种设置样式
（1）.内联样式表 ：
缺点是如果给很多元素设置样式太繁琐
<p style=”border:1px solid blue”>内联样式表</p>
（2）嵌套样式表
缺点：如果其他文件也需要这种样式的话，需要反复再去写同样的样式
<style>
#main{
width:300px;
height:300px;
background:red;
}
</style>
（3）外部样式表:(最常用的)多个文件需要同一种样式的时候，我们可以将共同的样式 封装起来，保存成一个css文件通过link标签 加载的
<link rel=”stylesheet” type=”text/css” href=”layout.css”/>
(4)输入样式表
1.在CSS文件中通过 @import 加载 import url（layout.css）；
2.在html文件<style>标签中嵌套：
<style>
import url（layout.css）；
</style>
注意：优先级，就近原则
十．选择器
1.类选择器，就是通过class属性找到某个标签的方法；任何html的标签至少会有 class属性、id、name、style
Class属性的xxx标签
.main{width:300px;
height:300px;
background:red;
position: absolute;}
2.id选择器，通过id属性来找到某个标签的方法
#main{width:300px;
height:300px;
background:red;
position: absolute;}
3.关联选择器，又称上下文关系选择器。通过上下文关系来确定标签的位置
Ul li.vege{
Backgroung:red;
}意思：找到ul标签里面 class 为 vegetable的li标签
4.组合选择器:就是组合 多个 html 标签，来设置样式
ul li.l,#div1,p.p1{
font-size:30px;
}
5.伪元素选择器:
伪元素，就是 同一个html标签，在不同的状态下，有不同的效果，这样的元素称为伪元素
目前，支持伪元素的，只有 a标签 和 p标签
A:hover 鼠标移上去的时候
A:link 默认状态
A:visited 访问过之后
十一．DIV和CSS的概念
现在在网站设计的标准中，已经不再使用表格定位技术，而是使用div+css实现各种定位。简单来说，就是通过div来搭建网站结构（框架），css用来美化网站样式
例如：数据页面、报表之类的页面还是HTML表格比较方便
学习总结：
1.字体属性
字体族谱 font-family
字体风格 font-style normal 普通，italic 斜体
字体大小 font-size
字体加粗 font-weight bold
2.控制文本的属性
字母间隔 letter-spacing 允许负值
文字间隔 word-spacing（已废除）
文字修饰 text-decoration
underline下划线 overline 上划线 line-through 删除线 blink闪烁（已废除）
横向排列 text-align
文本缩进 text-indent
行高 line-height
字体变形 text-transform uppercase大写
3.背景属性
背景颜色：background-color
背景图片：background-image:url()
背景重复：background-repeat repeat repeat-x repeat-y no-repeat
背景附件：background-attachment
背景位置：background-position 横向：left center right 纵向：top center bottom
4.DIV+CSS布局的优点
(1)表现和内容相分离
(2)代码简洁，提高页面浏览速度
(3)易于改版和维护
(4)提高搜索引擎对网页的抓取效率
5.Margin、padding 值复制
margin、padding 顺序，上右下左
（1）如果是一个值，其他三个方向都复制这一个值
（2）如果是两个值，上下对应一个值，左右对应一个值
（3）如果是3个值，也就是缺左边的，于是复制右边的
6.定位
7.区块浮动：
Float属性：
eft元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动
Clear属性：
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
8.header 部分 和 内容主体部分有一个分隔条
解决 IE 和 FF/Chrome 分隔条高度上的差别：
（1）IE浏览器会自动的调整高度
FF浏览器不会，你给他分配多少他就是用多少
（2）IE浏览器规定最小高度单位是 18px，
9.浮动框居中
FF/Chrome用margin-left:auto
margin-right:auto
IE 用text-align：center
10.IE/FF/Chrome分隔符高度差异
IE自动调节高度，FF不会；IE最小单位18px
解决方法：overflow：hidden（溢出隐藏）
11.盒子中文本无法居中，将文段的高等于盒子的高
line-height：值；
1.HTML基础：标签，表格，列表，表单，样式
2.HTML高级：框架
3.CSS样式，选择器
4.DIV和CSS的概念
5.DIV+CSS定位
一．HTML
概念
1.HTML(hypertext markup language)超文本标记语言，在网页上显示文字,图片,视频,音频等
2.html的标签是由属性名和属性值构成 <标签 属性名=属性值>
二．HTML
元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
例 body元素：
<body>
<p>This is my first paragraph.</p>
</body>
三．HTML属性
注意：html所有的标签，都会有title、class、name、id、style属性
Style属性：style所包含不同的样式同时使用，不同的样式之间使用 （；）隔开
Style属性 淘汰了，bgcolor ，align font
使用 background-color text-align font-family font-size 等来代替
四：HTML超链接
Href属性：指向目标连接
Target属性：_blank 弹出一个新的窗口 _self （替换当前窗口） _parent 在父窗口基础上打开（火狐的话）
Name属性：使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
<a name="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>
五．Html 表格：
1、表格边框：border属性
2、表格中的表头：<th>
3、带有标题的表格：<caption></caption>
4、跨行、跨列的单元格 colspan rowspan
5、单元格边距：cellpadding 单元格内容和边框之间的距离
6、单元格间距：cellspacing cellspacing 单元格与单元格之间的距离
六．表单的重要性：
浏览器 和 php（服务器）进行交互，可以通过地址栏传递参数，也可以通过表单提交数据，但是，在地址栏传递数据 安全性低，所以通常使用 表单 post方式来提交
Name属性，用来找到某个表单的
Action 属性，表单提交的地址
Method属性，表弟那提交的方式，get post
Enctype属性，如果需要上传图片，enctype属性的值，必须是 multipart/form-data
文本域 <input type="text" name="firstname" />
单选按钮 <input type="radio" name="sex" value="male" /> Male
复选框 <input type="checkbox" name="car" />
下拉列表 <select> 和 <option> 预选值selected
文本域 <textarea>
表单提交 action 属性、提交方式 和 submit提交按钮
隐藏域 hidden属性
七．Html 框架的学习：
1.框架集，是通过frameset标签来实现的；Rows属性，将整个窗口横向分割成几部分；Cols属性，将整个浏览器窗口纵向分割成几部分
Frameset与body不见面
<frameset rows="20%,*" frameborder="1">
<frame src="top.htm"/>
<frameset cols="10%,*" noresize>
<frame src="left.htm" name="frame1"/>
<frame src="right.htm" name="frame2"/>
</frameset>
2.iframe 活动框架
Noresize属性，控制框架的边框不能拖动
Name属性，通过name属性找到这个框架
用法非常灵活
属性控制框架的大小 width height
打开超链接后在哪里显示内容，是通过target属性实现的
<a href="ldh.htm" target="agou">刘德华</a>
<a href="zxy.htm" target="agou">张学友</a>
<iframe src="bottom.htm" height="300px" name="agou"/>
八.CSS
1.cascade style sheets的缩写，简称层叠样式表
2.由于样式和html内容写在一起，导致代码特别紊乱，于是提出思想：
Html内容 和 显示 相分离;Html 只负责写内容，搭建框架;CSS只负责装饰内容，装饰框架
九．CSS的四种设置样式
（1）.内联样式表 ：
缺点是如果给很多元素设置样式太繁琐
<p style=”border:1px solid blue”>内联样式表</p>
（2）嵌套样式表
缺点：如果其他文件也需要这种样式的话，需要反复再去写同样的样式
<style>
#main{
width:300px;
height:300px;
background:red;
}
</style>
（3）外部样式表:(最常用的)多个文件需要同一种样式的时候，我们可以将共同的样式 封装起来，保存成一个css文件通过link标签 加载的
<link rel=”stylesheet” type=”text/css” href=”layout.css”/>
(4)输入样式表
1.在CSS文件中通过 @import 加载 import url（layout.css）；
2.在html文件<style>标签中嵌套：
<style>
import url（layout.css）；
</style>
注意：优先级，就近原则
十．选择器
1.类选择器，就是通过class属性找到某个标签的方法；任何html的标签至少会有 class属性、id、name、style
Class属性的xxx标签
.main{width:300px;
height:300px;
background:red;
position: absolute;}
2.id选择器，通过id属性来找到某个标签的方法
#main{width:300px;
height:300px;
background:red;
position: absolute;}
3.关联选择器，又称上下文关系选择器。通过上下文关系来确定标签的位置
Ul li.vege{
Backgroung:red;
}意思：找到ul标签里面 class 为 vegetable的li标签
4.组合选择器:就是组合 多个 html 标签，来设置样式
ul li.l,#div1,p.p1{
font-size:30px;
}
5.伪元素选择器:
伪元素，就是 同一个html标签，在不同的状态下，有不同的效果，这样的元素称为伪元素
目前，支持伪元素的，只有 a标签 和 p标签
A:hover 鼠标移上去的时候
A:link 默认状态
A:visited 访问过之后
十一．DIV和CSS的概念
现在在网站设计的标准中，已经不再使用表格定位技术，而是使用div+css实现各种定位。简单来说，就是通过div来搭建网站结构（框架），css用来美化网站样式
例如：数据页面、报表之类的页面还是HTML表格比较方便
学习总结：
1.字体属性
字体族谱 font-family
字体风格 font-style normal 普通，italic 斜体
字体大小 font-size
字体加粗 font-weight bold
2.控制文本的属性
字母间隔 letter-spacing 允许负值
文字间隔 word-spacing（已废除）
文字修饰 text-decoration
underline下划线 overline 上划线 line-through 删除线 blink闪烁（已废除）
横向排列 text-align
文本缩进 text-indent
行高 line-height
字体变形 text-transform uppercase大写
3.背景属性
背景颜色：background-color
背景图片：background-image:url()
背景重复：background-repeat repeat repeat-x repeat-y no-repeat
背景附件：background-attachment
背景位置：background-position 横向：left center right 纵向：top center bottom
4.DIV+CSS布局的优点
(1)表现和内容相分离
(2)代码简洁，提高页面浏览速度
(3)易于改版和维护
(4)提高搜索引擎对网页的抓取效率
5.Margin、padding 值复制
margin、padding 顺序，上右下左
（1）如果是一个值，其他三个方向都复制这一个值
（2）如果是两个值，上下对应一个值，左右对应一个值
（3）如果是3个值，也就是缺左边的，于是复制右边的
6.定位
| 属 性 | 描 述 |
| Position | 用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定） |
| top | 一个元素上外边距边界与其包含块之间的偏移 |
| left | 一个元素左外边距边界与其包含块之间的偏移 |
| vertical-align | 设置元素的垂直对齐方式 |
| z-index | 设置元素的堆叠顺序，值高的元素会覆盖值比较低的元素 |
| display | Display：none， 表示不显示 Display：block，块状显示，会在元素后面添加换行符 Display：inline，内联显示，在元素后面删除换行符，多个可以在一行内显示 |
| Visibility | visible，显示 hidden，隐藏 inherit，继承父元素的值 |
| Overflow | Overflow：hidden 超出的部分隐藏 |
Float属性：
eft元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动
Clear属性：
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
8.header 部分 和 内容主体部分有一个分隔条
解决 IE 和 FF/Chrome 分隔条高度上的差别：
（1）IE浏览器会自动的调整高度
FF浏览器不会，你给他分配多少他就是用多少
（2）IE浏览器规定最小高度单位是 18px，
9.浮动框居中
FF/Chrome用margin-left:auto
margin-right:auto
IE 用text-align：center
10.IE/FF/Chrome分隔符高度差异
IE自动调节高度，FF不会；IE最小单位18px
解决方法：overflow：hidden（溢出隐藏）
11.盒子中文本无法居中，将文段的高等于盒子的高
line-height：值；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- UT公司新疆分公司的工作周报
- 病毒周报(080114至080120)
- 病毒周报(080609至080615)
- 病毒周报(081124至081130)
- 病毒周报(100118至100124)
- 周报20100418
- 病毒周报(100830至100905)
- 周报6--数据库设计
- 周报-org.hibernate.QueryException:Expected positional parameter count: 1,
- 周报_2011第48周（2011/11/20-2011/11/26）
- 周报_2012第11周（2012/03/11-2012/03/17）
- [置顶] 不写周报才是一件很嘻哈的事
- 周报_2013第09周（2013/02/24-2013/03/02）
- 研发周报：最火的前端开源项目
- 研发周报：暴露程序员身份的8个行为
- 第九周周报
- 第十二周周报
- 2014-06-08工作周报-耿田义
- 【格式】项目周报
- 【周报】第七周（8月17日～8月23日）工作总结报告——移动应用端