没事造轮子没事造轮子

没事造轮子

HTML 内容

  • W_Z_C
  • 阅读约 6 分钟

网站的内容显然是一个网站的核心，当今大多数网站的内容无非是由文字和多媒体资源组成的，HTML 提供了非常多具有相关语义和样式的元素，包括 <h1> - <h6>、<p>、<b>、<strong>、<i>、<em>、<mark>、<small>、<u>、<ins> 等等，下面咱们就简单的介绍一下它们。

文本

咱们的中文体系中，一篇文章主要是由标题和段落组成的，在 HTML 代码中，我们可以使用 <h1> - <h6> 来标记不同级别的标题，使用 <p> 来标记段落。除此之外，还有一些不常用的其它标签：

元素效果作用
<b>加粗用于加粗效果文字
<strong>加粗一般效果和 <b> 相同，只不过 <strong> 更强调语义上的行为，<b> 更像是外观上的改变。
<i>斜体用于斜体效果的文字，英文中可以增加辨识度，中文很少有特殊的应用场景，看设计师的喜好吧。
<em>斜体一般效果和 <i> 相同，同 <strong> 类似更强调语义性。
<mark>高亮一般用于标记某段文本。
<small>缩小使用缩小的方式描述，主要用于版权或者法律文本。
<s>删除用于删除效果的文字。
<del>删除更强调删除的语义。
<u>波浪线一般用于注释文本，一些浏览器会显示下划线效果，但正确的下划线应该使用 CSS 设置。
<ins>下划线增加的文本，可以和 <del> 进行配合，展示修改的内容。
<kbd>按键浏览器一般用等宽字体表示。
<code>代码显示代码片段。
<sub>下标下标文本。
<sup>上标上标文本。
<a>链接常见的文本链接，可以点击跳转到其它网页。

下面展示一下浏览器的默认效果：

具体代码如下：

<body>
    <h1>HTML 语言</h1>

    <p>
        HTML的全称为<del>一门语言</del><ins>超文本标记语言</ins>，是一种<strong>标记语言</strong>。它包括一系列<em>标签</em>．通过这些标签可以将网络上的文档格式统一，使分散的 <small>Internet</small> 资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。<sup>[1]</sup>
    </p>

    <p>下面是一段代码：</p>

    <pre>
        <code>
            <figure>
                <blockquote>
                    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
                </blockquote>
            <figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
            </figure>
        </code>
    </pre>

    <p>按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> 运行</p>
</body>

上面表格里面的元素基本上都是内联元素，说白了就是行内的文字效果，还有一些是行间效果的，这里也简单的介绍一下。

blockquote 元素

块引用，一般用于标注其他来源的文本内容，浏览器一般会给视觉上的缩进效果。

dl、dt、dd 元素

三者相互配合，用来标记列表项。dl 用来标记整个列表，dt 用来标记列表项标题，dd 用来标记列表项的内容。

figure、figcaption 元素

用于标记图形图像的元素，可以使用 figcaption 定义标题内容。和 img 元素配合，具体参考效果如下：

li、ol、ul 元素

li 用于定义列表子项，父标签 ol 标记有序列表，ul 标记无序列表。

pre 元素

pre 元素可以标记具有特殊格式文本，它允许文本内容中保留原始的空格和换行数量，并且文本默认会以等宽字体显示。常用来标注代码之类自带格式的内容。

多媒体

如果仅仅用文字来表达网页内容，显然会让网页看起来有些单调。HTML 为了丰富网页内容引入了多种多媒体资源，包括不限于图片、视频、音频等内容。

图片

图片可以增加网页的视觉效果，在 HTML 中使用 <img> 标签来插入图像，它是一个空元素。

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">

你可以使用 src 属性告诉浏览器去哪里加载图片，使用 alt 属性定义图片的替代文本，如果加载失败，浏览器会显示该属性的内容。

除此之外，你还可以通过 width 和 height 属性指定图片显示的具体大小。默认情况下会以像素为单位：

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">

当然大多数时候，你可以使用 CSS 样式来做这些事情。

