常用的HTML5和CSS3标签及用法(入门篇)
一、HTML5
1.标签
HTML5本质上只是增加了一些语义化标签
只兼容高版本(ie9以上)浏览器
最有用的三个标签:video 视频
audio 音频
canvas 画图板,替代flash(操作上比较困难)
用处不大但很多时候又可以用到的一些标签:
header 头部
footer 尾部
nav 导航
aside 侧边栏
section 模块
2.表单里面新添加的一些html5属性
<form> <input type="email" /> 邮箱输入,自带错误提示(无法修改样式) <input type="color" /> 一个可以选择颜色的调色板
<input type="date" /> 年月日下拉框 (在手机上显示的时候,会有滑动的选择,很好看)
<input type="month" /> 选择月份下拉框 <input type="week" /> 周选择下拉框 <input type="url" /> URL <input type="tel" /> 调用手机数字键盘 <input type="search" /> 搜索(带个叉 可关
<input type="range" /> 拖拽条 <input type="number" max="10" min="0" /> 有条件范围的数字框 </form>
二、css3 (IE9以下不兼容 9部分兼容)
1、盒子阴影 box-shadow:x y blur(模糊度) spread(内扩充,相当于padding) color inset(内阴影);
例 box-shadow:100px 100px 0px 100px #f00; box-shadow:0px 0px 50px 0px #f00 inset;
2、文字阴影 text-shadow:x y blur color;
例 text-shadow:1px 1px 1px #000; div:hover{ text-shadow:1px 1px 1px #000; }
3、背景透明度 background:rgba(0,0,0,alpha)
opacity 会把子级也透明,rgba只把背景色透明,所以推荐使用rgba
opacity:0.1 透明度(ie8以上)
低版本浏览器写法:filter:alpha(opacity:50);
4、背景图大小 background-size : width height;
使用background-size,要不cover等比缩放,要不写死(会导致图片拉伸,变形),无法同时定义图片的宽高又让其等比缩放。
5、background:url(),url(); 多个背景图
div{ width:800px; height:600px; background:url(../img/2.jpg) no-repeat,url(../img/2.jpeg) no-repeat center; background-size:200px 200px; border:1px solid red; }
6、圆角 border-radius 可以使用像素也可以使用百分比
一个值:四个方向 两个值:左上右下 右上左下 三个值:左上 右上左下 右下 四个值:左上 右上 右下 左下(顺时针)
7、过渡 transition:1s 时间 样式(all 所有样式) 运动类型 写的值不分顺序
linear匀速 ease先加后减(缓冲) ease-in加速 ease-out减速
8、浏览器前缀
(transition会涉及到浏览器前缀)
-webkit- 谷歌浏览器
-moz- 火狐浏览器
-ms- IE浏览器
-o- 欧朋
9、渐变色
线性渐变background-image:-webkit-linear-gradient(方向left top,color起始颜色,color结束颜色);
重复渐变background-image:-webkit-repeating-linear-gradient(left top,clolr,color);
10、文字描边
-webkit-text-stroke:描边大小 color; -webkit-text-stroke:2px red;
11、css3动画:
animation:time时间,name名字,ease类型,infinite重复运动
@keyframes name{
to{}
from{}
0%{}
100%{}
}
1 <style> 2 @keyframes test{ 3 to{ left:300px; } 4 from{ left:0; } 5 } 6 div{ width:200px; height:200px; background:red; animation:test ease 1s infinite; position:absolute; left:0; top:0 } 7 </style>
1 <style> 2 @keyframes test{ 3 0%{ left:0px; } 4 50%{ top:200px; } 5 100%{ left:300px; } 6 } 7 div{ width:200px; height:200px; background:red; animation:test ease 1s infinite; position:absolute; left:0; top:0 } 8 </style>
12、倒影
-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,1))
below向下 above向上 left right
13、滤镜 -webkit-filter:blur(0px 模糊度);
14、变形
transform: translate(x,y) 移动px rotate() 旋转deg skew(x,y) 倾斜deg scale(x,y) 放大比例 transform:transform(x,y) rotate() skew(x,y) scale(x,y); 从后往前执行
转载于:https://www.cnblogs.com/cnyaokai/p/6631691.html
常用的HTML5和CSS3标签及用法(入门篇)相关推荐
- php中的ol标签,html5中ol标签的用法详解
这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下 定义和用法 标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异 在 HTML ...
- HTML5+app开发学习之快速入门篇
HTML5+app开发学习之快速入门篇 5+app开发概念理解相关 开发环境与支持 快速入门实战 5+app开发概念理解相关 见博文:学习跨平台移动应用开发必须理解的一些概念 开发环境与支持 开发环境 ...
- html5中ol的意思,详解HTML5中ol标签的用法
定义和用法 标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异 在 HTML 4.01 中,不赞成使用 "start" 属性,在 HTML 5 中是允许的. 在 ...
- tld自定义标签之基础入门篇
一.tld说明 tld,是taglib description 的缩写,其自定义标签一般用于jsp页面,tld其作用一般是在web项目中结 jstl.c标签等用于有效性判断.权限判断等方面,对前端的 ...
- 什么是HTML语义化标签?为什么要用H5语义化标签?HTML5语义化标签有哪些
对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标 ...
- php中 datalist,html5 datalist标签的用法是什么?这里有datalist标签的用法实例
本篇文章主要为大家讲述了关于html5 datalist标签的用法及html5 datalist标签的用法实例.本文说了两个常用的选项框的实例供大家选择观看,下面就让我们一起来看这篇文章吧 我们先来看 ...
- html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
- HTML5 列表、表格、常用表单、基本标签
学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签 掌握三种列表标签 掌握表格标签 掌握表格标签 掌握表单标签 掌握H5新增表单和表单属 ...
- html5才有的标签是什么意思,html5header标签是什么意思?html5header标签的用法详解(附实例)-...
本篇文章主要的向大家介绍了关于html5 header标签的元素的基本介绍,和header标签的用法实例解析.下面就让我们一起来看看这篇关于html5 header标签的文章吧 一.首先我们来说说ht ...
- html5比html4的音频使用方法,HTML5 audio标签的用法示例
您的位置:首页 - 教程 - HTML5 - 正文 HTML5 audio标签的用法示例 标签定义声音,比如音乐或其他音频流.html5 audio可以不用Flash插件就可以听音乐看视频,并不是全部 ...
最新文章
- TouchDesigner 编译FlexChop
- python与excel表格-如何用python处理excel表格
- 通过反射创建动态代理对象(二)
- 动态规划之----最长公共子序列
- (算法)Word Break
- 使用Weka进行数据挖掘
- (转载)将h.264视频流封装成flv格式文件(二.开始动手)http://blog.csdn.net/yeyumin89/article/details/7932431...
- VS中编辑器显示行号
- 网关Gateway的介绍与使用
- 关于ckeditor富文本编辑器上传图片返回“不正确的服务器响应”的解决方案
- Vue3.0 + typescript 高仿网易云音乐 WebApp
- windows安装Pillow报错找不到zlib
- SQL 常用基础语句
- [读论文]点云表面重建: SDF, TSDF, MLS, RBF
- 数据看板--日报、周报、月报
- 美国造出最大电视 4K电视262英寸超大屏
- 2000-2013年工企专利匹配数据库
- 5_异常_多线程_设计模式_IO流_网络编程_反射
- 【pwnable.kr】leg
- Vue-router中对path的误解和说明-path的正确理解。
热门文章
- 苹果macfcpx视频剪辑软件:Final Cut Pro X
- 快速切换Mac系统设置One Switch
- PDF to Word Document Converter for Mac(PDF格式转换必备)
- Hillstone设备管理-许可证安装
- FQDN(Fully qualified domain name)
- ASP.NET MVC:WebViewPage.cs
- MVC通过重写OnActionExecuting获取控制器,方法和域
- HBase原理-数据读取流程解析
- Impala ODBC 安装笔记
- nagios无法通过web访问