HTML5 learning experience (recommended) and html5 learning experience
Html learning Summary
1. What is html: HyperTextMarket language, hypertext markup language, is used to describe the Web language, html uses tag tags to describe the web page, html is not a programming language, is a markup language.
2. Experienced versions: HTML2.0, HTML3.2, HTML4.0, HTML4.0.1, and html5.
3. New Features of H5:
• Canvas elements used for painting
• Video and audio elements used for media playback
• Better support for local offline storage
• New special content elements, such as article, footer, header, nav, and section
• New Form controls, such as calendar, date, time, email, url, and search
4.html is composed of tags.
5.html basic format:
Copy XML/HTML Code to clipboard-DOCTYPE: Declares the document version.
-Meta: the viewer may have some information about the document. 1.html considerations:
• Most labels have the start tag and end tag. Some of them can end in the tag because they only have a single function or there is no content to be modified.
• If you want to perform more operations on the Content modified by the tag, you can use the attributes in the tag. By changing the attribute values, you can select more effects.
• "=" Is used to connect an attribute with an attribute value. The attribute value can be enclosed in double quotation marks, single quotation marks, or no quotation marks. Generally, double quotation marks are used. Or company regulations.
H5 global attributes:
Text Element
Copy XML/HTML Code to clipboard• Abrr abbreviations
• B without marking a paragraph with any emphasis, bold
• Strong indicates important content, bold
• Em indicates emphasizing a piece of text and tilting
• I. A text segment without any emphasis, skewed
• Cite indicates the title of the work, which is skewed to the title
• Del indicates the text deleted from the document.
• S indicates that the text is no longer accurate and also strikethrough
• U underline a piece of text without emphasis
• Ins indicates the text added to the document, which is also an underscore.
• Small indicates a small font
• Sub indicates subscript text
• Sup indicates the upper mark text
• Q indicates that it is referenced from other content. If it is modified by the q tag, it is enclosed in quotation marks to indicate that it is referenced.
• Pre indicates formatting a piece of text and can also be used to introduce a piece of code
• Add style modules used in span css
• Div will wrap, and span will not wrap
• <! --> Comment
Html Entity
That is, use <,>, and space in the webpage.
& Lt; & gt; & nbsp;
Embedded Element
1. Embedded Images
-Img label embedded image
-Src attribute: indicates the image path.
-Alt attribute: indicates the content that cannot be displayed if the image is not displayed.
-Width/height: Set the width and height of the image.
2. embed a webpage
-Iframe label indicates embedding a webpage
-Src attribute: the URL of the hyperlink document.
-Width/height: width and height of the Region
-Name: name iframe to facilitate future calls to the target attribute of tag a. & lt; a href = "shiti_test.html" target = "iframe" & gt; go to the object page & lt; /a & gt;
3. video/audio
-Scr: Path
-Autoplay: automatically plays a video.
-Controls: displays the playback control.
-Loop: loop playback
-Width/height
4. progress bar
-Progress tag
-Max attribute: defines the total workload of a task by 100%
-Value attribute: specifies the number of tasks that have been completed. 80% grouping Elements
1. p Paragraph label, which leaves a blank line at the start and end positions
-Attribute: align, align
2. hr split line
-Attribute: width: 100px or 30%
-Align: align
-Size: width
-Color: color
3. ordered list ol li
-Type: sequence number before the list
-Start: Starting from the nth
4. unordered list ul li
5. Custom list
-Dl: indicates the custom list.
-Dd: indicates a custom list item.
-Dt: the title of the custom list.
6. Region
-Div: declares a region.
-Span: declaring a region is generally used for prompts after the user name and password. For example, the user name has been registered.
-Difference Between div and span: div is a long column with automatic line feed and span is a short column without line feed.
7. Image Area
-In the figure image area, the img label, figcaption label, and a label are embedded.
-Figcaption: <a href = "http://item.jd.com/2600210.html" target = "_ blank"> <figcaption> <font size = "2" color = "red"> Huawei P9: 3999 bring home </font> </figcaption> </a> 8. pre: format a text segment or add code table elements (important)
-Purpose: format the data.
-Table declares a table attribute:
1. border = 1
2. width
3. The distance between the cellpadding text and the inner border is cellpadding = 10.
4. cellspacing cell spacing cellspacing = 0
• Tr row
1. align: align
• Td Column
1. width/height
2. colspan merge Columns
3. rowspan merge rows
• Th header, Which is bold and centered
• Caption table title
• Partition tables (not commonly used)
1. thead, tbody, tfoot
Semantic elements (not commonly used)
• H1 ~ H6: indicates the title
• Header: indicates the header.
• Nav: Indicates navigation
• Footer: indicates the tail
• Address: the contact information of the document or article.
• Aside: indicates the sidebar.
• Section: indicates the subject area.
• Article: indicates a piece of independent content.
Frame (that is, displaying multiple pages on one page), the frame tag cannot be written in or below the body tag. Otherwise, the browser cannot resolve the issue.
• Frameset: Framework Structure
• Ros: divides pages into n rows
• Cols: divide the page into n columns
• Frame: Each html document placed in the framework
Form elements (important)
• Role: interaction with the server
Attributes in:
1. action: Define a URL. When you click the submit button, send data to this URL.
2. method (get/post): the HTTP method used to send data to the action URL. The default value is get.
Difference between get and post:
1) The data encapsulated in the get form is directly displayed on the url. Post Data is not displayed on the url.
2) The get method has a low security level and a high post level.
3) Length of get data. post supports big data. • Input Tag: defines input fields, where you can enter data.
Type attribute in input:
1) type = text box
2) type = password
3) type = radio button name attribute
4) type = checkbox multiple selection button
The default value is checked = "checked"
5) type = reset button
6) type = submit button
7) type = input for file Upload
8) type = button
9) type = image (also the submit button ,)
10) type = hidden hide tags (you don't need to see them, but we must use them during development. We can encapsulate the data into hidden tags and submit the data together with the form to the background)
Select tag
Select/select> select the drop-down box option to indicate the content/option
Text Field textarea
Textarea text content/textareavalue attributes:
For buttons, reset button, and OK button: Define the text on the button.
For image buttons: defines the symbolic results that are passed to this field of a script.
For check boxes and single-choice buttons: Define the result when the input element is clicked.
For hidden domain, password domain, and text domain: defines the default value of the element.
Note: it 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 (recommended) is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the customer's home.
Address: http://www.cnblogs.com/luogg/p/5649398.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
