Similar to HTML tags: strong and em, q, cite, blockquote
|
There are some tags in XHTML that have similar functions. Of course, the similarity here refers to semantic similarity, so many people are not clear about how to use these similar tags. So today's topic is to decompose similar tags and clarify the purpose of each tag. We have already talked about the difference between strong and em before. In addition to strong and em, there are some similar tags such as q, cite There are some tags in XHTML that have similar functions. Of course, the similarity here refers to semantic similarity, so many people are not clear about how to use these similar tags. So today's topic is to decompose similar tags and clarify the purpose of each tag. We have already talked about the difference between strong and em before. In addition to strong and em, there are some similar tags such as q, cite, and blockquote. All three belong to the category of reference, but there are some differences. Let’s explain them one by one. <q></q>, the function of q is to quote non-block elements, that is, to quote content that cannot form a paragraph. It may be a sentence said by someone, or a document excerpt, etc. The characteristic is obvious that it is "a sentence" here. And q by itself does not generate a paragraph. q itself does not have any style, and most browsers do not set a default style for it to make it stand out. But we can use CSS to distinguish it from general content. There is another very important attribute in the q tag, that is cite. The cite attribute value mainly indicates where the quoted content comes from, or gives an online address. <q cite="http://andymao.com/andy/post/92.html">This content will give you a deeper understanding of the details in the paragraph</q> Be especially careful not to write q as p, as these two labels can easily be confused. We actually talked about cite in the previous article. In that article, I wrote , "This label only indicates the title and name of the document. This label is a bit similar to the catalog of references at the back of our book, and it is also a bit like a footnote."So what is the difference between it and q? It is actually very easy to understand. q displays the content, while cite displays the name of the person or book that says the content. Cite and q are often used together. for example: <cite>Lu Xun</cite> said: <q>Originally there was no road on the ground, but when more people walked on it, a road appeared</q>. View more html markup content on this site. So what is the difference between blockquote and them? Blockquote is a block quote, which XHTML allows to contain any tags. The q and cite above are not so inclusive. Blockquote is used when you need to quote one or more paragraphs. The browser will generally indent the quoted content by default to distinguish it from normal paragraphs. Of course we can change the form of distinction through CSS styles. There is a cite attribute in blockquote, which is used to indicate the source of the quotation just like q. You can include the URL of the online document. There is also a tag called pre in XHTML tags. This tag is called "formatting" in Dreamweaver. When I used Dreamweaver before, I was always unclear about what this thing was used for. It is not until now that it is clear that pre is usually used to display source code, and does not support tags that can separate paragraphs, such as <p>. If the displayed content needs to be wrapped, it can be wrapped in the source file without the need for code. At the same time, pre will retain all the spaces in it and display them. Generally speaking, pre is currently used to display source code, which is similar to the purpose of code. The difference is that pre is block-level, while code is inline. Simply put, pre can include multiple lines of content, while code only contains a short sentence or a few characters. What is described here cannot be fully explained, so you need to try it out after reading the document and discover the special features yourself. Some friends said they hope to see some knowledge about CSS. Here I want to convey my writing intention. I hope to take it step by step so that some friends who have not yet gotten rid of the table layout can first use some forms that will not affect the overall situation. Because there may be compatibility issues once CSS is involved, I will first talk about the document here, and then add some CSS knowledge that does not affect the overall layout. By going deeper step by step, readers can eventually transition naturally from the table layout to the standard layout. Of course, if some friends have already completed this step through self-study, they can communicate with me in my "Miscellaneous Standards" column. |
<<: Goodbye Docker: How to Transform to Containerd in 5 Minutes
>>: SQL group by to remove duplicates and sort by other fields
Recommend
How to display small icons in the browser title bar of HTML webpage
Just like this effect, the method is also very si...
An example of elegantly writing status labels in Vue background
Table of contents Preface optimization Extract va...
Common solutions for Mysql read-write separation expiration
The pitfalls of MySQL read-write separation The m...
Three ways to realize the horizontal centering of elements and the understanding of the concepts of fixed layout and flow layout
The property of centering text in CSS is very simp...
Mysql error: Too many connections solution
MySQL database too many connections This error ob...
Detailed explanation of JavaScript's Set data structure
Table of contents 1. What is Set 2. Set Construct...
Detailed explanation of solving the problem of cross-domain access of nginx/apache static resources
1. Apache static resource cross-domain access Fin...
Detailed explanation of MySQL backup and recovery practice of mysqlbackup
1. Introduction to mysqlbackup mysqlbackup is the...
Understanding what Node.js is is so easy
Table of contents Official introduction to Node.j...
5 things to note when writing React components using hooks
Table of contents 01. Use useState when render is...
Vue form post request combined with Servlet to realize file upload function
Front-end test page code: <template> <di...
Mobile front-end adaptation solution (summary)
I searched online and found that many interviews ...
Detailed analysis of the syntax of Mysql update to modify multiple fields and
When updating a record in MySQL, the syntax is co...
Web Design Tutorial (1): Steps and Overall Layout
<br /> Note: All texts, except those indicat...
Install mysql5.7.17 using RPM under Linux
The installation method of MySQL5.7 rpm under Lin...