HTML入门几个小点的记载（一）

最新推荐文章于 2021-06-18 03:29:55 发布

卑微小张在线咕咕咕

最新推荐文章于 2021-06-18 03:29:55 发布

阅读量192

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_43460290/article/details/92092538

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

菜鸡一个，大佬轻喷。

一，HTML5视频

直接看实例

<!DOCTYPE html>
<html>
    <body>
        <!--
            autoplay 视频就绪后马上播放
            controls 向用户显示控件，比如播放按钮
            height,weight 视频播放器的高度和宽度
            loop 播放后再次开始播放
            preload 预备播放，有了autoplay后忽略这个属性
            src 要播放的视频的URL
        -->
        <video width="320" height="240" controls="controls">
            <!--
                如果我们在html5里面显示视频，我们需要的是
                <video src="movie.ogg" controls = "controls">
                </video>
                在这里width，和height包含了宽度和高度的属性，
                control属性提供添加播放、暂停和音量控件。
            -->
            <source src="/i/movie.ogg" type="video/ogg">
                <!--
                    ogg文件适用于Firefox，opera，以及chrome浏览器，
                    safari浏览器必须是MPEG4类型才行。
                -->
            <source src="/i/movie.mp4" type="video/mp4">
                Your brower does not support the video tag.
                <!--
                    video元素允许使用多个source元素，用以连接不同的视频文件
                    浏览器使用的是第一个可以是别的格式。
                -->
        </video>
    </body>
</html>

二是HTML5音频

代码如下：

<!DOCTYPE html>
<html>
    <body>
        <!--
            大多数的音频都是通过插件（比如Flash）来完成的
            但是并非所有浏览器都有同样的插件，HTML5规定了
            一种通过audio元素来包含音频的标准方法
            audio元素能够播放声音文件或者音频流
            （说到这个我想起了慕课上面的视频播放就有Flash播放
            和HTML5播放的，它上面说HTML5播放更快，orz）
        -->
        <audio controls = "controls">
            <source src = "song.ogg" type = "audio/ogg">
            <source src = "song.mp3" type = "audio/mpeg">
            Your browers does not support the audio element.
        </audio>
    </body>
</html>

三是HTML5 canvas

代码如下：

<!DOCTYPE html>
<html>
    <body>
        <!--
            canvas 元素本身并没有绘图能力，所有的绘制工作必须
            在JavaScript内完成
        -->
        <canvas id = "mycanvas" width = "200" height = "100">
        <!--
            向HTML5页面添加canvas元素，规定元素的id，宽度和高度
        -->
        </canvas>
        <!--
            调用javascript画笔
        -->
        <script type="text/JavaScript">
         //script也是html标签，作用是用来引入JavaScript的代码
         //表示<script>到</~~~>里面的是以text（文本形式）的JavaScript代码
         //<script language="Javascript">也可以这么写，但是W3C的标准种不推荐使用了
        var c = document.getElementById("mycanvas");
         //document当前文档，在js中我们使用var关键字用来定义变量、函数、对象等
         //JavaScript使用id来寻找canvas元素，然后创建context对象
        var cxt = c.getContext("2d");
         //对象是内建的HTML5对象，拥有多种绘制路径，矩形，圆形，字符
         //以及添加对象的方法
        cxt.fillStyle="#FF0000";
         //fillStyle将其染成一个红色的矩形
        cxt.fillRect(0,0,150,75);
         //fillRect规定了形状，位置和尺寸
        </script>
    </body>
</html>

鼠标悬停位置，不过这个有的地方不是很懂，等再看看JavaScript和CSS再回来研究，先mark一下（?）

<!DOCTYPE html>
<html>
    <head>
        <style type = "text/css">
        body
            {
                font-size: 70%;
                font-family: verdana,helvetica,arial,sans-serif;
            }
        </style>
        <script type = "text/javascript">
        function cnvs_getCoordinates(e)
        {
            x = e.clientX;
            y = e.clientY;
            document.getElementById("xycoordinates").innerHTML="Coordinates:("+x+","+y+")";
        }
        function cnvs_clearCoordinates()
        {
            document.getElementById("xycoordinates").innerHTML="";
        }
        </script>
    </head>
    <body sytle = "margin:0px;">
        <p>把鼠标悬停在下面的矩形上可以看到坐标: </p>
        <div id="coordiv" style = "float:left;width:199px;height:99px;border:1px solid #c3c3c3"
        οnmοusemοve="cnvs_getCoordinates(event)"
        οnmοuseοut="cnvs_clearCoordinates()"></div>
        <br />
        <br />
        <br />
        <div id="xycoordinates"></div>
    </body>
</html>

四是web存储：

代码如下：

<!DOCTYPE html>
<html>
    <body>
        <script type = "text/javascript">
        localStorage.lastname = "Smith";
        document.write("Last name: " + localStorage.lastname);
        </script>
    </body>
    <!--
        localStorage: 没有时间限制的数据存储
        sessionStorage：针对一个session的住居存储
        在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时
        使用数据，不影响网站性能的前提下时存储大量数据成为可能
        HTML5用JavaScript来存储和访问数据。
    -->
</html>

一个小小的实例：

<!DOCTYPE html>
<html>
    <body>
        <script type = "text/javascript">
        if(localStorage.pagecount)
        {
            localStorage.pagecount=Number(localStorage.pagecount)+1;
        }
        else
        {
            localStorage.pagecount=1;
        }
        document.write("Visits:" + localStorage.pagecount + " time(s).");
        </script>
        <p>刷新页面会看到计数器在增长。</p>
        <p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
    </body>
</html>

但是改成sessionStorage的就不可以了，就会每次都重置。

现在就只会这么多了…

菜鸡冲冲冲！！！

菜，轻喷。

卑微小张在线咕咕咕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门几个小点的记载（一）

菜鸡一个，大佬轻喷。一，HTML5视频直接看实例<!DOCTYPE html><html> <body> <!-- autoplay 视频就绪后马上播放 controls 向用户显示控件，比如播放按钮 height,weight 视频播放器的高度和宽度...
复制链接

扫一扫

专栏目录