开始自学

最新推荐文章于 2024-05-08 18:30:00 发布

原创最新推荐文章于 2024-05-08 18:30:00 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一位计算机科学硕士毕业生自学HTML5的过程，详细解析了如何使用HTML5创建一个具备播放、暂停及大小调整功能的视频播放器。文章通过实例代码，深入浅出地讲解了button、video及script等元素的应用。

面向工作编程

前言
- 技能挑选
- 学习路径
Day1

前言

25岁的大学毕业生，正在美帝野鸡大学修读computer science的master学位。在第一个学期上完computer architecture和operating system两门专业课后，自觉靠这破学校的老师教的东西毕业后是没办法在美国获得opt工作的机会，遂而自学。

技能挑选

我选择了先学习HTML5，原因有以下几个：

语法简单，或者说没有语法
不需要安装IDE或者其他软件，新建一个txt文档再把后缀改成html便可
曾经学过php，重新学习html相当于复习，降低难度
HTML属于前端，前端难度低不倚靠算法

学习路径

W3School学习HTML基本语法 >本地创建基础页面>W3School学习JavaScript》……

Day1

页面播放视频

代码如下

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center;">
    <button onclick="playPause()">Play/Pause</button>
    <button onclick="makeBig()">Big</button>
    <button onclick="makeNormal()">Normal</button>
    <button onclick="makeSmall()">Small</button>
<br/>
    <video id="video1" width="420" height style="margin-top:15px;">
        <source src="/example/html5/mov_bbb.mp4" type="video/mp4">
        <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
    Your Browser Does Not Support HTML5.
    </video>
</div>
<script type="text/javascript">
    var myVideo=document.getElementById("video1")
    function playPause()
        {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
    function makeBig()
        {
            myVideo.width=560;
        }
    function makeNormal()
        {
            myVideo.width=420;
        }
    function makeSmall()
        {
            myVideo.width=320;
        }
</script>
</body>
</html>

实现效果:

在这里插入图片描述

拆开分析 - 使用的对象

1. button
具体语句

    <button onclick="playPause()">Play/Pause</button>

onclick：赋予按键具有单击后有功能的属性
playPause()：单击后的功能由这个函数实现
Play/Pause：按键上显示这段文本提示用户

2. video
具体语句

<video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4">
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your Browser Does Not Support HTML5.
</video>

id:给目标视频赋予一个id，方便函数对视频进行操作
style:固定视频的位置
source:给出视频的来源

3.function （目前还不需要了解）

<script type="text/javascript">
    var myVideo=document.getElementById("video1")
    function playPause()
        {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
</script>

script:使用的函数都要放在script之内
var:先由目标的类型(video)，确认需要用到哪些方法并赋值，接下来就可以方便使用对应的函数

学习目标

video
button
script

创建一个表格

示例表格：

类别1	类别2	类别3
项目a	项目b	项目c
项目d	项目e	项目f

接下来

学习内容

HTML

Markdown

JavaScript 和 HTML DOM 参考手册