Write a formal blog using XHTML CSS
|
The full name of Blog should be Web log, which means "network log" in Chinese. Later it was shortened to Blog, and a blogger is a person who writes a blog. In terms of understanding, a blog is "a publishing method that expresses personal thoughts, network links, content, arranged in chronological order, and constantly updated." Simply put, bloggers are a type of people who are accustomed to writing diaries online. The full name of Blog should be Web log, which means "network log" in Chinese. Later it was shortened to Blog, and blogger is the person who writes a blog. In terms of understanding, a blog is "a publishing method that expresses personal thoughts, network links, content, arranged in chronological order, and constantly updated." Simply put, bloggers are a type of people who are accustomed to writing diaries online. How to use HTML and CSS to write a beautiful and formal BLOG: Correct use of the a tag Hyperlink is the most commonly used HTML tag in blogs. It is used to link to other articles or website links. It is recommended that you add the following attributes when using the a tag: href: Set the link URL or anchor target: Sets the target window or frame page after the mouse clicks the link. The commonly used one is target="_blank", which means opening a new window to open the link. If you want to open the link in the current page, you don't need to add this attribute. title: Set the prompt information displayed when the mouse moves over the link rel: This is a new attribute that has become popular recently. rel="nofollow" prohibits search engines from linking to this site, which would change the pagerank of the linking URL. It is often used to prevent spam links. rel="tag" is set for Technorati to use the text of this link as the tag of the page. There should not be too many links in an article. Too many links will make readers feel depressed and nervous when reading. If the contrast between the link color and the text color is too great, it will also make people feel dazzled. The best link effect is a light color contrast or underline, and fill in the title attribute to indicate what the link content is or why the link is needed. Sometimes you can also attach relevant links to the article in the form of a list at the end of the article and annotate them. Develop a good habit of dividing articles into paragraphs <br />It is impossible to write a blog like Gu Long's novels, with one sentence per paragraph, so it is undisputed to write a blog according to the writing style taught by your teachers during your student days. It is recommended to use p tags to divide the article into sections, the code is as follows: <p>Article body</p>. It is worth mentioning that many bloggers do not have the habit of indenting the first line. Some of them just type a few spaces in the editor at most. Here is the first line indent code implemented by CSS text-indent attribute: <p style="text-indent:2em;">Article text</p>. The indentation unit is generally 2em, which represents two Chinese characters. Do not use percentage or other unit lengths such as px, pt, etc. Using em can maintain the indentation of two Chinese characters when the page font and layout are scaled. For some bloggers who like to put pictures in their articles, it is recommended to set the align attribute of the img tag to left or right to easily hang the picture and wrap the text. You can also use the float attribute of the div tag to suspend left and right to achieve text wrapping. What's even better is that you can achieve left and right suspension like Google Adsense ads. The code is: <div style="height:100%;width:150px;float:right;">You can put a picture link here, or put in the google adsense code like foreign blogs</div>. Use list to make a list, and use line-height to set the line height .<br />Use the <ul><ol><li> and other tags of the style sheet list to list some sub-heading items. Code: <ul><li>Question 1</li><li>Question 2</li></ul>. The font size of the text can be set according to personal preference. Generally, the default size of the blog system is used (13pt, Songti and courier new). If the text requires a large font and your text appears too large and piled up, you can add the style to the <p> of the paragraph: line-height:120%; this means that the line height is 1.2 times the font size. Formatting skills for extra-long texts <br />Although we all know that when writing blogs, articles should be short and concise, but it is inevitable that some special articles require long lengths. In this case, it is recommended to use <h1><h2>...<h6> and other different levels to set subheadings, and use the four definition list tags <dir><dl><dt><dd> at the top of the article. The display effect is the same as the style of the directory/index in Word, which can increase the readability and organization of the article. Many articles in Microsoft's MSDN are arranged in this way. To implement the link jump function, you can use the <a name=""> anchor tag to modify the specific subtitle, code: <a name="list1"><h1>Title 1</h1></a>. Some other commonly used HTML in logs It is recommended to use the <blockquote> tag to quote excerpts from other people's articles. This tag can automatically achieve indentation on the left and right ends of the page. The default indentation is generally 40 pixels. For example: <blockquote style="background-color:#f7f7f7;border:1px dotted #dedbde;padding:10px;">This is an example of a quote style</blockquote> |
<<: Example code for text origami effect using CSS3
>>: Vue large screen display adaptation method
Recommend
What is the file mysql-bin.000001 in mysql? Can it be deleted?
After installing MySQL using ports, I found that ...
In-depth study of how to use positioning in CSS (summary)
Introduction to Positioning in CSS position attri...
mysql5.7.21.zip installation tutorial
The detailed installation process of mysql5.7.21 ...
Design Theory: Textual Expression and Usability
<br />In text design, we usually focus on th...
mysql create database, add users, user authorization practical method
1. Create a MySQL database 1. Create database syn...
Detailed explanation of adding dotted lines to Vue element tree controls
Table of contents 1. Achieve results 2. Implement...
The difference and usage of datetime and timestamp in MySQL
1. How to represent the current time in MySQL? In...
Use href to simply click on a link to jump to a specified place on the page
After clicking the a tag in the page, you want to ...
Implementation of the login page of Vue actual combat record
Table of contents 1. Preliminary preparation 1.1 ...
MySQL implementation of lastInfdexOf function example
Sometimes MySQL needs to use a function similar t...
Analysis and solution of the reasons why HTML external reference CSS files are not effective
As a front-end novice, I tinkered with the front-e...
Bootstrap 3.0 study notes page layout
This time we will mainly learn about layout, whic...
Details on using regular expressions in MySQL
Table of contents 1. Introduction 2. Prepare a pr...
VMware Workstation installation Linux system
From getting started to becoming a novice, the Li...
Docker data volume container creation and usage analysis
A data volume container is a container specifical...