整合营销服务商

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

免费咨询热线:

[网站开发入门指南17] 了解常用媒体资源文件格式 | html

站开发入门指南:媒体资源格式。

我们带着大家来简单的了解一下在网页开发中常用的这些媒体资源的一些文件格式。

·首先是图片资源,图片的这个文件格式在讲图片标签的时候其实也给大家去展示过有哪几种常用的图片格式。这里我就把这些格式的一些优缺点都先列在这里了,大家可以暂停先看。在网页当中去使用图片是有两个核心的这样的使用场景。

→那首先是非常常见的就是具体去展示的这种图片,这些图片都是展示的图片,还有就是像这些功能型的图片,功能型的这种小图标的图片。

→像这两种场景理论上来讲用任何一种图片格式都是可以的。但是目前来讲最常用的就是这两种格式,这两种格式大家注意看。这个SVG的图片格式就是现在是经常会用在这种功能型的一种场景。因为现在很多在线的设计软件都可以快速的方便的去复制这个设计好的图标的一个 SVG的版本。

而且SVG它本身是一个矢量,它任意缩放都不会有这种模糊的问题,所以它其实非常适合来做图标的这样效果。而且它图标本身一般来说都是比较简单的图形,所以也不会说牵扯到这种复杂图片导致文件过大的这样的一个问题。

·然后像展示型的文件现在很多的网站都用这种web.p的格式,VIP它是谷歌开发的一种图片的格式,它支持透明度和动画,还有就是它的这种图像质量会比这种PNG的更好,它的文件还比这个PNG的小很多,所以就是在现在很多的网站上都会大量的采用这个webp的格式来作为这种展示型图片的这样的一种格式。

然后像这种不同的图片格式,其实很多的设计软件都是可以导出的。

目前来说webp的格式可能就是很多软件并不支持直接的去导出这个格式。但是网上有很多可以转换的格式、转换的工具或者在线的工具都可以很方便的。比如说可以把JPG的格式、GIF的格式转换成webp的格式。然后是这个视频文件格式,主流的常用的就是这几种。

最常用的就是MP4格式和Web.m格式。Webm格式也是谷歌开发的这样一种视频格式。目前来说主流的浏览器对这两种视频格式支持度都已经非常不错。这两种视频文件格式都能在保证比较小的文件大小的前提下提供比较高的视频质量。

一个视频文件的文件大小是受很多因素去影响的,比如说像视频本身的帧率、分辨率还有码率等一些因素。如果你想更加深入的去研究,这块东西可以自行的查找一些资料去了解一下。

这里给大家补充一个很小的知识点,就是平常说的这些视频文件格式,其实它是一种容器格式就是我们的视频文件。内部其实包裹着两种重要的数据,一种就是我们所谓的这种视频的数据,另外一种就是音频的数据,它们两者其实是分开的。

有的同学可能听说过这样的一种视频格式叫做H.264。像这种其实是一种视频数据的编码标准。这个视频文件容器内的视频文件,这个视频数据才是真正的按照这些编码,视频的编码标准编码出来的这样一些视频数据。

像这个视频数据就是纯视频,也就是纯图像,它是没有任何声音的,只有跟音频的资源。音频的数据结合到一块之后才是看到的这种整体的打包好的、有声音、有图像的一种视频文件。所以我们要明白这些视频文件是一种容器的格式。

最后就是音频资源,音频资源其实核心常用的也就是这四种,最常用的肯定就是MP3。

像一般场景来说MP3的格式完全就够用了,像WAV它是一种无损的,所以文件一般来说会比较大。如果某一些特别的需要一些高保真的这样一种高质量音频的场景可能会用到这种格式。一般来说绝大部分的时候一般用MP3的格式就够了。

TML: HyperText Markup Language 超文本标记语言

HTML代码不区分大小写, 包括HTML标记、属性、属性值都不区分大小写;

任何空格或回车键在代码中都无效,插入空格或回车有专用的标记,分别是 、<br>

HTML标记中不要有空格,否则浏览器可能无法识别。

如何添加注释(comment:评论;注释)

<!-- -->
<comment></comment>
<!-- --> 不能留有空格


字符集

<meta http-equiv="Content-Type" content="text/html;charset=#"/>


<base target="_blank">

可以将a链接的默认属性设置为_blank属性

单个标签要有最好有结束符(可以没有结束符)

<br/> <img src="" width="" /> 

便于兼容XHTML(XHTML必须要有结束符)

HTML标签的属性值可以有引号,可以没有引号,为了提高代码的可读性,推荐使用引号(单引号和双引号),尽管属性值是整数,也推荐加上引号。

<marquee behavior="slide"></marquee> 

便于兼容XHTML(XHTML必须要有引号)

<marquee behavior=slide></marquee>

经过测试,以上程序都可以正确运行


HTML标签涉及到的颜色值格式:

color_name 规定颜色值为颜色名称的文本颜色(比如 "red")。

