집 > 기사 > 웹 프론트엔드 > 무시할 수 있는 유용한 HTML 태그(요약)

무시할 수 있는 유용한 HTML 태그(요약)

青灯夜游앞으로: 2021-02-13 08:59:562872검색

JavaScript 프레임워크와 라이브러리에 대한 의존도가 높아짐에 따라 많은 사람들이 HTML에 덜 관심을 기울이고 있습니다. 이로 인해 웹사이트 기능을 크게 향상시킬 수 있는 HTML의 많은 기능을 최대한 활용할 수 없게 되었습니다. 또한 의미론적 HTML을 작성하면 웹 사이트 콘텐츠에 올바른 컨텍스트를 추가하여 사용자 경험을 크게 향상시킬 수 있습니다.

이 글에서는 여러분이 간과했을 수도 있는 몇 가지 유용한 HTML 태그를 소개합니다.

<code><base>

<code><base> 标签允许你创建一个场景，其中存在一个基本URL，这个 URL 充当文档中所有相对 URL 的前缀。标签必须有一个包含基本URL的 <code>href 或 <code>target 属性，或者两者兼有。

<!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&#39;s used for Messaging, Voice and Video Calls</p>
</body>
</html>

这样就不必为每个请求重复 URL 的前缀了。

一个 HTML 文档中只能有一个 <code><base> 元素，并且它必须位于 <code> 元素内。

Image map

image map 是具有特定可点击区域的图片，并且是通过 <code>map 标签定义的。这些区域使用 <code><area> 标签设置。这使你可以在图像的不同部分中嵌入链接，这些链接可以指向其他页面，对于描述图片中的内容非常有用。

看一个例子：

第一步是像平常一样用 <code><img alt="무시할 수 있는 유용한 HTML 태그(요약)" > 标签插入图片，但是这次使用 <code>usemap 属性。

<img src="study.jpg" alt="Workplace" usemap="#workmap">

接下来创建一个 <code><map></map> 标签，并使用与 <code>img 标签中的 <code>usemap 属性值相同的 <code>name 属性。这会将 <code><image></image> 标签与 <code>map 标签链接在一起。

  <map name="workmap">

  </map>

然后开始创建可点击区域。我们需要定义如何绘制每个区域，通常用 <code>shape 和 <code>coords 来绘制。

<code><area>

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

用 <code><area> 元素定义图像上的可点击区域。它添加在 <code>map 元素内。

这些属性包括：

在相关区域上绘制矩形时需要使用 <code>shape。你可以使用其他形状，例如矩形、圆形、多边形或默认形状（整个图像）
<code>alt 用来指定当 <code>area 元素由于某些原因而无法呈现时要显示的替代文本
<code>href 包含将可点击区域链接到另一个页面的 URL
<code>coords 使用坐标（以像素为单位）精确切出形状。你可以用各种软件来获取图片的确切坐标；下面用微软的绘图软件作为一个简单的例子。不同的形状以不同的方式表示其坐标，比如矩形用 <code>left, top, right, bottom 表示。

在这里我们有 <code>top, left 坐标：

무시할 수 있는 유용한 HTML 태그(요약)

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

下面的截图显示了 <code>right, bottom 坐标：

무시할 수 있는 유용한 HTML 태그(요약)

最终得到：

<img src="study.jpg" alt="Workplace" usemap="#workmap">

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

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

对于 <code>circle，应该有圆心的坐标，然后添加半径：

<map name="workmap">
  <area shape="circle" coords="504,192,504" alt="clock" href="clock.html">
</map>

무시할 수 있는 유용한 HTML 태그(요약)

圆心的坐标同意位于左下角，圆心到末端的水平距离是半径。

创建一个 <code>poly 更像是徒手画图。你只需链接图像上的不同点，它们就会连接起来：

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

무시할 수 있는 유용한 HTML 태그(요약)

下面是用 HTML 创建形状时所需要的值：

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

