Head and body tags and their functions in HTML

head tag

The head tag is used to define the head of the document. It is a container for all head elements. Elements in <head> can refer to scripts, but where the browser finds the style sheet. The head of the document describes various attributes and information of the document, including the title of the document, its position on the web, and the relationship with other documents. Most of the data contained in the document header will not be displayed to readers as content.

The following tags can be used in the head section

<title>、<meta>、<link>、<style>、<script>。

The <head> tag should be placed at the beginning of the document, immediately after the <html>, and before the <body> tag.

The head of the document often contains some <meta> tags to tell the browser additional information about the document.

title tag

  1. The title of the document can be defined;
  2. It is displayed on the title bar or status bar of the browser window;
  3. title Writing keywords related to the webpage is conducive to SEO optimization

meta tag

  1. Generally define some special attributes of the current webpage
  2. Define the characteristics of the page through the attributes of the meta tag
  3. Format: <meta attribute 1 = '' attribute 2 =''> </meta> 

Note: The value of the attribute can use either '' or ""

            The charset attribute defines the character set of the current page and tells the browser what character set to parse the current page 

                                   <meta charset = ‘UTF-8’/>  

            The name attribute is generally used for some simple descriptions of the current webpage, which is convenient for searching the current webpage based on the description on the search engine

                                    keywords keywords

                                    author author

                                    description                                 

<meta name ='keywords'  content = '段海涛,多易教育'/ >

<meta name ='author'  content = '娜娜老师'/ >

<meta name ='description'  content = '大学毕业后从事英语教育,但对于编程有着浓厚的兴趣,故自学老师视频,然后整理了相关的文档'/ >

    http-equiv attribute How many seconds will the web page be refreshed                            

<meta http-equiv ='refresh'  content = '5;http://www.51doit.com'/ >  

link tag

Learn CSS styles and introduce external CSS style files

script tag

Learn js scripting language to introduce scripting language files

 


<!-- Remarks: Tips for people to see. Code that is not displayed and not executed -->

The shortcut of the comment is: Select the text and press ctr l + shift + / to comment and cancel the comment


body tag

Title tag

  <!-- h1-6 Level 6 heading>

<h1>主标题内容</h1>

<h2>副标题内容</h2>

<h3>3号标题内容</h3>

<h4>4号标题内容</h4>

<h5>5号标题内容</h5>

<h6>6号标题内容</h6>


Paragraph tag

<!--

P paragraph tag The text wrapped by the p tag is a separate paragraph

No line break inside paragraph

<br/> Line breaks wherever the label is placed

Line breaks between paragraphs

That is, each pair of P tags occupies one line

-->

<p>春回大地,万物复苏,一切都是最美好的景象</p>

<p>夏日炎炎,泳池无论是水还是美女都能让人感觉清凉</p>

<p>秋天给大地换上了金装,到处一片金黄<br/>

硕果磊磊,迎接丰收<br/>

秋叶扫地,化作春泥更护花</p>

 

Formatting tags

Document address: h ttps://www.w3school.com.cn/html/html_formatting.asp

Nesting of formatting tags

Multiple formats take effect at the same time

Nested format <big><b><i>Easy to produce, it must be a boutique<i><b></big>

Reasonable nesting, consistent nesting

 

<b>多易出品,必属精品</b>              <br/>        <!--加粗--> 

<big>多易出品,必属精品</big>          <br/>        <!--变大--> 

<small>多易出品,必属精品</small>      <br/>        <!--变小-->

<em>多易出品,必属精品</em>            <br/>        <!--着重斜体-->

<i>多易出品,必属精品</i>              <br/>        <!--斜体-->

Log<sub>2</sub>n                      <br/>       <!--下标-->

2<sup>n</sup>                         <br/>       <!--上标-->

多易出品<del>,</del>必属精品           <br/>       <!--删除-->

多易出品<ins>_<ins>必属精品             <br/>       <!--插入-->

<font color = "red" size = "20">多易出品,必属精品</font>

<!--Use CSS to cascade style any tags in the body-->

<p style = "样式名:样式值;样式名:样式值">多易出品,必属精品</p>

<p style = "font-size:40px;font-family:'楷体';color:orange;text-decoration:underline>多易出品,必属精品</p>

 

Character entity tag

Link: https://www.w3school.com.cn/html/html_entities.asp

Special symbol link: https://www.w3school.com.cn/tags/html_ref_symboles.html

 

Symbols with special meaning to HTML want to be displayed in the form of ordinary text, then character entities need to be escaped

<html>

    <head>

         <meta> charset = “utf-8”</meta>

    </head>

    <body>
    
         您好 <br/> haider

    </body>

</html>

 

The above printed content is after line break: hello haider

If you don't want it to wrap, you need to find the representative symbol of <> in the above link. The specific operations are as follows:

<html>

    <head>

         <meta> charset = “utf-8”</meta>

    </head>

    <body>
        
        <!--
        左右尖角号的字符实体一次为 &lt;&gt;
        空格的字符实体为 &nbsp;
        与符号字符实体为 &amp &lt;
        -->
         您好 &lt; br/ &gt; haider
        多易出品 &nbsp; &nbsp; &nbsp; &nbsp;必属精品
        &amp &lt;

        <!--
        其他特殊符号
        对于html 没有特殊含义
        但是又不好打出来的符号
         -->

    </body>

</html>

Have you got the above knowledge?

If you want to know more, you can communicate with the blogger at any time~~~

To watch more technical videos, please search Duoyi Education at Station B

The most professional big data full set of teaching videos

 

Easy to produce, it must be a boutique

 

Guess you like

Origin blog.csdn.net/sinat_40775402/article/details/108233674