html+css基础知识总结

时间:2021-04-17 20:31:08
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下路径正确或错误都显示的提示文字
块标签特性 :            独占一行            支持宽高            默认父级宽度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:inline;         转行内 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
   
 
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
选择器的优先级和权重 !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>