hex_number 规定颜色值为十六进制值的文本颜色(比如 "#ff0000")。

rgb_number 规定颜色值为 rgb 代码的文本颜色(比如 "rgb(255,0,0)")。

transparent 透明色 color:transparent

rgba(红0-255,绿0-255,蓝0-255,透明度0-1)

opacity属性: 就是葫芦娃兄弟老六(技能包隐身)

css:

div{opacity:0.1} /*取值为0-1*/

英文(颜色值)不区分大小写

HTML中颜色值:采用十六进制兼容性最好(十六进制显示颜色效果最佳)

CSS中颜色值:不存在兼容性

红色 #FF0000

绿色 #00FF00

蓝色 #0000FF

黑色: #000000

灰色 #CCCCCC

白色 #FFFFFF

青色 #00FFFF

洋红 #FF00FF

黄色 #FFFF00


请问后缀 html 和 htm 有什么区别?

答: 1. 如果一个网站有 index.html和index.htm,默认情况下,优先访问.html

2. htm后缀是为了兼容以前的DOS系统8.3的命名规范

XHTML与HTML之间的关系?

XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.

XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行.

XHTML是用来代替HTML的, 是2000年w3c公布发行的.

XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.

XHTML是基于XML的应用.

XHTML更简洁更严谨.

XHTML也可以说就是HTML一个升级版本.(w3c描述它为'HTML 4.01')

XHTML是大小写敏感的,XHTML与HTML是不一样的;HTML不区分大小写,标准的XHTML标签应该使用小写.

XHTML属性值必须使用引号,而HTML属性值可用引号,可不要引号

XHTML属性不能简写:如checked必须写成checked="checked"

单标记<br>, XHTML必须有结束符<br/>,而HTML可以使用<br>,也可以使用<br/>

除此之外XHTML和HTML基本相同.


网页宽度设置多少为最佳?

960px


target属性值理解

_self 在当前窗口中打开链接文件,是默认值

_blank 开启一个新的窗口打开链接文件

_parent 在父级窗口中打开文件,常用于框架页面

_top 在顶层窗口中打开文件,常用语框架页面


字符集:

charset=utf-8

Gb2312 简单中文字符集, 最常用的中文字符

Gbk 简繁体字符集, 中文字符集

Big5 繁体字符集, 台湾等等

Utf-8 世界性语言的字符集

ANSI编码格式编码格式的扩展字符集有gb2312和gbk

单位问题:

HTML属性值数值型的一般不带单位, CSS必须带单位;


强制刷新

ctrl+F5

本格式标记

以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动,但是,文本格式的太多变化也会使人不快。

标题 - <head> </head>

head标记有6个级别可用,从h1用于最大和最重要的标题,到h6是最小的标题。

粗体 - <b> </b>

b标记之间的文本以粗体显示,与周围的文本相对突出。

斜体 - <i> </i>

i标记以一个小角度显示文本。

下划线 - <u> </u>

u标记在文本正文添加一条线,请注意,链接已经有下划线,不需要额外的标记。

删除线 - <strike> </strike>

strike标记在文本的正中间画一条线,通常用来表示文本是旧的,不再相关,删除。也可以用<s></s>代替。

预格式化文本 - <pre> </pre>

pre标记之间的任何文本,包括空格、回车符和标点符号,都将像在文本编辑器中一样显示在浏览器中(通常浏览器会忽略多个空格)

源代码 - <code> </code>

code标记之间的文本以固定宽度字体显示,通常在显示源代码时使用。

打字机文本 - <tt> </tt>

tt标记之间的文本就像是用打字机打出了一个固定宽度的文字。

Block Quote - <blockquote> </blockquote>

blockquote标记定义一个块引用,并且在块的左右添加额外的边距。

小号字 - <small> </small>

small标记让你无需设置字体大小,就可以使文本呈现比周围稍小的外观。

字体颜色 - <font color="#??????"> </font>

font标记的color属性改变几个字或一段文字的颜色。属性使用十六进制颜色代码。

字体大小 - <font size="?"> </font>

font标记的size属性改变字体的大小,值范围从1到7,1是最小,7是最大。

字体大小变化 - <font size="+/-?"> </font>

font标记的size属性还可以相对于其前面的字体大小的作即时更改,此用法将按你指定的数字增减字体大小。例如:<font size="-1">一些文本</font>

字体 - <font face="?"> </font>

font标记的face属性以指定的字体显示文本,值为字体名称,如“Helvetica”、“Arial”或“Courier”。

居中 - <center> </center>

center标记之间的所有内容都居中。

强调 - <em> </em>

em标记用于强调文本,文本通常以斜体显示,可能会根据浏览器的不同而有所不同。

着重强调 - <strong> </strong>

strong标记用于着重强调文本,通常以粗体显示,可能会根据浏览器的不同而有所不同。

例子

下面是以上标记的示例:

浏览器显示内容如下所示: