Write a pretty regular blog with HTML and CSS

Source: Internet
Author: User
Tags add window
Use a tag correctly

Hyperlink is the most commonly used html tag in blogs. It is used to link to other articles or site links. It is recommended that you use the a tag to add the following attributes:

Href: Set the URL address or anchor of the link

Target: Set the target window or frame page after clicking the link with the mouse. Generally, target = "_ blank" is commonly used, which means that a new window is opened to open the link. It is not necessary to add this attribute to open the link on the current page.

Title: Set the prompt message displayed when the mouse moves over the link

Rel: This is a new attribute that has only recently become popular. rel = "nofollow" means that forbid search engines to link from this site and cause the pagerank value of the link URL to change. It is often used to prevent spam links. tag tag

Example: <a href=http://tech.ddvip.com/ target="_blank" title="豆豆技术应用" rel="nofollow"> 豆豆 技术 应用 </a>

Show: Peas technology application

There should not be too many links in the article. Too many links will make the reader feel depressive and nervous. If the contrast between the color of the link and the text is too large, it will also make people feel dazzled. The best link effect is a faint color contrast or underline, and fill in the title attribute to indicate what the link is or why. Sometimes you can also attach and comment related links to this article as a list at the end of the article.

Develop a good habit of article segmentation

It is impossible to write a blog word by word like Gu Long's novels, so writing a blog according to the writing style taught by the teacher in the student days is undisputed. It is recommended to use the p tag to segment the article. The code is: <p> Article body </ p>.

It is worth mentioning that many bloggers do not have the habit of indenting the first line, and most of them also type a few spaces in the editor. Here is the first line of indentation code implemented using the text-indent property of css: <p style = "text-indent: 2em;"> Article body </ p>, I use 2em for the indentation unit, which means two Chinese characters, do not use percentages or other unit lengths such as px, pt, etc. Use em can be in the page font and layout Keep the indentation of two Chinese characters while zooming.

For some bloggers who like to hang pictures in articles, I recommend setting the align attribute of the img tag to left or right to easily hang the pictures and wrap the text. You can also use the float attribute of the div tag for left and right hanging to achieve text wrapping, and even better is to achieve left and right hanging like Google Adsense ads. Code: <div style = "height: 100%; width: 150px; float: right ; "> You can put a link to the picture here, or put google adsense code like a foreign blog </ div>. See the Google ads in this article for the results.

列表 List with list, set line height with line-height

Use the <ul> <ol> <li> tags of the style sheet list to list some subtitle entries. The code is: <ul> <li> Question 1 </ li> <li> Question 2 </ li> </ ul >

The font size of the text can be set according to personal preference. I generally use the default of the blog system (13pt, Song style and courier new). If the text requires a large font and your text appears too large and stacked, you can use the <p> in the paragraph. Add style: line-height: 120%; this means that the line height is 1.2 times the font

Typography skills for super long text

Although we all know that when writing a blog, it is better to keep the article short and concise, but we cannot avoid some special articles that require long lengths. At this time, it is recommended that you use different settings such as <h1> <h2> ... <h6>. Sub-headings, and using the four definition list tags <dir> <dl> <dt> <dd> at the top of the article will display the same effect as the table of contents / index in word, which can increase the readability of the article and Methodically, many articles in Microsoft's MSDN are arranged in this way. If you want to implement the link jump function, you can use <a name=""> this anchor tag to modify the specific subtitle. The code is: <a name="list1"> <h1> Title One </ h1> </a>

Other html commonly used in logs

It is recommended to use the <blockquote> tag for quoting other people's articles. This tag can automatically indent the left and right ends of the page. Generally, the default indentation is 40 pixels. For example: <blockquote style = "background-color: # f7f7f7; border: 1px dotted # dedbde; padding: 10px; "> This is an example of a quoting style </ blockquote>

Show:

This is an example of a reference style

The HTML code of the font may be relatively familiar to you, such as <b> for bold, <i> for italics, <u> for underline, <font> for font color size, etc. You can also use <span style = ""> The method may be more convenient and beautiful, the code: <span style = "font-weight: bold; font-style: italic; text-decoration: underline; font-color: blue;"> Bold, italic, underline, blue Color fonts </ span>

The easiest way to display the html code in the text is to add the <xmp> tag, such as: <xmp> <a href="http://tech.ddvip.com/"> 豆豆 技术 应用 </a> </ xmp>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.