整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML初学者入门视频教程,简单明了,学html看这一篇就够了

TML是制作网页的基础,我们在网站建设中谈论的静态网页就是基于HTML的网页。

早期的网页直接用HTML代码编写,但现在有许多智能网页制作软件(常用的如frontpage,dream weaver等)通常不需要手动编写代码,而是由这些软件自动生成。虽然不需要自己写,但是理解HTML代码仍然是非常重要的。

了解HTML是什么?它是学习网站建设的重要技术基础知识

下面我们自己可以动手创建一个非常简单的网页,首先我们让计算机显示扩展,方法是打开我的电脑,然后现在栏目工具》文件夹选项》查看》高级设置中找到《隐藏已知文件类型的扩展名》将其不勾选,并单击“应用”以确认设置。然后在桌面上创建一个新的TXT文件,将此文件命名为“xxx.html”(扩展名也可以是htm),这样你就可以用浏览器打开它,你就会看到自己制作的最简单的页面。

进一步的简单理解什么是html?

html是一种超文本标记语言,即html(hypertext markup language),是一种用来描述网络文档的标记语言。在页面的开头和结尾使用<html></html>标签。

总结:

1)HTML是我们常说的静态网页;

2)HTML是以Html或htm为扩展名的文件;

3)HTML某些标签代码规则,让内容在浏览器中呈现出我们所需要的样式;

4)HTML可以使用记事本创建,并以.html或.htm为扩展名保存。

html文件中的代码由具有一定的规则规律标签与内容组成。以指定的HTML结构和内容形成完整的html文件。我们可以直接使用浏览器来打开,查看网页效果。

如果您想在浏览器中显示各式各样的网页,我们就需要html文件(HTML基本结构+内容+标签)和css文件(css样式)来实现我们需要的漂亮网页。

HTML基础学习教程

动力节点老杜讲解的html学习教程,非常详细全面,完全适合小白入门

内容:讲解了HTML基础语法、HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等知识点。

通过html教程的学习之后,不但可以开发基本的网页,还可以看懂别人编写的HTML页面。

HTML完整资料下载:
http://www.bjpowernode.com/?toutiaoweb.chai

HTML课程目录

1.HTML教程:课程内容概述

2.HTML教程:BS结构介绍

3.HTML教程:软件环境准备

4.HTML教程:HTML概述

5.HTML教程:我的第一个HTML

6.HTML教程:HTML的基本标签

7.HTML教程:HTML的实体符号

8.HTML教程:HTML的表格

9.HTML教程:HTML的单元格合并1

10.HTML教程:HTML的单元格合并2

11.HTML教程:thead tbody tfoot

12.HTML教程:背景色和背景图片

13.HTML教程:HTML图片img标签

14.HTML教程:HTML超链接

15.HTML教程:超链接的作用-request和response的概念

16.HTML教程:HTML列表

17.HTML教程:form表单初步

18.HTML教程:用户注册表单的实现

19.HTML教程:下拉列表支持多选

20.HTML教程:form的file控件

21.HTML教程:隐藏域hidden控件

22.HTML教程:隐藏域hidden控件2

23.HTML教程:readonly和disabled

24.HTML教程:控件的maxlength属性

25.HTML教程:HTML文档中节点的id属性

26.HTML教程:div和span在网页中的应用

视频格式转换神器——格式工厂

如果您下载了上一篇《为HTML页面添加音频、视频的方法——零基础自学网页制作》(目录在结尾)中的素材,您会看到有这样一个文件,如图

这就是格式工厂软件的安装程序

建议大家在学习之前下载素材用以实践,下载地址如下:https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw

提取码:td80

因为格式工厂是免费软件,所以大家直接安装就可以了,不需要序列号,安装过程如下:

1.双击安装程序

2.选择安装盘符

3.等待进度条跑完就好了。大家注意,安装时一定要阅读提示,一些没必要的捆绑软件记得不要安装!

完成安装后,点击"开始"菜单,如图:

这样我们就可以打开格式工厂了,打开后如图:

通过这个菜单我们可知,这个软件不仅可以为音频、视频转换格式,还可以给图片转换格式。如图:

下面我们就来操作一下如何为视频转换格式。

step1.点击"视频"

点击后是这样的,点击"AVI FLV MOVE"这个区域。

效果如下,出现了一个新的菜单。

step2.选择要转换的格式,如图,我们先选择ogg,点击!

点击"确定"

弹出这样一个菜单:

step3.选择文件,如图,点击"添加文件"

我们使用"利维坦.mp4"这个文件进行转换,如图:

点击"打开"后,跳到这个界面,如下图,然后点击确定。

这时界面就跳回最初的界面上,如下图,点击开始,如红框中。

step4.等待转换完成,如图所示:

然后点击"输出文件夹"按钮找到转换好的文件,如图:

这时,我们可以把这个转换好的文件拷走。

完成之后,大家可以按照上述步骤继续转换出swf、flv格式的视频文件。

转换音频和视频的步骤类似,大家可以在音频栏中进行选择相应格式并操作。

