First, HTML and HTML5 common tags
Pre-school preparation
1) Baidu’s usage statistics on the operating system
Baidu Statistical traffic Research Institute
2) Google Chrome download
Google Chrome download url
3) The use of browser skills – WEB front-end helper (FeHelper) front-end staff artifact
WEB Front-end Helper (FeHelper) is a magic tool for front-end personnel
Please refer to the installation instructions on the website (change the suffix CRX to zip = and drag it directly into more tools/extensions)
Installation effect:
4) Tool introduction
SublimeText (Advanced Notepad shows code highlighting, recommended)
Notepad++
aptana
EditPlus
VSCode (Lightweight Integrated Development Environment, recommended)
Hbuilder
WebStorm
1. Introduction to HTML
1.1 What is HTML
HTML is an acronym for HyperText Mark-up Language
HTML is not a programming language, but a markup language
Hypertext refers to hyperlinks, markup refers to tags, a language used to make web pages, which consist of tags
A file made in this language holds a text file with an extension of.html or.htm
An HTML document, also known as a Web page, is actually a Web page. The HTML file is opened with an editor and displays text. You can edit it as text
If opened with a browser, the browser will render the file according to the label description into a web page that can jump from one web page to another
1.2 HISTORY of HTML
1.3 Setting the HTML document type
HTML document type Settings in different versions, that is, the corresponding attribute values
(1) HTML, corresponding to the early HTML4.0.1, has the following basic structure:
(2) XHTML, its basic structure is as follows:
(3) HTML5, its basic format is as follows
2. Basic HTML syntax
2.1 BASIC HTML structure:
The extension name of an HTML file is.html or.htm
The structure of HTML text consists of the “head” part, which provides information about the page (including the title, character set, etc.), and the “body” part, which provides the specific content of the page
HTML is made up of tags and content. Each HTML page has two parts: a head and a body. The outer layer is… Label the parcel
The syntax for HTML tags (tags) is enclosed by < and > (for example, the head tag, the body tag ~).
There are two types of HTML tags: double tags: < tag name >…. </ Label name > and single label: < label name /> (double label:
.
, single label:
)
You can also add attributes to an HTML tag: < Tag Name Attribute Name 1= Value 1 Attribute Name 2= Value 2 Attribute name n= Value N >…. </ Tag name >
HTML tag specification: The tag name should be lowercase, attributes should be quoted, and tags should be closed. The specification does not comply with the browser will not report an error, will try to parse, not to show the effect
2.2 annotations
2.3 HTML comments
Comments can be inserted into the HTML document code. Comments are instructions and explanations of the code
<! -- This is the only HTML comment -->Copy the code2.4 Setting the HEAD header in HTML
The head tag is applied to the head of the page. Its content is not displayed in the body of the page
In head it often contains tags such as:
3. HTML text tags
3.1 Common text labels are as follows:
. Where n is the value from 1 to 6. Title tag (bold, separate line)
. italics
. Emphasizes the italics
. bold
. Emphasize bold (search engines will include this emphasis on the content, priority display)
Title of work (quote)
. The subscript… superscript
. Delete the line
For example, 3.2
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> </head> <body> < H1 > h1 </h1> < H2 >H2 </h2> <h3>H3 </h3> < h4 > h4 title tag < / h4 > < h5 > h5 title tag < / h5 > < h6 > h6 title tag < h6 > < u > u underline tag < / u > < br / > < del > del strikethrough tag < del > < br / > < b > b bold tag < / b > < br / > </strong><br/> < I > I italic label </ I ><br/> < EM >< /em>< BR /> <br/> <cite> Is one of the top ten famous paintings handed down in China < br / > < br / > water molecules: H < sub > 2 < / sub > O < br / > 2 < sup > 4 < / sup > = 16 < / body > < / HTML >Copy the code
4. HTML formatting tags
Just for a simple layout
4.1 Common Formatting Labels
A newline
.
In period of
Horizontal dividing line
List:
.
Unordered list
.
In the ordered list, type value: A A I I 1 start Indicates the start value
- .
The list items
.
Custom list
- .
Custom list header
- .
Customize list contents (with automatic indentation)
.Often used to combine block-level elements so that they can be formatted with CSS (line wrapping between two tags)
. Commonly used for contained text, you can style it using CSS or manipulate it using JavaScript. (There is no line break between two labels, you cannot specify width, height, size)
For example, 4.2
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < p style=" max-width: 100%; clear: both; min-height: 1em; Israel's Intelligence and Special Missions Directorate, also known as Mossad, has obtained COVID-19 vaccines from China and brought them back to start "research", RT reported, citing local media. </p> < P > Israeli media Channel 12 reported on Monday that Mossad had brought Chinese vaccines to Israel in recent weeks. It is unclear exactly how the intelligence agency obtained the vaccine. </p> </div> Reading < ul > < li > < / li > < li > music < / li > < li > to learn < / li > < li > sports < / li > < / ul > < ul type = "circle" > < li > reading < / li > < li > music < / li > < li > to learn < / li > < li > sports < / li > < / ul > < ol > < li > reading < / li > < li > music < / li > < li > to learn < / li > < li > sports < / li > < / ol > < ol type = "a" > < li > reading < / li > < li > music < / li > < li > to learn < / li > < li > sports < / li > < / ol > < dl > < dt > q: what is HTML < / dt > < dd > a: Hypertext markup language (< / dd > < / dl > < div > aaaaa < / div > < div > BBBBB < / div > < span > CCCCCC < / span > < span > DDDDDD < / span > < / body > < / HTML >Copy the code
4.3 tip
1) Quickly generate multiple list items
5. HTML image tags
5.1 introduction
To insert an image into an HTML page, use the img tag, which is a single tag:
The common attributes of the IMG tag are as follows:
- SRC: indicates the image name and URL
- Alt: indicates a message indicating that an image fails to be loaded
- Title: Text prompt attribute (mouse over the prompt message)
- Width: image width (if only one width/height is specified, the other one will adjust to the scale)
- Height: Image height
- Border: indicates the border line thickness
For example, 5.2
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Img tag </h1> <img SRC ="./images/11.jpg" Alt =" image 1" Width ="600"> <img SRC ="./images/12.jpg" Alt =" "width="600"> <img The SRC = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title = "baidu" width = "200" > < / body > < / HTML >Copy the code
5.3 Understanding absolute paths and relative paths
Absolute path:
The absolute path is the actual path of the file or directory on your home page on your hard disk, (URL and physical path).
Such as:
- TXT represents the absolute path to the test. TXT file.
- www.sun.com/index.htm also generation…
Relative path:
Path relative to a base directory. Contains relative paths to the Web (relative directories in HTML), for example:
- In Web development, the “/” represents the root directory of the Web application.
- “./” represents the current directory,
- “.. /” indicates the parent directory. This similar representation, again, is a relative path.
5.4 tip
1) Quickly generate labels
6. HTML hyperlink tags
6.1 Hyperlink Label A
Format:
<a href=" link to target URL ">Copy the codeA Tag Attributes
Href: must, refers to the link jump address
Target: indicates how the link is opened:
- New window _blank
- _parent parent window
- _self This window (default, click back to return to the previous page)
- _top Top-level window
Framename window name
Title: Text prompt property (mouse over, can see details)
Anchor link (can be located by ID, jump within the page)
Define anchor points: Used previously
Use anchor point: jump to A1
For example, 6.2
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial =1.0"> <title>Document</title> </head> <body> <h1> - anchor links - > < a href = "# girl1" > beauty 1 < / a > < br / > < br / > < a href = "# girl2" > beauty 2 < / a > < br / > < br / > <! - general hyperlinks - > < a href = "https://ww.baidu.com" title = "baidu links" > baidu (open) the window < / a > < br / > < a href = "https://ww.baidu.com" Target = "_blank" > baidu (opens a new window) < / a > < br / > < br / > < a href = ". / Demo. HTML "target =" _blank "> image tag instance < / a > < br / > < br / > < a id =" girl1 "> < / a > < h4 > beauty 1 < / h4 > < img SRC = ".. / images / 11. JPG "Alt =" girl1 "width =" 100% "> < br / > < br / > < a id =" girl2 "> < / a > < h4 > beauty 2 < / h4 > < img src="./images/22.jpg" alt="girl2" width="100%"><br/><br/> </body> </html>Copy the code
7. HTML table tags
7.1 Labels in The Table
Th has a bold center effect by default compared to TD
For example, 7.2
1) Simple form
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial =1.0"> <title>Document</title> </head> <body> <h1> - header - > < tr > < th > student id < / th > < th > name < / th > < th > age < / th > < th > class < / th > < / tr > <! - the first row of data - > < tr > < td > 100 < / td > < td > flag wood, kakashi < / td > < td > < / td > 21 8 class < / td > < td > < / tr > <! - the second line data - > < tr > < td > 101 < / td > < td > naruto < / td > < td > < / td > 15 8 class < / td > < td > < / tr > <! - the third row data - > < tr > < td > 102 < / td > < td >, uchiha sasuke, < / td > < td > < / td > 15 8 class < / td > < td > < / tr > < / table > < / body > < / HTML >Copy the code
2) Add table lines
3) Adjust the width
4) Eliminate gaps
5) Adjust the distance between the content and the border
6) Examine the elements
Discover that the browser automatically adds the TBody tag to the table
7) Add headings
8) Across cells
Up and down, left and right
9) Specify horizontal position of table content
10) Specify the vertical position of the table content
11) Cross from left to right
7.3 tip
1) Generate tables quickly
8. HTML form tags (important)
8.1 Form Labels
1) Form tag common attributes:
- * Action property: submission destination address (URL)
- * Method attributes: Submit methods :get(default) and POST
- Get mode is URL address bar visible, length is limited (IE2k Firefox 8K), relatively insecure.
- In POST mode, the URL address is invisible and its length is not limited, which is relatively secure.
- Enctype: indicates the submission type
- Target: Where to open the target URL.
- Name: Property gives the form a name. Use ID instead in HTML5.
2), for example,
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <title>Document</title> </head> <body> <h1> Form, input, select, textarea</h1> < action="a.html" method="GET"> <input type="text" name="uname"/> <br/> <input type="password" name="upass"/> <br/><br/> < submit type=" value "="submit" />< input type="reset" value=" reset" /> </form> </body> </html>Copy the code
8.2 Input Form item Label INPUT defines an input field
1) Input common attributes
The user can enter data in it. In HTML 5, the Type attribute has many new values.
* Type attribute: indicates the type of the form item: values are as follows:
Text: single-line text box
Password: password input box
Checkbox: Check that a value is provided
Radio: Note that value must be provided in the single box
File: indicates the file upload selection box
Button: common button
Submit: Indicates the submit button
Image: button for submitting an image
Reset: a button that resets to the start (when first opened) (if there is a default value, it will be restored to the default value, not cleared)
Hidden: A field that is hidden from the main form if it is submitted with the form but does not need to be modified by the user
HTML5 new attributes
Email is used for an input field that should contain an E-mail address
Url is used for the input field that should contain the URL address
Number is used for input fields that should contain numeric values.
- Max Specifies the maximum allowed value
- Min specifies the minimum allowable value
- Step specifies the legal number interval (if step=”3″, the legal numbers are -3,0,3,6, etc.)
- Value Specifies the default value
Range is used for input fields that should contain a range of numeric values, shown as sliders
- Max Specifies the maximum allowed value
- Min specifies the minimum allowable value
- Step specifies the legal number interval (if step=”3″, the legal numbers are -3,0,3,6, etc.)
- Value Specifies the default value
Date pickers
- Date – Select the day, month, and year
- Month – Selects the month and year
- Week – Selects the week and year
- Time – Selection time (hours and minutes)
- Datetime – Select time, day, month, year (UTC time)
- Datetime-local – Select time, day, month, year (local time)
Search is used for search domains, such as site search or Google search
Color color selection
* Name property: The name of the form item used to store content values
*value attribute: input value (default specified value)
*placeholder: Short hints of expected values
Size property: The width value of the input box
Maxlength property: The maximum length of the input in the input box
Readonly property: Read-only property for input field (not modifiable, but still committed)
* Disabled properties: Disables properties (cannot be modified and will not commit)
* Checked property: Specifies the default option for the checkbox (single option, last option if checked is added)
Accesskey: Specifies a shortcut key (not commonly used) (IE: Alt + Key firefox: Alt + Shift + key)
Tabindex property: indicates the order in which the TAB keys are toggled by a number (uncommon)
SRC and Alt are set for image buttons
Note: The reset button restores the form data to the state it was when it was first opened, not clears it
Image Button to submit a form by default.
2) Example — type attribute
radio
0/1 is sent to the background, and is chosen instead of male/female because numbers are faster and take up more space than Chinese characters
checkbox
Other attribute values
reset
Setting defaults
8.3 Creating a drop-down list for a SELECT Label
1) Common attributes
Name property: Defines the name used to store drop-down values
Size: Defines the number of visible items in the menu. Html5 does not support this
Disabled When this property is true, the menu is disabled.
Multiple alternative
. Dropdown selection tags, used to embed tags used in; * Value attribute: the value of the dropdown item * Selected attribute: the default dropdown item. DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, <title>Document</title> </head> <body> <h1> Form, input, select, textarea</h1> < action=”a.html” method=”GET”> <select name=”education” ID =””> <option value=”1″> Junior </option> <option value=”2″> Undergraduate </option> <option value=”3″ Selected > Master </option> <option Value =”4″> Doctor </option> </select> </form> </body> </ HTML > 8.4 TextaREA multi-line text input area 1 : Defines the name used to store values in a text area. Cols: Specifies the number of columns visible in the text area. Rows: Specifies the number of rows visible in the text area. Disabled: whether to disable readonly: read-only… The default value is between two tags. 2) Example does not have a value attribute, but instead adds content between the start and end of the tag, as shown in figure 8.5 Button tag definition Buttons can place content, such as a document or an image, within a button element. This is where this element differs from the button created by the input element. 8.6 FieldSet Elements Groups related elements in a form (circled) Disabled property: Defines whether the fieldset is visible. Form property: Defines one or more forms to which this fieldset belongs. 8.7 Legend — Tag defines headings for fieldset, Figure, and Details elements. 8.8 OPtGroup html5 tag — Defines Option groups. Allow grouping 8.9 Datalist HTML5 tags — A list defining optional data can be used in conjunction with the input element to make a drop-down list of input values. SRC: specify the URL of the document displayed in the iframe. Name: specify the name of the iframe. Height: specify the height of the iframe. Width: Defines the width of the iframe. Frameborder: Specifies whether to display the border around the frame. E.g. <! DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, <title>Document</title> </head> <body> <h1> Iframe < / h1 > < ul > < li > < a href = “f.h HTML” target = “myframe” > form tag instance < / a > < / li > < li > < a href = “e.h HTML” Target = “myframe” > table label instance < / a > < / li > < li > < a href = “c. HTML” target = “myframe” > image tag instance < / a > < / li > < / ul > < iframe SRC = “f.h HTML” Name =” myFrame “frameborder=”1″ width=”80%” height=”500″></iframe> </body> </ HTML > 10 HTML5 multimedia tag 10.1 new layout tag makes the meaning of some tags more specific, which can quickly distinguish the various parts of the page, improve the speed of retrieving content. 10.2 new input type attribute these new types, more detailed limit the input content, if the input format is not correct, W3school 10.3 new input attribute example < audio! DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, “> <title>Document</title> </head> <body> <h1> <audio SRC =”./images/beidahuang. Mp3″ Controls =”controls”> Your browser does not support audio </audio> <br/> <audio Controls > <source SRC =”./images/beidahuang.mp3″ Type =”audio/mpeg” /> Your browser does not support audio </audio> <br/><br/> <video SRC =”./images/fun.mp4″ controls=”controls” width=”400″ </video> <br/><br/> <video controls=”controls” width=”400″ poster=”./images/11.jpg” Height =”400″> <source SRC =”./images/fun.mp4″ type=”video/mp4″ / SRC =”./images/haowan.swf” width=”300″ height=”300″ /> </body> </ HTML > Therefore, some of the manufacturers will customize the video playback controls the chapter will be summarized here (the better we understand you guys the better we will be, the better you guys will be). (O ゜ – ゜▽゜)