HTML/CSS Summary 1. htmlcss Summary
1. Define the webpage background color
<Body bgcolor = "background color">
The color can be expressed in two ways: 1. Specify the color name directly, such as blue. 2. Use hexadecimal data, for example, # RRGGBB, to represent two hexadecimal data.
2. Set the background image
<Body background = "image address">
3. Set text color
<Body text = "text color">
4. Set link text attributes
<Body link = "color">
Alink can be used to set the color when the mouse clicks the link; vlink can be used to set the color of the accessed hyperlink.
5. Set page margins
<Body topmargin = value leftmargin = value rightmargin = value bottommargin = value>
6. Title mark
<Title>... </title>
7. Define page keywords
<Meta name = "ketwords" content = "enter a specific keyword">
8. Define the page description
<Meta name = "description" content = "set page description">
9. Definition editing tool
<Meta name = "generator" content = "Frontpage">
10. Define the author information
<Meta name = "autor" content = "author's name">
11. Define WEB text and language
<Meta http-equiv = "content-type" content = "text/html; charset = character set type">
12. Define timed webpage jump
<Meta http-equiv = "refresh" content = "jump time; URL = jump address">
Using refresh in http-equiv can not only automatically refresh the page itself, but also automatically redirect between pages.
13. Links
1. Create a basic hyperlink: <a property = "Link Target"> link display text </a>
Property: href -- specify the link address; name -- give the Link name; title -- add prompt text to the link; target -- specify the Target window of the link; Attribute Value of target parameter: -self -- open the link on the current page;-blank -- open the link in a blank window;-top -- open the link in the top framework, it can also be understood as opening a link in the root framework;-parent -- opening a link at the previous layer of the current framework.
2. Create Image links
<A href = "Link Target"> linked images </a>
3. Create an anchor
<A name = "name of the anchor"> </a> an anchor is a position in a webpage with a given name. You must create an anchor before creating an anchor.
<A href = "# Name of the anchor">... </a>
14. Form
<Form action = "form handler" method = "Transfer method"> </form> generally, the form handler action and transfer method are indispensable parameters.
Action specifies the address to which the form data is submitted for processing. The form handler is the address of the form to be submitted, that is, the address of the program to which the information collected in the form will be passed.
There are only two transfer method values: get and post. Get -- form data is transmitted to the URL specified by the action attribute, and then the new URL is sent to the handler. Post-form data is included in the form body and then sent to the processing program.
15. insert an image
16. add multimedia files
<Embed src = "multimedia file address" width = "Multimedia width" height = "Multimedia height" autostart = "Automatic Running" loop = "loop =" loop playback "> </ embed>
<Bgsound src = "background music address" loop = "playback times">
17. insert other tags
Insert Space: & nbsp;
Insert special characters: & amp;... & copy;
18. set text format
Font is used to control font, font size, color, and other attributes. <font face = "font Style">... </font> you can set different fonts through face. <Font size = "text font size">... </font> is used to set the font size. <Font color = "font color">... </font> is used to set the text color.
<B> bold text </B>, <strong> bold text </strong>, <I> italic text </I>, and <em> italic text </em >, <cite> italic text </cite>, <u> underline content </u>, <sup> superscript content </sup>, and <sub> subscript content </sub>
19. Set Paragraph Format
<P> paragraph text </p>, <align = align>, <nobr> do not wrap text </nobr>, and <br> wrap mark
20. Horizontal line mark
<Hr> enter this tag on the webpage to add a default horizontal line,
21. css
1. css: stacked style sheet. Css can simplify the formatting of webpage code, accelerate the download speed, reduce the number of code to be uploaded, and greatly reduce the workload of repetitive work. The primary purpose of a style sheet is to precisely locate the elements on the webpage. Secondly, he separated the content structure and format control on the webpage, so that the webpage can only be composed of content, and the webpage format is controlled through the css style sheet file.
2. the Css syntax structure consists of three parts: selector, style attribute, and value. The basic syntax is as follows:
Selector {style attribute: value ;...}
3. basic css Selector
Tag selector: the html Tag is directly used as the selector, such as the p selector. Category selector: Once the tag selector is declared, all the tags on the page will change accordingly; the usage of the Id selector is basically the same as that of the class selector. The difference is that the id selector can only be used once on the html page.
4.css usage
Link external style sheet: <link type = "text/css" rel = "stylesheet" href = "external style sheet file name">
In-row mode: <tag style = "style attribute: attribute value;...">
Embedded external style sheet:
<Style type = text/css>
@ Import url ("external style table file name ");
</Style>
Internal style sheet:
<Style type = "text/css">
<! --
Select 1 (style attribute: attribute value ;...)
Selector 2 (style attribute: attribute value ;...)
....
CHARACTER n (style attribute: attribute value ;...)
-->
</Style>
5. Set css attributes
Css attributes include: type, background, block, box, border, list, positioning, and extension.
Css type attributes: Font-family, Font-size, Font-style, Line-height, Text-decoretion, Font-weight, Font-variant, Text-transform, Color
Css Background attributes: Background-color, Background-image, Background-repeat, and Background-attachment (determine whether the Background image is fixed at its original position or is rolled along with the content), Background-position (X) and background-position (Y): Specifies the initial position of the Background image relative to the element.
Css block attribute: Word-spacing: Set the spacing of words; Letter-spacing: increase or decrease the spacing of letters or characters. Vertical-align: Specifies the vertical alignment of the elements that apply it. Text-align: sets the Text alignment in the element. Text-indent: Specifies the degree to which the first line of Text is indented. White-space: determines how to process the blank space of the element. Display: Specifies whether and how to Display elements.
Css box attribute: the Width and height attributes set the Width and height of the element. Float: Set the edge on which other elements are floating. Padding: Specify the spacing between the element content and the element border. Margin: Specifies the spacing between the border of an element and the border of another element.
Css border attribute: Style: Set the Style appearance of the border. Width: Specifies the Width of the element border. Color: Set the border Color.
Css List attribute: List-style-type: Set the appearance of the Project symbol or number. List-style-image: You can specify a custom image for the project symbol. Click Browse to select an image or enter the image path. List-style-position: Set whether to wrap and indent the text of the List item and whether to wrap the text to the left margin.
Css positioning attribute: Position: four optional values: absolute can accurately move the element to the Position you want and absolutely Position the element. Fixed -- Fixed position relative to the window. Relative-Relative positioning is Relative to the default position of the element. Static -- this attribute value is the default position for all elements. You can use static to cancel inheritance, that is, to restore the default value of element positioning. Visibility: If the Visibility attribute is not specified, most browsers inherit the parent value by default.
Css extended attributes: Page-break-before: two attributes are used to set pagination characters for printed pages. Page-break-after: The Page delimiter that appears after the object is retrieved or set. Cursor: changes the pointer image when the pointer is placed on the object controlled by the style. Filter: apply special effects to objects controlled by styles.
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
