html基础

来源：互联网发布：js在线解压缩工具下载编辑：程序博客网时间：2024/05/24 06:57

1，html5新特性

常用语义化标签：nav footer header section mark hgroup article aside

功能标签：video audio iframe canvas(画布)

input的type：url/number/range/date/search/color

2，

1css3:边框

border－radius:边框弧度

box-shaw:10px 10px 阴影面积颜色

border-image:边框图片

border-image-source;图片路径

border-image-slice:向内偏移

border-image－width:图片边框的宽度；

border-imager－outset：超出边框的量

border－image－repeat：图片是否平铺；

IE9+支持border－radius和box-shadow

ie11+firefox,opera15,chrome,以及safari6以上支持border－image

2，文本：text－shadow：10px 10px 阴影面积颜色

3，＃font－face

4，动画

transform:translate(平移) rotate（旋转）scale（缩放）skew（侧切）matrix（矩阵）

备注：兼容 IE10，firefox，opera，支持transform实现

chrome和safari需要－webkit

ie9需要前缀－ms－

5，3D

transform－origin：切换几点

transform－style：切换视觉效果

persepective：透视点，景深

6，过度

备注：IE10，firefox chrome以及opera都支持

safari：需要备注－webkit

transition：

transition－property：过度的属性名（all）

transition－duretion：过度时间

＊＊transition－timing－function：过度方式（ease）

transition－delay：延迟

7，帧动画

@keyframes name｛

form｛｝

to｛｝

｝

8，响应式：1，流式布局

2，媒体查询

margin：按宽度百分比

border：不能看百分比怪异盒模型 box－sizing

1，<!DOCTYPE html>版本声明

如果不写，ie6以下会出现怪异得情况。

2，盒模型：margin+border+padding+content

可视区域：border＋padding＋content

怪异盒模型：margin＋content（移动端）

css3中有一个属性会进入怪异盒模型。

3，标签

双标签：两个标签中可以嵌套

单标签：里面不需要嵌套内容

标签类型：块标签，独占一行可以设置宽高margin，宽度默认100%，

行标签，可以共用一行，默认内容撑开宽高，不能设置margin－top的值

img，input：可以共用一行，默认内容撑开宽高，并且可以设置宽高，居中Text－aglin＝center。

定位／浮动元素：脱离文本流，可以共用一行，默认内容撑开宽高，并且可以设置宽高，定义父级居中。

4，table collspacing：单元格合并间距，colspan：合并列 rowspan：行合并

6，表单元素

form input：上传地址 method：上传方式 get 上传速度跨 post不安全

input（type必填） text：文本输入框，password：密码输入框， number：数字输入框 button：按钮（value也要）submit：提交按钮 reset：重置按钮

checkbox：复选框 radio：单选框 select：下拉列表 texrarea：文本域

7，diplay none消失，不占内容 inline：转换成行标签 block：转化成行标签 table：表格类型，

8，float：让元素脱离文本流 1，对兄弟造成影响 2，clear left righ both

2，父级也起飞（浮动）2，overflow：hidden 3，加一个空标签然后给空标签 cler both

浮动以后的元素叫浮动元素，和浮动性质相同

浮动通常用于左右布局，

9，定位 posisition 相对定位：rel（元素文本没有脱离文本流）绝对定位 ab 只能在父级 fixe的：相对与窗口定位（nav，广告）

static 默认值用途，用于页面重叠 z－index ：z轴

css引入： 1，外部引入

2，头部引入

3，标签内引入

4，@import

css选择器：通配符 id class 标签，群组，后代，伪类

0 0