Home > Developer > Web Develop
1.html
1. What is HTMLHypertext Markup Language Hypertext Markup Language.
2.html is the most basic web language.
3.html are all made up of labels.
Basic format for 4.html
Put some property information, auxiliary information.
Introduce some external files. (Css,javascript)
The content inside it will be loaded first.
<body>
To store real data.
</body>
5.html Precautions
1) Most tags have a start tag and an end tag, which have individual labels because only a single function, or no content to be decorated, can end within the tag.
2) If you want to enrich the contents of the tagged content, we use the attributes in the tag, and add more effect choices by changing the value of the property.
3) A "=" connection between the attribute and the attribute value, the attribute value can be in double quotation marks or single quotes or without quotation marks, usually with double quotation marks. or the company stipulates written specifications.
6. Layout labels
1) line break <br/>
2) <p></p> Paragraph labels will leave a blank line at the beginning and end of the position.
Properties: align= Alignment
3) Property:
1) Width: The width value pixel 100px can write percent 30%
2) align= Alignment
3) Size thickness
4) color value Red Green Blue RGB primary color (red Green blue #aa55ff)
4) Div Declaration piece Area <div> data </div> css+div
5) Span declares a piece of area
7. Font labels
1) <font> text content </font>
Property:
1) Size maximum is 7 the minimum value is 1
2) color
3) face font
2) title Tag
...
Zoom out from large to small.
3) <B></B> Bold
4) <I></I> Italic body
Tags support nesting
8. List Label
Data formatting.
1) DL List label
<dl>
<dt> Top Projects </dt>
<dd> Lower level items </dd> features: Auto align, auto indent.
</dl>
2) ordered and unordered lists
Ordered:<ol>
Type: List pre-order label
Start: Starting from the first few.
Unordered:<ul>
Data entry:<li> data content </li>
<li><a href= "backend path" > User management </a></li>
9. Picture Label
Properties: src= "path to Picture"
Width to display the picture
Height to display the picture
Alt text for captions
10. Hyperlink Link
<a></a>
Effects: 1) Linking resources
Href= "" must specify that if the value of the HREF is not specified, the default is the file protocol.
Only specify the protocol yourself, link the resource.
If the protocol specified in the HREF is not resolved by the browser, the application will be invoked and the program can be opened.
2) Locating resources
Name designation Professional term anchor
11. Table labels (emphasis)
Function: Format data
<table></table> Declare a table
Property:
1) Border border
2) Width
3) The distance between the text and the inner border cellpadding
<tr></tr> Line
Property:
1) Align Alignment (text content)
<td></td>
Property:
1) Width
2) Height
3) colspan column merge cells
4) rowspan Row merge cell
<th></th> will be bold and centered.
<caption> Title of the table
12. Form labels (emphasis)
Role: You can interact with the server.
Enter the content user name password for the item
<form></form>
Property: action= "submitted request Location"
Method Submission method (get and Post) If method is not written by default is Get method submitted.
Get and Post differences:
1) The Get-way form encapsulates the data that is displayed directly on the URL. Post mode data is not displayed on the URL.
2) The Get mode has a lower security level and a higher post level.
3) The length of the Get mode data, post supports Big data.
* * Sex=on:
Specify name and value in each of the input tags name must be specified
? username=haha&pwd=1223&sex=nv&jishu=html
<input/>
Property: The type value can specify a number of values, each of which represents a different input component.
1) type=text text box
2) Type=password Password
3) Type=radio radio button
Name property
4) Type=checkbox Multi-Select button
Both radio and multi-select have default values: checked= "Checked"
5) Type=reset reset button
6) Type=submit Submit button
7) Type=file The input of the uploaded file
8) Type=button button
9) Type=image Picture (also submit button,)
Type=hidden Hidden Tags (users do not see, but we have to use the development, you can encapsulate the data into a hidden tag, and the table from a single submission to the background).
Select Label
<select></select> Select drop-down box
Text field textarea
<textarea> text content </textarea>
13. Frame Labels
Role:<frameset>
<frame>
</frameset>
The frame label cannot be written inside the <body>. Body cannot be written on top of frameset.
2.css
1. What is css:cascading style Sheets cascading style sheet
2. Role: Defines the display effect of the Web page.
3.css and HTML are combined
1) a property is provided in each HTML tag for the style property style= "code for CSS"
2) HTML provides a label <style type= "Text/css" >css code </style> written in 3) in the stype tag CSS provides a @import URL ("Address of the linked file");
4) HTML a label <link rel= "The introduction of the file with the HTML relationship" type= "Text/css" href= "file Address",
4. Priority
from top to bottom, from outside to inside, from low to high. (in most cases)
5. Code specification
Selector name {property Name: property value; Property Name: Property value ...}
property and property separated by semicolons
property is concatenated with the property value directly with a colon
if a property has multiple values, then multiple values are separated by a space.
6.CSS Basic Selector
1) Tag name Selector
2) The HTML tag provides the attribute class class attribute to a style written in class with a high priority.
3) HTML tags provide a property ID that typically defines the ID as unique. The priority level of the ID is higher than class. The Style property has the highest precedence.
Tag name < class < ID < Style property
Extended selector for 7.CSS
1) Association selector: A tag can be nested, and a relationship between two or more selectors can be used with this selector.
2) Combo selector: Apply this selector when you have the same style settings for multiple different selectors.
3) pseudo element selector:
1) A:link hyperlink is not clicked.
2) a:hover the cursor to the status on the hyperlink (not clicked).
3) a:active The status when you click on the hyperlink.
4) The status of the a:visited after being visited.
5) P:first-letter The first letter in a paragraph.
6): Focus-focused element
8. Box model
Look at the picture.
The property names commonly heard in Web design: content, padding (padding), Border (border), border (margin), CSS box mode.
These properties we can transfer it to our daily life in the box (box) to understand that the daily life of the box is a box that can be loaded, but also have these properties, so call it box mode.
Structure
Content is something in a box;
and filling (PADDING) is afraid of the contents of the box (valuable) damaged and added foam or other anti-seismic accessories;
The border (BORDER) is the box itself, and the border (margin) indicates that the box should not be stacked together, leaving a certain gap to keep it ventilated, and also for easy removal. In web design, content often refers to text, pictures and other elements, but also can be small box (div nested), and real life in the box is different, the real life of things can not be larger than the box, or the box will be broken, and the CSS box is elastic, the inside of the box itself is larger than the maximum size, But it's not going to get damaged.
Padding is only a width property, which can be understood as a box for every HTML tag in a life box;
9. Layout--floating
Float
Right: Text flows to the left of the object
Position
Absolute: Drag objects from the document stream, using left, right, top, bottom, and other properties to be absolutely positioned relative to the closest one of its most positioned parent.
HTML and 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