picture 元素

在现代浏览器中，因为存在高分辨率屏幕之类的问题，如果仅使用原始图片做自适应的方式适配不同的屏幕，有时候会让图片看起来效果很差，HTML5 引入 <picture> 标签，该标签允许你定义多种图片适配不同的设备类型。

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">
</picture>

picture 元素内可以包含多个 source 元素，每个元素引入不同的图片，最后一个节点必须为 img 元素。浏览器在显示 picture 元素的时候会自动适配不同的媒体属性，如果匹配成功，会显示 source 节点对应的图片，否则会显示 img 元素提供的图片内容。

图像热点

图像热点是一个有意思的功能，它的作用类似于文字版的超链接。

<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>

img 元素可以使用 usemap 属性指定图片热点地图。map 元素可以定义具体的热点地图样式，area 元素定义具体的热点范围，当点击该元素定义的区域时，浏览器可以跳转到指定的第三方链接。

虽然效果看起很酷，但是现实中使用的并不多，可能因为这种导航方式对于 SEO 的效果并不是很好，对于部分网站来说可能太另类了。

SVG

SVG 是可缩放矢量图形的简称，它是一种基于 XML 的图像格式，用于定义 web 端的二维矢量图形，和光栅图像（jpg、gif、png）不同，矢量图形可以等比放大缩小而不失真。

SVG 图像规范比较复杂，这里并不详细展开，只是单纯的介绍一下如何将其引入到浏览器中：

<body>
    <svg width="300" height="200">
        <text x="10" y="20" style="font-size:14px;">
            Your browser support SVG.
        </text>
        Sorry, your browser does not support SVG.
    </svg>
</body>

在 HTML5 中，你可以使用 svg 元素将整个 SVG 图形直接嵌入到网页中。

Canvas

Canvas 是 HTML5 新引入的元素，你可以通过 Javascript 来在该节点上绘制你想要的内容。该元素更多的作用是制作在线游戏，因为你可以在该元素上进行像素级别的绘制。

该元素和普通的窗口类似，坐标体系的原点都在左上角：

你可以通过一些指定的 API 接口进行绘制操作。具体的 HTML 代码如下：

<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>

因为具体的绘制过程是用 Javascript 描述的，这里就不详细展开了，有兴趣的同学可以网上搜索一下相关的教程，基本操作还是非常简单的。

SVG 和 Canvas 之间的差异：

SVGCanvas
基于矢量（由形状组成）基于光栅（由像素组成）
多个图形元素，DOM 树的一部分单个元素和 img 元素的效果类似，可以将内容保持为图片
通过脚本和CSS 修改只能通过脚本修改
良好的文字渲染能力较差的文字渲染能力
使用少对象大表面绘制形状，主要用于插画、图标特效使用多对象小表面绘制形状，实时性能好，常用于游戏
扩展性好，适合任何分辨率，无需额外调整既可适配大多数网页扩展性差，同样的绘制方式高分辨率会显示像素化，需要调整绘制逻辑

音频

HTML5 引入 audio 元素来播放网页中的音频，然而该元素较新，有些旧版的浏览器并不支持。

下面是插入音频的代码：

<audio controls="controls" src="media/birds.mp3">
    Your browser does not support the HTML5 Audio element.
</audio>

该元素和 img 元素类似，都使用 src 属性引入外部资源，其中 controls 属性用于说明是否显示控制条。

除了上面这种方法之外，你还可以使用 embed 元素，将音频文件嵌入到网页中：

<embed src="media/wind.mp3">
<embed src="media/wind.ogg">

视频

HTML5 引入了 video 元素来播放网页中的视频，该元素一样比较新，旧的浏览器大概率不支持。

下面是插入视频的代码：

<video controls="controls" src="media/shuttle.mp4">
    Your browser does not support the HTML5 Video element.
</video>

整个效果和音频类似，你也可以通过 embed 元素将其嵌入：

<embed src="media/blur.swf" width="400px" height="200px">
大佬，给点反馈？
阅读数：1评分：0.0投票数：0