HTML5知识笔记

JiangyeMx

已于 2022-02-21 03:12:53 修改

阅读量463

点赞数

文章标签： html5 前端 html

于 2022-02-21 03:05:53 首次发布

本文链接：https://blog.csdn.net/JiangyeMx/article/details/123039156

版权

一，新增属性

二，新增标签

一，新增属性

input标签新增的type属性： 1， clander类（时间类，包括date time week但是兼容性都不太好
2，color 颜色选择器

placehoder属性： input的提示消息

coutenteditable属性：可以让用户直接修改标签内的valve；可继承；默认值为false（即不可修改）；尽量不要嵌套使用；兼容性好

darggable属性：用户可拖拽具有该属性的标签；chrom safari 可以正常使用 firefox兼容性不好；默认值为false ；少量标签初始就有该属性（a标签 img标签）；

二，新增标签

新增语义化标签：

        1，header   一般指页面的顶部，通常包括logo，搜索框之类
        2，footer       页脚标签，包括一些友方链接，网页信息等
        3，nav       导航栏
        4，article       文章
        5.section       段落结构（通常在大段，一大块区域使用）

实质上都可以当成是一个div；

新增标签：

1，canvas：提供一个白板，可以使用Js在上面画画，修改白板的宽高需要写行间样式，适合动画
1），相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid #424242;
        }
    </style>
</head>
<body>
    <canvas class="can" width="500px" height="500px"></canvas>
    <script>
        var canvas = document.getElementsByClassName("can")[0];
        var ctx = canvas.getContext('2d');//获取canvas中的内容，相当于画笔


        //画线
        ctx.moveTo(100,100);//设置起始点
        ctx.lineTo(200,100);//结束点
        ctx.stroke()//渲染出来
        ctx.lineWidth = 5;//设置线的粗细
        ctx.closePath();//从当前线的位置画向初始点，是图形闭合，但是只能是一笔时实现，如果该moveTo()下面含有beginPath()则不能实现
        
        ctx.beginPath()//表示重新开始一条新的线，如果需要修改线的粗细，需要重新设置lineWidth
        ctx.fill();//填充
        // ctx.clearRect();//清除画板，(画板左上角的x坐标，画板左上角的y坐标，画板右下角的x坐标，画板右下角的y坐标)
        
        //画矩形
        //1
        ctx.rect(100,100,200,100);//(起点坐标，起点坐标，宽，高)；
        ctx.stroke();
        //2，
        ctx.strokeRect(100,100,200,100);
        //3,填充的矩形
        ctx.fillRect(100,100,200,100);

        //画圆
        ctx.arc(100,100,50,0,Math.PI,0);//(圆心坐标，半径，开始点对应的弧度值，结束时对应的弧度值，绘制方向0为顺时针，1为逆时针)；
        ctx.stroke();

        //画圆角矩形
        ctx.moveTo(100,110);
        ctx.arcTo(100,200,200,200,10);//(拐点的坐标，下一个拐点的坐标，圆角大小（单位是px）)；
        ctx.arcTo(200,200,200,100,10);
        ctx.arcTo(200,100,100,100,10);
        ctx.arcTo(100,100,100,200,10);
        ctx.stroke();


        //画贝塞尔曲线
        ctx.moveTo(100,100);
        ctx.quadraticCurveTo();//不常用了解即可
        ctx.stroke();

        //对图形的相关操作
        //1，旋转
        ctx.rotate();//(弧度值)，旋转中心为画板的左顶点坐标，如果需要修改旋转坐标，使用translate()方法，使用后将修改全局的原点
        //2，缩放
        ctx.scale(2,1);//(x，y比例系数)

        ctx.save();//保存坐标系平移，缩放，旋转数据，通常为了防止translate()等方法对全局属性的修改对其他图形产生影响
        ctx.restrore();//与save()配套使用，恢复到save()保存的数据的形态

        //填充
        //注意，canvas使用图案或者颜色填充时，以坐标原点开始，初始时以画布左顶点为坐标原点
        ctx,fill();

        //阴影
        ctx.shadowColor();//阴影颜色
        ctx.shadowBlur();//阴影大小
        ctx.shadowOffsteX;
        ctx.shadowOffsteY;//设置阴影的位置


        //添加文字

        ctx.strokeText('jiangye',100,100);//(文字，文字位置)，该方法称为文字描边，显示的是空心的字
        ctx.fillText('jiangye',100,100);//(文字，文字位置),该方法称为文字填充，显示的实心的字
        ctx.font = '30px Gedrqia';//修改文字类型，大小
        ctx.fillStyle = 'red';//修改颜色，支队fillText()起作用


        //线端样式
        ctx.lineCap;//线两端的样式 butt(默认属性，不修改样式)，square（方形），round（圆角）
        ctx.lineJoin;//两条线相交是的样式 round（圆角），bevel(截断)，miter（小的尖角）
    </script>
