1. Pre element
The pre element is used to define preformatted text.
The pre element preserves spaces and line breaks, and the text itself is rendered as a width-equal font.
Detailed introduction to the portal
2. What is "pre-formatted"?
Pre-formatting is the preservation of the text in the source code format, so that the page appears in the source code and the effect is exactly the same. That is, when the browser displays its content, it is displayed exactly as it is in its true text format, preserving blank space in the document, such as spaces, tabs, line breaks, and so on.
3. Character Entities
In HTML documents, certain characters are reserved and have special meanings, such as we cannot use less than (<) and greater than (>) in HTML, because browsers mistakenly treat them as labels. If you want to display reserved characters correctly, we must use the character entity in the HTML source code.
Here is the HTML symbol entity and the character entity reference table, Portal
4. Equal width font
The Equal-width font (monospaced font) refers to a computer font with the same width of characters. In contrast, computer fonts with different character widths are called proportional fonts.
The key to their differences is readability, and it is clear that proportional fonts enhance the overall readability of the words. But programming is not the same, if the code is not equal-width font, the programmer will feel very uncomfortable, and even do not want to read the code at all.
Recommended several suitable programming fonts---Portal
5. Semantics
In the Web front-end front-end development of a special term is called: semantics, in short, to use the right elements to do the right thing.
In the subsequent study we will find a lot of elements, in fact, the effect of the page implementation is the same, but semantics requires you to use the appropriate semantic HTML elements, so that the page has a good structure and meaning, so that people and machines can quickly understand the content of the page.
6. Code element
The code element is inherently used to define a computer snippet, and if we need to refer to some code-related text in a single paragraph, you can use a code element:
1 < P > The syntax for comments in HTML is:<code>& #60;! --fill in the content of the comment here--& #62; </ Code ></ P >
Detailed introduction to the portal
7. Var, kbd, and samp elements
var defines the variables for the program, KBD is used to define the user's keyboard input, and Samp is used to define the output of the program:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>Code element Demo</title>5 <MetaCharSet= "Utf-8">6 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0">7 <Metaname= "keywords"content= "Small turtle, Web development, Html5,css3,web programming teaching">8 <Metaname= "description"content= "0 Basic Introductory Learning Web Development" case presentation ">9 <Metaname= "Author"content= "Little Turtle">Ten </Head> One <Body> A <!--demonstrating the use of code elements - - <Pre> - <Code> the & #60;p & #62, your favorite fruit is:& #60, span id=& #34;fruit& #34;& #62;& #60;/span& #62; 60;/p& #62; - & #60 Script type=& #34;text/javascript& #34;& #62; - var user_input = prompt (& #34; Your favorite fruit is:& #34;); - document.getElementById (& #34;fruit& #34;). InnerHTML = User_input; + & #60;/script& #62; - </Code> + </Pre> A <P>The above code defines a variable<var>User_input</var>, which is used to receive input from the user.</P> at <P>If the user enters a<KBD>Banana</KBD>, then the program will print<Samp>Your favorite fruit is: Banana</Samp></P> - </Body> - </HTML>
Var, kbd, and Samp
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