이렇게 하면 모든 요청에 대해 URL 접두어를 반복할 필요가 없습니다.

이미지 맵

예를 보세요:

形状	Coordinates
rect	<code>left, top, right, bottom
circle	<code>center-x, center-y, radius
poly	<code>x1, y1, x2, y2, .….<code><base> 태그를 사용하면 문서 접두어. 태그에는 기본 URL을 포함하는 <code>href 또는 <code>target 속성(또는 둘 다)이 있어야 합니다.
HTML 문서에는 <code><base> 요소가 하나만 있을 수 있으며 <code> 요소 내에 위치해야 합니다.	이미지 맵은 클릭 가능한 특정 영역이 있는 이미지이며 <code>map 태그를 통해 정의됩니다. 이러한 영역은 <code><area> 태그를 사용하여 설정됩니다. 이를 통해 이미지의 다른 부분에 링크를 삽입할 수 있으며, 이를 통해 다른 페이지로 연결될 수 있으며, 이는 이미지 내용을 설명하는 데 유용합니다.

첫 번째 단계는 평소처럼 <code><img alt="무시할 수 있는 유용한 HTML 태그(요약)" > 태그를 사용하여 이미지를 삽입하는 것이지만 이번에는 <code>usemap 속성을 사용합니다. 🎜

<!DOCTYPE html>
<html>
<body>

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

🎜다음으로 <code><map></map> 태그를 생성하고 <code>img 태그의 <code>usemap 속성 값과 동일한 <code>이름을 사용합니다. /코드> 속성. 이는 <code><image></image> 태그를 <code>map 태그와 연결합니다. 🎜

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

🎜그런 다음 클릭 가능한 영역을 만들기 시작하세요. 일반적으로 <code>shape 및 <code>coords를 사용하여 각 영역을 그리는 방법을 정의해야 합니다. 🎜

<code><area>

 <pre class="brush:php;toolbar:false">
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>

🎜 <code><area> 요소를 사용하여 이미지에서 클릭 가능한 영역을 정의하세요. <code>map 요소 내에 추가됩니다. 🎜🎜이러한 속성은 다음과 같습니다. 🎜

<code>모양은 해당 영역 위에 직사각형을 그릴 때 필요합니다. 직사각형, 원, 다각형 또는 기본 모양(전체 이미지)과 같은 다른 모양을 사용할 수 있습니다.
<code>alt는 <code>영역 요소는 어떤 이유로 페이지를 렌더링할 수 없는 경우 표시되는 대체 텍스트입니다.
<code>href 클릭 가능한 영역을 다른 페이지로 연결하는 URL이 포함되어 있습니다.
coords 픽셀 단위의 좌표를 이용하여 모양을 정확하게 잘라냅니다. 다양한 소프트웨어를 사용하여 이미지의 정확한 좌표를 얻을 수 있습니다. 아래에는 간단한 예로 Microsoft의 그리기 소프트웨어가 사용되었습니다. 다양한 모양은 다양한 방식으로 좌표를 나타냅니다. 예를 들어 직사각형은 <code>왼쪽, 위쪽, 오른쪽, 아래쪽으로 표시됩니다.

🎜여기 <code>상단, 왼쪽 좌표가 있습니다: 🎜🎜 무시할 수 있는 유용한 HTML 태그(요약)

🎜🎜이미지 왼쪽 하단에 있는 커서를 읽을 수 있습니다. . 수평 및 수직 평면에서만 눈금자를 사용할 수도 있습니다. 🎜🎜아래 스크린샷은 <code>오른쪽, 아래쪽 좌표를 보여줍니다: 🎜🎜

🎜🎜마지막으로: 🎜

 <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" alt="무시할 수 있는 유용한 HTML 태그(요약)" >
  <figcaption>basketball<figcaption/>
<fig>