</body>
</html>

2，svg：与canvas一样都是画图工具，使用标签和CSS画图，svg是矢量图，放大不会失真，适合大面积的贴图，动画较少，一般用在地图上
1），相关标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .line1{
            stroke: #008c8c;
        }
        polyline{
            fill: transparent;
            stroke: #008c8c;
        }
        text{
            stroke: #008c8c;
        }
        path{
            stroke: #008c8c;
            fill: transparent;
        }
    </style>
</head>
<body>
    <svg width="500px" height="300px" style="border: 1px solid #424242;">
        <!-- 在写相关坐标是可以省略‘px’ -->
        <!-- 画线 -->
        <!-- 非闭合图形需要设置CSS属性 stroke才能渲染出来 -->
        <line class="line1" x1="100px" y1="100px" x2="200px" y2="100px"></line>

        <!-- 画矩形 -->
        <!-- 在svg中所有闭合的图形都是默认直接渲染到页面中并且是填充的 -->
        <!-- rx,ry属性是矩形的圆角值，为别在x方向和y方向 -->
        <rect class="rect1" height="50px" width="100px" x="0px" y="0px" rx="5px" ry="5px"></rect>
         
        <!-- 画圆 -->
        <circle r="50" cx="50" cy="50"></circle>
            <!-- 椭圆 -->
        <ellipse cx="50" cy="50" rx="30" ry="10"></ellipse>
            <!-- 折线 -->
            <!-- 默认填充，需要使用相关的CSS属性来进行修改 -->
        <polyline points="0 0 ,50 50,100 200,200 150"></polyline>

        <!-- 多边形 -->
            <!-- 与折线的区别在于会闭合 -->
        <polygon points="0 0 ,50 50,100 200,200 150"></polygon>

        <!-- 文本 -->
            <!-- 颜色相关用CSS属性stroke修改 -->
        <text x="300" y="50">将夜</text>

        <!-- path标签 -->
            <!-- 大写字母代表绝对位置，小写字母代表相对于上一个点的相对位置-->
        <path d="M 0 0 L 100 100 l 100 200"></path>

        <!-- 线性渐变 -->
            <!-- 使用线性渐变时先使用定义标签<defs></defs>,渐变的形式在其中书写，外部图形使用渐变时，引用id即可（通过CSS属性"fill:url(#bg)"） -->
        <defs>
            <linearGradient id="bg" x1="0" y1="0" x2="100%" y2="100%">
                <!-- 起始关键帧 -->
                <stop offset="0%" style="stop-color: #008c8c;"></stop>
                <!-- 结束关键帧 -->
                <stop offset="100%" style="stop-color: blue;"></stop>
            </linearGradient>
        </defs>


        
    </svg>
</body>
</html>

   2），相关属性
       viewBox        比例尺
       stroke-opacity        线的透明度
       fill-opacity        填充的透明度
       与canvas的方法相同

3，video，audio 在页面中显示视频或音频播放器
使用时需要添加control显示控制台，才能进行播放，但一般不是用原生的

JiangyeMx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5知识笔记

目录一，新增属性二，新增标签一，新增属性input标签新增的type属性： 1， clander类（时间类，包括date time week但是兼容性都不太好 2，color 颜色选择器placehoder属性： input的提示消息coutenteditable属性：可以让用户直接修改标签内的valve；可继承；默认值为false（即不可修改）；...
复制链接

扫一扫