Home > Developer > Web Develop
Html+css
HTML reference manual "Http://www.w3school.com.cn/tags/index.asp"
0. HTML BODY Tag
The code is written in three parts
1. HTML Document Header Tag
<title> Tags </title> can only have one
# # #定义网页标题, displayed in the browser's title bar, such as: Company name + Company products. Favor Search Engines
<base Specify a default address or default destination for all links on the page/> only one
# # #基底网址标记, used to set the absolute path of the file in the browser, the file in the Web page only needs to write down the relative path of the file, which is the path specified under base. "Very small, but not recommended"
<link linked style sheet/> can have multiple
# # #用于确定本页面和其它文档之间的关系
<meta> can have multiple
# # #有两种用法. You can provide meta-information about the page, such as the description and keywords for search engines and update frequency. is located at the head of the document and does not contain any content. The properties of the <meta> tag define the name/value pairs associated with the document.
1.<meta name= "" content= "" >
# # #Name用于在网页中加入一些关于网页的描述信息, keywords for Web pages, page description information. "keywords" is a name that is often used. It defines a set of keywords for a document. Some search engines use these keywords to categorize documents when they encounter these keywords. (Keywords: Keywords for Web pages; Description: Description of Web pages)
Robots: Whether search engines are allowed
For example:
<span style= "FONT-SIZE:18PX;" ><meta name= "keywords" content= "html,asp,php,sql" ></span>
2.<meta http-equiv= "" content= "" >
Http-equiv: property is used to simulate the response message header of an HTTP protocol in an HTML document, for example, to tell the browser that the page is being sluggish and what character set is used to display the page content. "Refresh: Refreshing, turning to other pages, Expires: Cache page"
For example:
<span style= "FONT-SIZE:18PX;" ><meta http-equiv= "CharSet" content= "iso-8859-1" ><meta http-equiv= "Expires" content= "Dec" > </span>
<meta http-equiv= "Windows-target" content= "_top" > # #禁止本网页被加载成其他网页小窗体
Entry/Exit page effects "23 kinds"
<meta http-equiv= "Page-enter" content= "Revealtrans (transition=2,duration=1.000)" > #进入 <meta http-equiv= "Page-exit" content= "Revealtrans (transition=22,duration=1.000)" > #退出
3, the main mark <body>
# # #包含文档的所有内容 (such as text, hyperlinks, images, tables, lists, and so on.) Place all the contents of the page in it.
Note: The HTML itself is not used as long as it can be controlled by style
Properties value Description ALink
- RGB (X,X,X)
- #xxxxxx
- ColorName
Do not approve of use. Replace it with a style.
Specifies the color of the active link in the document.
Background Url Do not approve of use. Replace it with a style.
Specifies the background image of the document.
BgColor
- RGB (X,X,X)
- #xxxxxx
- ColorName
Do not approve of use. Replace it with a style.
Specifies the background color of the document.
Link
- RGB (X,X,X)
- #xxxxxx
- ColorName
Do not approve of use. Replace it with a style.
Specifies the default color for links that are not accessed in the document.
Text
- RGB (X,X,X)
- #xxxxxx
- ColorName
Do not approve of use. Replace it with a style.
Specifies the color of all text in the document.
Vlink
- RGB (X,X,X)
- #xxxxxx
- ColorName
Do not approve of use. Replace it with a style.
Specifies the color of the link that has been visited in the document.
Common properties such as "Id" "Name" "Class" "style", all elements can be used
4, <! Doctype>
The declaration must be the first line in the HTML document, before the The 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.
##########################################################################
Note: <! Doctype> declaration does not have an end tag.
Tip: <! The doctype> declaration is not case sensitive.
Tip: Please use the authenticator to check if you have written a valid html/xhtml document!##########################################################################
For example:
HTML 5
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE html></span>
HTML 4.01 Transitional
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" ></span>
5. Common label
#格式标签
Format labels are used to define the layout, indentation, position, line wrapping, list, and so on for text in a Web page.
<br> line break
<p> Paragraph
<center> horizontally Centers The text that it contains
<pre> preserve the text in the source code in the format "http://www.w3school.com.cn/tags/tag_pre.asp"
<ul><li> unordered ListFor example:
<span style= "FONT-SIZE:18PX;" ><ul> <li>Coffee</li> <li>Tea</li> <li>milk</li></ Ul></span>
<ol><li> an ordered list
For example:
<span style= "FONT-SIZE:18PX;" ><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol></span>
<span style= "FONT-SIZE:18PX;" >
6. Text label
In a webpage, in order to emphasize a certain part of the text, or to make the text change 0, #以标题样式显示文本, N is digital
<span style= "FONT-SIZE:18PX;" >
1, <b> </b> #粗体文本
2, <i> </i> #显示斜体文本效果. tags and content-based style labels <em> similar. It tells the browser to display the text contained therein in italics (italic) or italic (oblique) font. If this italic word is not available to the browser, you can use styles such as highlighting, anti-white, or underline.
Note:<i> tags must be used in conjunction with the end tag </i>.
3, <u> </u> , #为文本添加下划线 & nbspNote: Try to avoid underlining text-users confuse it with a hyperlink! &NBSP
4, <sub> </sub> #定义下标文本. The content contained in the <sub> tag and its end tag </sub> is displayed in half the height of the character in the current text stream, but is the same as the font and font size of the text in the current text stream.Note: Both the <sub> tag and its corresponding <sup> tags are useful in mathematical equations, scientific symbols, and chemical formulas
5, <sup> </sup> #定义上标文本, similar to <sub>Note: This label is useful for adding footnotes to a document and for representing exponential values in equations. If used in conjunction with the <a> tag, you can create a good hyperlink footnote.
6, <font> </font> , #定文本的字体, font size, font color
For example:
<span style= "font-size:18px;" ><font size= "3" color= "Red" >this is some text!</font><font size= "2" color= "Blue" >this is some text! </font><font face= "Verdana" color= "green" >this is some text!</font></span>
7, <tt> </tt> #呈现类似打字机或者等宽的文本效果.
For the following elements, it is recommended that you use a style sheet to reach a richer effect##<em> defines the text as an emphatic content.
##<strong> defines the text as a more emphatic accent.
##<dfn> defines a definition project.
##<code> defines the computer code text.
##<samp> defines the sample text.
##<kbd> defines the keyboard text. It indicates that the text was typed from the keyboard. It is often used in computer-related documents or manuals.
##<var> defines a variable. You can use this tag with <pre> and <code> tags.
##<cite> defines a reference. You can use this tag to define references in a reference, such as the title of a book or magazine.8, <big></big> #显现大号字体效果. If the text is already the largest font, this <big> tag will not work. You can nest <big> tags to enlarge text.
6. Hyperlink tag
Application of Anchor Point
<a href= "URL" > XXX page </a>: Hyper Connect
<a name= "name" > Content </a>: Anchor Point
When used <a href= "#name" > Positioning location </a>
7. Image Label
#向网页中嵌入一幅图像. Two required properties: SRC attribute and alt attribute
Alt-text specifies an alternative text for the image.
The src URL specifies the URL of the image to display.
Common Properties:
Border: Width of border
Width: Image width
Height: Image Height
8. Image map
Because an image can only be added to a label, make a link
If you divide an image into multiple areas, each region points to a different URL address (add multiple links to a picture) "For example, map of China"
Use the Usemap property in image to use the map
<map> Defining hotspot Areas
<area> Specify each hotspot area
Shape designation rect, poly, Circle
coords Determining shapes
HREF Specifies the location of the link
For example:
<span style= "FONT-SIZE:18PX;" ><map name= "Planetmap" id= " Planetmap "> <area shape=" Circle "coords=" 180,139,14 "href =" venus.html "alt=" Venus "/> <area Shape= "Circle" coords= "129,161,10" href = "mercur.html" alt= "Mercury"/> <area shape= "rect" coords= " 0,0,110,260 "href =" sun.html "alt=" Sun "/></map></span>
9. Table Label
Table Labels <table>
Row Labels <tr>
Column Labels <td><th>
Table header Cell-Contains header information (created by th element) #文字是以粗体居中显示, field label
Standard column cell-contains data (created by the TD Element) #td元素内的文本通常是左对齐的普通文本
Example: A simple HTML table containing two rows and two columns
Note: If you need to span more than one row or column of content, use the colspan and rowspan properties. "Specify a few rows of columns"<span style= "FONT-SIZE:18PX;" ><table border= "1" > <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr ></table></span>
Optional properties
Properties value Description Abbr Text An abbreviated version of the content in the specified cell. Align
- Left
- Right
- Center
- Justify
- Char
Specifies the horizontal alignment of the contents of the cell. Axis Category_name Categorize the cells. BgColor
- RGB (X,X,X)
- #xxxxxx
- ColorName
It is not recommended. Please use a style instead of it.
Specifies the background color of the table cell.
Char Character Specifies which character to align the content with. Charoff Number Specifies the offset to the alignment. colspan Number Sets the number of columns that a cell can span. Headers Idrefs A space-delimited list of table header cell IDs that provide header information for data cells. Height
- Pixels
- %
It is not recommended. Please use a style instead of it.
Specifies the height of the table cell.
NoWrap NoWrap It is not recommended. Please use the style instead.
Specifies whether the contents of the cell are wrapped.
RowSpan Number Specifies the number of rows that a cell can span. Scope
- Ao.
- Colgroup
- Row
- Rowgroup
Defines the method that associates the header data with the cell data. valign
- Top
- Middle
- Bottom
- Baseline
Specifies how the contents of the cell are arranged vertically. Width
- Pixels
- %
It is not recommended. Please use the style instead.
Specifies the width of the table cell.
A, HTML window sub-frame "sub-frame does not use the search engine"
Separates a browser document window into multiple windows, each of which can display a separate Web page file. Each frame (that is, the page) has its own URL. "Usually used in the background home"
1. Frame label
<frameset> tags
The frameset element can define a frameset. It is used to organize multiple windows (frames). Each frame has a separate document. In its simplest application, the FRAMESET element only specifies how many columns or rows exist in the frameset.
Properties: Rows, cols, can use fixed values, percent and * three kinds
Border: Width of border
Frameborder: Whether to show borders
<span style= "FONT-SIZE:18PX;" >
<frame> tags
<frame> tags define a specific window (frame) in the frameset.
Properties: SRC, name
Scrolling: Whether scroll bar appears (yes/no)
Noresize: Can not adjust the border size, the default adjustable
<a href= "" > Target Property "Specify display location"
Four built-in values: _blank, _parent, _self, _top
<span style= "FONT-SIZE:18PX;" >
<noframes> tags
The noframes element can display text for browsers that do not support frames ("Use a browser that can be framed"). The noframes element is inside the frameset element.
Create a frameset using Microsoft Visual Studio.NET
<iframe> tags "often used for foreground effects display"
The IFRAME element creates an inline frame (inline frame) with another document "Pip effect"
Note: You can place the required text between <iframe> and </iframe> so that you can deal with browsers that cannot understand the IFRAME.
Note: The frame cannot coexist with body tag and content body
b, the role of the form
<form> tags and Their properties
<from></form> tag pairs are used to create a form that defines the start and end positions of a form,<form> labels have properties such as the following.
1. The Action property is used to set the URL of the server program that receives and processes the content of the form submitted by the browser. Relative and Absolute
2. The method attribute is used to define how the browser submits information from the form to the server-side handler, with a value of either get or post.
3. The target property is used to specify the target window or target frame to which the server returns the result display.
4. The Title property is used to set the text (such as the name or description of the form) that the browser displays with a small yellow buoy when the site visitor's vegetarian and mouse stays in any position on the form for a few seconds.
5. The Enctype property indicates which encoding method the browser uses to route form data to the WWW server. This property can be evaluated in two ways:
application/x-www-form-urlencoded (default setting)
Multipart/form-data
PHP.8-HTML+CSS (ii)-html detailed
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
