每个前端开发人员都应该知道的HTML标签

2020年12月30日11:15:51 发表评论 36 次浏览

本文概述

随着对JavaScript框架和库的日益关注, 许多开发人员对HTML的重视程度降低。因此, 我们无法充分利用可改善你网站功能的内置HTML功能。可及性(屏幕阅读器), 网络抓取工具, 漫游器甚至SEO。此外, 编写语义HTML可以在网站内容中添加正确的上下文, 从而显着改善用户体验。

在本指南中, 我们将介绍你可能会忽略的一些最有用的HTML标签。我们将向你展示每个标签的作用以及如何使用HTML简化开发过程并增强应用程序或网站的用户体验。

我们将详细介绍以下内容:

  • <基础>
  • 影像图
  • <区域>
  • <abbr>和<dfn>
  • <pre>和<code>
  • <fig>和<figcaption>
  • <详细信息>和<摘要>
  • <cite>和<blockquote>

让我们开始吧!

<基础>

的<基础>标签允许你创建一个方案, 其中存在一个基本URL, 该基本URL充当文档中所有相对URL的前缀。标签必须有一个href, 其中包含基本网址, 目标属性, 或两者兼而有之。

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.google.com/" target="_blank">
</head>
<body>

<h1>The base element(Google As a case study)</h1>

<p> <a href="gmail">Gmail</a> - Used to send emails; which are messages distributed by electronic means from one computer user to one or more recipients via a network.</p>

<p><a href="hangouts">Hangouts</a> - It's used for Messaging, Voice and Video Calls</p>
</body>
</html>

你不必为每个请求重复URL的前缀, 这样你就可以提取代码以防止重复重复。

只能有一个<基础>元素, 并且必须位于<头>元件。

影像图

图片地图是具有特定可点击区域的图片, 它的定义是地图标签。这些区域是使用<区域>标签。基本上, 这使你可以在图像的不同部分嵌入链接, 这些链接可以指向其他页面, 这对于描述图片中的内容非常有用。

让我们看一个例子:

第一步是使用<img>标记, 就像你通常一样, 但是这次我们将使用使用地图属性。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

每个前端开发人员都应该知道的HTML标签1
<img src="study.jpg" alt="每个前端开发人员都应该知道的HTML标签" alt="Workplace" usemap="#workmap">

接下来, 创建一个

<地图>

分别标记并使用

名称

属性的值与

使用地图

中的属性

每个前端开发人员都应该知道的HTML标签2

标签。这链接了

<图像>

标签与地图标签。

<map name="workmap">

  </map>

现在开始有趣的部分:自己创建可点击区域。我们需要定义如何绘制每个区域-通常使用形状和坐标来绘制它。

<区域>

<map name="workmap">
  <area shape="rect" coords="255, 119, 634, 373" alt="book" href="book.html">
</map>

图像上的可点击区域是使用<区域>元件。它被添加到地图元件。

这些属性包括:

  • 形状用于在相关区域上绘制矩形时使用。你可以使用其他形状, 例如矩形, 圆形, 多边形或默认形状(整个图像)
  • alt指定如果area元素由于任何原因而无法呈现时要呈现的替代文本
  • href包含将可点击区域链接到另一个页面的URL
  • 座标使用坐标(以像素为单位)准确切出形状。你可以使用各种软件来获取图片的确切坐标;我们将使用Microsoft Paint作为一个简单示例。不同的形状以不同的方式书写其坐标。对于矩形, 它是左, 上, 右, 下.

这边有左上方坐标:

Microsoft Paint中的光标坐标

你可以在图片的左下方读取光标在图片上的坐标, 也可以只在水平和垂直面上使用标尺。摄影者

塔蒂安娜·西里科娃(Tatiana Syrikova)

像素

.

以下屏幕截图显示右下坐标:

右下角的光标

你应该最终得到:

<img src="study.jpg" alt="每个前端开发人员都应该知道的HTML标签" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="255, 119, 634, 373" alt="book" href="book.html">
</map>

你可以使用其他形状, 但是每个形状的坐标写法不同。

为一个圈你将获得圆心的坐标, 然后添加半径:

<map name="workmap">
  <area shape="circle" coords="504, 192, 504" alt="clock" href="clock.html">
</map>
时钟中心的坐标

圆心的坐标照常位于左下角, 圆心到末端的水平距离是半径。摄影者

布宜诺斯艾罗

像素

.

创建一个聚更像是手绘图;你只需链接图像上的不同点, 它们就会连接起来:

