HTML5 learning experience summary (recommended)

Time:2021-4-2

Summary of HTML learning

1. What is html:HyperTextMarket language Hypertext markup language is used to describe Web page language, HTML uses tag to describe Web page, html is not a programming language, but a markup language.

2. Experienced versions: html2.0, html3.2, html4.0, html4.0.1, HTML5

3. New features of H5:

· canvas elements for painting
· video and audio elements for media playback
Better support for local offline storage
New special content elements, such as article, footer, header, NAV, section
New form controls, such as calendar, date, time, email, URL, search

4. Html is composed of tags

5. Basic format of HTML:

XML/HTML CodeCopy content to clipboard
  1. <html>  
  2.     <head>  
  3. Put some attribute information, auxiliary information.
  4. Introduce some external files. (css,javascript)
  5. Its contents will be loaded first.
  6. Meta: provides information about the document
  7. Link: define the relationship with external resources (CSS style)
  8. Style: define styles in document content
  9. Script: define script program, or external script document
  10. Noscript: contains the content displayed when the browser disable scripts or does not support scripts
  11.     </head>  
  12.     <body>  
  13. Store real data.
  14.     </body>  
  15. </html>  

-DOCTYPE: declare the version of the document
-Meta: tell the browser some information about the document

Most tags have a start tag and an end tag, some of which have a single function, or no content to modify can end in the tag.

If you want to operate the content modified by the tag more richly, you need the attributes in the tag. By changing the attribute value, you can add more effect choices.

Attribute and attribute value are connected by “=”, and attribute value can use double quotation marks, single quotation marks or no quotation marks, generally double quotation marks. Or the writing standard stipulated by the company.

H5 global attribute:

Text element

XML/HTML CodeCopy content to clipboard
  1. -Br > line feed
  2. -Wbr ﹣ in English articles, when the browser is expanded or narrowed, when a long word is encountered,<wbr>You can specify where to cut the word.

<a>Hyperlink, properties:

XML/HTML CodeCopy content to clipboard
  1. 1. href:url。   
  2.   
  3. 2. Targert: page opening mode_ Blank new page open
  4.   
  5. Anchor point: that is, back to the top. First define an ID at the top, and then use the anchor in the hyperlink to jump,href=“#id”;   
  6.   
  7. 4. If the browser cannot parse the protocol specified in the document, it will call the application, and the program that can be parsed can be opened.

· ABRR abbreviations
A paragraph of text without any emphasis, bold
· strong indicates important content, bold
· EM means to emphasize a paragraph of text and to slant it
· I a paragraph of text without any emphasis, slanted
· cite stands for the title of the work and tilts the title of the work
· del represents the text removed from the document
· s means that the text is no longer accurate, and it is also a deletion line
Underline a paragraph without emphasis
· ins refers to the text added to the document, which is also an underline
· small for small font
· sub denotes subscript text
Sup denotes superscript
· Q refers to the content quoted from others, and the self modified by Q tag is quoted to indicate the reference
· pre means to format a piece of text, which can also be used to introduce a piece of code
· add style modules used in span CSS
· div will wrap, span will not
· <! — > notes

HTML entity

That is to use <, >, spaces, etc. in the web page.

&lt;&gt;&nbsp;

Embedded element

1. Embedded image
-IMG tag embedded image
-SRC attribute: represents the path of the image
-Alt attribute: indicates the content displayed if the image cannot be displayed
-Width / height property: sets the width and height of the image

2. Embed a web page
-The iframe tag indicates that a web page is embedded
-SRC attribute: indicates the address of the hyperlink document
-Width / height: the width and height of the area
-Name: name the iframe to facilitate calling the target attribute of tag a in the future_ test.html “Target =” iframe “& gt; enter entity page & lt; / A & gt;

3. Video / audio
-SCR: Path
-Autoplay: autoplay video
-Controls: display playback controls
-Loop: loop playback
– width/height

4. Progress bar
-Progress tab
-Max attribute: how much work is required for the specified task 100%
-Value attribute: specifies how many tasks have been completed, and groups 80% of the elements

1. P paragraph label, which will leave a blank line at the beginning and end
-Properties: align, alignment

2. HR split line
-Attribute: width 100px or 30%
-Align: alignment
-Size: thickness
-Color: color

3. Ordered list
-Type: the order label before the list
-Start: how many do you start with

4. Unordered list

5. Custom list
-DL: represents a custom list
-DD: represents a custom list item
-DT: represents a custom list title

6. Region
-Div: declare an area
-Span: declaring an area is usually used to prompt after the user name and password, for example, the user name has been registered.
-The difference between div and span: div is a long column with automatic line feed, span is a short column with no line feed.

