HTMLの基本タグと構造について解説

.top-info {
	width: 100%;
	position: absolute;
	bottom: -30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
}

.top-info {
	width: 100%;
	position: absolute;
	bottom: -30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20rpx;
}

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

<! --text formatting tags: is to beautify the appearance of text by tags ->
   <! -1.b and strong: both have a bolding effect, and both are line-level tags (no automatic line breaks).
   But strong also has an emphasis role. Note: emphasis is mainly used in SEO to facilitate advance keywords -->
   <b>bold</b>
   <strong> bolded and emphasized</strong>
   <! -2 i and em: make the text slanted, em has an emphasis role. And both are line level tags (no automatic line break).
   If it's just a simple tilt effect, use the i tag, such as adding icons, etc.-->
   <i>tilt</i>
   <em> tilt and emphasize</em>
   <! -3.pre preformatted text, preserving line breaks and spaces and width.
   The text will be one size smaller, block-level tags (which will occupy a separate line in the browser) -->
   <pre>
       pre preformatted
       text, preserving line breaks and spaces and width
       and width
   </pre>
   
   <! --samll and big to shrink or enlarge text by one (line-level tags, which do not occupy a separate line and do not recognize width and height) -->
   <! -- the minimum font size supported by the browser is 12px, displaying text smaller than 12px will require processing -->
   <p> I am normal</p>
   <small> I'm one size smaller text</small>
   
   <! --sub and sup: set text to subscript and superscript, used to adjust the baseline for normal text display, and the text will automatically be one size 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>
   
   Strikeout <del></del> <s></s>
   underscore <ins></ins> <u></u>
   Escape characters: &nbsp; space &lt; less than sign &gt;greater than sign

Table tag structure: Role: Display Show data
    <table> <! --table-tags-->
        <th> </th> Table header cells
        <tr>
            <td></td> cell
        </tr> rows
    </table>
    Attributes
    align left center right align
    border border cellpadding distance between text and cell cellspacing distance between cells width
     Table structure labels
    <thead></thead> table header area
    <tbody></tbody> main body area
    
    Merge cells:Merge across rows:rowspan rows and rows Merge across columns:colspan columns and columns
    Merge code:cross row:in the topmost cell for the target cell, write the merge code
    across columns: in the leftmost cell for the target cell, write the merge code
    Cross-row or cross-column steps:
    	1. Determine whether cross-row or cross-column 2. find the target cell 3. delete the extra cells

Form tag: Main purpose: collect user information
    The form consists of a form field Form controls (elements) Prompt messages
    form field implements user information transfer <form action="" method=""></form>
    action followed by the address method submit method name name
    
    input input form element:
     <input type="text">
	   type attribute value:text text password password button ridio radio box() checkbox(multi-select button).....
	   	 submit(submit button, submit the form value to the server) reset clear all data from the form
	   	 button normal button use with js file upload file
	   	 
	   name property: the name of the form element, the radio button must have the same name to be able to multi-select 1 
	    			radio button and checkbox should have the same name
	   value attribute Define value
	    	Every element should have one, mainly for the backend staff to use
	
		checked For both radio and multi-select, selected by default 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 the option for default selection

	<label for=""></label> Usage scenario for and form elements with the same id attribute correspond to each other
	textarea text field form element when there is a lot of input text
	<textarea><textarea> generally specify the length by css