Home > Developer > Web Develop
<! The doctype> declaration must be the first line in the HTML document, before the <! The doctype> declaration is not an HTML tag; it is a directive that instructs the Web browser to write which HTML version of the page to use.
HTML Document Structure:
1, <! DOCTYPE Hhtml> is declared as a HTML5 document.
2, is the root element of the HTML page, between them the head of the document and the body (body)
3, contains meta data for the document.
4, <title></tiile> defines the page title, which is displayed in the browser title.
5, the text between <body></body> is the main content of the courseware's Web page.
Note: The <meta charset= "utf-8" > Declaration encoding is required for Chinese web pages, otherwise garbled.
Some browsers will set GBK as the default encoding, at which point you need to set it to <meta charset= " GBK;
You can add a compatible open source code block when necessary. To be compatible with various browsers
HTML tags are keywords surrounded by angle brackets, such as HTML The labels are usually paired up. For example <div></div>, the first label is the start and the second tag is the end. The end tag will have a slash. The
is also partially present, such as <br/>, tag can have several properties or no attributes.
Tag Syntax:
< label Name Property 1 = "Property value 1" Property 2 = "Property value 2" ......> content section </tag name;
< Tag Name property 1 = "Property value 1" Property 2 = "Property value 2" .../>
Several important attributes:
ID: Defines a unique ID for a label, unique in the HTML document tree
Class: Defines one or more class names (classname) (CSS style class names) for HTML elements
style: inline style for the specified element (CSS style)
HTML Comment: <!--content-->
The content between which can be stored:
tag meaning
<title></title> define page title Beauty/' ta?tl/
<style></style> define internal style sheet/sta?l/
<script></script> define JS code or introduce external JS file beauty/skr?pt/
<link/> introduce external style sheet file Mei/l?? k/
<meta/> Define Web page original information English/' met?/
Meta
<meta> element provides the original information about the page (meta-information), description and keywords for search engine and update frequency The
<meta> tag is located at the head of the document and contains no content.
The information provided by <meta> is not visible to the user.
Meta Tags: meta tags have two properties, they are the Http-equiv property and the Name property,
different properties have different parameter values, these different parameter values implement different page functions.
1, the Http-equiv property, equivalent to the HTTP file header function, you can return some useful information to the browser to help
correct display of the Web page content, and its corresponding property value is content, content is in fact the brother parameters of the variable value.
<!--2 seconds to jump to the corresponding URL, note the contents of the quotation mark content of the United States/' kɑnt?nt/-->
<meta http-equiv= "Refresh" content= "2; Url=https://www.oldboyedu.com "
<!--the encoding type of the specified document-->
<meta http-equiv=" Content-type "Charset=utf8"
<!--tell IE to render the document--> in superlative mode;
<meta http-equiv= "x-ua-compatible (Turn on top rendering)" content= "Ie=edge";
2, name attribute: Mainly used to describe the Web page, the corresponding property value is content,
Content is mainly used to facilitate search engine robots to find information and classify information.
<meta name= "keywords" content= "meta summary, HTML meta, meta attribute, meta jump" >
<meta name= "description" content= "Old boy Education Python Academy" >
<body> </body> content is for users to see
1, its commonly used tags:
1, Exclusive line: block-level label,
1, H1~h6 # 1~6 class title
2, p # paragraph label
3, Div # defines a block-level element that does not make sense, primarily through CSS styles that give different performance.
4, HR # Horizontal
5, Li # ordered list
<ol>
<li> the first </li>
<li> the second </li>
</ol>
6, TR # <tr> tags define rows in an HTML table.
2, content is displayed on one line: inline label
1, a # import link (can make the page link can also be absolute path, picture in the Pass folder, import picture name)
2, the span # tag is used to define an inline (insider) element, and it has no practical meaning, and is mainly given a different performance by CSS styles.
3, IMG # (Image import).
Width= "Wide" height= "high (high and wide two attributes only one will be automatically scaled)" >
4, b/u/i/s # b bold U underline I tilt s Delete (there is a horizontal line in the text)
5, input
3, br newline hr horizontal line (horizontal)
Special characters:
Space:
: >
<: ⁢
&: &
￥: ¥
Copyright: ©
Registration: ®
div tags and span tags
div tags are used to define a block-level element, and there is no practical meaning, mainly through the CSS style to give it a different performance.
The span tag is used to define an inline (insider) element and has no practical meaning, and is primarily given a different representation by CSS styles.
The difference between a block-level element and an in-line element:
The so-called block-level element is the element that starts to render on a different line, and the inline element does not need another row.
If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.
Attention:
About tag nesting: usually block-level elements can contain inline elements or some block-level elements,
However, inline elements cannot contain block-level elements, which can contain only other inline elements.
P tags cannot contain block-level labels, nor can p tags contain p tags.
2, Tag nesting
1, tags can be nested tags (block-level labels can be wrapped in the introverted tag)
Precautions:
Try not to nest block-level tags with introverted tags.
P tags cannot be nested p tags
P tags cannot nest div tags
Tags: import labels for pictures
Width= "Wide" height= "high (width height two properties only set one time, auto equal to zoom)" >
A tag: Hyperlink label
The so-called hyperlink refers to the connection from one page to another, which can be another page,
It can also be a different location on the same page (URL link), or it can be a picture (URL link), an e-mail address (eMALL)
A file (path, not commonly used), or even an application.
What is a URL?
The URL is the abbreviation for the Uniform Resource Locator (Uniform Resource Locator), also known as the Web address, which is the address of the standard resource on the Internet.
URL Example
Http://www.sohu.com/stu/intro.html
Http://222.172.123.33/stu/intro.html
The URL address is made up of 4 parts
The 1th part: for agreement: HTTP//, ftp://, etc.
Part 2nd: For the site address: can be a domain name or IP address
Part 3rd: Directories for pages in the site: Stu
Part 4: For page names, such as index.html
Each part is separated by a "/" symbol.
<a href= "http://www.oldboyedu.com" target= "_blank" > Point me </a>
The href attribute specifies the destination Web page address. The address can have several types:
Absolute URL-point to another site (such as href= "http://www.jd.com)
Relative URL-refers to the exact path in the current site (href= "index.htm")
Anchor URL-point to anchor in page (href= "#top")
Target
_blank to open the destination page in a new tab page
_self indicates that the destination page is open in the current tab page
List
Divided into non-sequential list (UL)
<ul type= "disc" >
<li> the first </li>
<li> the second </li>
</ul>
Disc solid dot, default value
Circle Hollow Circle
Square Solid Square
None no style
Sequential List (OL)
<ol type= "1" start= "2" >
<li> the first </li>
<li> the second </li>
</ol>
Type property:
1 List of numbers, default values
A Capital Letter
A lowercase letter
Ⅰ Capital Rome
Ⅰ Small Roman
Title List (DL) (also called Custom list)
<dl>
<dt> title 1</dt>
<dd> content 1</dd>
<dt> title 2</dt>
<dd> content 1</dd>
<dd> content 2</dd>
</dl>
Form
A table is a two-dimensional data space, a table consisting of several rows and a row of cells,
Cells can contain numbers, lists, patterns, forms, digital symbols, preset text, and other content such as cousins.
The most important purpose of the table is to display the table class data, which refers to the most suitable format for the organization as a table
(That is, organized by row and column.) The data.
The basic structure of the table:
<table>
<thead> # table Header
<tr>
<th> serial Number </th> # table internal title Tag th = text Head
<th> name </th>
</tr>
</thead>
<tbody> # Table Contents
<tr> # per line
<td>2</td>
<td>Yuan</td>
</tr>
</tbody>
</table>
Table Properties:
Border: Table border
cellpadding: Inner margin
cellspacing: Outer margin
Width: Percentage of pixels (preferably with CSS to set the length width)
RowSpan: How many rows the cell spans vertically
colspan: How many rows the cell spans (that is, merged cells)
Form form
The functionality of the form allows:
Forms are used to transfer data to the server, enabling users to interact with the Web server
The form can contain input series labels such as text fields, checkboxes, radio boxes, submit buttons, and so on.
The form can also contain textarea, select, fieldset, label tags.
Form Properties
Property Description
ACCEPT-CHARSET Specifies the character set used in the submitted form (default: page character set).
The action specifies where to submit the form's address (URL) (Submit page).
AutoComplete specifies that the browser should automatically complete the form (default: On).
ENCTYPE specifies the encoding of the submitted data (default: url-encoded).
Methods specify the HTTP method (default: GET) that is used when the form is submitted.
Name specifies the names of the recognized forms (for DOM use: document.forms.name).
NOVALIDATE Specifies that the browser does not validate the form.
Target specifies the destination of the address in the Action property (default: _self).
1, the action controls where to submit the data.
2, Method Get/post, two methods of HTTP request.
3, Enctype when
Input
The <input> element changes to a variety of patterns based on the different type attributes.
Type Value property representation corresponding code
Text single line input <input type= "text"/>
Password Password input box <input type= "Passwor"/>
Date input Box <input type= "Date"/>
CheckBox check box <input type= "checkbox" checked= "Checkde"/>
Radio Radio Box <input type= "Radio"/>
Submit button <input type= "Submit" value= "Commit"/> # type represents the Submit button, followed by value indicates the word displayed on the button
Reset reset button <input type= "reset" value= "reset"/>
button Normal button <input type= "button" value= "normal button"/>
Hidden hidden input Box <input type= "hidden"/>
File text selection box <input type= "File" >
Property Description:
Name: the "key" when the form was submitted, the difference between the notice and the ID
Value: The values of the corresponding items when the form is submitted.
Type= "button", "Reset", "submit" when the text content is displayed on the button
Type= "text", "Password", "hidden" when the initial value of the input box
Type= "checkbox", "Radio", "File", the value associated with the input.
Checked:radio and checkbox are selected by default
Readonly:text and password set read-only
Disabled: all input is applicable.
Select Label # can be used to choose, (drop-down box kind of)
Example:
<form action= "" method= "POST" >
<select name= "City" id= "City" >
<option value= "1" > Beijing </option>
<option selected= "Selected" value= "2" > Shanghai </option>
<option value= "3" > Guangzhou </option>
<option value= "4" > Shenzhen </option>
</select>
</form>
Property Description:
Multiple: Boolean property, set to multiple selection, otherwise the default radio
Disabled: Disable
Selected: This item is selected by default
Value: Defines the option value at commit
Lable label
Definition <label> tags, input element definition callout (TAG)
Description
The label element does not render any special effects like the user.
The For property value of the <label> tag should be the same as the id attribute value of the related element.
Example:
<form action= "" >
<label for= "username" > Username </label>
<input type= "text" id= "username" name= "username" >
</form>
TextArea multiple lines of text:
<textarea name= "Memo" id= "Memo" cols= "rows=" >
Default content
</textarea>
Property Description:
Name: Names
Rows: Number of rows
COLS: Number of columns
Disabled: Disable
Front-end base------CSS
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