格式工厂除了音视频格式转换外,也具有简单的图片处理,视频拼接,录屏等功能,感兴趣的小伙伴可以自行测试。

HTML中兼容不同浏览器的音视频元素写法

学过上一篇《》的小伙伴都会知道,目前音频也好、视频也好有非常多的格式存在,不同浏览器能支持的格式也不尽相同,就拿swf文件看,2019年以后版本的火狐浏览器就不再支持了(还可以通过一些特殊手段播放,这里指的是常规的html标签用法)。而chrome(google浏览器)在使用<embed>标签导入swf文件后就可以播放,示例代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>音视频导入</title>
  <meta charset="utf-8">
  </head> 
  <body>
  <embed src="video/利维坦.swf" width="320" height="240" />
  </body> 
  </html>

在chrome中可以打开。不过要用户允许使用flashplayer才行,如图:

这时我们发现,在默认情况下,播放器控制面板并没有出现。

使用ie浏览器却不能打开,因为针对swf文件,ie浏览器需要使用<object>标签。示例代码如下:

<embed src="video/利维坦.swf" width="320" height="240" />
<object data="video/利维坦.mp4" width="320" height="240"></object>

如图所示:没有正常显示的是<embed>标签,打开的是<object>标签,并且有控制器。如图:

实际上swf是个历史遗留问题,<object>主要是针对ie浏览器来播放swf或其他需要flashplayer支持的视频格式。<embed>的标签则用来解决非ie浏览器中播放swf或其他需要flashplayer支持的视频格式。

而苹果浏览器压根就不支持swf这一类的文件。

目前网络视频格式基本上都统一为MP4格式了,在html5标准中,<video>标签页取代了<object>和<embed>标签来播放视频,同时支持多种格式选择的代码模式,示例代码如下:

它的结构是<video></video>标签中套入了多个<source/>标签来指定不同格式的文件,同时并列套入一个<object></object>标签,在<object></object>标签中再套入一个<embed>标签。这样的写法的目的是为了让使用各种各样的浏览器的用户都可以打开视频。这种写法目前是html认为的最好的写法。

大家可以试一试,使用之前转好的不同格式的视频。

大家回想一下,导入不同格式音频的写法也是这个样子,示例代码如下:

<audio controls="controls"> 
  <source src="song.ogg" type="audio/ogg" /> 
  <source src="song.mp3" type="audio/mpeg" /> 
  Your browser does not support the audio element.<!--你的浏览器不支持这个音频元素-->
</audio>

其他的兼容方法

在w3school的说明中给出了一种包打一切的方法,说起来有点搞笑。

视频的话,w3school建议可以上传优酷,然后使用这样的代码嵌入自己的页面中,官方示例代码如下:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"></embed>

当然也可以使用我们之前在《》这篇教程中讲到的优酷官方推荐的<iframe>标签的写法。

音频的话,可以调用免费的在线雅虎播放器来播放,官方示例代码如下:

首先使用一个<a>标签,使用href属性指定音频文件的路径。然后使用<script></script>标签来启东雅虎播放器的JavaScript程序来播放。这个<script>标签以后在学习JavaScript时,我们会经常和它打交道,它的主要作用就是导入脚本。

出于好奇我试了试,代码如下:

</video>
<a href="audio/千年的祈祷.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>

大家注意,<script>标签写在</body>上面即可,也就是在页面内容的最下面,不必非要和<a>标签凑在一起。放在<head></head>中也可以!

页面效果如下:

点击"Play Sound"之后跳到这样的界面:

最后给大家介绍一个导入字幕的方法,示例代码如下:

<video width="320" height="240" controls="controls"> 
  <source src="forrest_gump.mp4" type="video/mp4" /> 
  <source src="forrest_gump.ogg" type="video/ogg" /> 
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> 
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

其中的<track>标签就是导入字幕的标签,是一个html5中出现的新标签。属性解释如下:

因为没有配套的srt文件,因此这里就不演示了,大家了解一下,以后有机会再细致测试一下。

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

行时是内容和应用加载的地方。之前的两个运行时是 web 和移动 app,下一个主流的运行时会是什么呢?微信和 Facebook 都想通过各自的手段成为新的运行时,但 Snapchat 却打起了视频的主意,通过换脸、加贴纸等把视频变成了封装各种内容的手段。Benidict Evans 的这篇分析真是有点脑洞大开。

下面这张内容与分发模型图是 Jonah Peretti 去年底的时候制作出来的。对于我来说,这张图有趣的地方在于它反映出了两个明显的趋势—分发平台的扩散以及内容模式的扩散。

上图的每一段圆弧都是有着不同的用户获取模式的平台,同时也是有着不同内容格式的平台。你获得浏览的方式、有效的内容类型以及可能的内容类型都是不同的。(当然,Buzzfeed 跟其他的东西也是理解和优化这一环境的一台机器)

在这种扩散中,分发模型正在朝着两个方向发展,一是算法驱动的新闻流(Facebook、Twitter、Instagram),二是人工策划(Snapchat Discover),而内容模型一方面格式变得越来越丰富愈发沉浸式(往往是通过视频文件的形式交付),另一方面更轻量的、针对带宽优化、基于文本的格式也逐渐流行(AMP、Facebook Instant Articles)。尽管 AMP 和 Articles 看重的是加载速度,但就像 Facebook 或 Snapchat 的视频一样,这些内容也是受控于平台所有者的。

