ホームページ  >  記事  >  ウェブフロントエンド  >  無視してもよい便利な HTML タグ (概要)

無視してもよい便利な HTML タグ (概要)

青灯夜游
青灯夜游転載
2021-02-13 08:59:562873ブラウズ

無視してもよい便利な HTML タグ (概要)

推奨: html チュートリアル

JavaScript フレームワークやライブラリへの依存度が高まるにつれて、多くの人は HTML にあまり注意を払わなくなりました。その結果、Web サイトの機能を大幅に強化できる HTML の多くの機能を最大限に活用できなくなります。また、セマンティック HTML を記述することで、Web サイトのコンテンツに正しいコンテキストを追加でき、ユーザー エクスペリエンスが大幅に向上します。

この記事では、見落としているかもしれない便利な HTML タグをいくつか紹介します。

<code><base>

<code><base> タグを使用すると、すべての相対 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> 要素は 1 つだけ存在でき、<code> 要素内に配置する必要があります。

イメージ マップ

イメージ マップは、特定のクリック可能領域を持つ画像であり、<code>map タグによって定義されます。これらのエリアは、<code><area> タグを使用して設定されます。これにより、画像のさまざまな部分にリンクを埋め込むことができ、他のページに移動できるため、画像の内容を説明するのに役立ちます。

例を見てください:

最初のステップは、通常どおり <code><img alt="無視してもよい便利な HTML タグ (概要)" > タグを使用して画像を挿入することですが、今回は <code>usemap を使用します。 ### 属性 。

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

次に、

img<code> タグ名 属性と同じ <code>usemap 属性値を持つ <code><map></map> タグを作成します。これにより、<code><image></image> タグが <code>map タグにリンクされます。 <code><pre class="brush:html;toolbar:false"> &lt;map name=&quot;workmap&quot;&gt; &lt;/map&gt;</pre>次に、クリック可能な領域の作成を開始します。通常は

shape

と <code>coords を使用して、各領域の描画方法を定義する必要があります。 <code>

<area>

<code><pre class="brush:html;toolbar:false">&lt;map name=&quot;workmap&quot;&gt; &lt;area shape=&quot;rect&quot; coords=&quot;255,119,634,373&quot; alt=&quot;book&quot; href=&quot;book.html&quot;&gt; &lt;/map&gt;</pre>

<area>

要素を使用して、画像上のクリック可能な領域を定義します。これは <code>map 要素内に追加されます。 <code>これらのプロパティには次のものが含まれます。

    shape
  • は、関連する領域上に四角形を描画する場合に必要です。長方形、円、多角形、またはデフォルトの形状 (画像全体) などの他の形状を使用できます。 <code>
  • alt
  • は、<code>area 要素が代替テキストである場合を指定するために使用されます。レンダリングが失敗したときに表示されます。<code>
  • href
  • 座標 (ピクセルで始まる) を使用して、クリック可能な領域を別のページにリンクする URL <code>
  • #coords
  • が含まれます。正確に形を切り出します。画像の正確な座標を取得するにはさまざまなソフトウェアを使用できます。以下では、簡単な例として Microsoft の描画ソフトウェアを使用します。形状が異なれば、その座標はさまざまな方法で表されます。たとえば、長方形は <code>left、top、right、bottom で表されます。 <code>
  • ここには
top, left

座標があります: <code>

無視してもよい便利な HTML タグ (概要) 下部の左隅で画像上のカーソルの座標を読み取ることも、水平面と垂直面でルーラーを使用することもできます。

以下のスクリーンショットは、

右下

の座標を示しています: <code>

##最終結果は次のとおりです: 無視してもよい便利な 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>

は次のこともできます。他の形状も使用できますが、各形状の座標の書き方は異なります。

circle

には、円の中心の座標があり、半径を追加する必要があります:

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

##円の中心の座標は左下隅にあることに同意します。中心から円の端までの水平距離が半径です。 無視してもよい便利な HTML タグ (概要)

ポリ

の作成は、フリーハンドで描画することに似ています。画像上のさまざまな点をリンクするだけで、それらが接続されます:

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

<code>#HTML で図形を作成するときに必要な値は次のとおりです:

無視してもよい便利な HTML タグ (概要)

形状

座標左、上、右、下中心-x、中心-y、半径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>

总结

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

更多编程相关知识,请访问:编程教学!!

##rect
円<code>
poly<code>
<code>エリア全体

以上が無視してもよい便利な HTML タグ (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。