HTML learning notes

Posted by Ange52 on Sun, 06 Feb 2022 09:45:21 +0100

HTML learning notes

1. Introduction to HTML

HTML The full name of is hypertext markup language(Hyper Text Markup Language),Is a markup language and is not case sensitive.
Learning website:

2. HTML main structure

<!DOCTYPE html> <!-- Declaration header -->
    <!-- Header label -->
    <head> <!-- Basic required elements-->
    <!-- Body label -->
    <body><!-- Basic required elements-->

3. Common tags in head Tags

Head Label is HTML The most basic and necessary elements in the document mainly declare some information and attributes related to the page,

<head lang="en">
    <!-- lang Attribute representation language(language)It is used to declare the main language of the current page;When lang="en" When means English, when lang="zh-cn" When in Chinese. The main function is to make the search engine know the site/If the page is in Chinese or English, it is easier to be included in the database.-->
    <title></title> Set the name of the page display
    <meta charset="utf-8" /> Set the character set of the page
    <!-- http-equiv Inform browser behavior -->
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> Set the character set of the page
        <meta http-equiv="refresh" content="5;url= Com "/ > automatically jump to the target website after 5S is set
        <meta http-equiv="refresh" content="5" /> Set browser 5 s Refresh once 
    <!-- name Property tells the browser the corresponding content, such as keywords and description content -->
     <meta name="keywords" content="Keyword 1, keyword 2" /> Set the keywords of the website. Multiple keywords are separated by commas.
     <meta name="desription" content="Description content" /> Set the description of the site

Link Tab is used to define the connection relationship between two documents
Common attributes:
	rel="Represents the relationship between the document and the connected document"
	type="Type of linked document" For details, please refer to:
	href="Address of the linked document"
<link rel="icon" type="" href="" /> Load icon showing title
<link rel="stylesheet" type="text/css" href="" /> Import external file loading CSS style

<!--Direct loading CSS style-->
	<!--CSS Style content-->

<!--Direct loading JS script-->
	<!--JS Script content-->


4. Common labels in body labels

4.1 text format label

<!-- Paragraph label
	Common attributes: align Control paragraph alignment: left Default left center Center right be at the right
			title Set the paragraph title to display only when the mouse moves to the paragraph

<b></b> <!-- Bold label: simple bold -->
<strong></strong> <!-- Bold label: emphasize meaning -->
<i></i> <!-- Italic label -->
<em></em> <!-- Italic effect -->
<br /> Wrap label
<hr /> Horizontal label
	Common attributes:
	align Alignment(Default Center)
	width Length of horizontal line,Percentage and pixel are OK
	size Height of horizontal line
	color Color of horizontal line
<u></u> Underline label
<del></del> Delete line label
<hn></hn> n Indicates 1-6 Define different levels of titles,H1 Font maximum,H5 Font minimum
<bdo></bdo> Label the text display direction 
<!-- attribute: dir=ltr/rtl ltr: left to right(From left to right)l: right to left(Right to left) 
<p><bdo dir="rtl">abcdefg</bdo></p> ====> abcdefg
<sub></sub> Label defining subscript
<sup></sup> Define superscript labels
[notes] The above two labels include the contents to be superscript or subscript, such as
<detalis></detalis> Detail display label,Need to match summary The label defines the title of the display,Label details can be used internally p Label to define
<summary></summary> by detalis The label defines the title of the display
<dialog></dialog> The Definition dialog box or other interactive controls have no interactive function alone,stay Chrome Setting required in open = "true" Only support
<pre></pre> Output label in original format 
[notes] If the effect displayed in the editor is different from that in the browser,You need to use Notepad to open editing
<figure></figure> Used for the combination of elements as a separate whole,It is mostly used for the combination of pictures and picture descriptions
<figcaption></figcaption> Used to combine the title and<figure>Tags are interrelated,Used to display description information
<mark></mark> Text for marking or highlighting
<small></small> Define small font
<ins></ins> Defines the text that has been inserted into the document,And <del> Used together to describe updates and corrections in documents.

4.2 layout label (no practical significance)

