Use HTML and CSS to write beautiful regular blogs

Correct use of tag

A hyperlink is the most commonly used html tag in a blog. It is used to link to other articles or sites. We recommend that you add the following attributes when using the tag:

Href: Set the url or anchor of the link.
Target: set the target window or frame page after the mouse clicks the link. Generally, target = "_ blank" is commonly used to open a new window to open the link, you do not need to add this attribute when you open a link to the current page.
Title: sets the prompt information displayed when you move the cursor over the link.
Rel: this is a new attribute that has recently become popular. Rel = "nofollow" indicates that the change in pagerank value of the link URL caused by the previous link of the search engine from this site is prohibited. It is often used to prevent spam link; rel = "tag" this is set for technorati to mark the page with the text of this link
Example: <a href = http://www.it.com.cn target = "_ blank" title = "IT World network" rel = "nofollow"> It world Network </a>
Display: It world Network

There must be too many links in the article. Too many links will make readers feel overwhelmed and nervous when reading the article. If the color of the link is too different from the text color, it will also make people look dazzled. The best link effect is a touch of color contrast or underline, and fill in the title attribute to indicate the content of the link or why the link is to be linked. Sometimes you can attach the relevant links to the list at the end of the article and comment them out.

Develop a good habit of segmented articles

It is impossible to write a blog as a paragraph in the ancient dragon novel. Therefore, it is not controversial to write a blog according to the writing style taught by teachers in the student age. We recommend that you use p tags to segment the article. The code is as follows: <p> Article body </p>.
It is worth mentioning that many blogger do not have the habit of indent the first line, and some may also press a few spaces in the editor at most. Here we provide the first line of indent code implemented using the text-indent attribute of css: <p style = "text-indent: 2em;"> body of the article </p>. The unit of indentation is 2em, which indicates two Chinese characters. Do not use a percentage or px, other unit lengths such as pt. With em, you can retain the indentation of two Chinese characters when the page font and layout are scaled.
Here, we recommend that you set the align attribute of the img label to left or right for blogger that prefers to add images to an article. You can also use the float attribute of the div label to enclose the left and right texts. What's better is that the left and right sides of the Google Adsense advertisement can be suspended. Code: <div style = "height: 100%; width: 150px; float: right; "> here you can put an image link or google adsense code like a foreign blog </div>. For the implementation effect, see Google ads in this article.

List with list and set row height with line-height

Use the <ul> <ol> <li> and other labels in the style sheet list to list some sub-title entries. Code: <ul> <li> Question 1 </li> <li> Question 2 </li> </ul>
The font size of the text can be set according to your preferences. I usually use the default font size of the blog system (13pt, new and courier new ), if the text requires a large font and your text appears too large to pile up, you can add the style: line-height: 120% to the section <p>; this indicates that the row height is 1.2 times the font size.

Typographical skills for ultra-long texts

Although we know that it is better to write short articles when writing blogs, we cannot avoid long articles of special nature. In this case, we recommend that you use

Other html commonly used in logs

We recommend that you use the <blockquote> label to reference clips from others' articles. This label can automatically scale up the left and right sides of the page. Generally, the default size is 40 pixels. For example: <blockquote style = "background-color: # f7f7f7; border: 1px dotted # dedbde; padding: 10px;"> This is an example of referencing a style </blockquote>

Display:

This is an example of referencing a style.
You may be familiar with the html code of fonts, such as <B>, <I>, <u>, and <font>, you can also use the <span style = ""> method to make it more convenient and beautiful,

</