五分钟学会HTML5！（一）-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

五分钟学会HTML5！（一）

PHP中文网

May 15, 2018 am 10:34 AM

html5

毫无疑问，对于开发人员而言，HTML5已是一个热点话题。如果你需要快速了解HTML5的功能的基本原理，阅读本文是你最好的选择。
本文来自The Code Project的付费搜索位置，由Solution Center提供。这里的文章致力于向大家提供我们认为对开发人员来说有用和有价值的产品和服务的相关信息由IE9和HTML5 / CSS3 Zone带来。
本文会涵盖新的语义标签、为绘图和动画而设计的画布（canvas）、音频和视频支持，以及在旧版浏览器上如何使用HTML5。看完这些内容所用的时间可能会比五分钟多一点点，但我保证会讲得快一些。请接着看下去，下面的内容肯定值得你这么做！
语义标签和页面布局
我们首先讲一个关于一所大学的经典故事。这所大学在建设校园草地时，没有开辟任何步行小道，他们把整个空地种上草，然后等待。
一年以后，人们经常走过的地方，草都被踩光了。于是，这所大学就将这些地方铺设为真正的人行道。
棒极了！这些人行道是人们真正“走”出来的。
HTML5新语义元素的诞生正是基于同样的逻辑。（关于这一点，可以参看W3C设计指南中的“Pave the Cowpaths”。）
语义元素清晰地向浏览器和开发人员表明了它们的涵义和用途，要理解这一点，可以将它们与01ffcd5d1a840d2341909ced6bafa76c标签进行对比。在HTML文件内，01ffcd5d1a840d2341909ced6bafa76c标签能定义出一个分区或者一个小节，但是它无法告诉我们分区里的内容，不能传达任何清晰的涵义。
开发人员通常会将ID或者类名与01ffcd5d1a840d2341909ced6bafa76c标签配合使用，这会向程序员传达更多的涵义。但遗憾的是，这并不能帮助浏览器领会那种标签的用途。a43546606c38d1e72304ad4e2e6ea006
在HTML5中，有不少新的富含语义的元素，可以向浏览器和开发人员传达元素的用途。48522e8b0d91f36e26c4513bf1195c6d
W3C挖掘了数亿个的Web页面，找出开发人员一直在使用的ID和类名。一旦开发人员抛出p1、p2这些无意义标签，他们就得到了一个描述非常细致的已经在使用的元素的列表，并让其成为W3C的标准设置。
下面是HTML5的一部分新的语义元素：
• article
• aside
• figcaption
• figure
• footer
• header
• hgroup
• mark
• nav
• section
• time
由于这些元素的语义很丰富，相信你可能会猜出其中大部分元素的作用。
为了说得更清楚，下面给出一张图示。

header和footer的作用不言自明，nav将创造一个导航条或者菜单条。此外，你可以用section和article将页面内容分为几个部分。最后，aside元素用来安置附带的内容，比如说，以边栏的形式放上一些相关链接。
下面是一个简单的例子，其中的代码就用到了这些元素。

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 
1</a></li>
            <li><a href="#">Menu Option 
2</a></li>
            <li><a href="#">Menu Option 
3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is 
<mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog 
posts, etc.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 
1</a></li>
                <li><a href="#">Link 
2</a></li>
                <li><a href="#">Link 
3</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman" />
            <figcaption>Jennifer Marsman</figcaption>
        </figure>
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>
</html>

当然，在这个例子里，我也引出了另外几个新元素。
不知道你是否注意到hgroup元素，它将h1和h2这两个header组合到一起了？
我们可以用mark元素将重要文本高亮显示或标记出来。如果要在内容中插入一张图（图像、图表、照片和代码片段等），可以使用figure元素。而figcaption元素能为图加上标题。当把以上代码和一些CSS代码组合后，得到的Web页面如下图所示。

在一些擅长CSS的朋友（可惜我不擅长CSS）的帮助下，上面这个结果看起来靓爆了！实际上，有了HTML的描述性，完成这个页面非常容易。
还要说明一点，如果你是Visual Studio的拥趸，请确保已经安装了Visual Studio 2010 SP1。否则，你将发现Visual Studio并不理解HTML5元素，从而导致Web页面上到处是歪歪曲曲的线条。
然后，在Visual Studio菜单中依次选择“Tools”-“Options”，打开一个“Options”对话框。从左侧的导航面板，依次展开“Text Editor”和“HTML”，单击“Validation”。在“Target”下拉列表框中选择HTML5，这样就能得到对HTML5 IntelliSense的支持了。