<div></div> Meaningless block level labels
<span></span> Meaningless inline elements
<header></header> Define page header
<footer></footer> Define the bottom of the page
<nav></nav> Define web navigation
<aside></aside> Define page sidebar
<section></section> Define a block
<article></article> Define independent content
<address></address> Define address

4.3 list labels

unordered list 
    <!-- attribute:type Specifies the type of mark used in the list
		 value  :disc Default filled circle
			  circle Hollow circle
			  none Symbol not displayed
			  square block

Defined sequence table
	attribute: reversed flashback
		 start The starting value of the sequence table is specified
		 type Specifies the type of tag used in the list
		 1 Indicates that the item uses a numeric label(1,2,3,4...)
		 a Indicates that the item is labeled with lowercase letters(a,b,c,d...)
		 A Indicates that the item is labeled with capital letters(A,B,C,D...)
		 i Indicates that the item is labeled with lowercase Roman numerals
		 I Indicates that the item is labeled with capital Roman numerals
<li></li> be used for ul perhaps ol List items defined in

Definition list
<dl></dl> Definition list,collocation<dt>and<dd>use
<dt></dt> Define an item in a definition list
<dd></dd> Define a definition list to describe the project

4.4 hyperlink labels

<a></a> Define a hyperlink
Common properties: Window opening mode
_blank Open the linked document in a new window
_self Opens the linked document in the current window
_top Open the linked document at the top of the frame(Open the linked document in the whole window)
2.href: Page jump address
[notes]For path as jump address
 Relative path:
	Find relative to itself,There is no need to add protocol during jump
	./ current directory
	../ Parent directory
 Absolute path:
	The absolute path should be found from the root directory of the system,The corresponding protocol needs to be added

Anchor point
 use<a></a>Label to define the anchor point,Quickly locate content in the page
	1.Define a location where content needs to be quickly found a label,And use id Property set anchor
	2.Where you need to jump a label href Last addition of attribute#Followed by the name of the tracing point to achieve rapid positioning

4.5 multimedia Tags

4.5.1 progress label

<progress></progress> Progress bar label
<!-- Fit attribute required:
	min minimum value
	max Maximum
	value Current value


4.5.2 meter label

<meter></meter> Warning strip label
<!-- Fit attribute required
	min minimum value
	max Maximum
	low Minimum value of warning
	hight Maximum warning value for
	optimum Good value
	value Current value
[notes]default min and max The values are 0 and 1, respectively,Unless the current value is within this range,Otherwise, you have to reset the range


4.5.3 img label