7. Picture area
-Figure image area with img tag, figcaptation and a tag
-Figcaptation: a description of a picture=“ http://item.jd.com/2600210.html ” target=”_ Blank “> < figcaptation > < font size =” 2 “color =” red “> Huawei p9:3999 take home < / font > < / figcaptation > < / a > 8. Pre: format a paragraph of text or add code table elements (important)
-Function: format data

-Table declares a table property:
1. Border border = 1
2. Width
3. The distance between cellpadding text and inner border cellpadding = 10
4. Cellspacing cellspacing = 0

TR line
1. Align: alignment

· TD column
1.width/height
2. ColSpan merge column
3. Rowspan merge rows

It will be bold and centered

· title of the caption table

· area tables (rarely used)

1.thead、tbody、tfoot

Semantic elements (not commonly used)

· H1 ~ H6: indicates the title
· header: indicates the head
NAV: navigation
· footer: stands for tail
Address: refers to the contact information of a document or article
· aside: stands for sidebar
· section: represents the subject area
· article: represents an independent piece of content

XML/HTML CodeCopy content to clipboard
  1. <article>  
  2.         <h3>Internet Explorer 9</h3>  
  3.         <p>Windows Internet Explorer 9 (IE9) was released on March 14, 2011</p>  
  4. </article>  
  5.   
  6.     How to use <! — header — >  
  7.     <header>  
  8.         <h3>Welcome to my home page</h3>  
  9.         <p>My name is Luogg</p>  
  10.     </header>  
  11.   
  12.    How to use <! — Section — >  
  13.     <font color=“blue” size=“4”>3.<section>The definition of</font><br/>  
  14.     <section>Labels define sections (sections, sections) in a document. Such as chapters, headers, footers, or other parts of the document.<br/><br/>  
  15.   
  16.     <! — how to use footer — >  
  17.     <font color=“blue” size=“4”>4.<footer>How to use it:</font>  
  18.     <footer>  
  19.         <p>Author: luogg</p>  
  20.         <p>Contact me:<a href=“http://www.cnblogs.com/luogg”>luogg.blog.com</a></p>  
  21.     </footer>  
  22.   
  23.     <! — the use of Nav navigation tag  
  24.     <nav>  
  25.         <a href=“../right.html”>Back to home</a>  
  26.     </nav>  

Frame (that is to display multiple pages in one page), frame label cannot be written in or under the body label. Otherwise, the browser cannot parse it.

· frameset: frame structure
· ROS: divide the page into N lines
· cols: divide the page into n columns
· frame: each HTML document placed in the frame

XML/HTML CodeCopy content to clipboard
  1. <frameset rows=“20%,*”>  
  2.        <frame src=“top.html”>  
  3.        <frameset cols=“15%,*”>  
  4.            <frame src=“left.html”>  
  5.            <frame src=“right.html” name=“right”>  
  6.        </frameset>  
  7. </frameset>  

Form elements (key)

Function: it can interact with the server

Properties in:

1. Action: define a URL to send data to when you click the submit button
2. Method (get / post): http method used to send data to action URL. The default is get.

The difference between get and post:

1) The data encapsulated in the get form is directly displayed on the URL. Post mode data is not displayed on the URL.
2) The security level of get mode is lower than that of post mode.
3) Get is the length of data, and post supports big data. Input tag: defines the input field in which the user can input data.

Type attribute in input:

1) Type = text text box
2) Type = password
3) Type = radio radio button name property
4) Type = check box

Both single selection and multiple selection have default values: checked = “checked”

5) Type = reset button
6) Type = submit button
7) Type = file ﹣ input of upload file
8) Type = button
9) Type = image image (also the submit button,)
10) Type = hidden hidden tag (what users don’t need to see, but we have to use when developing. We can encapsulate the data into the hidden tag and submit it to the background together with the form)

Select label

Select / Select > select the drop-down box option to represent the content / option

Textarea
Textarea text content / textareavalue attribute:
For buttons, reset buttons, and confirm buttons: define the text on the button.

For image buttons: defines the symbolic result passed to this field of a script.

For check boxes and radio buttons: define the result when the input element is clicked.

For hidden fields, password fields, and text fields: defines the default value of the element.

Note: cannot be used with type = “file”.

Note: this element is required when used with type = “checkbox” and type = “radio.”. · name attribute: defines a unique name for the input element.

The above HTML5 learning experience summary (recommendation) is the whole content shared by Xiaobian. I hope it can give you a reference and support developer.

Original address:http://www.cnblogs.com/luogg/p/5649398.html