HTML 内容
- W_Z_C
- 共 2451 字,阅读约 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 之间的差异:
SVG | Canvas |
---|---|
基于矢量(由形状组成) | 基于光栅(由像素组成) |
多个图形元素,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">