🎜다른 모양도 사용할 수 있지만 각 모양의 좌표는 다르게 작성됩니다. 🎜🎜<code>원의 경우 원 중심의 좌표가 있어야 하며 반경을 추가해야 합니다. 🎜

 
  <pre class="brush:php;toolbar:false">
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>

The code block

🎜

🎜🎜 중심 좌표 원은 왼쪽 하단에 위치하는 데 동의하고 중심에서 끝까지의 수평 거리가 반경입니다. 🎜🎜<code>폴리를 만드는 것은 자유롭게 그리는 것과 비슷합니다. 이미지의 다른 지점을 연결하기만 하면 연결됩니다: 🎜

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

🎜

🎜🎜다음은 HTML에서 도형을 생성할 때 필요한 값입니다: 🎜🎜🎜🎜ret🎜🎜<code>왼쪽, 위쪽, 오른쪽, 아래쪽🎜🎜🎜🎜circle🎜🎜<code>center- x, center-y, radius🎜🎜🎜🎜poly🎜🎜<code>x1, y1, x2, y2, ....🎜🎜🎜🎜default🎜🎜전체 영역🎜🎜🎜 🎜

<code><abbr></abbr> 和 <code><dfn></dfn>

标签 <code><dfn></dfn> 指定要在父元素中定义的术语。它代表“定义元素”。标签 <code><dfn></dfn> 的父级包含术语的定义或解释，而术语位于 <code><dfn></dfn> 内部。可以这样添加：

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

也可以与 <code><abbr></abbr> 结合使用：

<!DOCTYPE html>
<html>
<body>

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

这可以增强可访问性，因为这样编写语义 HTML 可以使阅读器和浏览器在适合用户的上下文中解释页面上的内容。

也可以单独使用 <code><abbr></abbr>：

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

<code><pre class="brush:php;toolbar:false"></pre> 和 <code><code>

预格式化的文本或 <code><pre class="brush:php;toolbar:false"></pre> 标签用于在编写文本时显示文本（通常是代码）。它显示所有空格和制表符，并完全按照块中的格式进行设置。

 <pre class="brush:php;toolbar:false">
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>

<code><fig></fig> 和 <code><figcaption></figcaption>

这两个标签通常会一起出现。<code><figcaption></figcaption> 用作 <code><fig></fig> 的标题。

 <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" alt="무시할 수 있는 유용한 HTML 태그(요약)" >
  <figcaption>basketball<figcaption/>
<fig>

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

代码块：

 
  <pre class="brush:php;toolbar:false">
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>

The code block

视频：

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

<code><details></details> 和 <code><summary></summary>

<code><details></details> 和 <code><summary></summary> 用来创建一个可切换的部分。 <code><summary></summary> 标签位于 <code><details></details> 标签内，单击后会自动显示和隐藏的内容。

最好用的地方是你可以用 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&#39;s happening externally. They enjoy spending time with just one or two people, rather than large groups or crowds</div>
    <div>        
</details>

<code><cite></cite> 和 <code><blockquote></blockquote>

基本上 <code><blockquote></blockquote> 是从另一个来源引用的部分。并添加了 <code><cite></cite> 属性来指示源。

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

如果使用 <code>cite 属性，那么这个属性必须是指向源的有效 URL。要获得相应的引文链接，必须相对于元素的节点文档来解析属性的值。有时它们是私有的，例如调用服务器端脚本收集有关网站使用情况的统计信息。

<code><cite></cite>

<code>cite 元素表示作品或知识产权的标题，例如书籍、文章、论文、诗歌、歌曲等。

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

总结

我们应该更多地关注这些标记，并通过编写更多的语义代码来改善网站的功能。

更多编程相关知识，请访问：编程教学！！

Shape	좌표

위 내용은 무시할 수 있는 유용한 HTML 태그(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html map default href

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：HTML 헤더 파일 CSS를 작성하는 방법다음 기사：HTML 헤더 파일 CSS를 작성하는 방법