其他分享
首页 > 其他分享> > html学习之html5新标签

html学习之html5新标签

作者:互联网

html5新标签

2. 新的语义结构元素

标签名display说明
article block 定义文档中的文章。没有特殊样式
aside block 定义与所处内容之外的内容,但由于当前内容相关。常用于设置侧边菜单栏
dialog block 默认情况下display:none,可以通过open属性控制显示与否。绝对定位
figure block 定义文档中的插图等。有左右和上下外边距
figcaption block 定义<figure>的标题
footer block 定义文档或者节的页脚
header block 定义文档或者节的页眉
main block 定义文档的主要内容
section block 定义文档中的节
mark inline 定义重要或者强调的内容。会呈现:rgb(255, 255, 0)的背景颜色
nav block 定义文档内的导航链接
wbr inline 规定文档的何处适合添加换行符。适合单词太长不知道在哪里该断行的情况。ie12+以上支持
time inline 目前所有主流浏览器均不支持。给用户代理看的,同时有助于搜索引擎生成更智能的搜索结果
     
     
     

以上标签:

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 均支持

Internet Explorer 8 以及更早的版本不支持 <aside> 标签。

如有特殊情况,会在说明里描述

3. datalist

配合input标签使用,表示输入框可能的值.datalist及其选项不会被显示出来,他仅仅是合法值的输入列表。请用input元素的list属性绑定datalist

<input id="myCar" list="cars" />
<datalist id="cars">
 <option value="BMW">
 <option value="Ford">
 <option value="Volvo">
</datalist>

 

4. details

用于描述文档或者文档某个部分的细节,块级元素。配合<summary>使用(display: list-item)。后者定义文档描述,是可见的,点击后者可以切换datails的是否可见。浏览器支持情况请看官网。

<!--通过open属性定义details的是否可见-->
<details open="true">
 <summary>Copyright 2011.</summary>
 <p>All pages and graphics on this web site are the property of W3School.</p>
</details>

 

 

5. meter

定义已知范围或者分数值内的标量测量。也被称为尺度display:inline-block

属性说明
form 规定<meter>所属的一个或者多个表单
low 当value值低于最低值时,填充部分的颜色就会变成黄色
high 当value值高于最高值时,填充部分的颜色就会变成黄色
max 规定度量上限,如果没有规定则默认为1。必须和min属性一起使用。max必须大于min
min 规定度量下限,如果没有规定则默认为0。必须和max属性一起使用
optimum 规定最佳值

                                                

 

 

<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

ie13+ 才支持这个标签,对于不支持这个标签的浏览器,就会显示标签里面的内容。

 

 

6. progress标签

用于表示任务进度

属性说明
max 最大值
value 当前任务进度

可以通过js控制进度条的进度

<progress id="progress" value="22" max="100"></progress>

<script>
 let progress = document.getElementById('progress')
 setInterval(() => {
   progress.value += 1
  }, 50)
</script>

       

ie10+浏览器才支持这个标签

<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。

 

7. ruby

定义ruby注释(中文注音)。配合 <rt> 标签一同使用

     

 

 

<rp>:在不支持<ruby>的浏览器中使用

 

8. canvas

简单介绍:canvas是一个可以用js在其中绘制图形的html5元素。

注意:

  1. canvas不支持ie9一下的浏览器

  2. display: inline

  3. canvas的默认宽高是 300*150

  4. 宽高设置的问题:如果在style中设置宽高,相当于将整个画布(包括画布中的内容)进行放大和缩小,并且可能会使画布内容变得模糊;要单纯的设置画布的宽高请用属性widthheight。或者在js中使用canvas.widthcanvas.height

  <canvas id="myCanvas" width="200" height="100"></canvas>

在js中获取canvas对象,并创建context对象

 var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d")

getContext()接受一个参数2d表明创建一个2d图像模型,不能写成2D.目前只有2d这一种参数类型

创建矩形

// 四个参数分别代表:起始x坐标、起始y坐标、矩形宽、矩形高
cxt.fillRect(0, 10, 140, 75);

绘制圆形

// cxt.arc(20, 20, 20, 0, Math.PI[, false]); // 平口向上的半圆
   cxt.arc(20, 20, 20, 0, Math.PI, true); // 平口向下的半圆

五个参数分别代表: 圆心的x/y坐标、半径、起始弧度,结束弧度,旋转方向

旋转方向:可选参数。起始弧度到结束弧度画弧线,是顺绘制还是逆时针绘制。默认顺时针false;true时为逆时针。

起始/结束弧度:以圆心的轴,水平向左一个半径长度为0°;Math.PI表示180°

     

 

绘制文本:

// 字体样式设置顺序:字体样式(比如斜体字)、字体大小、粗细、famil
 // 最简形式: '50px Arial'。字体大小不能放在最后
cxt.font = 'Italic 50px bold Arial'
cxt.textAlign = 'left' // 对齐方式。这个对其方式是指起始坐标是对齐文字左边、右边还是中间
cxt.textBaseline = 'middle' // 文字垂直方向对其方式
// 三个参数: 文本内容、起始位置x坐标,起始位置y坐标, 最大宽度(选填,当宽度变小,文字不会换行,而是压缩文字)
ctxf.fillStyle = "pink"  // 定义填充文本的颜色,对描边文本不起作用
cxt.fillText('Hello World!', 0, 10 [,maxWidth]) // 定义填充文本
cxt.strokeText('Hello World!', 0, 10 [,maxWidth]) // 定义描边文本

绘制文本的能力比较弱:不能换行之类的。不建议通过这个对文本做太多样式设置

绘制线条:

cxt1.beginPath()
cxt1.moveTo(20, 10);
// 定义线条结束坐标或者转折点
cxt1.lineTo(150, 40);
cxt1.lineTo(10, 50);
// cxt1.closePath() 有这一行代码,上面的两条线会闭合形成一个三角形;下面的一条线会从起始位置开始绘制。如下面右边的截图
cxt1.lineTo(190, 60);
// 结束线条的绘制
cxt1.stroke();

  

绘制图形和视频

  var img = new Image()
 img.src = '../images/297888.jpg' // 设置图片路径
 //图片加载完后,将其显示在canvas中
 img.onload = function () {
   // ctx.drawImage(this, 0, 0)
   // 第一个参数是要插入的图片;第二个和第三个参数分别是图片要插入的起始x\y坐标。这三个参数是必填的
   ctx.drawImage(this, 10, 7) // 此时图片就会以其默认的大小被绘制到容器中
     // 地四个和第五个参数分别是图片的宽、高。宽高比例和原图不一样会导致图片变形
  // ctx.drawImage(this, 10, 7, 200, 100) //改变图片大小到1080*980
}

 

颜色样式:

  1. 颜色

    • fillStyle: 既可以是css颜色值,也可以赋值一个渐变对象。下面的案例中是给一个矩形添加渐变色填充

      var grd=cxt.createRadialGradient(75,50,5,90,60,100); // 绘制径向渐变
      // 规定什么位置什么颜色
      grd.addColorStop(0, "#FF0000");
      // grd.addColorStop(0.5,"#00FF00");
      grd.addColorStop(0.5, "pink");
      grd.addColorStop(1, "#0000FF");
      cxt.fillStyle = grd;
      cxt.fillRect(0, 0, 175, 50);
    • strokeStyle: 定义描边颜色

  2. 透明度

    • globalAlpha: 定义容器内内容的不透明度。容器的不透明度不受影响

  3. 线形设置

    • lineWidth: 线宽

    • lineCap: 线条两端样式。btt:默认值;round:圆形;square:方形。第一个值不会增加线条长度,后面两个值会增加。

    • lineJoin: 两条线交汇处的线条样式。mitter:默认方型;round:圆形;bevel:菱形;

  4. 渐变:

    • 创建渐变对象


      // var grd=cxt.createRadialGradient(75,50,5,90,60,100); // 绘制径向渐变
      // 四个参数分别是:
      var grd = cxt4.createLinearGradient(0, 0, 175, 50); // 线性渐变
    • 设置渐变点

      grd.addColorStop(0, "#FF0000");
      grd.addColorStop(0.5, "pink");
      grd.addColorStop(1, "#0000FF");
    • 将渐变样式添加到容器上

      xt4.fillStyle = grd;
    • 绘制想要应用渐变 的图形

  5. 阴影:

    cxt.shadowOffsetX = num  //水平偏移
    cxt.shadowOffsetY = num  //垂直偏移
    cxt.shadowBlur = num // 模糊度
    cxt.shadowColor = 'color' // 阴影颜色

变换:平移、旋转、缩放

 

 

疑问:

  1. 如果想在一个canvas上画多个图形,他们的填充和描边颜色都不一样?

    下一个颜色不会影响上一个已经绘制的图形的颜色:可以理解为画完一个图形后,换画笔再画另一个图形,这并不影响上一个已经画好的图形

    cxt.fillStyle = 'green'
    cxt.fillRect(0, 0, 50, 50)
    cxt.fillStyle = 'blue'
    cxt.fillRect(50, 50, 50, 50)

标签:cxt,标签,50,grd,html,html5,fillRect,绘制
来源: https://www.cnblogs.com/lovlyGir/p/14882438.html