Home > Developer > Web Develop
The notes cover almost all of the knowledge points in daily development and related considerations
Beginners who want to learn how to make a Web page can use this note to get an initial look at HTML, or you can view it as a reference.
HTML Simple structure
<HTML> <Head> <title>Home</title> </Head> <Body>Web page Body ...</Body></HTML>
HTML markup: Tell the browser what code to compile
Head tag: tells the browser what character set to display
Body tag: Only in this area can you see the results after the browser is translated
HTML Text decoration tags
<b></b>: No attributes, bold
<i></i>: Italic
<u></u>: Underline
<s</s>: Strikethrough
<sub></sub>: superscript
<sup></sup>: subscript
<font></font>: Font properties Size (7 levels, 1 small 7 Large), face (font), color (colors)
HTML Typographic Markup
<P></P>: Paragraph
Common properties: Align: horizontal alignment, Left,center,right
<br>: line break
<pre></pre>: Pre-layout mark, all whitespace characters (spaces, line breaks) will be preserved
Common properties: Align horizontal alignment
: A half-width space
<div> and <span> tags
<div> is a block element, a tag that doesn't make any sense, but is the most used, and is usually used with CSS
<span> is an inline element, and, similarly, works with CSS
Block element: Single row
Inline elements: Multiple inline elements, row by line
HTML character entity
Space: Represents a half-width space, a Chinese character is two bytes, and a byte is equivalent to a half-width space
<:<
>:>
&:&
￥:&ren;
x:×
÷:÷s;
HTML bullets
<ul> <Li>Content 1</Li> <Li>Content 2</Li> <Li>Content 3</Li></ul>
Common Properties: Type: Value disc (small black dot), Circle (Hollow Circle), Square (solid square)
HTML numbered list (with sequence list)
<ol> <Li>Content 1</Li> <Li>Content 1</Li> <Li>Content 1</Li></ol>
Common Properties: Type: Value: 1,a,a,i,i
Start: Starting with the first few numbers
Scrolling caption Marker
<marquee> scrolling Content </marquee>
Common Properties:
Direction: Scroll Direction: up,down,left,right
Width
Height
BgColor
ScrollAmount: Scrolling step, the higher the value, the faster
Scrolldelay: Dwell time between two steps
Loop: cyclic scrolling times
Picture Tags:
Common Properties:
Width,height,border (border), SRC (picture path general relative path), align (horizontal alignment) (can be achieved by the text mixed, only left and right can be achieved)
Hspace (the distance between the picture and the left and right text), vspace (the vertical distance between the picture and the upper and lower text)
Note: If the picture wants to scale proportionally, it only defines a width or a high
Image to achieve the center, can be wrapped with div, with CSS text-align implementation
Super Connect
<a> content </a>
Common Properties:
HREF: Address of the destination file
Target: The display window for the destination file:
Value: _blank: Opens in a new window _self: In the current window, equivalent to replace (default open mode) _parent: Open in parent window _top: Open in top-level window
Name: Define the names of the anchor connections
Anchor Point Link
Meaning: A jump in a different area of a Web page
Define anchor points: <a name= "anchor name" ></a>
Anchor name naming rules: can contain letters, numbers, underscores, but only start with a letter
Note that there is no content between <a></a>
Jump to Anchor point:
Syntax: <a href= "#锚点名称" > to have content </a>
<meta> tags
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
Content-type: Content Type
Content: Description of detail types
Text/html: Web pages are text content, HTML is a small format in text
CharSet: Character Set
Web page refresh automatically
<meta http-equiv= "Refresh" content= "2" >//Automatically refresh Web pages every two seconds
<meta http-equiv= "Refresh" content= "2;url=http://baidu.com" >//two seconds after jumping to Baidu home
Name property
Set Web search keywords, set up copyright information, author, etc.
1. Keyword name= "keywords"
2. Description information name= "description"
XHTML Authoring Specification
1. All tags and attributes must be all lowercase
2. Unilateral markings must be closed such as <br> <br/>
3. All attribute values must be quoted
4. All properties must have values such as
5. Proper nesting between tags
6.XHTML Web pages must have a DTD document type definition code
DTD Document type definition
Purpose: is a validation mechanism to verify that the syntax is legal
Three major categories:
Strict type (cannot use Font,bgcolor and other performance tags, must be replaced by CSS),
Transitional (you can continue to use the expression in HTML
Frame type: Multiple pages can be displayed
table tag
table structure:
< table > < tr > < td ></ td > < td ></ td > </ tr > </ table >
TR means the row TD represents the column, this is a row of two columns of the table
Table Properties : Width,height,align,border,bordercolor,bgcolor,background,
cellpadding (distance of cell edge to content), cellspacing (distance between cell and cell), rules (merge cell border line value all compatibility is not good, replace with CSS)
<tr> Attribute Row Tags
Bgcolor,height,align,valign (Vertical Center: value: Top,middle,bottom)
<td> and <th> Properties
TD is normal cell th is the header cell, centered bold display
Properties: rowspan Merge cells colspan right and left merge cells merge properties to be placed in the first cell
Colspan= "2" If two cells are merged to remove a cell, an extra
Form:
The concept of forms: forms are primarily used to obtain client-side user data
Structure of the form:
<formname= "Form1">User name:<inputtype= "text"name= "username"/>Password:<inputtype= "Password"name= "Userpwd"/> <inputtype= "Submit"value= "Submit Form"/></form>
<form> Tag Properties--Block elements
Name: Naming the form, making the client form validation for JS
Method: How the form is submitted, get or post
Action: Specifies the form's handler, typically a PHP file if the action is blank, the form data is submitted to the current file
Enctype: Specifies how the form data is encoded (decrypted). This attribute can only be used when the method is post
Two values: application/x-www-form-urldecoded default Encryption method
Multipart/form-data If you upload the file, you must use this
Get method and Post mode
Get mode (less than Basic): Appends the form data to the handler specified by the action, and then sends a request to the server
Separate the action file from the query string
& separates the names and values of every two form elements
Use = connect between form name and value
Get mode Features
Cannot submit sensitive data
Only a small amount of data can be submitted because the address bar is limited in length
Get mode cannot upload attachments
Post mode : directly to the form handler
Post mode features
Submit data is relatively secure
Can submit massive amounts of data
Attachments can be uploaded
Single-line text box:
Syntax format: <input type= "text" property = "value"/>
Common Properties: Name: text box names (alphanumeric underscore, beginning of letter)
Value: Values in the text box
Size: text box length, in characters
MaxLength: Maximum number of characters you can enter
ReadOnly: Read-only property, can be selected, cannot be modified: Same as property name and value
Disabled: Disable properties, cannot be checked, cannot be modified, property names and values are the same
radio button
Syntax format: <input type= "Radio" property = "value"/>
Common Properties: name,value,checked (Default selection properties and values)
check box:
Syntax format: <input type= "checkbox" property = "value"/>
Common Properties: name,value,checked
Drop-down list:
<name= "City"> <value= "Beijing "> Beijing <option/><Select/ >
Text area
Syntax format <textarea name= "name" cols= "width" rows= "height" > Default text </textarea>
Various buttons
Submit button: <input type= "Submit" value= "Submission Form"/>
Reset button: <input type= "reset" value= "reset"/>
Picture button: <input type= "image" src= "Picture address"/>//and submit button function consistently
Normal button: <input type= "button" onclick= "Jacascript:window.close ()" value= "Close Window"/>
The normal button itself does not have any function, usually to use with JS, to achieve the corresponding function
Uploading a file field
Syntax format: <input type= "File" property = "value"/>
Common Properties: Name,value (for read-only properties)
Note: To upload a file, specify the attribute enctype= "Multipart/form-data" in the form
Hidden fields
function: Invisible box, pass some values, and this value does not want to be seen
Syntax format: <input type= "hidden" name= "name" value= "Default"/>
<caption> table title
Syntax format:<caption> title content </caption>
Hint: is the child tag of <table>
Comments for HTML
<!--comment Content--
Note: Note content is not displayed for future maintenance of Web pages
Web Multimedia
The video on the Web page is generally flash format, because the compatibility of Flash is better, Flash file compression after small
Flash file extension. swf
<object> Tags: is the Internet Explorer to introduce multimedia tags
<embed> Tags: Netscape introduces multimedia tags
Image hotspot (image map)
Add multiple links to a picture (the default is only one link to a single image)
Tag structure:
<imgsrc=""Usemap= "#map"/><MapID= "Map" > < AreaShape= "Hot zone shape"coords= "Hot Zone coordinates"href= "Hot Zone Address" /></Map>
<area> Common Properties:
Shape: Hot Zone shape, value: Rect (Rectangle), Circle (Circle), Polygon (polygon)
Coords: Hot Zone coordinates
If Shape=rect: coords= "X1,y1,x2,y2", (x1,y1) is the coordinate value of the upper-left corner of the rectangle, (x2,y2) is the coordinate value of the lower-right corner of the rectangle
If shape=circle: coords= "X,y,r", where (x, y) is the center coordinate and R is the radius
The framework section will be launched in the next blog post, so please look forward to ...
HTML Learning Notes Summary
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