<img /> Define image labels
<!-- Common properties:
	scr Set the path of the image
	[notes]If absolute path is used,It is suggested to add the corresponding agreement
	width Sets the width of the image
	height Sets the height of the image
	title Facility picture title,Appears when the mouse moves
	alt Set the text description of the picture,Not displayed but can be recognized by the reader
	[notes]Setting the width and height of the image at the same time will cause the image not to be scaled equally,It is recommended to set only the height or width to ensure that the image is scaled to the same scale
	ismap Transfer the left click of the mouse to the server
	[notes]Only in <img> Element is a valid href Attribute <a> In the case of a descendant element of an element(img Labels nested in a In the label and a Label has valid		href,This property is allowed.
	usemap For image mapping(Image with clickable area),Need to match map Label use
	[notes]If <img> Element is <a> or <button> The descendant element of the element cannot use this attribute.

4.5.4 map label

<map></map> Define image mapping
 attribute: name
 attribute: id
 value: custom
 Specific use:to name or id Attribute assignment,stay img Set in label usemap Attribute value and pass#To find the corresponding name or id attribute and establish a mapping relationship
[notes]map Labels need to match area The label determines the specific mapping area

4.5.5 area label

<area /> Define areas in image mapping
<!-- Common properties
	shape Defines the shape of the area:
	rect rectangle;ircle circular;poly polygon;default Whole picture
	coords Define the coordinates of the area
	rectangle:Upper left and lower right coordinates;circular:Set center point and radius;polygon:Set multiple coordinate points to form a polygon
	href Click the area to jump to the target
	target How to open

Specific code of image mapping:

<img src="" usemap="#test1" />
<map name="test1">
	<area shap="rect" coords="20,20,30,30" href="" target="_blank">

4.5.6 audio label

<audio></audio> Load audio
<!-- Common properties
	autoplay Auto play
	controls The playback control must be added
	src Voice address
	loop Loop Playback
	preload Advance loading

4.5.7 video label

<video></video> Load video
<!-- Common properties
	src Video address
	controls Playback control
	height Video height
	width Video width
	poster Define video cover
	autoplay Auto play
<source />Labels can match video Tags specify different types of the same resource
 Common properties:
src:Indicates the address of the resource
type:Indicates the type of resource,reference resources MIME

4.6 form labels

<table></table> Define a table
<!-- Common properties:
	border Sets the border size of the table
	align Set table location left center right
	width Sets the width of the table
	height Sets the height of the table
	background Set the background picture of the table
	bgcolor Sets the background color of the table
	bordercolor Sets the border color of the table
	cellspacing Spacing between cells
	cellpadding Spacing between cell contents and cell boundaries
<!-- The following labels are nested in table Inside label -->
<caption></caption> Defines the title of the table
<tr></tr> Define a row in the table
<!-- Common properties:
	height Set row height
	align Set line content alignment left right center
	valign Set the vertical alignment of line content top middle bottom
	bgcolor The background color of the row
<td></td> Define a cell in the table
<!-- Common properties:
	width / height Set width/high
	align Set content alignment
	valign Set vertical alignment
	bgcolor The background color of the cell
	colspan Set cell cross column merge
	rowspan Set cell cross row merge
<th></th> Define header elements within a table,The default rendering is centered and bold

[note] code and effect of cell cross row / column merging

    <table border="1px" align="center">
            <td colspan="2">1111</td>
            <!-- <td>2222</td> -->
            <td rowspan="2">1111</td>
            <!-- <td>1111</td> -->

design sketch:

<!-- Table layout label -->
<thead></thead> Set table header
<tbody></tbody> Set table subject content
<tfoot></tfoot> Set the bottom of the table

4.7 form labels

4.7.1 Form field

<form></form> Define a form field that users can enter and submit
<!-- Required attribute -->
action Submit data to a specified page
method Data submission method
	get It is suitable for submission with small amount of data,The submitted data appears in the form of parameters URL in
	post It is used for submission with large amount of data,Data will not be displayed directly, only in http Display in header

<!-- form Form related properties -->
<input /> Define a form input element(control)
<!-- Required attribute
	name Defines the name of the form item
	value Define the default values for this form item
	type Represents how an input field is displayed(Input type,Selective type,Click type)
	type Value of:
	type="text"Normal text field
	type="password" Password domain
	type="radio" Single choice 
	[notes]If you want to implement single selection name You need consistent values to produce a repulsive effect
	type="checkbox" check box 
	[notes]When the check box is implemented,name The value of must be enclosed in square brackets,such as name="hobby[]"Represents a set of data
	type="file" File selection form
	type="reset" Reset button clears the form information and restores the default state
	type="hidden" Represents a hidden domain that can be used to transmit some hidden information to the server
	type="image" Use the picture to display the submit button,use src Property to specify the location of the picture,be similar to img label
	type="button" Normal button(to JS use)
	type="submit" The submit button transmits the information to the server,have access to value Property to display the text information on the submit button
<button></button> Submit button
 value:submit Submit button;button Meaningless button
<label></label> by input Element definition annotation(Binding element)
Implement binding elements:
	1.Direct integration of content and input Labels are contained in one piece
	2.stay lable Define a in the label for attribute,stay input Label defines a id attribute,The association can be realized when the two attribute values are the same
[Example 1]:
<label>Do you like peas?
  <input type="checkbox" name="peas">
[Example 2]:
<label for="peas">Do you like peas?</label>
<input type="checkbox" id="peas">
[notes]Will one <label> And one <input> The main advantages of element association are:
1.The label text is not only visually associated with its corresponding text input element, but also in the program. This means that when the user focuses on the form input element, the screen reader can read the label, making it easier for users using assistive technology to understand what data to enter.
2.You can click the associated tab to focus or activate the input element, just like clicking the input element directly. This expands the clickable area of the element, making it easier for users, including those using touch-screen devices, to activate the element.
<textarea></textarea> Multiline text input field
    name Define a name for the multiline text entry field
    rows Defines the number of lines displayed by default for a multiline text entry field
    cols Defines the number of columns displayed by default for multiline text entry fields
    be careful:textarea No, value Property to get only the contents of the two tags,By default, the content in the label is also displayed
<select></select> Define drop-down list,Need to match option Labels and optgroup label
    name The name defined for the drop-down list
<option></option> Define list items for drop-down lists
    value Define default values for this list item
<!-- If there is no setting in the list item value Property, then when you click Submit, you will get option The content in the middle of the tag, if set, will be obtained value value-->
<optgroup></optgroup> option Group label,Define groups for drop-down lists
    lable Defines the name of the group
<fieldset></fieldset> take form Group related elements in the form,Can match legend label
<legend></legend> by fieldset Label defines the title of the group
<datalist></datalist> Define optional number list,adopt option Label definition alternatives

Optional data list code implementation

    <input type="text" name="" value="" list="data">
    <datalist id="data"> <!--By definition id Properties and input In label list Property associates the two -->

[note] form separation technology

For the convenience of typesetting, the form label in H5 can be separated from the form, but the following two conditions need to be met for realistic submission:

​ 1. Add the id attribute to the form tag and customize the attribute value

​ 2. Customize a form attribute for each tag that is separated from the form, and the value is the same as the id attribute value in (1)

code implementation

    <form id="myform" action="" method="get"></form>
    <input type="text" name="user" id="" form="myform" />
    <input type="submit" value="Submit" form="myform" />

4.7.2 form related attributes

1.checked Enables the default selection of radio boxes and check boxes input In label
2.selected Define the default selected options for the drop-down list option In label
min Used to set the minimum value of the form (for numeric forms) number range)
max Used to set the maximum value of the form (for numeric forms) number range)
readonly Read only input fields can be selected but cannot be modified
disabled Disable the input field, unable to obtain focus, unable to select, and displayed in gray
autofocus Get focus properties automatically
placeholder The form information prompt is used to replace the information in the form value Property and the default value set will not be submitted with the submission of the form
required Force the user to assign a value to the form, otherwise a prompt message will appear
multiple Set that multiple items can be selected at the same time in the current form, which is applicable to input[type=file]
	[notes]If you want to realize multiple selection, you must name Add after attribute[]Represents an array
