The understanding of HTML and the use of common labels--from my Baidu front-end Technical College notes

What is HTML and what is HTML5?

--html: Hypertext Markup Language, a standard markup language for creating Web pages;--HTML5: The latest HTML standards, including new elements, attributes, and behaviors, divide them into different groups based on their functional characteristics:

* Semantics: Allows you to more appropriately describe what your content is;

* Connectivity: Enables you and the server to communicate through innovative technical methods;

* Offline & Storage: Enables Web pages to store data locally in a client-side operation more efficiently and offline;

* Multimedia: Use video and audio to become a one-class citizen in all the web;

* 2d/3d Drawing & Effects: Provides a more differentiated range of presentation options;

* Performance & Integration: Provides very significant performance optimizations and more efficient use of computer hardware

* Device access to devices Access: ability to handle various input

* Style design: Can create more complex themes

What are the concepts of HTML element tags and attributes?

The--html element tag is the most basic unit in the HTML language and is the most important part of HTML, consisting of the start tag, content, end tag, such as <p> content </p> (empty tag has no end tag);

* * Features: * *

1. Keywords surrounded by angle brackets, such as

2. Usually in pairs, such as <div> and </div>;

3. The first label in the label pair is the start tag, and the second tag is the end tag;

4. Start and end tags are also known as open labels and closed labels;

5. There are also separate labels, such as: , etc.;

6. The label is usually paired, and its contents are in the middle of two labels. Labels that are rendered individually, are assigned values in the label properties. such as

7. The content of the webpage should be in the

--attributes are used to define the extra information of the element and do not appear on the actual content;

1. Attributes are always in the form of name/value pairs, such as: Name= "value";

2. Attributes are always specified in the start tag of the HTML element;

What is the concept of document type and what is the role?

When we write our website, we will find that there are always <! on the head of the page. Doctype>. This <! Doctype> is used to declare the type of the document, only so that the browser can know your file type, and then correctly display the page. <! Doctype> is not an HTML tag. It provides a browser with an information (declaration) of what version of HTML is written, and there are many types of documents, even for HMTL, there are different versions, only the browser to understand which version of HTML, the correct display of the page. For HMTL5, our commonly used file declarations are as follows:

<! DOCTYPE html>

What are meta tags used for?

The <meta> element provides meta-information about the page (meta-information), such as descriptions and keywords for search engines and update frequency;

The <meta> tag is located in the header of the document and does not contain any content.

The properties of the <meta> tag define the name/value pairs associated with the document.

<meta> tags are used to describe the properties of an HTML page document, such as author, date and time, page description, keywords, page refresh, etc.

The simple summary is that the:<meta> tag provides metadata about the HTML document. It is not displayed on the page, but is readable for the machine. Available for browsers (how to display content or reload pages), search engines (keywords), or other Web services.

Such as:

• Set the keyword with meta: <meta name = "keywords" content = "keyword" > Multiple keywords separated by ",".
• Setting Description: <meta name = "description" CONTENT = "Extended description of keywords" >
• Set <meta name = "Author" content = "Author name" >
• Set CharSet: <meta http-equiv = "content-type" content = "Text/html;charset = gb2312" >
• Encoding format: GB2312 encoding occupies 2 bytes, UTF-8 occupies 3 bytes, if the page text more, select GB2312 encoding.
• Set page timing Jump: <meta http-equiv = "Refresh" content = "2; URL = http://www.baidu.com "/> Inside of 2, representing 2 seconds

Need to note:

1.HTTP-EQUIV can not add space between, otherwise useless, that is, can not be written as "HTTP-EQUIV"!

2.content-type is also a whole and cannot be separated by a space.

The use of detailed meta can be referred to in 51356143 This article is quite comprehensive;

What is web semantics, and what is the solution to this problem?

In particular, when writing HTML, try to use tags with semantic information, such as header,nav,aside,section, to replace those without semantic information, such as Big,center,strike, Font, etc. (tags that can be replaced entirely with CSS). This not only facilitates the organization of the page DOM, but also facilitates the understanding of the machine (mainly search engines). The goal of the semantic web is to make the information on the network more easily understood and found by machines, thus enhancing the experience of using the network to obtain information.

What is the concept of a link, and what label does it correspond to?

--The link is where you can take you to another place. On a Web page, when you click on a link in a page, the page jumps to the address that the link points to. The <a> in HTML can implement this page jump function.

What are the common tags that are suitable for use in what scenarios?

1, Link: Also known as hyperlinks, set the page to allow the content to be clicked.

"Tags" <a></a>

Properties

HREF: Link address (the address of the page to jump to)

Target: Goal, open the form of a new web page

"Take Value"

