Detailed explanation of HTML basic tags and structures

1. HTML Overview

1.HTML: Hypertext Markup Language. It is an identification language, not a programming language, and cannot use logical operations. Tags are used to unify the document formats on the Internet, linking scattered network resources into a logical whole.

Hypertext is a way of organizing information by linking multiple media together through hyperlinks.

Tags: Tags. Content wrapped in <> has a certain meaning, such as: …

Static web page: unchanged

Dynamic web pages: change simultaneously with the background

2.HTML tag structure

1. Document structure:

<!doctype html><!--! means declaration. This line of code means: The following document tags will be parsed as HTML5 -->
<html>
<!-Header. Used to complete the relevant settings of a web page->
<head>
    <meta charset="utf-8"><!--Chinese character encoding--><!--meta: yuan, used to complete the corresponding settings-->
    <meta name="keywords" content=""><!--Set a keyword for website search-->
    <meta name="description" content=""><!--Description of the website-->
    <title>My first html web page</title><!--Title-->
    <!--Set the small icon of the website-->
    <link rel="shortcut icon" href="" type="image/png">
    <style>
        /*Writing style*/
    </style>
    <link rel="stylesheet" href="style.css"><!--Used to introduce external style files-->
</head>
<!--2. Main part-->
<body>
    <p>This is a paragraph</p>
</body>
<script>
    //Where to put the script code</script>
</html>

2. Common tags:

<!--Set up mobile development-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <!--1.div tag, used for layout, no specific meaning, layering. Layer -->
     <div></div>
     <!--2.hx: Title, from level 1 to level 6, level 1 is the largest, level 6 is the smallest, automatically bold, with default font size -->
     <h1></h1>...<h6></h6>
     <!--3.p tag: indicates a paragraph. Equivalent to a carriage return. -->
     <p></p>
     <!--4.br: Generate line break -->
     <br>
     <!--6.a tag, link jump, target: _blank new window/_self current window_parent/top-->
     <a href="url address/link" title="B station">text</a>
     <a href="url address" target="_blank">text</a>
     <a href="url address" target="_self">text</a>
     <a href="'#href" target="#href">Text</a>
     The target location of the anchor link href='#href' should be set to the same attribute as its id='#href'
     <!--7.img is used to load external images, src is used to design the path of the loaded image or image, alt is used to display the content in alt when the image fails to load, otherwise it will not be displayed -->
     src path alt replacement text title image prompt text width: image width height: image height border border <img src="" alt="Undisplayed name">
     <!--8. The function of span is the same as div, both are used for layout. Div will occupy a single line, while span will not. Span notes are used for inline layout-->
     <span></span>
     <!--9.ul and ol, the former is unordered and the latter is ordered, both use li tags. -->
     <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>
     //Custom list focus Each website is basically customized at the bottom <dl> dl can only contain dt and dd One dt corresponds to multiple dd as brothers <dt></dt> noun 1
        <dd></dd>Noun 1 Explanation 1
        <dd></dd>Noun 1 Explanation 2
    </dl>Custom List

4. Tag attributes:

<!--Tag attributes:
            1. Usually consists of attribute name = "attribute value" 2. Serves as additional information.
            3. Not all tags have attributes, such as the br tag -->
            The title class below is the attribute name, and the following is the attribute value <p title="paragraph" class="content" id="content">This is a test paragraph</p>

5. Some other tags:

<!--Text formatting tags: use tags to beautify the appearance of text->
   <!--1.b and strong: both have bolding effects and are line-level labels (will not wrap automatically).
   But strong also has an emphasis. Note: Emphasis is mainly used for SEO to facilitate the use of keywords in advance -->
   <b>Bold</b>
   <strong>Bold and emphasized</strong>
   <!--2 i and em: make the text italic, em has an emphasis effect. And they are all row-level labels (no automatic line breaks),
   If you just want a simple tilt effect, you can use the i tag, such as adding an icon, etc. -->
   <i>Tilt</i>
   <em>Slanted and emphasized</em>
   <!--3.prePreformat text, retain line breaks, spaces and width.
   The font size of the text will be smaller, and the block-level tag (will occupy a single line in the browser) -->
   <pre>
       prePreformat text, retain line breaks, spaces and width</pre>
   
   <!--samll and big, reduce or enlarge the text by one size (row-level labels, will not occupy a single line, and will not recognize width and height) -->
   <!--The minimum font size supported by the browser is 12px. If the text is smaller than 12px, it needs to be processed-->
   <p>I am normal</p>
   <small>I am a smaller text</small>
   
   <!--sub and sup: Set the text as subscript and superscript, which is used to adjust the baseline of the normal display of the text, and the text will automatically be smaller-->
   <p>Normal display: X1+X2=Y</p>
   <p>Subscript:X<sub>1</sub>+X<sub>2</sub>=Y</p>
   <p>Subscript:X<sup>1</sup>+X<sup>2</sup>=Y</p>
   
   Delete line <del></del> <s></s>
   Underline <ins></ins> <u></u>
   Escape characters: &nbsp; space &lt; less than sign &gt; greater than sign

6. Table tags and form tags

Table tag structure: Function: Display data <table> <!--Table tag-->
        <th></th> Header Cell <tr>
            <td></td>Cell</tr>Row</table>
    Attributes align left center right Align border border cellpadding The distance between text and cells cellspacing The distance between cells width
     Table structure tags <thead></thead> Header area <tbody></tbody> Body area Merge cells: Merge across rows: rowspan Merge across rows and columns: colspan Merge columns and columns Code: Across rows: Write the merge code in the top cell as the target cell Across columns: Write the merge code in the leftmost cell as the target cell Steps for crossing rows or columns:
    	1. Determine whether to span rows or columns 2. Find the target cell 3. Delete the extra cells

7. Form tags:

Form tag: Main purpose: Collect user information The form consists of form fields, form controls (elements), prompt information, form fields to realize user information transmission <form action="" method=""></form>
    The action is followed by the address method submission method name input input form element:
     <input type="text">
	   type attribute value: text text password password button ridio radio button () checkbox (multiple choice button) .....
	   	 submit (submit button, submit the form value to the server) reset clears all data in the form button ordinary button combined with js use file upload file	   	 
	   name attribute: the name of the form element. Radio buttons must have the same name to allow multiple selections. 
	    			Both the radio button and the checkbox must have the same name
	   The value attribute defines the value that every element should have, and is mainly used by backend personnel	
		checked is the default selection for single and multiple selection when the page is opened	
		maxlength Maximum length Select drop-down form element usage scenario: There are multiple options and you want to save space <select name="" id="">
							    	<option value=""></option>
							   	 </select> 
    select contains at least one option. The attribute selected = selected in option is selected by default. <label for=""></label>Usage scenario: for corresponds to the same id attribute as the form element. When the text field form element has a lot of input text, <textarea><textarea>Generally, the length is specified by CSS

This is the end of this article about the detailed explanation of HTML basic tags and structures. For more relevant HTML basic tags and structures, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: What magical uses does CSS filter have

>>: CSS to achieve Cyberpunk 2077 style visual effects in a few steps