与此同时,Google 做 AMP 以及 Facebook 做 Instant Articles 一半的(无论是否隐含)意义在于,通过撤除所有的广告技术以及分析用的 JavaScript 转而采用 Google 和 Facebook 自己的解决方案,带宽可以更省,渲染可以更快。但同样地,另一端的带宽却在增长,Snapchat Discover 让你得靠平台告诉你发生了什么。大多数情况下,尤其是在 Facebook 和 Snapchat 这里,相对于一切都要靠 JavaScript 获取来说,主平台可以提供更好的使用和用户方面的信息(理论上也会带来更好的经济效益)。也许。与此同时,你得到的不仅是新内容和指标,还包括新的广告格式(尤其是在 Snapchat 这里),跟 web 横幅广告相比,这种广告格式会感觉更加原生,跟普通内容自然融为一体。

也就是说,这些模型改变了你获取受众的方式,改变了受众看到的是什么,改变了你对受众的了解,以及你从中赚钱的方式。(然后,为了省事起见,大概会有 1/3 的移动 web 使用会在 Facebook 上以应用内浏览发生)

接下来,虽然 Facebook 有 Instant Articles,但 Google 现在则有 Instant Apps。你点一下链接,“原生”(无论如何不会是 HTML)代码立即(希望如此)就会出现并运行。你可以把这看作是 Java 的回归(从某种意义上来说 Android 就 “是” Java),或者 Flash 的回归。我觉得类似地 Flash 的作用范围还要广。Snapchat Discover 当然看起来就像 Flash—尽管技术上来说其交付的格式也许是 h264 视频,但实际的内容却非常像 10年 前大家玩 Flash 的那些东西—活动、互动的富媒体内容加上声音、动作、动画,有时候还包括真正的实景镜头。我们已经从用 Falsh 交付视频发展到用视频交付 Flash。也就是说,视频就是新的 HTML—一种新的内容交付格式,而且根本就未必需要是真人实景。Instant Apps 做的事情一样,只不过用的是 Android 运行时而不是 Snapchat 的。还有就是尽管 Google IO 上面的 Instant Apps 演示看起来更像是 app 而不是内容,但原理是一样的—比 HTML 更丰富,但比要跑到应用商店去更好。不过即便 AMP 或 Instant Stories 也都可以做出同样的诠释—我们现在已经从旧的、简单的 HTML 和 JavaScript 转到拥有更好的体验上了。

有人可能也会认为这意味着视频(也包括 GIF 或者任何你想加入的格式)充当着一种新的卡片格式—一种把各类内容封装起来的手段,让它可以在互联网上流转和分享。把视频嵌入到社交网络信息流再次成为替代 HTML 的内容交付格式,还有,这也意味着你可以嵌入任何想要的内容,包括广告。

这同时指向了另一种扩散—指标的扩散。当 Snapchat 说自己拥有 “100 亿视频日浏览量” 时,它说的是什么意思呢?别人又可以拿什么东西跟它比较呢?对自动播放视频又该怎么看?如果用户没有听声音或者没有声音呢?这当然不能跟电视的观看情况比较,或者至少,只能在基于跟 Facebook 或其他任何内容相同的基础上比较总时长。YouTube 至少在概念上跟电视形式是一样的,但 Snapchat 真不是。并且当然,设计和报告指标的也是平台所有者自己。

把这个问题延伸一下,如果不能比较时长的话,也就很难比较广告支出。在大部分观看都是静默状态下(滚屏经过时自动播放往往会被跳过)进行的 “视频” 平台上的用时能跟电视热播节目上的用时相比吗?电视上播放着节目但是你却坐在沙发上看智能手机上互动性很强的(h264 格式)富媒体内容又怎么算?(再往前展望一下,是不是还得考虑一下 VR 上的广告价值与互动性呢?)

反过来,这又让我觉得移动广告拦截会变得更加有问题。Facebook 很长一段时间以来一直都是全世界最大的广告拦截者,正如它是最大的移动 web 浏览器之一。但如果平台从单个 IP 那里给我发送加密数据,而数据就是一段 h264 视频,但里面正好又有一段广告,而且内容渲染用的又是设备私有的运行时的话,这种广告又怎么剔出来呢?所有广告拦截的最大影响也许就是把内容所有者赶到离开放 web 越来越远的地方。

关于移动我的思考框架之一是我们正在寻找下一个运行时—一个继 web 和移动 app 之后、在移动上面营造体验的地方,这个新的运行时也许还会带来新的互动和发现模式,可能也包括新的盈利模式。显然这是审视 Google Assistant 或者 Facebook 的 Bots 平台的一种有用的方式,但这种审视代码的方式一样可以用来审视内容:Snapchat 跟微信一样也是个开发平台,只是你要从合适的角度观察。屏幕本身就是运行时,你能够做到越丰富越原生就越好。