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> | |
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 |
6.选择器
选择器中文描述 | 选择器代码 |
标签选择器 | 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 |
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>