HTML&CSS基础知识

HTML(页面结构)

什么叫HTML?
    超文本标记语言
标记分两种：单标记 双标记
标记的特点：要闭合 大小写不敏感 有属性
单标记语法 <标记名 属性名="属性值"/>
双标记语法 <前标记名 属性名="属性值">后标记名>

html模板
1：版本控制
2：html文档区域
3：文档包含头部(head)和身体(body)
4：头部包含编码格式(meta utf-8)和标题（title）

<div>div> div标签是区域的意思也有盒子的概念 双标记 块级标签 独立一行
<span>span> span标签也是区域的意思也有盒子的概念 双标记 行级标签 可以和其他行级标签并排

常用标签

段落: 
 块级
    p标签不可以嵌套div,最好不嵌套其他的块级标签
标题标签: h1~h6 双标签 块级标签
    h1最好只出现一次 用于网页的logo部分
    h2 常用于二级标题 也就是子模块的标题部分
    h4~h6 不常用的
列表标签:
    有序列表 组合标签 双标签 块级 ol li
    无序列表 组合标签 双标签 块级 ul li
    自定义列表 字典列表 双标签 块级 dl dt dd
    列表修饰：list-style-type: 符号... | none;
图片标签: 
    图片标签 单标签 比较特殊 可以设置尺寸 有行级标签的特点
    src="" 指定引入的图片的地址
    alt="" 图片内容的描述 必须的 描述的准确
超链接标签: 
    a 行级标签
    href="" 指定标签跳转的地址
    target="_blank | _self" 指定链接跳转的方式
a标签的四种状态:
    1.默认状态:link
    2.访问过的状态:visited
    3.悬浮的状态:hover
    4.点击按住没有松开的状态:active

table表格

简单的HTML表格由table元素以及一个或多个tr、th 或td元素组成。
tr元素定义表格行,th元素定义表头,td 元素定义表格单元
cellspacing:单元格之间的间距
cellpadding:单元格内边距
合并边框:
    border-collapse: collapse 合并 | separate 不合并
不合并边框的时候,可以让空的单元格隐藏掉
    empty-cells: hide;
改变表格垂直居中方式:
    vertical-align:top middle bottom

from表单

"" method="GET">
    action 表单提交的服务器接口
    method 表单提交的方式 默认是GET 一般用POST

输入框: "username" type="text" placeholder="请输入用户名" value="baidu" name="username">
    placeholder 占位符 给用户提示
    value 最终要发送给服务器的值
    name 给服务器值的时候标识这个值是什么值(如身高/体重/姓名等)

单选框: type="radio" name="gender" value="nv">

上传文件: type="file" multiple>
    multiple 可以上传多个文件

按钮: type="button" value="我是一个按钮">

隐藏属性: type="hidden" name="type" value="mac">
    如果想要收集一些不需要用户填写的信息 可以使用hidden类型input

提交信息的按钮: type="submit" value="注册">

清空表单信息: type="reset" value="重置">

css(层叠样式表单)

css语法:
样式名称:样式值;

常用css引入方式:
    1.行间 style属性
    2.内部样式表 style标签
    3.外部样式表 link 可以引入多个样式表

选择器

基础选择器-id选择器
    写法:#id名称{}
    特点:唯一性
    优点:可以逐个控制标记 互相样式不影响
    缺点:唯一性 冗余代码多
基础选择器-类选择器
    写法:.class名称{}(一个标记可以起多个class名,建议不超过7个)
    优点:可以减少代码冗余,把相同样式的标记总结在一起
    缺点:会略微的破坏html结构
基础选择器-标签选择器
    写法:tags{}
    优点:不需要给标签起名称(打标记),保证标签的纯净性
    缺点:样式影响面太广,容易干扰其他标签
基础选择器-后代选择器
    写法:最高代 下一代 ...子代(中间用空格隔开)
    优点:功能强大

选择器优先级:(优先级即相同选择器 样式冲突的情况下 后面覆盖前面)
    style行间样式 > id选择器 > 类选择器 > 标签(名)选择器
1.标签(名)选择器优先级是1
2.类选择器的优先级是10
3.id选择器的优先级是100
4.style行间样式的优先级是1000

css常用样式

文本:
    文本颜色 color:颜色值;
    文本位置 text-align:left(靠左对齐，默认) | right(靠右对齐) | center(居中对齐);
    字号大小 font-size:;单位是px
    文本修饰 text-decoration:underline(下划线)| line-through(中划线)

尺寸:
    尺寸样式块级标签支持 行级标签不支持
    width:样式标签的宽度 单位是px
    height:样式标签的高度 单位是px

