Home > Developer > Web Develop
Html
2015-8-31
HTML Hypertext Markup Language (hypertext Markup Language)
is a plain text type of language. Use a "tag" with angle brackets to identify the contents of a Web page.
Markup language used to design a Web page
A file written in that language, with a. html or. htm suffix
Interpreted by the browser execution
On HTML pages, you can embed program segments written in the scripting language, such as: Vbscript,javascript
HTML Base Syntax
1. Tag syntax
The symbols used to describe the function of HTML are called "tags", such as <p>,
Tags must be used with angle brackets (<>)
There are closed type tags, and there are non-enclosing types of tags
Closed: In pairs appear, have the beginning, have the end, also called Double label. such as:<a></a>
Non-closed: Only start without end, also called Single label. such as:<br>,
2. elements, i.e. marks
Each pair of angle brackets surrounds the part
The part that surrounds <body></body> is called the BODY element.
Elements are like small labels that identify different parts of a Web page document
Elements can contain text content and other elements, or they can be empty, such as the empty tags described earlier
Element nesting
Elements can be nested into each other, creating more complex syntax
Note: Be aware of the nested label order; The code should be indented.
3. Attributes and Values
property is used to decorate the element
< Tag Name Property name = "Property Value" Property name = "Property value" ></tag name >
The declaration of a property must be in the opening tag; one element may have more than one attribute, and multiple attributes are separated by a space; there is no distinction between multiple attributes
Each property has a value
The value of the property and the property are concatenated with an equal sign, and the value of the property is enclosed in quotation marks
<p align= "Center" > This is a p</p>
Standard properties (Public properties, common properties):
Most of the labels have properties,
such as: ID (the unique identification name of the label in which it is defined)
Title (the text displayed when the mouse is moved into the area of the current label)
Class (reference the specified class style in the style sheet)
Style (defines the inline style of the current label)
4. Comments
Comments are visible only when editing a document, and are not displayed when the page is shown in the browser
Adding appropriate annotations to your code is a good coding habit
The syntax for adding comments is as follows:
<!--text content of comments--
Ps: Nothing between "<!--" and "--" is not displayed in the browser; comments cannot be nested in other annotations; comments cannot be embedded in the <> tag;
5. HTML and XHTML, HTML5
December 24, 1999, recommended standard HTML4.01
XHTML became the world's standard in 2000 January 26
Almost the same as HTML4.01; more strict and purer HTML versions
HTML5 's goal is to be more concise HTML code (no longer strictly required, and to ensure compatibility)
6. Structure of HTML Document
Document Type declaration <! DOCTYPE html>
<body> Page Body Section
-----------------------------------------------------
2015-9-01
1.
Role: The page header, mainly contains the Web page description information.
① Page Title <title></title>
----Title content appears at the top of the browser; The title tag does not have any attributes; The title can only appear in the head tag; a page can have at most one title.
Encoding format for ② Web pages
Default encoding: Iso-8859-1
Through META tags
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<meta charset= "Utf-8" via meta tag/>
③ declaration internal style sheet <style></style>
④ introducing an external style sheet
⑤ Declaration Internal JS (JavaScript) script <script></script>
⑥ Introducing External JS (JavaScript) scripts
⑦ declaring other elements, such as keywords, descriptions, etc.
Add a page description and keywords. Meta: A statement that generally makes descriptive information.
Common Properties: http-equiv (encoding) content name CharSet (encoded)
Add key <meta name= "keywords" content= "keyword description"/>
Add description <meta name= "description" content= "description content"/>
2. Text marker
Role: Text is an important part of the Web page, the text that is written directly is displayed in the browser's style, and the text contained in the tag is displayed as the style that the tag has.
Special characters: A special symbol is represented by an escape character (which changes the original meaning of the word and is interpreted as a completely new meaning).
Space:
<:< less than
>:> greater than
¥:¥ CNY
©:© Corporate Identity
":" quotation marks
Text style: Retouch text.
<b>...</b> Bold
<i>...</i> Tilt
<u>...</u> underline
<s>...</s> Delete Lines
<sup>...</sup> Superscript
<sub>...</sub> Subscript
3. Title element
Headline elements let the text appear in an eye-catching way, Wang Wang for the title of the article
level headings
Level two headings
.
.
level six headings
4. Paragraph elements <p></p>
P provides structured text in a way that has a certain format.
Separate lines from other text; add vertical white space, as a paragraph spacing
Common Properties of P tags:align: horizontal alignment of text within p tags
Align= "Center/left/right"
5, line marking <br>
Create a manual line break anywhere
6. Partitioning elements
More for layouts, and easier to add different styles to text later
Block partition element: This element automatically takes up one row
<div></div>
Inline partition elements: Many inline elements do not wrap and appear in one line
<span></span>
7. Block-level elements and inline elements
Block-level elements:Div, p, HR, HN, OL, ul ....
Role: Most for Web page layout
Inline elements:span, B, S, u, I,sub,sup .....
Function: Surround text To add effect to text
8. Split Line
Function: Build a horizontal line on the Web page. Empty tag. Belongs to a block-level element.
Common properties:size: dimensions, thickness of horizontal lines
Width: The length of the horizontal line. (The value can be given to a specific value, can give a percentage (can be adjusted with the browser size))
Align: horizontal alignment (Center,left,right)
Color: Colors
9. Pre-formatted labels <pre></pre>
Preserves space and line wrapping in source files
1. Images and Links
URL: A Uniform Resource locator used to identify any resource in the network
Text, pictures, audio and video files, paragraphs, or other hypertext
The path, which is the route that passes from the current position to the target location
There are three main forms of paths in Web pages:
Absolute path: The full path to the file starting at the top-level directory
such as: E:\LXD_silence\HTML5Basic\Day01\demo01.html.
The complete URL consists of the Protocol (HTTP://); hostname or domain name (www.baidu.com);
Directory path (img); Resource Name: Audio, video, image,html(logo.gif)
such as: http://www.baidu.com/img/logo.gif
Features: No matter what the current resource path is, use absolute paths to always find the resources you need.
Relative path: Refers to the location of the file in relation to the current file. It includes a directory name, or a pointer to a
To find the path to the file from the current directory.
A class name; a child into a directory; a parent returns
Root relative path: /image/user.jpg
2. Image elements
Add an image to the page using the element; is an empty tag
Property: src: Specifies the path of the display image
Width: Image width
Height: Image Height
Title: Move the mouse to the text displayed on the picture
Alt: text when the picture is not displayed
3. Link Elements <a></a>
Use the <a> element to create a hyperlink with the following syntax:
<a href= "target=" "> text </a>
Properties: href: link URL
target: The desired value is _blank (opens in a new window ),_self (opens the page on its own page)
Name: Anchor point names
Various manifestations of the link:
① Download resources:<a href="Bac.rar" > downloads </a>
② page Jump:<a href="abc.html" > Web </a>
③ Email Link:<a href="Mailto:[email protected" > Contact Us
</a>
④ return empty link to page:<a href="#" ></a>
⑤ linking to JavaScript:<a href="JavaScript" >JS</a>
Anchor Point
defining an anchor pointby a : An anchor inHTML is equivalent to a mark in a location in an HTML document
Define anchor points: <a name="anchor name (anchorname)" ></a>
Jump to Anchor point:<a href="#锚点名" ></a>
Jump to other anchor points:<a href="page url# anchor name " ></a>
2015-9-02
4. Table Elements <table></table>
The function of a table: the layout of information with a fixed format.
<table> for defining tables
Define Rows <tr>
Define columns <td>(cells)
All content placed in the table must be placed in TD
<table></table> Properties
Border properties:border border width
BorderColor Border Color
Size: width wide height (can be absolute or percent)
Background: bgcolor background color background background image
Detail: align horizontal alignment
cellspacing the distance between cell and cell (margin of cell)
cellpadding The distance between the text in the cell and the cell border (the cell's padding)
<tr></tr> Properties
Height
Align the horizontal position of the content in the cell (left/center/right)
valign the vertical position of the content in the cell (top/middle/bottom)
<td></td> Properties
Width width height High
bgcolor background color
Align horizontal position alignment valign vertical position alignment
Colspan Cross-column
RowSpan Cross-line
<caption></caption> Properties
<caption> the title </caption> title of the table will be centered above the table by default. Immediately following the table label
<th></th> Properties
Column headings, which are lateral to TD (TH is the table header, default center, bold)
Row grouping
Table header row group:thead
Table Body Row group:tbody
Footer Row Group:tfoot
5. Structure Mark
Header Document header, page headers (high usage, can be used multiple times on the same page)
Nav navigation is generally used to make the main navigation in the page
section document sections; The main content of the document (high usage, can be used multiple times)
Aside is independent of content outside the main content. such as sidebar, side navigation ...
Article a paragraph of text that is referenced in a document. such as articles, posts, blogs ... .
Footer Footer, end of article (high utilization rate)
6. List
Sequence list:<ol></ol>
<ol> Properties:type:a/a/i/I/1 defines the style of the sequence (a/a/i/i/1)
The Start definition list item is starting from a few
List items:<li></li>
Unordered list:<ul></ul>
<ul> Properties:type:disk/circle/square ( solid circle, Hollow circle, Square )
Style before a list item
List items:<li></li>
Definition list:<dl></dl>
Most appear in the style effect of text-to-picture mixed rows
<dl> Definition List
<dt></dt> List title (can insert image)
<dd></dd> List Contents (do a text description)
</dl>
7. Forms
① form Tags:<form></form>(data that isnot placed in a form is not submitted to the server)
Properties: the Action action (the address of the server processing data by the server-side developer to
provided, submitted by default to this page. ）
how the method form will submit data to the server
(in clear or ciphertext mode), default:get
Value:Post sends the data to the server in a ciphertext way,
Do not limit the length of data passed
Get send data to the server in clear text,
Limit the length of data passed 2kb
name to define the form names
Enctype How to encode form data
② table cell ( control )
Role: Data specifically accepted by users
1.Input Elements
Type: types
<input type= "text"/> text box. Accept normal data entered by the user
<input type= "password"/> Password box.
Display data in ciphertext, password entry using the control
<input type= "checkbox"/> check box. Note: Thename property must be consistent
<input type= the "submit" button value= "The text that is displayed on the"/> Commit button.
Features: Used to submit forms to the server
<input type= "" > Reset button.
Function: Restores all form elements to the default value state
2, textarea multi-line Text field
3. Select and option
4. Other elements
HTML Notes (1)
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
