65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML5 CSS3 新手指南 - 构建基础

Ravi Gadag
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.85/5 (20投票s)

2014年3月29日

CPOL

7分钟阅读

viewsIcon

44236

downloadIcon

515

使用 HTML5 和 CSS3 构建现代 Web 应用程序

引言

HTML5 是一种用于构建和呈现万维网内容的标记语言，也是互联网的核心技术。它是 HTML 标准的第五次修订。目前它仍在 W3C 标准的草案阶段。

HTML5 新增功能

  • 语义化：允许您更精确地描述您的内容。
  • 连接性：允许您以新颖且创新的方式与服务器进行通信。
  • 离线与存储：允许网页在客户端本地存储数据，并更有效地离线运行。
  • 多媒体：使视频和音频成为开放 Web 的一等公民。
  • 2D/3D 图形与效果：提供了更多样化的呈现选项。
  • 设备访问：允许使用各种输入和输出设备。

所需工具

我使用 Visual Studio 作为编辑器。还有其他替代方案，例如：

开始使用 HTML5

良好的 HTML5 页面基本结构

 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Demo: Adaptive Design With Media Queries</title>
<!-- main css -->
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<!-- all information goes here --> 
</body> 
</html>

下面解释上面示例中使用的每个标签。

DocType：在进行网页的 HTML 验证测试时，它告诉 HTML（超文本标记语言）验证器网页代码应符合哪个版本的 (X)HTML 标准。当您验证网页时，HTML 验证器会根据适用的标准检查代码，然后报告代码中有哪些部分未通过 HTML 验证（不符合）。

Head：head 元素代表文档的元数据集合。Meta：这是关于页面的额外信息。浏览器、搜索引擎会使用它来了解页面。例如：meta name="viewport"：Viewport meta 标签通常用于响应式设计，以设置移动设备的视口宽度和初始比例。link：用于链接外部资源，如样式表。body：这是整个 HTML 页面的容器。

正如我在上述 HTML5 功能中提到的，主要功能之一是语义化标记。

语义化 HTML 是指使用 HTML 标记来加强网页中信息的语义或含义，而不仅仅是定义其呈现或外观。

新增的语义化标签

Header：在 HTML5 之前，我们通常使用 div 标签来设计布局（div 是一个通用容器，用于容纳页面中的其他元素）。例如：<div id="header"> 我们明确地将其标识为 header，并根据 id 或 class 来设置样式。但在 HTML5 中，一切都围绕语义化展开。如果用 HTML5 编写相同的示例，则如下所示：

<header>
<h1>your headings</h1>
</header>

Article：代表页面中由一个独立于文档、页面或网站组成的部分。这可能是一个论坛帖子、杂志或报纸文章、网页日志条目、用户提交的评论，或任何其他独立的内容项。

<article >
            <header>
                <h1 class="post-title"><a href="#">Just a Post Title</a></h1>
                <p class="post-meta"><time class="post-date" 
                datetime="2011-05-08" pubdate>May 8, 2011</time> 
                <em>in</em> <a href="#">Category</a></p>
            </header>
            <figure class="post-image"> 
                <img src="images/sample-image.jpg" /> 
            </figure>
                            </article>

Nav：代表文档的导航。nav 元素是一个包含指向其他文档或当前文档内部部分的链接的区域。并非页面中的所有链接组都需要放在 nav 元素中——只有主要的导航链接组才需要。

<nav>
            <ul id="main-nav" class="clearfix">
                <li><a href="#">Home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">Contactus</a></li>
            </ul>
                    </nav>

Aside：代表页面中包含与 aside 元素周围内容有旁向关联的内容区域，并且可以将其视为独立于该内容的部分。在印刷排版中，这类部分通常表示为侧边栏。

<aside id="sidebar">
        <section class="widget">
            <h4 class="widgettitle">Sidebar</h4>
            <ul>
                <li><a href="#">SomeTage 1</a> (3)</li>
                <li><a href="#">Some Tag 2 </a> (23)</li>
                <li><a href="#">Some Tg 3</a>(18)</li>
            </ul>
        </section>
    </aside>

Footer：footer 元素通常包含其包含部分的元数据，例如作者、相关文档的链接、版权数据等。 <div id="footer"> 我们明确地将其标识为 footer，并根据 id 或 class 来设置样式。但在 HTML5 中，一切都围绕语义化展开。如果用 HTML5 编写相同的示例，则如下所示：

 <footer> 
<p>footer notes</p>
</footer>

Video：表示视频文件。src 属性指定视频文件。Controls 属性会显示控件栏（播放、暂停和音量按钮）。视频标签在所有浏览器中尚未完全支持，您可以使用 polyfills 或回退方案在跨浏览器中使用。

