Day6

一、Selection Menu Controls——选择菜单控件

1、Select Menu——选择菜单

代码：

 <select name="">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>       
</select>

实现：

在select后面加上size，页面只能显示4个字条的。可以通过滑动选择的方式来选择

 

 2、Datalist——数据列表

代码：

<input list="Languages">
     <datalist id="Languages">
            <option value="PHP">
            <option value="Perl">
            <option value="Python">
            <option value="Ruby">
            <option value="C+">
   </datalist>

实现：

 二、IFrame——框架

1、Basics of an Inline Frame——基本的框架

<iframe src="base.html"></iframe>

代码：

<iframe sandbox src="http://example.com/"></iframe>

实现：

 2、设置帧大小（就是框架的大小）

<iframe src="base.html" width="800" height="600"></iframe>

3、使用“srcdoc”属性

代码：

<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>

实现：

 三、Canvas

1、在canvas上面绘俩个矩形

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Draw two rectangles on the canvas</title>
    <style>
        canvas {
            border: 1px solid gray;
        }
    </style>
    <script async>
        window.onload = init; 
        function init() {
            var canvas = document.querySelector('canvas');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'red';
            ctx.fillRect(0, 0, 100, 100);

            ctx.fillStyle = 'green';
            ctx.fillRect(25, 25, 50, 50);
        }
    </script>
</head>

<body>
    <canvas width=300 height=200>Your browser does not support canvas.</canvas>
</body>

</html>

实现：

 四、常见的特殊符号

posted @ 2023-01-29 11:03  末叶da  阅读(48)  评论(0)    收藏  举报