整合营销服务商

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

免费咨询热线:

html的基本格式

tml由element组成。element分两种,正常element和空element。

正常element

<p class=“wd”>world</p>

element由tag和content构成

  • tag
  1. 开始tag <p class=“wd”>
  2. 结束tag</p>
  • content
  1. 可以是直接在页面上显示的内容
  2. 也可包含别的tag

<ul>

<li>first</li>

<li>second</li>

</ul>

空element

没有content和结束tag的element。比如

  1. 换行<br>
  2. <img src=“bg.png”>
  3. <input type=“text” name=“name”>

element之间存在三种关系

  1. 父子关系。
  2. 祖孙关系
  3. 兄弟关系

<div>

<h1>title</h1>

<p>p1</p>

<p>p<strong>2</strong ></p>

</div>

div和h1,div和p,p和strong是父子关系。

div和strong是祖孙关系。

h1和p是兄弟关系。

eb 上的多媒体指的是音效、音乐、视频和动画。

现代网络浏览器已支持很多多媒体格式。

什么是多媒体?

多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。

在因特网上,您会经常发现嵌入网页中的多媒体元素,现代浏览器已支持多种多媒体格式。

在本教程中,您将了解到不同的多媒体格式,以及如何在您的网页中使用它们。

浏览器支持

第一款因特网浏览器只支持文本,而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器,图片支持也被加入。

不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理,而某些则需要额外的插件。

多媒体格式

格式 多媒体元素(比如视频和音频)存储于媒体文件中。

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时,它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件,而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素元素也拥有带有不同扩展名的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。

视频格式

MP4是互联网推出新的视频格式。YouTube 推荐使用 MP4 。Flash Players 支持 MP4HTML5 支持 MP4。
格式文件描述
AVI.aviAVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。
WMV.wmvWindows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。
MPEG
  • .mpg
  • .mpeg
MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。
QuickTime.movQuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。
RealVideo
  • .rm
  • .ram
RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。
Flash
  • .swf
  • .flv
Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4.mp4Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。
最新的 HTML5 标准只支持 MP4, WebM, 和 Ogg 视频格式。

声音格式

MP3是一种音频压缩技术,其全称是动态影像专家压缩标准音频层面3(Moving Picture Experts Group Audio Layer III),简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的,你可以选择mp3格式。

格式文件描述
MIDI
  • .mid
  • .midi
MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。点击这里播放 The Beatles。因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio
  • .rm
  • .ram
RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。
Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。
WMA.wmaWMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。
MP3
  • .mp3
  • .mpga
MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。
HTML5 的最新标准支持 MP3, WAV, 和 Ogg 音频格式。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

.br 强制换行标签

让后面的文字、图片、表格等等,显示在下一行




码海无际<br>码海无际

2.p 换段落标签

在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是



<p>码海无际</p><p>码海无际</p>

3.hr 水平分割线标签

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,hr 就是创建横跨网页水平线的标签。




码海无际<hr>码海无际

4.div 分区显示标签

分区显示标签,也称之为层标签,常用来编排一大段的HTML段落,也可以用于格式化表,和 p 很相似,是块状元素,经常嵌套使用。







<div>码海无际</div><div>码海无际</div><div>  <div>码海无际</div>  <div>码海无际</div></div>

5.span 行内标签

用来组合文档中的行内元素,没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。



<span>码海无际</span><span>码海无际</span>

6.pre 预格式化标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。





<pre>  码海无际  码海无际</pre>

7.ul 无序列表标签

无序列表的各个列表项之间没有顺序级别之分,是并列的。






<ul>  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ul>

注意:




 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。 3. 无序列表会带有自己样式属性,但是不推荐使用,一般会用CSS设置。

8.ol 有序列表标签

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义

1.格式:





<ol type="符号类型">    <li type="符号类型"></li>    <li type="符号类型"></li></ol>

2.有序列表的type属性值:

  • 1:阿拉伯数字1.2.3等等,默认type属性值
  • A:大小字母A、B、C等等
  • a:小写字母a、b、c等等
  • Ⅰ:大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
  • ⅰ:小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等

3.有序列表的value属性值:

  • 指定一个新的序列数字起始值

4.列表可以进行嵌套







































<ol>  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol type="A">  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li type="A">码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li>码海无际</li>  <li value="6" type="A">码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li>码海无际</li>  <li>    <ol type="A">      <li>志存高远</li>      <li>志存高远</li>    </ol>  </li>  <li>码海无际</li>  <li>码海无际</li></ol>

9.dl 自定义型列表标签

对列表条目进行简短的说明







<dl>  <dt>软件说明:</dt>  <dd>这是软件说明</dd>  <dt>软件界面:</dt>  <dd>这是软软件界面</dd></dl>

10.center 居中对齐标签

居中对齐


<center>码海无际</center>