HTML CSS知识总结

HTML基本骨架

单表签

img input  br hr link meta         剩下的基本都是双标签

文字类的标签

h1-h6  数值越大字体越小                  段落标签p 

     字体     加粗 strong b       倾斜 i em(精灵图和字体图标等小装饰的内容 )    删除del  s   下划 ins  u

多媒体标签

   超链接             href是必写属性             

target属性     +_self 默认  当前标签页打开新的页面                 +_block  新建一个标签页打开新的页面

图像

           src属性是必写属性

title  鼠标悬停时提示显示文本   任何标签页都有这个属性

alt 图片无法加载时显示的替换文本

结构标签

列表

无序列表  ul li                                                 有序列表 ol li                                           自定义列表 dl  dd dt      

表格

定义表格  table  

属性 border边框       width 宽度     height高度       cellpadding 单元格边框和内容之间的距离     cellspacing  单元格和单元格之间的距离

align 控制整个表格的水平方向上的位置   left  默认值     center 居中   right 右

表格结构标签

caption 表格标题       thead表格头     tbody 表格体      tfoot 表格尾

基础标签

表格行  tr       单元格  td      表头单元格  th

合并单元格

rowspan  跨行合并         colspan 跨列合并

表单

form 表单域

input属性     

text 默认文本输入乱搞      password  密码框                      radio 单选按钮   多选一的效果需要设置相同的name属性    默认选中checked

checkbox 复选框   默认选中checked         submit  提交     reset  重置     button  按钮    file   文件上传

name 表单起的名字     单选按钮多选一的效果             value按钮类的表单文案   输入框类表单的默认值

checked  单选和复选框的默认选中                    disabled   禁止表单操作          maxlength限制输入最大值        placeholder 占位符

下拉选中项

select           option         默认选中   给option 添加selected

文本域

textarea                               禁止拖拽   resize:none;

lable      增大表单的响应面积

用户名 ：

用户名：         

CSS

基本选择器

标签选择器  标签名 {}        类选择器          .类名{}           id选择器   #id{}       通配符选择器*{}

复合选择器

后代选择器       选择器1  选择器2 {}                     子代选择器   选择器1>选bing'ji择器2{}                           并集选择器    选择器1选择器2 {}

连接伪类选择器

：link  未点击的链接          :visited  已访问过的链接         :hover    鼠标悬停                 ：active 鼠标按压不公开

focus选择器

input:focus {}    表单元素获取焦点时应用样式        可输入的时候即可获取焦点的状态

css的三大特性

层叠性                           相同选择器或者是相同权重的时候会发生样式重叠，后面设置的样式会覆盖前边设置的样式

继承性                       子元素会继承父元素的一些属性               颜色color     text-align    font相关    line-height    

                                        a标签不能继承颜色      h标签不能继承字体大小

优先级       统配和继承0   标签选择器 1     类选择器10    id选择器100        行内样式 1000

css三种引入方式

内部样式表

优点：机构和样式部分分离，方便阅读                        缺点：没有实现完全分离   可移植性，可复制性差

外部样式表：在html的head标签中利用link标签引入

优点：css样式独立存在，影响的范围比较广，整个站点都受影响，css与html结构实现完全分离

行内样式表

优点：无需写选择器，权重高                  缺点：后续维护性差，没有实现结构样式分离

文字的样式

font-family 字体系列字体家族     默认微软雅黑                                   font-size 字体大小   默认16px

font-weight 字体粗细     400   normal  正常字体          700      bold 加粗字体             font-style字体倾斜       normal 正常字体       italic倾斜字体

font连写属性     font：倾斜    加粗    大小/行高    系列         必写大小和系列    顺序不能调换

文本的样式

行内元素与行内块元素的水平对齐方式          text-align      left     center     right 

行高   line-height         文本修饰线  text-decoration          none去点文本修饰线     underline下划线       line-through删除线

首行缩进     text-indent              text-indent:2em;  首行缩进2个字符

阴影

text-shadow 文字阴影       实际开发写法   text-shadow:0 0 0   #000; 打开控制台进行调试  

box-shadow 盒子阴影      同理     

背景        

背景颜色 background-color          背景图片 background -image:url()

背景平铺 background-repeat   no-repeat 不平铺      背景位置  background-position  x y   

背景附着   background-attachment    scroll 默认 背景虽滚动条滚动而滚动       fixed  背景不随着滚动条滚动而滚动

盒子模型:content内容    padding内边距   border 边框   margin  外边距组成

相邻嵌套垂直方向上的外边距会发生塌陷          

解决方法      父元素设置overflow:hidden;    父元素设置边框       父元素设置padding

border:1px(线的宽度)     solid(实线)    #000(颜色) ;                dashed虚线     dotted点线

圆角边框  border-radius   圆形 border-radius：50%；     胶囊形：border-radius:高度的一半

元素的显示模式

行内元素  display:inline;      

a span lable  strong del em u i s b   

特点：不能设置宽高     在一行显示    默认宽高有内容撑开

行内块元素   display:inline-block;

button input select textarea img                   特点：设置宽高     在一显示行    

块级元素 display:block;

div h1 p table ul li     特点：设置宽高  独占一行   默认宽度和父元素等宽

元素隐藏

display:none;隐藏占位置    display:block;显示                 visibility：hidden;  隐藏占位置       visibility:visible;显示    

溢出隐藏

浮动

float   left  right

特点  浮动的元素脱离标准流   不占位置           浮动的元素会贴顶对齐显示 

浮动的元素具有行内块元素类似的特性         一般一个元素浮动了其余的兄弟也要浮动

本质           初衷解决文本绕图的问题                   浮动元素不会压住标准流的文字

清除浮动的影响

定位

静态定位    position:static

相对定位     position:relative;

参考自身原来的位置进行移动          占位置     不脱标

绝对定位   position:absolute;

1没有父元素或者父元素无定位就参考浏览器进行移动              2参考最近一层有定位的父辈元素进行移动 

固定定位 position:fixed; 

参考浏览器可视窗口进行移动，不随着滚动条的滚动而滚动

粘性定位  position:sticky;

网页布局

字体图标

光标样式

cursor           

default 默认小白箭头      pointer 可以点击的小手

not-allowed 禁止符号     配合表单元素一起使用+disabled这个禁止表单操作的属性  

wait  等待  圆圈不停的转动