【HTML element】Detailed explanation of tag text

【HTML element】Detailed explanation of tag text

1. Use basic text elements to mark up content

First look at the display effect:

Corresponding HTML code:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. < head >   
  4.      < meta   charset = "UTF-8" >   
  5.      < title > Learn4Font </ title >   
  6. </ head >   
  7. < body >   
  8. < p > Element b — < b > I am the example. </ b > </ p >   
  9. < p > element em — < em > I am the example. </ em > </ p >   
  10. < p > Element i — < i > I am the example. </ i > </ p >   
  11. < p > Element s — < s > I am the example. </ s > </ p >   
  12. < p > Element strong -- < strong > I am the example. </ strong > </ p >   
  13. < p > Element u — < u > I am the example. </ u > </ p >   
  14. < p > Element small — < small > I am the example. </ small > </ p >   
  15. < p > element sub — < sub > I am the example. </ sub > </ p >   
  16. < p > Element sup —— < sup > I am the example. </ sup > </ p >   
  17. </ body >   
  18. </ html >   

Corresponding element custom style:

XML/HTML CodeCopy content to clipboard
  1. *Generally refers to keywords and product names*
  2. b{font-weight: bolder;}
  3.   
  4. *Generally indicates emphasis*
  5. em {font-style: italic;}
  6.   
  7. *Generally refers to foreign words or scientific terms*
  8. i {font-style: italic;}
  9.   
  10. *Generally indicates inaccuracy or correction*
  11. s {text-decoration: line-through;}
  12.   
  13. *Generally indicates important text*
  14. strong {font-weight: bolder;}
  15.   
  16. *Generally means to underline the text*
  17. u {text-decoration: underline;}
  18.   
  19. *Generally means adding small font content*
  20. small {font-size: small;}
  21.   
  22. *Generally means adding superscripts and subscripts*
  23. sup {vertical-align: sub; font-size: smaller;}
  24. sub {vertical-align: super; font-size: smaller;}

2. Use language elements

ruby, rt and rp elements, let’s see the effects first:

Corresponding code:

XML/HTML CodeCopy content to clipboard
  1. < p   style = " font-size: 3em;" >   
  2.      < ruby ​​>< rp > ( </ rp > < rt > chī </ rt > < rp > ) </ rp > </ ruby ​​>   
  3.      < ruby ​​>< rp > ( </ rp > < rt > mèi </ rt > < rp > ) </ rp > </ ruby ​​>   
  4.      < ruby ​​>< rp > ( </ rp > < rt > wǎng </ rt > < rp > ) </ rp > </ ruby ​​>   
  5.      < ruby ​​>< rp > ( </ rp > < rt > liǎng </ rt > < rp > ) </ rp > </ ruby ​​>   
  6. </ p >   

3. Use pre-formatted content

The pre element can change the way the browser handles the content, preventing whitespace from being collapsed so that the formatting of the source document is preserved.

XML/HTML CodeCopy content to clipboard
  1. < pre >   
  2.      < code >   
  3. var fruits = ["apples","oranges","mangoes","cherries"];
  4. for(var i = 0 ; i <   fruits.length ; i++){
  5. document.writeln("I like " + fruits[i]);
  6. }
  7.      </ code >   
  8. </ pre >   

The above [HTML element] detailed explanation of marking text is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/luka/archive/2016/07/23/5532134.html

<<:  Example of implementing TikTok text shaking effect with CSS

>>:  Detailed steps for installing ros2 in docker

Recommend

Two ways to use react in React html

Basic Use <!DOCTYPE html> <html lang=&qu...

How to use bind to set up DNS server

DNS (Domain Name Server) is a server that convert...

A detailed discussion on detail analysis in web design

In design work, I often hear designers participati...

Tutorial on using Webpack in JavaScript

Table of contents 0. What is Webpack 1. Use of We...

How to build php7 with docker custom image

First, perform a simple Docker installation. To c...

Tips for implementing list loop scrolling based on jQuery (super simple)

I saw a good idea and recorded it. I have used jQ...

Gearman + MySQL to achieve persistence operation example

This article uses the gearman+mysql method to imp...

A screenshot demo based on canvas in html

Written at the beginning I remember seeing a shar...

Fabric.js implements DIY postcard function

This article shares the specific code of fabricjs...

What are the new CSS :where and :is pseudo-class functions?

What are :is and :where? :is() and :where() are p...

Using JS timer to move elements

Use JS timer to make an element to make a method ...

Native JS to achieve sliding button effect

The specific code of the sliding button made with...

Example of how to configure nginx to implement SSL

Environmental Description Server system: Ubuntu 1...

Detailed explanation of the use of MySQL Online DDL

Table of contents text LOCK parameter ALGORITHM p...