首页 > 其他分享 >HTML 26 - Head Element

HTML 26 - Head Element

时间:2024-05-18 19:52:33浏览次数:19  
标签:26 Tag tag Head used HTML document Example

 

The HTML header

The header part of an HTML document is represented by the <head> tag. It serve as a container of various other important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags. We are going to learn these tags with the help of suitable examples.

The HTML "<title>" Tag

The HTML <title> tag is used for specifying the title of the HTML document. The title must describe the content of the web page and its format should be text only. It appears in the title bar of browser’s tab.

Example

Following is an example that shows how to give a title to an HTML document using the <title> tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Title Tag Example</title>
</head>
<body>
   <p>Describing the use of title tag</p>
</body>
</html>

 

The HTML "<meta>" Tag

The HTML <meta> tag is used to provide metadata about an HTML document. The metadata is nothing but additional information about the web page including page expiry, page author, list of keywords, page description and so forth. This information is further used for the purpose of search engine optimization. Remember, the metadata specified by the <meta> tag is not displayed on the web page, but it is machine-readable. Its most commonly used attributes are name, content, charset, and http-equiv.

Example

The following example describes a few of the important usages of <meta> tag inside an HTML document.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Meta Tag Example</title>
   <!-- Provide list of keywords -->
   <meta name="keywords" content="C, C++, Java, PHP, Perl, Python">
   <!-- Provide description of the page -->
   <meta name="description" content="Simply Easy Learning by Tutorials Point">
   <!-- Author information -->
   <meta name="author" content="Tutorials Point">
   <!-- Page content type -->
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <!-- Page refreshing delay -->
   <meta http-equiv="refresh" content="30">
   <!-- Page expiry -->
   <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">
   <!-- Tag to tell robots not to index the content of a page -->
   <meta name="robots" content="noindex, nofollow">
</head>
<body>
   <p>Describing the use of HTML meta tag</p>
</body>
</html>

 

 

The HTML "<base>" Tag

The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item. We are allowed to use only one base element in our HTML document. The most frequently used attributes of <base> tag are href and target.

Example

In this example, all the given pages and images will be searched after prefixing the given URLs with base URL http://www.tutorialspoint.com/ directory −

<!DOCTYPE html>
<html>
<head>
   <title>HTML Base Tag Example</title>
   <base href = "https://www.xaut.edu.cn/" />
</head>
<body>

   <a href="/jsdl/xs.htm" title="HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>

 

On running the above code, tutorialspoint logo along with a link will be displayed. If we click on that link, it will redirect us to index page of HTML tutorial.

The HTML "<link>" Tag

In HTML, the <link> tag is used to specify relationships between the current webpage and another external resource. The source of external resources is placed inside the href attribute. The other attributes of <link> tag are rel, type, and media. Its most common use is to embed stylesheets into the HTML document.

Example

Following is an example to link an external style sheet file available in css sub-directory within web root.

<!DOCTYPE html>
<html>
<head>
   <title>HTML link Tag Example</title>
   <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
  <p>It is an example of linking stysheet to the current HTML document.</p>
</body>
</html>

The HTML "<style>" Tag

The HTML <style> tag is used to specify styles either for the whole HTML document or for a particular element. Its most common attributes are title and media.

Example

In the following example, we are defining a style for the <p> tag using <style> tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML style Tag Example</title>
   <base href="http://www.tutorialspoint.com/" />
   <style>
      .myclass{
        background-color: #aaa;
        padding: 10px;
      }
   </style>
</head>
<body>
   <p class="myclass">Hello, World!</p>
</body>
</html>

 

Note − To learn about how Cascading Style Sheet works, kindly check a separate tutorial available at http://www.tutorialspoint.com/css.

The HTML "<script>" Tag

The HTML <script> tag is used to include either an external script file or to define an internal script for the HTML document. The script is an executable code that performs some action.

Example

Following is an example where we are using script tag to define a simple JavaScript function. When the user clicks on the OK button a alert box will pop-up with a Hello, World message.

<!DOCTYPE html>
<html>
<head>
   <title>HTML script Tag Example</title>
   <base href="http://www.tutorialspoint.com/" />
   <script type="text/JavaScript">
      function Hello(){
         alert("Hello, World");
      }
   </script>
</head>
<body>
   <input type="button" onclick="Hello();" name="ok" value="OK"  />
</body>
</html>

 

 

 

 

标签:26,Tag,tag,Head,used,HTML,document,Example
From: https://www.cnblogs.com/emanlee/p/18190455

相关文章

  • HTML 27 - Adding Favicon
     WhatisaHTMLFavicon?Afaviconisasmallimagethatrepresentsyourwebsiteandhelpsusersidentifyitamongmultipletabs,bookmarksandsearchresults.Itcanbeinvariousformats,suchasICO,PNG,GIF,JPEG,orSVG,butICOisthemostwidely......
  • HTML 25 - Input Attributes
     HTMLInputAttributesTheHTMLinputattributesareusedtodefinethecharacteristicsandbehaviorofthe<input>element.Theseattributesareusedwiththedifferenttypesofinputfieldssuchastext,email,password,date,numberandsoforth......
  • HTML 24 - Form Control
     HTMLFormControlsTheformelementsthatareusedtocreatecontrolsfortheuserinteractionwithinthebrowseraretermedasformcontrols.Theyenableuserstoenterinformationfortheserversideprocessing.Thenatureofinteractionwiththeserv......
  • HTML 22 - Forms
     HTMLformsaresimpleformthathasbeenusedtocollectdatafromtheusers.HTMlformhasinteractivecontrolsandvariusinputtypessuchastext,numbers,email,passowrd,radiobutons,checkboxes,buttons,etc.Wecanseeitsapplicationinvarious......
  • HTML 23 - Form Attributes
     WhatareFormAttributes?InHTML,eachelementhasitsownattributesthatareusedtodefinethecharacteristicsofthatparticularHTMLelementandareplacedinsidetheelement'sopeningtag.The<form>elementalsohasattributesthatpr......
  • HTML 20 - Backgrounds
     Thebackgroundofawebpageisalayerbehinditscontent,whichincludestext,images,colorsandvariousotherelements.Itisanessentialpartofwebdesign,thatimprovestheoveralllookofawebpageaswellasuserexperience.HTMLoffersmultip......
  • HTML 21 - Colors
     HTMLColorsareawayofspecifyingtheappearanceofwebelements.Colorsareveryimportantaspectsofwebdesign,astheynotonlyenhancethevisualappealbutalsoinfluenceuserbehavior.Theyarealsousedtoevokeemotionsandhighlightimportan......
  • HTML 19 - Text Links
     Awebpagecancontainvariouslinksthattakeusdirectlytootherwebpagesorresourcesandevenspecificpartsofagivenpage.Theselinksareknownashyperlinks.HyperlinksallowvisitorstonavigatebetweenWebsitesbyclickingonwords,phrases......
  • HTML 18 - Lists
     HTMLListisacollectionofrelatedinfomation.Thelistscanbeorderedorunderdereddependingontherequirement.Inhtmlwecancreatebothorderandunorderlistsbyusing<ol>and<ul>tags.Eachtypeoflistcanbedecoratedusingpo......
  • Weblogic T3反序列化漏洞(CVE-2018-2628)
    目录前言T3协议概述漏洞复现修复方案前言WebLogicServer是一个企业级的应用服务器,由Oracle公司开发,支持完整的JavaEE规范,包括EJB、JSP、Servlet、JMS等,适合大型分布式应用和高负载场景。T3协议概述T3协议(Two-TierTCP/IPProtocol),是WebLogic中的一种专有协议,建立在TCP/IP协......