<map name="workmap">
  <area shape="poly" coords="154, 506, 168, 477, 252, 429, 187, 388, 235, 332, 321, 310, 394, 322, 465, 347, 504, 402, 510, 469512, 532, 454, 581, 423, 585, 319, 593, 255, 589, 240, 536" alt="clock" href="clock.html">
</map>
汉堡边缘的坐标

摄影者

Anna Tukhfatullina食物摄影师/发型师

像素

.

以下是使用HTML创建形状的快速备忘单:

形状 座标
直肠 左, 上, 右, 下
x中心, y中心, 半径
x1, y1, x2, y2, ...。
default 整个地区

<abbr>和<dfn>

的<dfn>标签指定要在父元素中定义的术语。它代表"定义元素"。这个的父母<dfn>标签包含该术语的定义/解释, 而该术语位于<dfn>。你还可以添加:

<p><dfn title="HyperText Markup Language">HTML</dfn> 
  Is the standard markup language for creating web pages.
</p>

也可以与<abbr>:

<!DOCTYPE html>
<html>
<body>

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> 
  It's the standard markup language for creating web pages.</p>
</body>
</html>

这对可访问性非常有用, 因为这样编写语义HTML可以使屏幕阅读器和浏览器在适合用户的上下文中解释页面上的内容。

你可以使用<abbr>独立地:

<abbr title="Cascading Stylesheet">CSS</abbr>

<pre>和<code>

预格式化的文本, 或者<pre>标记, 用于在编写时显示文本(通常是代码)。它显示所有空格, 制表符, 并完全按照块中的格式设置。

<pre>
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>

<图>和<插图>

这两个标签通常一起出现。一种<插图>元素充当标题<图>.

<fig>
  <img src="https://images.unsplash.com/photo-1600618538034-fc86e9a679aa?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
  <figcaption>basketball<figcaption/>
<fig>

这些标签也可以与代码块, 视频和音频剪辑一起使用, 如下所示。

代码块:

<figure>
  <pre>
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
   <figcaption>The code block</figcaption>
</figure>

视频:

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

音讯:

<figure>
    <audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>
  <figcaption>An audio file</figcaption>
</figure>

<详细>和<摘要>

<详细>和<摘要>创建一个可切换的部分。的<摘要>标签位于<详细>标签, 然后单击将自动显示隐藏的内容。

最好的部分是你可以使用CSS设置元素样式即使没有JavaScript, 它也可以完美运行。

<details>
    <summary>
        <span>I am an introvert</span>
    </summary>

    <div>An introvert is a person with qualities of a personality type known as introversion, which means that they feel more comfortable focusing on their inner thoughts and ideas, rather than what's happening externally. They enjoy spending time with just one or two people, rather than large groups or crowds</div>
    <div>        
</details>

<引用>和<blockquote>

<blockquote>基本上是从其他来源引用的部分。的<引用>添加了属性以指示来源。

<blockquote cite="https://en.wikipedia.org/wiki/History_of_Nigeria">
The history of Nigeria can be traced to settlers trading across the middle East and Africa as early as 1100 BC. Numerous ancient African civilizations settled in the region that is known today as Nigeria, such as the Kingdom of Nri, the Benin Empire, and the Oyo Empire. Islam reached Nigeria through the Borno Empire between (1068 AD) and Hausa States around (1385 AD) during the 11th century, [1][2][3][4] while Christianity came to Nigeria in the 15th century through Augustinian and Capuchin monks from Portugal. The Songhai Empire also occupied part of the region.[5]
</blockquote>

如果引用使用了属性, 它必须是通向源的有效URL。要获得相应的引文链接, 必须相对于元素的节点文档来解析属性的值。有时, 它们是供私人使用的, 例如, 服务器端脚本收集有关站点使用报价的统计信息, 而通常不用于客户端。

<引用>

的引用元素表示作品或知识产权的标题, 例如书, 纸, 论文, 诗歌, 歌曲等。这可以是被详细引用(即引用)的作品, 也可以只是引用的引用。

<p>The best movie ever made is <cite>The Godfather</cite> by
Francis Ford Coppola . My favorite song is <cite>Monsters You Made</cite> by the Burna boy.</p>

总结

我们的开发人员应更多地关注这些人气较低的标记, 并编写更多的语义代码以改善我们网站的功能。

你可以在下面了解有关这些HTML标签的更多信息notlogy和官方网站HTML标准.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: