关键词：

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中设置宽高，相当于将整个画布（包括画布中的内容）进行放大和缩小，并且可能会使画布内容变得模糊；要单纯的设置画布的宽高请用属性width和height。或者在js中使用canvas.width和canvas.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
  

• 制作图像切片 还没搞明白

  // 插入的图片、原图x/y坐标、原图宽/高、切片x/y坐标、切片宽/高
  ctx.drawImage(img, 10, 7, 100, 500, 0, 0, 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\' // 阴影颜色

变换：平移、旋转、缩放

• 平移: 简单的讲解了保存和清除画布状态

  // 当使用canvas对象时，没有代码提示，可以在代码开头添加下面一行代码
      /** @type HTMLCanvasElement */
      // canvas里面的距离不用带单位，直接用数值就可以了
      var myCanvas = document.getElementById(\'myCanvas\')
      var cw = 400
      var ch = 400
      myCanvas.width = cw
      myCanvas.height = cw
      var cxt = myCanvas.getContext(\'2d\')
      
      
      // 绘图
      cxt.fillStyle = \'pink\'
      cxt.fillRect(100, 100, 100, 100)
  ​
      // 保变换之前的状态 -- 除了坐标轴外.
        // 除了状态外，还有什么被保存了？
      cxt.save()
      cxt.translate(-50, -50) // 将容器的坐标轴整体向上、向左各移动了50个像素。之后绘制的所有图形都会受影响
      cxt.fillStyle = \'green\' // 设置颜色不会影响之前已经绘制的图形的颜色
      cxt.fillRect(50, 50, 50, 50)
      cxt.fillRect(250, 250, 50, 50)
  ​
      // 清除画布：画布坐标状态恢复到之前保存的状态
        // 四个参数：画布平移之后的 起始x/y坐标，结束x/y坐标。
          // 这个坐标范围内（矩形）绘制的图形都会被重绘，清除.包括一下几种情况
             // 1. 变换之前绘制的图形
             // 2. 变换之后绘制的图形
             // 3. 图形的一部分包含在范围内，包含在范围内的部分被清楚，之外的部分不被清楚
             // 4. 清除不会清楚后面设置的颜色
      cxt.clearRect(0, 0, 250, 250)
      cxt.fillRect(300, 300, 50, 50)

• 旋转：

  cxt.rotate(20*Math.PI/180)
  cxt.fillRect(0, 0, 50, 50)
  cxt.fillRect(50, 50, 50, 50)

  

  注意点： 旋转是以坐标轴的（0，0）坐标为轴心，顺时针旋转

• 缩放

  cxt.fillRect(0, 0, 50, 50)
  cxt.fillRect(50, 50, 50, 50)
  // 两个参数： x轴放大或者缩小的倍数、y轴放大或者缩小的倍数
  // 这个放大和缩小和前面两个一样，都是针对坐标轴的
  // 不仅图形的高会被放大一倍；它的起始y坐标也会被放大一倍
  cxt.scale(1,2)
  cxt.fillRect(100, 100, 50, 50)

  两个参数： x轴放大或者缩小的倍数、y轴放大或者缩小的倍数

  这个放大和缩小和前面两个一样，都是针对坐标轴的

  不仅图形的高会被放大一倍；它的起始y坐标也会被放大一倍

  

 

 

疑问：

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

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

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

html学习之radio标签——小白

<divclass="form-style-agile"style="color:white;"><inputtype="radio"name="userrole"value="管理员"/>管理员<inputtype="radio"name="userrole"value="用户"checked="checked"/>用户</div>这段代码是今天觉 查看详情

vagrant的学习之打包分发(代码片段)

vagrant的学习之打包分发 一、打包Box：（1）关闭虚拟机。vagranthalt（2）打包：vagrantpackage这样打包出来的文件叫package.box。指定生成的包名字：vagrantpackage--outputubuntu.box二、升级Box：老用户，可以修改Vagrantfile文件，新用户，... 查看详情

pgl图学习之基于gnn模型新冠疫苗任务[系列九](代码片段)

PGL图学习之基于GNN模型新冠疫苗任务[系列九]项目链接：https://aistudio.baidu.com/aistudio/projectdetail/5123296?contributionType=1#加载一些需要用到的模块，设置随机数importjsonimportrandomimportnumpyasnpimportpandasaspdimpor 查看详情

前端学习之html5

一、文本与段落标记<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>文本与段落标记</title></head><body><h1>欢迎来到HTML5</h1><br><hrwidth= 查看详情

html学习之——标签语义化

 html语义化在前端学习中会经常出现，下面对html语义化做个总结一、什么是HTML语义化HTML语义化总的来说就是用正确的标签做正确的事。围绕着一些标签展开，如h1-h6。把适当的标签用在合适的地方。是页面结构更加的清晰。... 查看详情

html5新标签(代码片段)

Html5新增语义结构标签section元素 表示页面中的一个区块article元素：表示一块与上下文无关的独立内容aside元素在article之外的，与article内容相关的辅助信息header元素表示页面中一个内容区块或整个页面的标题footer元素 ... 查看详情

reactnative学习之html基本标签使用

前言： 前面简单学习了html简单标签的使用，今天学习一下其他的标签的使用。HTML的超链接1.）创建一个超链接<div><p><ahref="http://www.baidu.com"target="_blank">点击我跳转至百度</a></p></div>2.）将一个图片... 查看详情

系统学习机器学习之总结--多标签分类问题(代码片段)

前沿本篇记录一下自己项目中用到的keras相关的部分。由于本项目既有涉及multi-class（多类分类），也有涉及multi-label（多标记分类）的部分，multi-class分类网上已经很多相关的文章了。这里就说一说multi-labe... 查看详情

html5学习之html标记类型

Keyword:MarkupType,ContainerTags,SingleTag,Attributes1.ContainerTags(容器标记)成对的开始标记(StartTag)与结束标记(EndTag),利用这两个标记将文字围住，以达到预期的效果。大部分的HTML标记都属于此类，终止标记前会加上一个正斜线“/”。... 查看详情

html5新媒体播放器标签videoaudio与embedobject(代码片段)

html5里的一些新的标签,看到里面object、embed、video、audio都可以添加视频或音频文件embed是针对非IE的浏览器的媒体播放器video是html5出的一种新标准，但并不是所有的浏览器都支持。video虽然号称可以支持三种媒体类型，但常用的... 查看详情

javaweb学习之servlet3.0新特性详解(代码片段)

异步处理支持：有了该特性，Servlet线程不再需要一直阻塞，直到业务处理完毕才能再输出响应，最后才结束该Servlet线程。在接收到请求之后，Servlet线程可以将耗时的操作委派给另一个线程来完成，自己在... 查看详情

算法学习之选择排序(代码片段)

从一个数组中每次选出一个最大或者最小的值，然后把它放到一个新的数组中，新生成的数组就是一个按顺序的数组。Python代码实现：#找最小值的函数deffindSmallest(arr):smallest=arr[0]smallest_index=0foriinrange(1,len(arr)):ifarr[i]<smallest:smal... 查看详情

菜鸟h5学习之清除浮动的7种方法(代码片段)

1.为第一个浮动元素的父级元素设置高度。我们知道浮动对造成原来布局变化的原因就是，子元素的脱标。导致父元素的高度坍塌。所以那，我们为父元素设置了高度就可以避免脱标带来的影响。上代码： 效果如下：拓展：... 查看详情

html学习之十三（导航栏的制作）(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>导航效果</title><styletype="text/css">.tab-itemlist-style:none;font-family:"宋体";font-size:18px;text-decorat 查看详情

dom学习之充实文档内容(代码片段)

HTML代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>充实文档内容</title><linkrel="stylesheet"href="css 查看详情

js学习之-------前端下载文件(代码片段)

1、前端下载文件的两种形式（我目前知道的）：（1）后台接口直接返回下载路径，根据路径下载;（2）后台接口返回文件流，根据blob来下载 2、根据路径下载具体怎么做？           ---... 查看详情

html5学习之webwork多线程处理

多线程技术在服务端技术中已经发展的很成熟了，而在Web端的应用中却一直是鸡肋在新的标准中，提供的新的WebWorkAPI，让前端的异步工作变得异常简单。使用：创建一个Worker对象，指向一个js文件，然后通过Worker对象往js文件发... 查看详情

html5学习之浏览器的私有前缀

浏览器的私有前缀是为了兼容老版本的写法比较新版本的浏览器无需添加1.私有前缀-moz-:代表firefox(火狐)浏览器的私有属性-ms-:代表IE浏览器的私有属性-webkit-:代表safarichrome私有属性-o-:代表opera(欧朋)浏览器私有属性2.提倡写法一... 查看详情