pattern Used to customize validation rules (with regular expressions)
step Set the number to skip or set the interval between two values (in the value form)
novalidate Cancel form validation
formaction Used to modify the submission page of the current form in the submit button
formmethod Used to modify the submission method of the current form in the submit button
formenctype Used to modify the submitted data code type of the current form in the submit button
formnovalidate Used to cancel the current form validation in the submit button
tabindex tab Build switch index properties

4.7.3 add form type

The value of new form type is equal to date label

Label setting date selection form time label

Label setting time selection form week label

Label setting week selection form month label

Label setting month selection form datetime local tag

Tab set full date selection form email label

Tag sets the verification method of the current form as email verification url tag

Tag sets the verification method of the current form as url verification number label

Tag sets the validation method of the current form as numeric validation

min: set initial value

max: set end value range label

Label setting the verification method of the current form must be within the specified range

min: set lower limit

max: set upper limit search tag

Label sets the current form as a search form color label

Label sets the current form as color selection tel label

Tag sets the current form verification method as phone number

5. Global attributes

  1. Contenteditable content editable properties

    • The content of this attribute can be modified directly in the page
    • The content modification in the page is only temporary
  2. Editable attribute of designMode page (tag cannot be used, can only be used in JS)

    ==[note] = = this attribute is not the attribute of any label, but the document attribute. If the document is set to on, all elements in the page can be edited


6. Frame properties

<iframe></iframe> Open up a space in the page and link a sub page
	src:Address of the incoming sub page
	width:Set width
	height: Set height
<frameset></frameset> representative body The tag defines the frame page and how many rows or columns the frame will be divided into
	cols:Define how many columns the frame page contains and the size of the columns (each value is separated by commas, and the value is pixel or percentage)
	rows:Defines how many rows the frame page contains and the size of the rows
	src:Define the address of the content
	name:Also define a name for each frame (used when one frame is also linked to another frame page)

Topics: Front-end html