Home > Developer > Web Develop
Before writing a lot of front-end interface, but did not read a full HTML and CSS books, are used to check what, recently spare time to consolidate the knowledge of the front-end Foundation, read the "Head first HTML and CSS", feel this book is a little too simple, but still learned a lot , this is just a matter of summarizing some of the points of knowledge that are important or that you have not noticed before.
1. How element attributes are written: attribute name + equal sign (=) + attribute value enclosed in double quotation marks;
2. Short reference elements in HTML:<Q>...</Q>, the browser is responsible for adding double quotes,<Q>Generally as part of an existing paragraph, is an inline element (inline),<blockquote>Elements are used for longer references, which need to be displayed separately and are block elements (blocks);
3. Line break: <br>, no actual content, is void element, is also void element, in addition to writing XHTML-compatible pages, generally do not use <br/>;
4. <ol> sequence list,<ul> unordered lists,<dl> as defined lists, each with a defined term <dt> and a definition description <dd>;
5. Emphasis on content: <em>...</em>, with special emphasis on <strong>;
6. <code> Display computer program code,<time> display date or time,<pre> The browser displays the text as it is entered;
7. It is suggested that the title property value in <a> is the same as the <title> element value of the linked Web page, <a href= "xxxx" title= "The text description of the page to be linked" >xxxx</a>;
8. The <a> element can take an id attribute and directly access a specific point in the page, for example:<p>xxxx</p>
Can be directly used <a href= "Index.html#chai" >see Chai Tea</a>, access to a specific location in a long file;
If you have an element ID of top in a long document and you want to return to the top at the bottom, you can use: <a href= "#top" >back to top</a>;
9. Browser Open link on a new page: <a href= "index.html" target= "_blank" >xxxx</a>;
JPEG suitable for continuous-tone images, such as photographs, is a "lossy" format, does not support transparency and animation; PNG is suitable for monochrome images and lines of images, such as logo, clip Art and small text in the image, is "lossless" format, compression will not lose information, allow transparency;
GIF fits the field like PNG, "lossless" format, allows transparency, supports animations;
One. elements when a picture fails to load, you can use the ALT attribute bit visitors to provide hints about what information is included in the image, and to adjust the image size, as follows:
>
12. Use the image as a link:
<a href= "html/test_png.html" >
</a>
13. Compared to the HTML 4.01,HTML5 doctype quite concise: <!doctype Html>, specifying character encoding: <meta charset= "Utf-8" >;
HTML Verification Tool: Http://validator.w3.org,CSS Verification Tool: http://jigsaw.w3.org/css-validator/;
Some principles of HTML writing:
16. Introduce an external CSS file in
17. Elements can be added to multiple classes, each class name separated by a space, for example: <p class= "GreenTea Blueberry Redheart" >...</p>, if the element belongs to more than one class, And the CSS in more than one class sets the same property, the last rule in the CSS file is selected;
CSS Properties:
font-family properties Customize the font used in the page, including a total of 5 font families, Sans-serif,serif,monospace,cursive,fantasy, One of the most commonly used is sans-serif (sans serif) and serif (lined);
For example:
Body {
Font-family:verdana, Geneva, Arial, "Couries New", Sans-serif;
}
You can use Web fonts to provide fonts to the user's browser, using the @font-face property in CSS, such as:
@font-face {
Font-family: "Emblema One";
Src:url ("Http://xxxxxxxxxx/xxx.woff"),
Src:url ("Http://xxxxxxxxxx/xxx.ttf");
}
H1 {
Font-family: "Emblema one", Sans-serif;
}
Fontsquirrel provides web font hosting services;
The Font-size property controls the font size by using pixel px, percent% (relative to parent element), EM (relative to parent element), keyword Four ways to specify font size, for example:
Body {
FONT-SIZE:14PX (150%, 1.2em, small)
}
keywords, mainly using small and medimu, you can generally specify it as the font size in the body rule, as the default font size of the page, and then use EM or percentages to specify the font size of other elements relative to the body font size;
Font-weight Change the font weight, generally use bold and normal more, Font-style for text to add italic style, italic (italic) and oblique (italic text);
22. Sometimes the interface we do not want to let the link underline, you can use Text-decoration:none, to remove the underscore, text-decoration value can be Line-through (strikethrough), underline (underline), Overline (dash) and
None (no decoration);
CSS element box model: Each box consists of a content area, an optional padding (padding), a border (border) and margin (margin);
Background-image just to set the background image of an element, not to place the image in the page, for example:
. classname {
Background-image:url (image/background.gif);
Background-repeat:no-repeat; /*repeat: Horizontal vertical repeating tile, no-repeat: No repetition, repeat-x: Repeat only in horizontal direction, repeat-y: Repeat only in vertical direction, inherit: Inherit parent element */
Background-position:top left; /*top,left,right,bottom,center*/
}
The order in the CSS is important, and the settings below will overwrite the previous settings;
26. Border Style: Border-style, a total of 8 styles, solid (solid), double (double line), Groove (Groove), outset (convex), dotted (dashed line), dashed (broken line), inset (concave), Ridge (ridge Line);
Border Width: border-width, can be specified using keywords (thin,medium,thick) and pixels;
Border color: border-color, value can be RGB (100%, 0, 0), #ff0000, red several forms;
Border fillet: border-radius:15px, only the upper left corner is specified with rounded corners: border-top-left-radius:3em;
27. Class name and ID name can contain letters, numbers and underscores, no spaces, class names to start with a letter, id names can start with a number;
In the <link> element, you can use the Media property to specify the type of device to which this style sheet is applied, for example:
<link href= "Lounge-mobile.css" rel= "stylesheet" media= "screen and (max-device-width:480px)" >
You can also specify it directly in the CSS, for example:
@media screen and (min-device-width:481px) {
#guarantee {
margin-right:30px;
}
}
@media rules contain only CSS rules that are specific to one type of media;
Head first HTML and CSS reading notes (i)
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