_blank: Open in new tab

_self: Open in own page (default value)

Title: Tips for placing a mouse over a link

2. Text marker

"Text Style"

Italic:<i></i>

Bold Body:<b></b>

Delete Line:<s></s>

Underline:<u></u>

Superscript:

Subscript:

* Title element: Displays text content in the form of a caption

Characteristics

-Change the font size (level One, level six minimum)

-Bold Display

-Vertical blank distance up and down

-Independent of Hong

* Paragraph elements

"Tags" <p></p>

Characteristics

-Default Text Size

-Independent of Hong

-up and down vertical blanks

* Line Wrapping Element

"Tags" <br>

* Separator Line Element

"Tags"

Properties

Size: dimensions, measured in px (pixels), can be omitted

Width: widths, values in px (pixels) can be omitted or expressed as a percentage

Color: colors, value natural color values

Align: horizontal alignment, Value: Left/center/right

* Partition Element

(1) block partition element:<div></div>

"Features" Independent travel

The role page layout

(2) Intra-row partition element:<span></span>

"Features" multiple elements are displayed in one line

Action sets different formats within the same line of text

* Inline elements and block-level elements

(1) block-level elements (Div, p, H1~h6)

The "feature" element will have a single line, that is, the element will wrap before and after it, mainly for page layout

(2), inline elements (span, I, B, S, U, Sub, SUP, IMG, a)

Feature does not wrap, and multiple elements are displayed in a single line

3. Image

Path:--url:uniform Resource Locator (Uniform Resource Locator, commonly known as: path)

Role: Identify the location of any resource on the network

(1) Absolute path: The path through which to find the resource file from the highest level directory where the file is located

-Including network resources & local resources (such as: E:\mmper\ practice \img\flower.jpg)

(2) Relative path: Starts at the current file location and finds the path to the resource file

-same directory, directly referenced by resource file name (a.jpg)

-subdirectories, go to subdirectories, and then reference the resource file (img/a.jpg)

-Parent directory, return to the parent directory and then reference the resource file (.. /a.jpg)

"Tags"

Properties

SRC: Image address (absolute/relative)

Width: Image width

Height: Image Height

4. Table: defined by <table> element.

"Tags" <table></table>

Properties

Width: Setting table widths

Height: Sets the altitude of the table

Align: Set the alignment of the table, value: Left/center/right

Border: Set table border width

cellpadding: Padding (the distance between the cell border and the content)

cellspacing: Margin (distance between cells)

BgColor: Sets the background color of the table

Child elements included in <table></table>:

Label <tr></tr> (CREATE TABLE row)

Properties

Align: horizontal alignment of the line content, value: Left/center/right

valign: Vertical alignment of the contents of the line, value: Top/middle/bottom

BgColor: Sets the background color of the table

Label <td></td> (Create Cell)

Properties

Align: Content horizontal alignment

valign: Content Vertical Alignment

Width: Wide

Height: High

"Tags" <caption></caption> (table headings)

Label <th></th> (column header) row or column headings, with bold font effect, placed in TR

"Tags" <thead></thead> (table header)

Label <tbody></tbody> table body)

"Label" <tfoot></tfoot> (footer)

(1) Irregular forms

-Cross-column: merges several (including own) cells horizontally right from the specified cell location

Properties: colspan= Value (number, number of merged cells);

-Cross-line: Merge several (including own) cells vertically down from the specified cell location

Properties: rowspan= Value (number, number of merged cells);

(2) Nesting of tables: to nest another table in a cell, but nested tables must be placed in TD

5. List: Arrange a group of content with similar characteristics or sequential contents in order from top to bottom

Ordered list

<ol>

<li></li>

</ol>

Properties

Type: Specifies the types of list item flags, which are numerically arranged by default

Value: 1 (default value)/a/a/i/i

Start: Defines the starting value (number), starting from 1 by default

Values: Numbers, such as: start:1; START:I;

Unordered list

<ul>

<li></li>

</ul>

Properties

Type: Specify list item identity for unordered list

Value: Disc, default, Solid circle/circle, hollow circle/square, solid rectangle None, no logo displayed

Custom list

<dl>

<dt> title content in list </dt>

Data in the <dd> list </dd>

</dl>

Use occasion: Use when the picture is mixed

6. Form: Defined by <form>, submit the data entered by the user to the background

"Common Properties"

Action: The server address of the submission

Method: Form data submission, value: Get: PlainText commit/post: implicit commit

Name: Define form names, JS use more

ID: a unique logo

such as: <form action= "url" method= "Get/post" > </form>

<input> elements

"Main Properties"

Type: Various types of input fields can be created based on different type attribute values

Value: Values that are ultimately submitted to the server

Name: A control that is provided to the server for use without name, and the control cannot commit

ID: Unique identity, can only be used on the current page, the server is not available

Disabled: Disabled, cannot be submitted

<button> content </button>

Drop-down Selection box select and option

<section name= "" >

<option value= "" selected></option>

</section>

7. Structure Tag: HTML5 provides a structure tag that is designed to represent a common Web page structure (that is, to make layouts) and to improve the semantics and readability of layout code

Common Structural Tags

<nav></nav>: Defining the navigation links section of a page

<section></section>: Defining sections in a document, body content in a document

<article></article>: Define content that is separate from the rest of the document (chapters, sections, etc.)

<footer></footer>: Define footnote information for an area, content at the bottom of the page, etc.

<aside></aside>: More for sidebar and related reference information, etc.

What are the form labels, and what are the properties that correspond to the features?

The function of the "1" form is to pass the user's information to the server, which is the way of exchanging information between the client and the server side.

The "2" form tag is used to create a form that defines the start and end of a form. is a container. All form elements must be useful in the <form></form> tag.

"3" Syntax:

<form action = URL (a server-side application that handles form information) method = means of processing form data (post/get) If you do not write the method, the default submission is Get,name = form name > table cell element </ Form>

The "4" POST method can pass a lot of information, and the Get method attaches the value to the URL that requested the page. Suitable for passing small amounts of information (default).

"5" FORM element tag:

Single-line text box:

<input name = "TextBox name" type = "text" value = "initial value" size = "number of characters" maxlength = "Maximum number of characters" readonly = "ReadOnly" (set to read-only) dis abled = "Disabled" (set to not operable)/>

Password box:

<input name = "text box name" type = "password" value = "initial value" size = "number of characters" maxlength = "Maximum number of characters" readonly = "ReadOnly" Disabl ed = "Disabled"/>

Radio Box:

<input name = "Radio Box name" type = "Radio" VALUE = "Commit value" checked = "Checked" (whether selected)/>

Note: The Name property of the radio box is the same, otherwise it cannot be radio.

check box:

<input name = "check box name" type = "checkbox" value = "Commit value" checked = "Checked"/>

Submit button:

<input type = "submit" value = "Confirm"/>, define submit button. The Submit button sends the form data to the server.

Reset button:

<input type = "reset" value = "Cancel"/>, define reset button. The reset button clears all the data from the form.

List box:

Menu Type: <select name = "list box name" >

<option selected = "Selected" (which is the initial selection, add the selected statement [only one] value = "Commit value") >

Listing 1

</option>

<option value = "Commit value" > list 2</option>

......

</select>

Group: <optgroup label = "Group name" ></optgroup>

List type: <select name = "list box name" size = "number of rows displayed" multiple (if multiple selections are allowed, the command is written.) ) >

<option value = "Commit value" > list 1</option>

......

</select>

Browse Box:

<input name = "name" type = "file" size = "Display Length"/>

Button: <input type = "button types (reset reset form, submit submit form, button Normal button,)" name = "button name" value = "button to display the contents" >

Graphics button: <input name = "" type = "image" src = "picture path and name"/>

Multiline text box:

<textarea name = "text Box name" cols = "number of characters in each line" rows = "rows Displayed" >

Initial content

</textarea>

Hidden fields:

<input name = "name" type = "hidden" value = "Commit value"/>

form Outer frame:

<fieldset>...</fieldset> defines the border around the elements in the form,

<legend>...</legend>legend defines the title for fieldset.

"6" all form elements, in the case of input, must contain the type attribute with the Name property!

"7" Input callout <lable>...</lable>:

<label> Label Content </lable> label defines a callout for the input element. The For property of the lable element should be the same as the ID property of the related element. For example:

<label for = "man" > Male </label>

<input type = "Radio" name = "Sex" value = "male" id = "man" >

Label tag, you can click on the inside of the "male" to achieve the effect of the selected radio box.

OL, UL, Li, DL, DD, DT, etc. these tags are suitable for where, for example?

(1). <ul> unordered list: The use of mixed graphics, no priority or order.

This is the first list of

This is a second list

This is a third list

This is the fourth list

(2). <ol> Sequential list: Suitable for sequential or prioritized lists

1. This is the first list

2. This is the second list

3. This is a third list

4. This is the fourth list

(3). <li> Define list Items,<ul> and <ol> both use it.

(4). <dl>, <dt>, <dd> put it together. <dl> is used to define the definition list, and <dt> is used to define each item in the definition list, and <dd> is the description of the definition definition.

The understanding of HTML and the use of common labels--from my Baidu front-end Technical College notes