<video id="video" src="movie.webm" autoplay controls></video>

回退代码如下：[ https://css-tricks.cn/snippets/html/video-for-everybody-html5-video-with-flash-fallback/]

 <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    <!-- fallback to Flash: -->
    <object width="640" height="360" 
    type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" 
        value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
        <!-- fallback image. note the title field below, put the title of the video there -->
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             title="No video playback capabilities, please download the video below" />
    </object>
</video>

Input 标签：HTML5 引入了许多新的输入标签。下面逐一解释。

  • 语音输入：<input type="text" x-webkit-speech />
  • 必填属性：<input type="text" required />
  • 电子邮件输入：<input type="email" value="some@email.com" />
  • 日期输入：<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
  • 搜索输入：<input type="search" results="10" placeholder="Search..." />
  • 数字输入：<input type="number" step="1" min="-5" max="10" value="0" />

最终输出的截图如下：

New Input tags

新的输入标签的完整源代码如下：

<!doctype html>
<html lang="en">
    
    <head>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
    </head>
    
    <body>
        <form>• Speech input :
            <input type="text" x-webkit-speech />
            <br/>Auto complete :
            <input list="cars" />
            <br/>
            <datalist id="cars">
                <option value="BMW" />
                <option value="Ford" />
                <option value="Volvo" />
            </datalist>
            <input type="text" required />
            <br/>
            <input type="email" value="some@email.com" />
            <br/>
            <input type="date" min="2010-08-14" 
            max="2011-08-14" value="2010-08-14" />
            <br/>
            <input type="range" min="0" max="50" value="10" />
            <br/>
            <input type="search" results="10" placeholder="Search..." />
            <br/>
            <input type="tel" placeholder="(555) 555-5555" 
            pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
            <br/>
            <input type="color" placeholder="e.g. #bbbbbb" />
            <br/>
            <input type="number" step="1" min="-5" 
            max="10" value="0" />
            <br/>
            <input type="submit" />
        </form>
    </body>
</html>

图像

Img：图像元素用于显示图像。它有两个属性。

<img src="source file" alt="altText" />

Src = “图像文件路径” Alt = “图像的替代文本”，如果图像未找到，则会显示此替代文本。但在 HTML5 中，他们为 img 标签引入了一个新属性，称为“srcset”。Srcset = srcset 属性允许开发人员指定图像属性的来源列表，以便根据用户显示器的像素密度进行传递。

Eg : <img src="low-res.jpg" srcset="high-res.jpg 2x">

上面的示例告诉我们，对于低分辨率显示器上的此 img，以及任何不支持 srcset 属性的浏览器，使用 low-res.jpg 作为源。对于支持 srcset 属性的浏览器中的高分辨率显示器，使用 high-res.jpg 作为此 img 的源。

Figure：figure 元素可用于注解文档主内容中引用的插图、图表、照片、代码列表等，并且可以在不影响文档流的情况下将其移出该主要内容。

强调标签

    Bold : <b> This text is bold </b>
      Italic : <i>italics</i>
    Strike : <strike>Today's Special: Salmon</strike> NO LONGER AVAILABLE<br />
<span style="text-decoration:line-through;">Today's Special: Salmon</span> SOLD OUT

超链接

<a>：如果 a 元素具有 href 属性，则它代表一个超链接（一个超文本锚点）。如果 a 元素没有 href 属性，则该元素代表一个占位符，用于原本可以放置链接的地方。

Basic eg : <a href=”ListPage.html” >ListPage</a>
不同类型的超链接
<a href=’#Top’>Jump To Top </a> // this will jump to the place holder with id of “top” in the page
<a href="./page2.html" rel=next media="not print">next</a> rel will tell the relation of the page. 
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"/>
<link rel="icon" href="/favicon.ico"/>
<link rel="pingback" href="http://myblog.com/xmlrpc.php"/>
<link rel="prefetch" href="http://myblog.com/main.php"/>
<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="https://apache.ac.cn/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>

注释

<!--  --> : Multiline comments.

条件注释：这是一种特殊类型的注释，基于条件会执行注释，即使注释通常会被忽略。

!--[if lt IE 9]>
 If IE is lesser than 9 do some thing     <![endif]-->

列表

UL：无序列表。ul 元素代表一个项目列表，其中项目顺序不重要——也就是说，改变顺序不会实质性地改变列表的含义。大多数 UL 用于构建菜单栏。

<ul >
                <li><a href="#">Home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">Contactus</a></li>
            </ul>

OL：ol 元素代表一个项目列表，其中项目已故意排序，以至于改变顺序会改变列表的含义。

<OL>
<li>first</li>
<li>second</li>
</ol>

示例 HTML5 页面完整源代码

<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <!-- disable iPhone inital scale -->
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <title>Demo: Adaptive Design With Media Queries</title>
        <!-- main css -->
        <link href="style.css" rel="stylesheet" type="text/css">
        <!-- html5.js for IE less than 9 -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <div id="pagewrap">
            <header id="header">
                <hgroup>
                        <h1 id="site-logo"><a href="#">Demo</a></h1>
                        <h2 id="site-description">Site Description</h2>
                </hgroup>
                <nav>
                    <ul id="main-nav" class="clearfix">
                        <li><a href="#">Home</a>
                        </li>
                        <li><a href="#">about</a>
                        </li>
                        <li><a href="#">Contactus</a>
                        </li>
                    </ul>
                    <!-- /#main-nav -->
                </nav>
                <form id="searchform">
                    <input type="search" id="s" placeholder="Search">
                </form>
            </header>
            <!-- /#header -->
            <div id="content">
                <article class="post clearfix">
                    <header>
                            <h1 class="post-title">
                            <a href="#">Just a Post Title</a></h1>
                        <p class="post-meta">
                            <time class="post-date" datetime="2011-05-08" 
                            pubdate>May 8, 2011</time> <em>in</em>  
                            <a href="#">Category</a>
                        </p>
                    </header>
                    <figure class="post-image">
                        <img src="images/sample-image.jpg" />
                    </figure>
                    <p> SomeParagarph.</p>
                </article>
                <!-- /.post -->
            </div>
            <!-- /#content -->
            <aside id="sidebar">
                <section class="widget">
                        <h4 class="widgettitle">Sidebar</h4>
                    <ul>
                        <li><a href="#">SomeTage 1</a> (3)</li>
                        <li><a href="#">Some Tag 2 </a> (23)</li>
                        <li><a href="#">Some Tg 3</a>(18)</li>
                    </ul>
                </section>
                <!-- /.widget -->
                <section class="widget clearfix">
                        <h4 class="widgettitle">RandomWidgetr</h4>
                </section>
                <!-- /.widget -->
            </aside>
            <!-- /#sidebar -->
            <footer id="footer">
                <p>Responsive</p>
            </footer>
            <!-- /#footer -->
        </div>
        <!-- /#pagewrap -->
    </body>
</html>

代码结构技巧

使用 HTML5 Boilerplate，因为它是 HTML5 的行业标准模板：http://html5boilerplate.com/，因为它包含了所有基本设置和内置的浏览器兼容性支持。使用在线 HTML 验证器检查任何错误： http://validator.w3.org/#validate_by_input。使用 HTML5 语义标签来赋予语义含义，以便其他设备（如手持设备、移动设备、屏幕阅读器）能够理解标记。

浏览器 支持

由于 HTML5 仍处于草案阶段，许多浏览器厂商尚未完全支持所有 HTML5 功能。

现在您的脑海中可能有一些问题，例如：

那么，我如何测试我的浏览器是否支持 HTML5 功能？?

答案是：访问 http://html5test.com/ （下方是 html5Test.com 的快照）。

我如何知道哪些标签/HTML5 功能在浏览器中受支持？

有很多网站可以提供浏览器兼容性信息，但我个人推荐以下几个：https://caniuse.cn/：此网站提供跨浏览器兼容性图表。例如，我们以 HTML5 的 canvas 功能为例。

http://html5please.com/：该网站由一位杰出的网络专家“Paul Irish”维护。该网站将提供 polyfill 信息。例如，以 number 输入为例，它在某些浏览器中不受支持，但该网站建议使用 polyfill 来在所有浏览器中获得完全相同的功能。

现在，我们知道某些 HTML5 功能在某些浏览器中不受支持，那么下一步的解决方案是什么？?

Polyfill：Polyfill（或 polyfiller）是一段代码（或插件），它提供了您（开发人员）期望浏览器原生提供的技术。举个例子。HTML5 标签，如 section、aside、header，在旧版浏览器中不受支持。为了在旧版浏览器中运行，我们将包含一个 polyfill。

<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script> //polyfill html5 features to older browsers
<![endif]-->

流行的跨浏览器 polyfill：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

关注点

在撰写本文时，我学习了新的 SRCSet、Polyfills、Modernizer。未来，HTML5、ECMASCRIPT 6、CSS3 将为 Web 提供坚实的基础。

参考文献

历史

  • 初始版本 1.0：添加了文章所需的所有相关信息。
© . All rights reserved.