Home > Developer > Web Develop
HTML is a language used to describe a Web page.
HTML refers to Hypertext Markup Language (Hyper Text Markup Language)
HTML is not a programming language, but a markup language (Markup Language)
Markup language is a set of tag tags (markup tag)
HTML uses tag tags to describe web pages
HTML tagsHTML tag tags are often referred to as HTML tags (html tag).
HTML tags are keywords surrounded by angle brackets , such as
HTML tags are usually paired up , such as <b> and </b>
The first label in the pair is the start tag , the second is the end tag
Start and end tags are also known as open tags and closed labels
HTML document = Web pageHTML Document Description Web page
HTML documents contain HTML tags and plain text
HTML documents are also called Web pages
The purpose of a Web browser is to read HTML documents and display them as Web pages. Instead of displaying HTML tags, the browser uses tags to interpret the contents of the page:
Example explanationText description page between
The text between <body> and </body> is visible in the page content
The text between
Text between <p> and </p> is displayed as a paragraph
HTML Comment TagsYou can add comments to the HTML source code by using the following syntax:
Instance<!--write a comment here--
Note: There is an exclamation point in the start tag, but not in the end tag.
The browser does not display comments, but it can help record your HTML document.
HTML Head Section1, <! DOCTYPE html>
Document type declaration, which allows the browser to interpret and execute according to HTML5 standard Code,
Document type declarations must be placed above the document,
If you do not write, the browser runs in compatibility mode by default and a bug may occur.
2, <meta charset= "Utf-8"/>
To set the page character set encoding format:
GB2312: GB Code/Simplified Chinese encoding format.
GBK: Extended GB code. More encoding format than the GB code.
Utf-8: The universal code can be compatible with most national languages.
html4.01 before declaring the character set encoding format:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
3, <meta name= "keywords" content= "html5,web development"/>
Set Page Description: page description content.
Name= "keywords": The current statement is used to set page keywords
Content= "": web keyword content, separated by commas.
4. <title> Blog Park </title>
Page title, Text on page tab
5, <link rel= "icon" href= "img/w-1. PNG "/>
Small icons for linked pages: Small icons on tabs
Rel Property: Icon: The file that represents the connection, as the icon for the Web page.
HREF attribute: Select the path address where the picture is located.
The HTML title (Heading) is defined by tags such as
HTML tags are divided into "block-level labels" and "row-level labels"
Difference:
1, block-level label automatic line, front and back row;
Row-level labels do not wrap automatically, showing from left to right;
2, block-level label width of the default 100%;
Row-level label width is open by text content;
3, block-level labels can be set wide height, margin, row-level labels do not.
HTML tags are categorized as "paired" and "Closed and tagged" (Empty label)
Paired Tags: paired appearance, with start tag, must have end tag,
e.g.:Self-closing and label/empty tags: only one label, with/for automatic closing of tags (/can be omitted)
Example:
The HTML paragraph is defined by the <p> tag.
ExampleHTML Links<p>this is a paragraph.</p><p>this is another paragraph.</p>
HTML links are defined by the <a> tag.
"A tag HYPERLINK"
1, href: Hyperlink jump address, can be a network link, can also be a local HTML file relative path.
2, Target: Hyperlink new page Open mode location. _self Open on current page (default)
3, Title: The mouse refers to the text displayed on the connection.
"Functional Hyperlinks"
1, mailto: Send mail to the designated mailbox.
<a href= "Mailto://[email protected" > Send Tengbao Mail </a>
2, Tencent: Chat with the designated QQ.
3, Chain Link: Click on the links, you can jump to the page to specify the location (anchor point)
A. The page specifies the location to define an anchor point,
B. Change the href attribute of the hyperlink to "#锚点名字"
<a name= "Top" ></a>
.......
<a href= "#top" > Jump top </a>
4, jump to other page address of the specified anchor point mode:
<a href= "Other page address. Html#center" > Jump </a>
HTML Images<a href= "http://www.baidu.com.cn" >this is a link</a>
HTML images are defined by tags.
Picture label , row level label
1, src attribute: Picture path.
"Path representation"
A, network image address, not recommended (http://. ）
B, Absolute Path (file:///C:/tupian.jpg), strictly forbidden to use absolute path, absolute path using file://Protocol, Web page using htp://protocol cannot open file://protocol file.
Absolute path notation: file:///drive letter:/file path
C, relative path:
1, the picture in the current file of the next layer, "folder name/Picture name"
2, the picture and the current document on the same level, directly write "Picture name"
3, the picture in the current document on a layer, direct ". /Picture Name "
Note: The picture cannot exit the root of the current project, i.e. the picture must be included in the project.
D, width, height: With wide height properties
E, title: The text displayed when the mouse is pointing
F, alt= ""; the content displayed when the picture cannot be loaded. Omitting alt, the Tiitle content is displayed by default.
G, align= ""; the text around the picture is arranged in relation to the picture.
Top: Text Center: text centered bottom: Low text Bureau
Unordered list
An unordered list is a list of items that are marked with a bold dot (typically a small black circle).
The unordered list starts with the <ul> tag. Each list item starts at <li>.
Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.
Example
Ordered list<ul><li>Coffee</li><li>Milk</li></ul>
Similarly, a sequence table is a list of items that are marked with numbers.
The sequence list starts with the <ol> tag. Each list item starts with the <li> label.
Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.
Example
Definition List<ol><li>Coffee</li><li>Milk</li></ol>
A custom list is not just a column of items, but a combination of items and their annotations.
The custom list starts with the <dl> tag. Each custom list item starts with <dt>. The definition of each custom list item starts with <dd>.
You can use paragraphs, line breaks, pictures, links, and other lists inside a list item that defines a list, and so on.
Example
<dl><dt>coffee</dt><dd>black Hot drink</dd><dt>milk</dt><dd> White Cold drink</dd></dl>
Table Properties
<th> table header, default Bold center
<tr> represents rows
<td> represents columns
1. Border: Add a border to each <td> of the table and the entire table.
If border>1, only the outermost border is bold and the,<td> border is not changed.
2. CellSpacing: Sets the spacing between cells and cells.
3, cellspacing= "0"; you can set the spacing between the borders to 0, but the adjacent borders do not merge, but instead display two line widths.
"Set table Border merge"
You can use CSS settings: style= "Border-collapse:collapse;"
After you set the border merge, the CellSpacing property will be invalidated.
4, cellpadding: cell padding, the distance between the cell text and the border.
5, Width/heght: Table width height
6, Align:center/left/right; Sets the position of the table in the browser.
7, bgcolor: Table background color.
8, BorderColor: Table border color.
9, Backgroud: Table background map. The background map is in effect when the background and back colors are present.
"Properties for Table rows and columns"
A, Width/height: Wide High
B, bgcolor: Background color (when the table and column attributes conflict, priority is given to the "near priority") Principle: TABLE<TR<TD
C, align: sets the contents of the cell in the table position.
D, valign: Sets the contents of the cell, vertical alignment.
"Table cross-row and cross-column"
1, colspan= "n"; Cross-column. If a cell spans n columns, the right side of the cell n-1 TD is not required.
2, rowspan= "n"; Cross line. If a cell spans n rows, the lower side of the cell n-1 a TD is not required.
-
"Structure of the table:"
Complete structure, including:
Caption: The title of the table, whether the <caption></caption> tag is placed in the first row of the table, the table title is always centered above the table.
Thead: Table header section. Always at the top of the table.
Tbody: Body part of the table, under THEAD, TFOOT below.
TFOOT: The tail of the table,
"Tabular Inline:"
Table has a column, you can write a few <col/> tags above the table, each <col/> corresponding to the first column, you can modify the <col/> Label style, add name and other properties, indicating that the column of all TD synchronization changes;
If you need to modify styles for multiple columns, you can wrap multiple <col/> using the <colgroup></colgroup> tag.
Example
<table border= "1" width= "height=" 280 "style=" Border-collapse:collapse ">
<H1 align= "center" style= "width:700px;" > Special leave application Form <tr>
<td> Affiliated Units </td>
<td> Group Classes </td>
<td> title </td>
<td>111</td>
<td> name </td>
<td>111</td>
<td> Director </td>
</tr>
<tr>
<TD rowspan= "2" > Local </td>
<TD colspan= "3" > Date </td>
<TD rowspan= "2" colspan= "2" > A red </td>
<td>111</td>
</tr>
<tr>
<TD colspan= "3" > Date </td>
<td> Supervisor </td>
</tr>
<tr>
<TD colspan= "2" > Shower haji Good </td>
<TD colspan= "4" > Good </td>
<td> Shower </td>
</tr>
<tr>
<td> expiry date </td>
<TD colspan= "3" > Date </td>
<TD colspan= "2" > Mutual promotion Good </td>
<td> haha </td>
</tr>
<tr>
<TD colspan= "2" > Hahaha ha ha haha </td>
<TD colspan= "2" > Haha </td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<TD colspan= "2" > Ha ha </td>
<TD colspan= "2" > Haha </td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<TD colspan= "2" > Ha ha </td>
<TD colspan= "2" > Haha </td>
<TD rowspan= "2" >111</td>
<TD rowspan= "2" >111</td>
<TD rowspan= "2" >111</td>
</tr>
<tr>
<TD colspan= "2" >bdbckbbj</td>
<TD colspan= "2" >nksdjc</td>
</tr>
</table>
Form form
1. Action: The server address of the form submission.
2. Method: The way the form submits data, the optional values are get and post.
"The difference between get and post"
A, get: use URL to pass data, content can be visible in the address bar, unsafe.
B, post: Data can not be visible in the address bar, more secure.
c, get pass the amount of data is limited, can only pass plain text content.
D, Post: Can pass a lot of data, and can pass pictures, videos and other files.
E, get: transfer speed faster than post.
"Get pass-through data URL format"
HTTP//original address, HTML? Name1=value1&name2=value2
For example: http://127.0.0.1:8020/0595.html?username=123
For example, when input is used, the name attribute is required and the name is missing, which causes the input box's data to not be passed to the background.
Input Common Properties
1, type: Indicates what type of input box The current input box is.
2, Name: Alias the input box and pass it as name=value when passed to the background.
3, Value: Provides the default value for the input box.
4, placeholder: The prompt content of the input box, when the input box has value, the content disappears.
5, Hidden hides the current input box. Can write hidden= "hidden", can also omit the attribute value, write only <input type= "text" hidden/>
hidden input box contents can also be transferred to the background.
6, disable: Disables the current input box, which can be displayed and cannot be used. Disabled input Box contents cannot be passed to the background.
type of input
a, text: normal text box.
b, Password: Password box,
c, Radio: radio button, value cannot be omitted, this value needs to be uploaded to the background;
radio button Depending on whether the name is the same, whether the button is the same group, the same group of buttons can only select one, name is the same.
d, CheckBox: Multi-select button, value can not be omitted, this value needs to be uploaded to the background;
checked= "checked"; Set radio button/multi-select button, selected by default.
e, File: Upload box. The
accept property allows you to restrict which types of files can be uploaded, and * indicates that all files can be accepted, such as: "image/*" means that only pictures can be received
mutiple= "Mutiple": Settings can upload multiple files.
f, submit: Form Submit button.
g, Reset: Form reset button. The
h, Image: Graphical submit button, SRC attribute import picture, and submit all have the function of submitting the form.
i, Button: appears as a buttons shape and has no effect.
j, Hidden: The Hidden input box is the same as the normal input box +hidden= "hidden".
Select drop-down block
1, select each item, with a <option></option> tag
&NBSP;2, Name: Need to be written in select.
3, option label if you have the Value property, the Value property will be passed to the background, and if there is no Value property,
Pass is <option> The text between </option>.
4, option to add a property select= "select", and set the default check.
5, select Add Property mutiple= "Mutiple"; Set the current drop-down control to multiple selections.
6, option adds title, and the mouse refers to the text that appears.
7, select can group options using the <optgroup></optgroup> tab, and display the group name with the Lable property.
Text field
a, text field size control:
You can use the Text field property cols= "20" (width of how many characters) rows= " 10 "(height number of characters)
can use CSS style style=" width:200px; height:100px; "
b, setting text field size cannot be dragged:
style= "Resize:none;"
c, set text field as read-only mode, cannot be modified:
<textarea readonly= "ReadOnly" ></textarea>
d, text out of range processing:
use style= "OVERFLOW:XX;" You can set how the text is displayed beyond the area.
overflow:hidden; out-of-range text hiding is not displayed.
overflow:scroll; Displays horizontal vertical scroll bars regardless of the amount of text.
overflow:auto; Auto, default effect. Text displays scroll bars more than once, not displayed.
overflow-x: Displays the scroll bar horizontally.
overflow-y: The way nput is associated with a form in a vertical direction. Just give the form a ID and then add the form property to the
input outside the form, point to the ID, and display the scroll bar.
"Smart Forms"
1. H5 provides us with the ability to bind the form and input from the outside of I;
<form id= "hh" ></form>
<input form= "hh" >
"H5 New Input Property"
1. Form Properties: association Specifies the ID of the form
2, Placeholder: input box prompt content
3, required= "required": the content must fill
4, autofocus= "autofocus"; Specify the input box to get focus automatically
5, AutoComplete: whether to automatically turn on the prompt completion function, the default open state, set to off for off, set on means open
Instance
<form>
<table>
<tr>
<td> Login Name:</td>
<td><input type= "text" name= "username" > (can contain a-Z, 0-9 and underscore) </td>
<td> read your Network service agreement </td>
</tr>
<tr>
<td> Password:</td>
<td><input type= "Password" name= "PSW" > (contains at least six characters) </td>
<TD rowspan= "8" ><textarea style= "width:200px; HEIGHT:200PX;OVERFLOW-Y: scroll; " > Welcome to read the terms of service agreement ......</textarea></td>
</tr>
<tr>
<td> re-enter the password:</td>
<td><input type= "Password" name= "PSW" ></td>
</tr>
<tr>
<td> e-Mail:</td>
<td><input type= "text" name= "email" > (must contain @ character) </td>
</tr>
<tr>
<td> Gender:</td>
<td>
<input type= "Radio" name= "Sex" checked= "checked" > Male
<input type= "Radio" name= "Sex" > Female
</td>
</tr>
<tr>
<td> Avatar:</td>
<td><input type= "File" name= "file" ></td>
</tr>
<tr>
<td> Hobby:</td>
<td>
<input type= "checkbox" name= "hobby" > Sport
<input type= "checkbox" name= "hobby" > Chat
<input type= "checkbox" name= "hobby" > Play Games
</td>
</tr>
<tr>
<TD rowspan= "2" > Like the city:</td>
<td>
<select>
<option> Please select City </option>
<option> Xiamen </option>
</select>
</td>
</tr>
<tr>
<td><input type= "Submit" value= "agree to the right terms of service, submit registration Information" >
<input type= "reset" value= "refill" ></td>
</tr>
</table>
</form>
H5-html Foundation-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
