HTML基础-跟着李南江学编程

最新推荐文章于 2024-09-16 23:05:35 发布

子.星语

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量185

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ljh1972/article/details/106211340

版权

在HTML5中，有不少新的富含语义的元素，可以向浏览器和开发人员传达元素的用途。< header>

W3C挖掘了数亿个的Web页面，找出开发人员一直在使用的ID和类名。一旦开发人员抛出div1、div2这些无意义标签，他们就得到了一个描述非常细致的已经在使用的元素的列表，并让其成为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>

使用Canvas元素在HTML5中进行绘画

HTML5中另外一个新元素是< canvas>标签。顾名思义，它就是一块用来绘画的空白平面。你需要使用JavaScript在这块画布上进行操作和绘画。

你可能需要为canvas元素赋予一个id属性，这样就能通过JavaScript代码以编程的方式访问它。如果你正在使用jQuery，并且在页面上只有一个canvas，你可以使用$(‘canvas’)来访问它，而不用为它命名。

你也可以为canvas指定height（高度）和width（宽度），但这不是必需的。在< canvas> 和< /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('myCanvas');
        var ctx = canvas.getContext('2d');

        // Draw blue rectangle
        ctx.fillStyle = '#0065BD';
        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来进行操作。

我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com