html+css基础知识总结
2016-11-27 12:33
661 查看
1.HTML书写的基本规范
img标签必须得写alt=""
标签名和属性名字必须小写
引号必须用双引号
双标签必须有闭合标签
单标签要合理闭合
属性名和标签名用空格隔开
2.xhtml就是严格的html
文档
5 <!DOCTYPE html> html5标准网页声明
！+document的简写DOC+TYPE类型的组合+html
4.01 过渡型和严格型
1.0 过渡型和严格型
作者 author
版权 copyright
描述 description
关键词 Keywords
3.<meta charset="UTF-8">写在head里面
字符编码
utf-8 1个文字3个字节
gb2312/gbk 1个文字2个字节
4.标签类型
1)单标签，双标签
单标签：br img hr
2)行内标签、块标签、行内块
行内块：<img src="" alt="" title="" />
图片链接 title img下路径正确或错误都显示的提示文字
display:inline; 转行内
display:block; 转块
display:inline-block; 转行内块
5.属性
6.选择器
选择器的优先级和权重
!importent>行间>id>class>标签>*
如果两个优先级一样执行最最下面的代码
继承
和文字相关的样式都可以继承，a不能继承颜色，i和em不能继承斜体，b和strong不能继承加粗。
继承没有直接给的大
7.浮动
特性
1.脱离文档流
2.浮动有方向
3.块元素宽度尽可能的窄
4.行内元素会变成块元素
5.宽度不够会掉下来
6.尽可能的往上飘
7.文本环绕
三要素
1.用到浮动必须清浮动
2.同级元素浮动都需要浮动
3.浮动后最好给宽
清除浮动
overflow:hidden; 加给父级
不适合内容超出
clear:both; 同级元素最后添加空标签
left right both
clearFix:after（推荐） 加给父级的class
适用于各种情况
clearFix:after{ content:''; display:block; clear:both;}
clearFix{ zoom:1; } 兼容ie6 7
8.定位
定位 position
相对定位
relative
根据谁定位：根据自己
不脱离文档流
不会改变块元素
不会改变行内元素
大多数情况
1.为了子级定位，自己不脱离文档流
2.提升层级
绝对定位
absolute
脱离文档流（ 完全脱离）
根据定位父级定位，如果父级没有定位根据body定位
让块元素宽度尽可能的窄
行内元素变成块
left top right bottom
固定定位
fixed (不兼容IE6)
根据可视区定位
脱离文档流
会让块宽度尽可能的窄
行内变成块
层级
子级层级用永远高于父级层级
负值能实现子级比父级层级低，但是不允许用！
z-index
只对定位元素有效
定位>浮动>普通元素
后写的比先写的层级高
9.透明
opacity:0-1; chrome FF IE9+
filter:alpha(opacity:0-100); 兼容IE
父级透明子级跟着透明
自适应透明
给背景层的父级定位
给背景层定位，必须给宽100%高100%
文字提高层级
.box{width:500px;height:500px;position:relative;}
.div1{width:100%;height:100%;position:absolute;top:0;left:0;}
.bg{width:100%;height:100%;position:absolute;top:0;left:0; background:red;opacity:0.5;filter:alpha(opacity:50);}
p{position:relative;z-index:2;}
<div class="box">
<img src="1.jpg" alt="" />
<div class="div1">
<div class="bg"></div>
<p>文字文字</p>
</div>
</div>
10.背景图合并/雪碧图/css精灵
图片小于50k
好处
减少请求次数
加载速度快
坏处
不利于维护
11.表单
<form action="http://www.baidu.com" method="get">
<input type="text" name="usename" value="">
type 含义
text 文本框
password 密码框
submit 提交
radio 单选框
button 按钮
</form>
下拉框：select 元素可创建单选或多选菜单。
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<textarea>
1.所有浏览器都支持 <textarea>标签。
2.文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
3.可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
4.在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
</textarea>
<label for="id">id是对应的input的ID</label>
修饰
outline:none 取消焦点
resize:none 取消拖动 (textarea专用)
12.表格table
thead(可省略)
tbody
tfoot(可省略)
tr
td
th(可省略)
border-collapse:collapse;
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
合并/塌陷
colspan 横着 合并,把同一行的格子向右边挤出去一个(所以要删除同一行的td)
colspan=2;同一行删除1个
rowspan 竖着合并,把下面一行的格子挤出去一个(所以要删除掉下面一行的td)
rowspan=2;下一行删除1个
rowspan=3;下一行删除1个和下下行删除1个
rowspan=4;下一行删除1个和下下行删除1个和下下下行删除1个
以此类推一直往下删除
<style>
table{ border:1px solid red; border-collapse:collapse; }
td{ border:1px solid red; width:40px; height:20px; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td colspan="3"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
img标签必须得写alt=""
标签名和属性名字必须小写
引号必须用双引号
双标签必须有闭合标签
单标签要合理闭合
属性名和标签名用空格隔开
2.xhtml就是严格的html
文档
5 <!DOCTYPE html> html5标准网页声明
！+document的简写DOC+TYPE类型的组合+html
4.01 过渡型和严格型
1.0 过渡型和严格型
作者 author
版权 copyright
描述 description
关键词 Keywords
3.<meta charset="UTF-8">写在head里面
字符编码
utf-8 1个文字3个字节
gb2312/gbk 1个文字2个字节
4.标签类型
1)单标签，双标签
单标签：br img hr
2)行内标签、块标签、行内块
行内块：<img src="" alt="" title="" />
图片链接 title img下路径正确或错误都显示的提示文字
| 块标签特性 ： 独占一行 支持宽高 默认父级宽度100% 不受空格影响 嵌套规则 块标签可以嵌套所有标签 例外：p标签不可以套任何块标签 | 行内标签特性 : 并到一行 不支宽高 根据内容撑开 受空格影响 嵌套规则 行内标签可以套任何行内标签（自己本身标签除外） 例外：a可以套所有标签 |
| <div>空的块标签</div> | 常用<span></ span> |
| <ul>无序列表</ul> | 常用<a></a> |
| <p>段落块标签</p> | <b ></b> |
| <ol>有序列表</ol> | <i ></i > |
| <h1>标题标签<h6> | <em></em> |
| <strong></strong> | |
display:block; 转块
display:inline-block; 转行内块
5.属性
| 属性名 | 属性值 |
| 字体颜色 | color(三种写法) red,#000,rgb(0,0,255) |
| 字体大小 | font-size:16px;单位有：px,em |
| 字体类型 | font-family:"微软雅黑"（Microsoft YaHei）； |
| 字体样式 | font-style:(italic倾斜)(normal正常) |
| 字体粗细 | font-weight:(bold加粗)(normal正常) |
| 文本对齐 | text-align:(center居中)(left居左)(right居右) |
| 文本行高 | line-height:30px;(值和高度一样可以居中) |
| 文本缩进 | text-indent:2px;(单位：px,em) |
| 文本垂直对齐 | 仅限文本和行内块{vertical-align:top/middle/bottom} |
| 背景:颜色 背景图地址（） 不重复 位置 位置； 位置只要出现错误都会回到0 0 | background:yellow url(huiji.png) no-repeat 0px center;(没有顺序) |
| 边框：边框大小 实线、虚线、点画线 边框颜色 | border:1px solid实线/dashed虚线/dotted点画线 #ccc |
| a标签修饰 | text-decoration:none;(取消下划线) |
| 透明度 | opacity:0.5;chrome FF IE9+ filter:alpha(opacity:50);兼容低版本IE |
| 选择器中文描述 | 选择器代码 |
| 标签选择器 | div{width:100px;height:100px;} |
| id选择器<div id="div1"></div> | #div1{width:100px;height:100px; } |
| class类选择器<div class="div1"></div> | .div1{width:100px;height:100px; } |
| *通配选择器(选择document里面的所有) | *{padding:0,margin:0;} |
| ,群组选择器(逗号是“和”的意思) | div,p{width:100px;height:100px; } |
| 空格 嵌套选择器（某标签/类下面的标签/类） | div p{width:100px;height:100px; } |
| 伪类选择器:hover :active :visited :link | a标签以外的标签只能用hover和active |
!importent>行间>id>class>标签>*
如果两个优先级一样执行最最下面的代码
继承
和文字相关的样式都可以继承，a不能继承颜色，i和em不能继承斜体，b和strong不能继承加粗。
继承没有直接给的大
7.浮动
特性
1.脱离文档流
2.浮动有方向
3.块元素宽度尽可能的窄
4.行内元素会变成块元素
5.宽度不够会掉下来
6.尽可能的往上飘
7.文本环绕
三要素
1.用到浮动必须清浮动
2.同级元素浮动都需要浮动
3.浮动后最好给宽
清除浮动
overflow:hidden; 加给父级
不适合内容超出
clear:both; 同级元素最后添加空标签
left right both
clearFix:after（推荐） 加给父级的class
适用于各种情况
clearFix:after{ content:''; display:block; clear:both;}
clearFix{ zoom:1; } 兼容ie6 7
8.定位
定位 position
相对定位
relative
根据谁定位：根据自己
不脱离文档流
不会改变块元素
不会改变行内元素
大多数情况
1.为了子级定位，自己不脱离文档流
2.提升层级
绝对定位
absolute
脱离文档流（ 完全脱离）
根据定位父级定位，如果父级没有定位根据body定位
让块元素宽度尽可能的窄
行内元素变成块
left top right bottom
固定定位
fixed (不兼容IE6)
根据可视区定位
脱离文档流
会让块宽度尽可能的窄
行内变成块
层级
子级层级用永远高于父级层级
负值能实现子级比父级层级低，但是不允许用！
z-index
只对定位元素有效
定位>浮动>普通元素
后写的比先写的层级高
9.透明
opacity:0-1; chrome FF IE9+
filter:alpha(opacity:0-100); 兼容IE
父级透明子级跟着透明
自适应透明
给背景层的父级定位
给背景层定位，必须给宽100%高100%
文字提高层级
.box{width:500px;height:500px;position:relative;}
.div1{width:100%;height:100%;position:absolute;top:0;left:0;}
.bg{width:100%;height:100%;position:absolute;top:0;left:0; background:red;opacity:0.5;filter:alpha(opacity:50);}
p{position:relative;z-index:2;}
<div class="box">
<img src="1.jpg" alt="" />
<div class="div1">
<div class="bg"></div>
<p>文字文字</p>
</div>
</div>
10.背景图合并/雪碧图/css精灵
图片小于50k
好处
减少请求次数
加载速度快
坏处
不利于维护
11.表单
<form action="http://www.baidu.com" method="get">
<input type="text" name="usename" value="">
type 含义
text 文本框
password 密码框
submit 提交
radio 单选框
button 按钮
</form>
下拉框：select 元素可创建单选或多选菜单。
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<textarea>
1.所有浏览器都支持 <textarea>标签。
2.文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
3.可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
4.在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
</textarea>
<label for="id">id是对应的input的ID</label>
修饰
outline:none 取消焦点
resize:none 取消拖动 (textarea专用)
12.表格table
thead(可省略)
tbody
tfoot(可省略)
tr
td
th(可省略)
border-collapse:collapse;
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
合并/塌陷
colspan 横着 合并,把同一行的格子向右边挤出去一个(所以要删除同一行的td)
colspan=2;同一行删除1个
rowspan 竖着合并,把下面一行的格子挤出去一个(所以要删除掉下面一行的td)
rowspan=2;下一行删除1个
rowspan=3;下一行删除1个和下下行删除1个
rowspan=4;下一行删除1个和下下行删除1个和下下下行删除1个
以此类推一直往下删除
<style>
table{ border:1px solid red; border-collapse:collapse; }
td{ border:1px solid red; width:40px; height:20px; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td colspan="3"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员-html+css基础知识总结
- HTML+CSS基础知识整理总结2015.3.11
- html+css 基础知识大总结
- HTML/CSS基础知识总结
- HTML+CSS基础知识整理总结2015.3.9
- HTML`CSS_我用的过程中记下的基础知识总结
- HTML+CSS基础知识整理总结2015.3.10
- html基础知识总结
- CSS基础知识总结--《CSS权威指南》阅读笔记（一）
- “阿一web标准学堂”第5课：HTML和CSS基础知识(2)（附视频、课件、代码下载）
- HTML+CSS+JS基础知识
- HTML基础知识总结二
- 总结CSS基础知识【复习之一】
- 对CSS基础知识学习的一些总结
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
- CSS基础知识总结--《CSS权威指南》阅读笔记（二）
- HTML基础知识总结
- HTML基础知识总结
- HTML和CSS总结（基础版）
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM