HTML 内容

HTML 内容

网站的内容显然是一个网站的核心,当今大多数网站的内容无非是由文字和多媒体资源组成的,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>链接常见的文本链接,可以点击跳转到其它网页。

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

HTML 样式

具体代码如下:

<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 元素

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

blockquote 元素

dl、dt、dd 元素

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

dl、dt、dd 元素

figure、figcaption 元素

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

figure、figcaption 元素

li、ol、ul 元素

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

li、ol、ul 元素

pre 元素

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 来在该节点上绘制你想要的内容。该元素更多的作用是制作在线游戏,因为你可以在该元素上进行像素级别的绘制。

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

Canvas

你可以通过一些指定的 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">

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top