整合营销服务商

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

免费咨询热线:

HTML教程(看完这篇就够了)

TML教程

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

在本教程中,您将学习如何使用 HTML 来创建站点。

HTML 很容易学习!相信您能很快学会它!

本教程包含了数百个 HTML 实例。

使用本站的编辑器,您可以轻松实现在线修改 HTML,并查看实例运行结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孙叫兽的博客</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

HTML 文档的后缀名

.html

.htm

都可以。

  • HTML 简介

实例:

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

什么是HTML?

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面
  • HTML 标签
  • HTML 标记标签通常被称为 HTML

标签

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
  • <标签>内容</标签>

    html元素

    “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

    但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

    HTML 元素:

    <p>这是一个段落</p>

    web浏览器

    Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。

    浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户

    html网页结构

    <html>
        <head>
            <title>页面标题</title>
        </head>
        <body>
            <h1>这是一个标题</h1>
            <p>这是一个段落。</p>
            <p>这是另外一个段落。</p>
        </body>
    </html>

    html的版本:

    <!DOCTYPE>声明

    <!DOCTYPE>声明有助于浏览器中正确显示网页。

    网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

    doctype 声明是不区分大小写的,以下方式均可:

    <!DOCTYPE html>
    <!DOCTYPE HTML>
    <!doctype html>
    <!Doctype Html>

    html5

    <!DOCTYPE html>

    html4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
    http://www.w3.org/TR/html4/loose.dtd">

    xhtml1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    中文编码

    目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。

    javaScript是一种解释型语言,它的执行是自上而下,但是各个浏览器对于至上而下的理解是有细微差别的,而代码的上下游也就是程序流又对于程序正确至关重要。

    首先得了解有几种方法能把javaScript加入到页面中? 常见下述的前2种,其实还有更多。

    1.页面中直接引入外部js文件:<script src="my.js"></script>

    2.页面中直接写入 js片段: <script>alert(1)</script>

    3.在js中引入js文件(比较少用): document.write("<scr"+"ipt src='my.js'></scr"+"ipt>");

    注意:这时候"..</script>"必须拆成"</scr"+"ipt>",否则浏览器可能会把父js片段关闭掉,出错;

    4.同样在js中引用其他js片段,document.write("<scr"+"ipt>alert(1)</scr"+"ipt>");

    你可能觉得这个并没有必要,既然已经在script中了还套一层干嘛?呵呵,怎么说也是一种写法,而且它具有其特殊的行为,稍后我们讨论到。

    5.使用Ajax中的xmlHttpRequest结合eval()来引入js,我最早在Dojo的代码见到,写的详细些:

    var ajaxRequest = getXmlHttpRequest()//省去各个浏览器得到xmlHttpRequest的部门

    ajaxRequest.open("GET","my.js",false);//使用xmlHttpRequest对象Get方法的同步调用

    ajaxRequest.send(null);

    sJsFragment = ajax.responseText;//得到字符串为js片段

    eval(sJsFragment);//执行js片段

    注意:这里要求my.js即后来的sJsFragment内容得是非常规范的js,且没有//开头的注释,怎样检查js是否规范呢?去http://jslint.com/

    6.无所不能的Dom方法,非常好用:

    var oScript = document.createElement("script");//创建一个Script元素

    oScript.src = "my.js";//制定src属性

    document.getElementsByTagName("head")[0].appendChild(oScript);

    说明:my.js的内容会在oScript加入到文档中之后获得并执行。仔细看下这段容易发现这个调用是异步的,可以在文档载入之后通过事件触发,我用它变通了一下,作为了xmlHttpRequest的Get方法在跨域取数时的替代,获得了很完美的效果,以后有机会专门写篇文。

    六种不少吧,可能还会有吧,而且这几种之间还可能相互嵌套,变化无常。

    其中1、2、4、6种方式引入的javaScript的执行顺序是非常自然的,随着页面的载入以及后续的事件触发,它们遵守先来后到、而其内部自上而下。

    篇介绍了前端入门——html 中如何使用图片,今天讲下如何使用视频和音频等多媒体元素,它们能让你的网页更加丰富,读者相对于文字图片更愿意观看视频和音频或其它多媒体。在本教程中,您将了解到不同的多媒体格式,以及如何在您的网页中使用它们。

    什么是多媒体?

    是多种媒体的综合,一般包括文本,声音和图像等多种媒体形式。在计算机系统中,多媒体指组合两种或两种以上媒体的一种人机交互式信息交流和传播媒体。使用的媒体包括文字、图片、照片、声音、动画和影片,以及程式所提供的互动功能。

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

    多媒体文件格式

    多媒体元素(比如视频和音频)存储于媒体文件中。多媒体元素也拥有带有不同扩展名字的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。具体有哪些格式可以参考 w3cshool 网站的介绍,https://www.w3cschool.cn/html5/html5-video.html ,https://www.w3cschool.cn/html5/html5-audio.html。

    HTML5 Video(视频)

    直到现在,网页上仍然不存在一项显示视频的标准。今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

    语法如下:

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      您的浏览器不支持Video标签。
    </video>

    <video> 元素提供了播放、暂停和音量控件来控制视频。

    同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道视频的大小,浏览器就不能在加载时保留特定的空间,页面就会根据原始视频的大小而改变。

    <video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。一个页面可以使用多个<video> 标签,<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。

    显示效果:

    HTML5Audio(音频)

    和视频一样没有统一的标准,各个浏览器都不一样。HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。通过使用HTML5中的audio功能,你可以实现与flash相同的功能,即回放、跳转、缓冲等。

    语法如下:

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
    </audio>

    control 属性供添加播放、暂停和音量控件。在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。允许使用多个 <source> 元素。<source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。

    显示效果:

    HTML 插件——辅助应用程序

    插件(Plug-in)是扩展浏览器标准功能的计算机程序,插件被设计用于许多不同的目的:

    • 运行 Java 小程序
    • 运行 ActiveX 控件
    • 显示 Flash 电影
    • 显示视频或音频
    • 显示地图
    • 扫描病毒
    • 验证银行账号

    1、<object> 元素

    <object> 元素定义 HTML 文档中的嵌入式对象。

    它旨在将插件(例如 Java applet、PDF 阅读器和 Flash 播放器)嵌入网页中,但也可以用于将 HTML 包含在 HTML 中。

    如下:

    插入一个网页片段

    <object width="100%" height="500px" data="snippet.html"></object>

    或者插入一个图片

    <object data="audi.jpeg"></object>

    播放一个视频

    <object width="420" height="360"
    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    codebase="http://www.apple.com/qtactivex/qtplugin.cab">
    <param name="src" value="movie.mp4">
    <param name="controller" value="true">
    </object>

    播放一个音频

    <object height="100" width="100" data="song.mp3"></object>

    2、<embed> 元素

    <embed> 元素也可定义了 HTML 文档中的嵌入式对象。这是一个 HTML5 标签,在 HTML4 中是非法的,但是所有浏览器中都有效。

    插入一个flash文件

    <embed width="400" height="50" src="bookmark.swf">

    插入html片段

    <embed width="100%" height="500px" src="snippet.html">

    播放一个音频

    <embed height="100" width="100" src="song.mp3" />

    插入一个图片

    <embed src="audi.jpeg">

    注意:

    大多数浏览器不再支持 Java 小程序和插件。

    大多数现代浏览器关闭了对 Flash 的支持。

    我们可以使用 <video> 和 <audio> 标签来显示视频和音频

    视频和音频如何兼容大多浏览器

    如下视频代码HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。

    HTML 5 + <object> + <embed> 是最好的解决办法。

    <video width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
      <source src="movie.webm" type="video/webm" />
      <object data="movie.mp4" width="320" height="240">
        <embed src="movie.swf" width="320" height="240" />
      </object>
    </video>

    如下音频代码HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败,代码将回退尝试 <embed> 元素。

    HTML 5 + <embed> 是最好的解决办法。

    <audio controls="controls" height="100" width="100">
      <source src="song.mp3" type="audio/mp3" />
      <source src="song.ogg" type="audio/ogg" />
      <embed height="100" width="100" src="song.mp3" />
    </audio>

    到此你以及了解了如何在网页中使用视频音频及其它多媒体控件,赶快自己试试,祝你学习愉快。

    参考文献:https://www.w3school.com.cn/html/html_video.asp

    上篇:前端入门——html 中如何使用图片

    下篇:前端入门——html 表格的使用