使用Canvas元素在HTML5中进行绘画
HTML5中另外一个新元素是7272dcc38f587c12b78cbd2de8ee8ef4标签。顾名思义，它就是一块用来绘画的空白平面。你需要使用JavaScript在这块画布上进行操作和绘画。
你可能需要为canvas元素赋予一个id属性，这样就能通过JavaScript代码以编程的方式访问它。如果你正在使用jQuery，并且在页面上只有一个canvas，你可以使用$(‘canvas’)来访问它，而不用为它命名。
你也可以为canvas指定height（高度）和width（宽度），但这不是必需的。在7272dcc38f587c12b78cbd2de8ee8ef4 和15bbb2015cc11d1354ceabb582b1899a标签之间，你还可以指定一些文本，显示在不支持canvas元素的浏览器中。
下面是使用canvas进行绘画的一个简单例子。（我希望画一张苏格兰国旗，如果画得不是非常精确，请见谅。）

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas">Your browser does not support the canvas 
tag.</canvas>
    <script type="text/javascript">

        var canvas = document.getElementById(&#39;myCanvas&#39;);
        var ctx = canvas.getContext(&#39;2d&#39;);

        // Draw blue rectangle
        ctx.fillStyle = &#39;#0065BD&#39;;
        ctx.fillRect(0, 0, 125, 75);

        // Draw white X
        ctx.beginPath();
        ctx.lineWidth = "15";
        ctx.strokeStyle = "white";
        ctx.moveTo(0, 0);
        ctx.lineTo(125, 75);
        ctx.moveTo(125, 0);
        ctx.lineTo(0, 75);
        ctx.stroke();

    </script>
</body>
</html>

上面的代码将生成以下结果。

现在我们从头到尾分析一下代码。
首先，我创建了一块画布（canvas），并为它赋予了一个ID叫“myCanvas”。如果运行这段代码的浏览器不支持canvas元素，它就会在旗帜原本要出现的位置显示“Your browser does not support the canvas tag”。
接下来，我编写了一段脚本。记住，canvas标签只是一个用来画图的容器，你必须用JavaScript来画图并将其呈现出来。我首先通过使用ID“myCanvas”获得了对canvas的一个引用，然后得到canvas的上下文。上下文所提供的方法和属性，都可以用来在canvas上操作图形和进行绘画。这里指定了参数“2d”，表示我将在2维的环境中来进行绘画。
第三步，完成蓝色矩形的绘画。我用fillStyle方法指定了矩形的颜色为蓝色，再用fillRect方法画出了矩形，后者的参数指定了矩形的大小与位置。fillRect(0, 0, 125, 75)表示：从左上角的顶点（0,0）开始画一个矩形，宽为125像素，高为75像素。
最后，我在旗帜上画出了一个白色的“X”。我首先调用beginPath方法启动画路径的进程。指定的lineWidth属性值（也就是路径的宽度）为15像素，这是通过不断猜想加尝试才找到的看起来最合适的值。另一个属性strokeStyle则被指定为“white”，以表示路径颜色为白色。接下来，依靠moveTo和lineTo两个方法描绘出了整个路径。这两个方法都会定位出一个用来绘图的光标，其区别在于：前者移动光标的时候不会画出一条线，而后者在移动的同时会画线。在画X的过程中，首先从（0,0）——左上角开始，然后画一条线到（125,75）——右下角。接着把光标移到（125,0）——右上角，一笔画到（0,75）——左下角。最后的stroke方法将真正地呈现这些笔画。
canvas与SVG的简单对比
可缩放矢量图形（Scalable Vector Graphics，简称SVG）是在浏览器窗口进行绘画的一个早期标准。随着HTML5的canvas的发布，许多人都想知道它们之间到底孰优孰劣。
在我看来，它们之间最大的区别就是：canvas使用立即呈现模式，而SVG使用保留呈现模式。这意味着，canvas可以让所画的图形立即呈现在显示器里。在上面给出的代码中，一旦旗帜画完，系统就会“忘掉”它，且不会有任何状态保留下来。如果对它进行改动，将会导致彻底的重画。与之相比，SVG保留了所呈现对象的一个完整模型。要对图做出改动时，你只需要指出改动的地方（例如矩形的新位置），浏览器来负责呈现新的图形。这节省了开发人员的工作，但也为维护模块付出了性能上的代价。
能够同时通过CSS和JavaScript来进行设计，是SVG另一个值得称道的优点。与之相比，canvas只能通过JavaScript来进行操作。

如果想了解更多细节的不同之处，推荐你去阅读下面一些文章（前面的表就是经过作者同意后从下面的文章里拿来的）。

SVG和Canvas使用心得（Patrick Dengler著）

深入HTML5 Canvas（Jatinder Mann著）

HTML5 Canvas入门（John Bristowe著）

音频和视频支持
HTML5最大的新特色之一就是支持音频和视频。在HTML5之前，我们必须使用插件如Silverlight 或Flash来实现这些功能。在HTML5中，你可以直接使用新标签0fd4398f488890dd90846aa3879b44bc 和 d1043f9966936362a4c3cf27e75aa1d4将音频和视频嵌入到页面。
从编码的角度来看，audio和video元素使用起来很简单（下面我会深入地谈到它们的一些属性）。所有的主流浏览器都支持audio和video元素，包括最新版本的IE、Firefox、Chrome、Opera和Safari。虽然如此，有一点很关键：你需要编码解码器去播放音频和视频，而不同的浏览器支持的编码解码器是不同的（想要进一步了解视频容器和编码解码器，可以访问链接http://peintohtml5.org/video.html）。幸运的是，这不会成为技术障碍，因为HTML5对音频和视频的支持方式非常灵活（各个浏览器支持的音频和视频格式一般有好几种，它会轮流使用这几种格式去播放音频和视频）。*当然，你最好提供多种格式的音频和视频源，以满足不同浏览器的需求。*此外，你还可以继续使用Silverlight或Flash插件。最后，在开始和结束标签（例如4c8ef6465ff64ac169c54dd95a193235 和 d5ff6ef4add9521d9f025ca13249dca0）之间的文本，会在浏览器不支持audio或video元素的时候显示到web页面上。
例如：

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

执行这段代码时，浏览器将首先试图播放laughter.mp3文件。如果没有合适的编码解码器去播放，它会转向播放下一个文件laughter.ogg。如果浏览器根本不认识audio元素，它会在音频控件的位置显示文本“Your browser does not support the audio element”。
关于音频和视频，需要警告大家的是：HTML5并没有内置的数字版权管理（digital rights management，简称DRM）支持，作为开发人员，你必须自己实现它。
现在，让我们深入探讨这两个新元素。
音频
首先，让我们看看4c8ef6465ff64ac169c54dd95a193235的更多细节

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

前面已经介绍过，浏览器会依次尝试播放每个音频源，直到找到一个能播放的源。
注意这里多了一个controls属性。使用这个属性后，浏览器将显示音频回放控件，包括播放/暂停按钮、时间显示控件、静音按钮和音量控件。在绝大多数情形下，把这些控件展示给用户是明智的。我非常讨厌打开一个网页时有声音响起，而且没法把它停止、静音或者调低，难道你不是这样？
在IE浏览器中，各种音频控件如下图所示。

在不同的浏览器中，这些控件的外观并不一样。Chrome浏览器中的音频回放控件如下图所示（它正在播放一首歌）。当你的鼠标指针悬停在整个控件最右边的声音图标上时，将会弹出一个下拉式的音量控制条。

下图是Firefox中的控件样式，截图停在了一首歌暂停的时刻。和Chrome一样，它也有一个弹出式的音量控制条（本图未显示），可以通过将鼠标指针悬停在控件最右边的声音图标上弹出它。

audio元素的其他一些有趣的属性如下表所示。

下面这段示例代码，执行时将显示音频回放控件，并在音频文件加载完成后立刻自动播放，完成后再一遍又一遍地重复播放。

<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

如果你想在自己的浏览器中好好研究0fd4398f488890dd90846aa3879b44bc元素，可以参考http://w3schools.com/上的“Tryit Editor”。它可以用来编辑一些示例代码，然后看看会发生什么。此外，你也可以参阅下面这篇文章——How to add an HTML5 audio player to your site（如何向你的站点添加HTML5音频播放器）。

视频

现在，让我们试试430a183578a4202e72cc3ca5c190b9f2元素。

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

前面讲过，video元素也支持多个源，它会按顺序依次尝试播放。

与audio元素相同，video元素也有一个controls属性。视频控件在IE浏览器中的截图如下所示。

video元素其他一些有趣的属性如下表所示。

如果你希望继续研究430a183578a4202e72cc3ca5c190b9f2元素，可以使用来自w3schools.com/的“Tryit Editor”，用它来编辑一些示例代码，然后看看代码生成的效果。

以上就是五分钟学会HTML5！（一）的内容，更多相关内容请关注PHP中文网（www.php.cn）！

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

HTML5 : 현대 웹의 빌딩 블록 (H5)Apr 21, 2025 am 12:05 AM

HTML5는 W3C에 의해 표준화 된 하이퍼 텍스트 마크 업 언어의 최신 버전입니다. HTML5는 새로운 시맨틱 태그, 멀티미디어 지원 및 양식 향상을 도입하여 웹 구조, 사용자 경험 및 SEO 효과를 개선합니다. HTML5는 웹 페이지 구조를 더 명확하게하고 SEO 효과를 더 좋게하기 위해, 등 등과 같은 새로운 시맨틱 태그를 소개합니다. HTML5는 멀티미디어 요소를 지원하며 타사 플러그인이 필요하지 않으므로 사용자 경험을 향상시키고 속도를로드합니다. HTML5는 양식 함수를 향상시키고 사용자 경험을 향상시키고 양식 검증 효율성을 향상시키는 새로운 입력 유형을 도입합니다.

H5 코드 : 깨끗하고 효율적인 html5 작성Apr 20, 2025 am 12:06 AM

깨끗하고 효율적인 HTML5 코드를 작성하는 방법은 무엇입니까? 답은 태그, 구조화 된 코드, 성능 최적화 및 일반적인 실수를 피함으로써 일반적인 실수를 피하는 것입니다. 1. 코드 가독성 및 SEO 효과를 향상시키기 위해 시맨틱 태그 등을 사용하십시오. 2. 적절한 계약과 의견을 사용하여 코드를 구성하고 읽을 수 있도록하십시오. 3. CDN 및 압축 코드를 사용하여 불필요한 태그를 줄임으로써 성능을 최적화합니다. 4. 태그가 닫히지 않은 것과 같은 일반적인 실수를 피하고 코드의 유효성을 확인하십시오.

H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AM

H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.

H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는