Recommended:html tutorial

With the increasing reliance on JavaScript frameworks and libraries, many people pay less attention to HTML. . This results in us not being able to take full advantage of many features of HTML, which can greatly enhance website functionality. Also by writing semantic HTML you can add the correct context to your website content, significantly improving the user experience.

This article will introduce some useful HTML tags that you may have overlooked. The

tag allows you to create a scenario where there is a base URL that acts as the Prefix for all relative URLs. The tag must have ahrefortargetattribute that contains the base URL, or both.

    
  
The base element(Google As a case study)
 
 Gmail - Used to send emails; which are messages distributed by electronic means from one computer user to one or more recipients via a network.
 
Hangouts - It's used for Messaging, Voice and Video Calls
  

This way you don’t have to repeat the URL prefix for each request.

There can only be oneelement in an HTML document, and it must be located within theelement.

Image map

Image map is an image with a specific clickable area and is defined through themaptag. These areas are set up using thetag. This allows you to embed links in different parts of the image, which can lead to other pages, which is useful for describing what is in the image.

Look at an example:

The first step is to insert the image using thetag as usual, but this time using theusemapattribute .

Next create atag and use thesame value as theusemapattribute in theimgtag nameattribute. This will link thetag with themaptag.

Then start creating clickable areas. We need to define how to draw each area, usually usingshapeandcoords.

Use theelement to define clickable areas on the image. It is added inside themapelement.

These properties include:

• shapeis required when drawing a rectangle over the relevant area. You can use other shapes such as rectangle, circle, polygon or the default shape (whole image)
• altis used to specify when theareaelement is Alternate text to be displayed when rendering fails
• hrefContains a URL linking the clickable area to another page
• coordsusing coordinates (starting with (in pixels) to cut out shapes accurately. You can use various software to obtain the exact coordinates of an image; Microsoft's drawing software is used below as a simple example. Different shapes represent their coordinates in different ways. For example, a rectangle is represented byleft, top, right, bottom.

Here we havetop, leftCoordinates:

You can find the The lower left corner reads the coordinates of the cursor on the picture, or you can just use the ruler on the horizontal and vertical planes.

The screenshot below shows theright, bottomcoordinates:

circle, there should be the coordinates of the center of the circle, and then add the radius:

polyis more like drawing freehand. You just link different points on the image and they will be connected:

和

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

HTML Is the standard markup language for creating web pages. 

也可以与结合使用：

   
HTML It's the standard markup language for creating web pages.
  

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

也可以单独使用：

CSS

</code> 和 <code><code></code></h2><p>预格式化的文本或 <code><pre class="brush:php;toolbar:false"></code> 标签用于在编写文本时显示文本（通常是代码）。它显示所有空格和制表符，并完全按照块中的格式进行设置。</p><pre class="xml hljs"> <pre class="brush:php;toolbar:false"> <code> p { color: black; font-family: Helvetica, sans-serif; font-size: 1rem; } </code> 

Copy after login

和

这两个标签通常会一起出现。