边框样式:
    border: 给当前标记设置边界(默认上下左右)
    border-left:   给当前标记设置左边界 
    border-right:  给当前标记设置右边界 
    border-top:    给当前标记设置上边界 
    border-bottom: 给当前标记设置下边界

    border-width: 给当前标记设置边界粗细
    border-left-width: 给当前标记设置左边界粗细
    border-right-width: 给当前标记设置右边界粗细
    border-top-width: 给当前标记设置上边界粗细
    border-bottom-width: 给当前标记设置下边界粗细

    border-color: 给当前标记设置边界颜色
    border-left-color: 给当前标记设置左边界颜色
    border-right-color: 给当前标记设置右边界颜色
    border-top-color: 给当前标记设置上边界颜色
    border-bottom-color: 给当前标记设置下边界颜色

    border-style: 给当前标记设置边界的类型
                solid 实现
                dotted 点状线
                dashed 虚线
    border-left-style: 给当前标记设置左边界的类型
    border-right-style: 给当前标记设置右边界的类型
    border-top-style: 给当前标记设置上边界的类型
    border-bottom-style: 给当前标记设置下边界的类型

    组合写法:
    border: border-width border-color border-style;

背景样式:
    背景样式 background
    背景颜色 background-color:颜色值;
    背景图片 background-image:url("图片路径");
    背景图片平铺 background-repeat: repeat-x(沿着x轴平铺) | repeat-y(沿着Y轴平铺) | no-repeat(不平铺);
    背景图片定位 background-position: x y;
        x轴：支持left center right 支持百分比
        y轴：支持top center bottom 支持百分比
    背景图片尺寸 background-size: x y | cover |contain;

background 复合写法:
    background: background-color background-image background-position/ background-size background-repeat

外边距:
    外边距 margin
    左边距 margin-left:数值 | auto
    右边距 margin-right:数值 | auto
    上边距 margin-top
    下边距 margin-bottom

外边距 复合写法:
    1.margin: 0px(上) 0px(右) 0px(下) 0px(左)
    2.margin: 0px(上) 0px(左右) 0px(下)
    3.margin: 0px(上下边距) 0px(左右边距)
    4.margin: 0px (上下左右边距都是0px)

外边距的坑:
    1.同级结构下，外边距冲突的情况下，谁的数值大，就采用谁的
    2.父子结构下，父级与子级存在都设置上边距的情况下，父级没有设置border,子级的外边距会引出"塌陷的"问题

内边距:
    内边距 padding
    左内距 padding-left:数值
    右内距 padding-right:数值
    上内距 padding-top
    下内距 padding-bottom
内边距 复合写法:
    1.padding: 0px(上) 0px(右) 0px(下) 0px(左)
    2.padding: 0px(上) 0px(左右) 0px(下)
    3.padding: 0px(上下边距) 0px(左右边距)
    4.padding: 0px (上下左右边距都是0px)

浮动:
    浮动布局 float:left | right | none
    清除浮动 clear:left | right | both
    clear的使用要点：
        1.只能清除同级标签的浮动影响
        2.只能清除既是同级又在它上面的标签的浮动影响
    浮动会造成的问题:
        父级元素没有设置高度的情况下，会造成高度"塌陷"

文档流：标签在浏览器里面按照特性，从上到下，从左向右排列的一个顺序。
脱离文档流：让元素在文档流里面飞起来。不再占用原来的空间。
只有定位的元素才能使用:left top bottom right
对于定位的元素才可以使用:z-index
        z-index值越大，位置越靠前
        z-index可以是负值， 负值的情况下比正常元素靠后
        z-index > 浮动 > 正常的块级元素
定位:
    position: static; 默认值 不定位

    position: relative;相对定位 相对于自身的位置去移动 
        不脱离文档流 还占用原来的位置
    position: relative;绝对定位 相对于定位父级去定位
        如果父级只是作为定位父级使用 只需要使用relative即可
        绝对定位相对于带有postion属性(不包括static)的父级定位
        如果父级没有postion属性，就去找父父级直到html 如果html也没有position就相对于document窗口定位
        绝对定位会脱离文档流
    position: fixed; 固定定位  相对于窗口的位置始终不变
    left: 0; 设置元素在距离窗口左边为0的地方
    bottom: 0; 设置元素在距离窗口下边为0的地方
    固定定位会脱离文档流

过渡:
    过渡时间 transition-duration
    过渡属性 transition-property 默认是all
    过渡的运动方式 transition-timing-function
        linear    匀速
        ease-in   变快
        ease-out  变慢
        ease-in-out 先快再慢
    过渡延时 transition-delay
复合写法:
    transition: transition-property  transition-duration transition-timing-function transition-delay;

2D形变:
    旋转: transform:rotate
    平移: transform:translate
    缩放: transform:scale
    倾斜: transform:skew