H5新增的标签以及改良的标签
1》OL标签的改良 start type reversed:翻转排序
2》datalist标签自动补全的使用
3》progress标签的使用:进度条
4》meter标签的应用
5》details展开收缩标签的使用-子标签summary(自动带有展开收缩的效果)
6》mark标签的应用:高亮显示文本
7》音频标签 audio
8》视频标签 video
补充样式:
outline:轮廓
同border,但是border占位置
outline不占位置
outline-offset:10px/-10px;//设置偏移量 可实现(内外边框)
..canvas绘图:
1)canvas:画布
<canvas id="canvas"></canvas>
2)得到画布
<script type="text/javascript">
var obj = document.getElementById('canvas');
</script>
3)设置画布大小(默认宽:300 高:150)
obj.width = "600px";
obj.height = "600px";
4)确定绘制对象的方式:2d
var context = obj.getContext('2d');
5)重新绘制
context.beginPath();
6)闭合绘制路径
context.closePath();
----------直线/矩形/圆/文字------------
7)直线(起点/终点)
<script type="text/javascript">
context.moveTo(x,y);//起点 X坐标,Y坐标
context.lineTo(x, y)//终点 X坐标,Y坐标
context.lineWidth = 5;//边框的粗细
context.strokeStyle = "red";//描边的颜色
context.stroke();//进行绘制
/*画折线:多几个lineTo()*/
</script>
8)矩形(起始坐标,宽 高)
<script type="text/javascript">
context.rect(x, y, w, h);//X坐标 Y坐标 宽 高
context.stroke();//空心矩形 只有黑色描边
context.fill();//实心矩形 黑色填充
//直接绘制空心矩形
context.strokeRect(x, y, w, h);//绘制空心矩形
//直接绘制实心矩形
context.fillRect(x, y, w, h);//绘制实心矩形
</script>
9)圆形(起始坐标,半径,圆周(0-Math.PI*2))
<script type="text/javascript">
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
//X坐标,Y坐标,半径,起点,终点,方向(顺:false 逆:true)默认false
context.stroke();
context.fill();
</script>
10)绘制文字
<script type="text/javascript">
//绘制文字
context.text('some text');
//绘制描边文字
context.strokeText(text, x, y[, maxWidth])
//绘制填充文字
context.fillText(text, x, y[, maxWidth])
//属性
//font - 类似于css的font属性
context.font = "15px 宋体 bold";
//对齐方式 left center right
context.textAlign = "left|center|right";
//垂直对齐方式 textBaseline
//top
//middle
//bottom
//alphabetic ---字母基线对齐
/* 验证码图片 干扰:线 点 文字(字母+数字) 颜色随机性*/
</script>
转载于:https://www.cnblogs.com/everythingcw/p/9755052.html
H5新增的标签以及改良的标签相关推荐
- h5比html新增加的标签,H5新增的标签以及改良的标签
1>ol标签的改良start type reversed:翻转排序 2>datalist标签自动补全的使用 3>progress标签的使用:进度条 4>meter标签的应用 ...
- H5新增的标签和属性
声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:"这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接." Web语义化有三个阶段: 1.h1~h6.t ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- (12)H5新增语义化标签布局案例
一.标签语义化 以前制作网页布局,我们基本用div来做.div就是一个普通的块级标签,对于搜索引擎来说,是没有语义的. <!DOCTYPE html> <html lang=&quo ...
- 前端H5新增标签和CSS3高级
文章目录 一.CSS3高级技巧 1.精灵图 2.字体图标 3.CSS中的三角 3.CSS用户界面样式 4.vertical-align属性应用 5.溢出的文字省略号显示 6.常见布局技巧 6.CSS初 ...
- html标签:表格、列表、图片、文字、表单、以及h5新增特性
文章目录 前言 一.表格 二.列表 三.图片 四.文字 五.表单 六.h5新增特性 1.语义化标签 2.表单新增input属性 3.datalist 4.filedset 5.mark标记标签 6.多 ...
- H5新增标签以及常用标签
H5新增标签 以下是一些常用的标签 1.结构标签 (1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节.页眉.页脚或页眉的其他部分: (2)article:特殊独立 ...
- h5新增标签和表单属性
一.h5新增结构性标签(有意义的div) 1.header 定义网页的头部 2.nav 定义网页的导航部分 3.section 定义网页的某个区域 4.footer 定义网页的底部 5.article ...
最新文章
- react前端封装接口弹出错误_在react项目中用es6封装ajax请求,组件中调用总是报错,求解?...
- 快速排序及优化(Java实现)
- python框架django面试问别人什么问你_django面试会问什么
- PHP魔法函数性能分析
- flyway配置mysql_Flyway快速上手教程
- bzoj 4709: [Jsoi2011]柠檬(分段DP+决策单调性)
- java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载
- excel根据数据得出公式
- AI产品经理的前世今生
- Git Windows下配置Merge工具DiffMerge
- OneNote for win10 无法加载笔记本
- 美国高等教育信息素养能力标准
- 【保姆级教程,100%成功】MAC OS打开ntfs格式U盘
- 企业微信第三方服务商和钉钉ISV开发对比
- ruoyi框架分页总条数total返回错误解决方案
- osgEarth指北针
- Java程序设计(一)
- Winform基础入门(一)
- Jetson Nano——使用JetCam官方库调用双CSI摄像头
- BZOJ 1933 [Shoi2007]Bookcase 书柜的尺寸