【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

jQuery realizes the full function of shopping cart

This article shares the specific code of jQuery t...

Example code of how to implement pivot table in MySQL/MariaDB

The previous article introduced several methods f...

A question about border-radius value setting

Problem Record Today I was going to complete a sm...

Record the steps of using mqtt server to realize instant communication in vue

MQTT Protocol MQTT (Message Queuing Telemetry Tra...

Preventing SQL injection in web projects

Table of contents 1. Introduction to SQL Injectio...

Solutions to problems using addRoutes in Vue projects

Table of contents Preface 1. 404 Page 1. Causes 2...

VMware15.5 installation Ubuntu20.04 graphic tutorial

1. Preparation before installation 1. Download th...

Vue realizes the logistics timeline effect

This article example shares the specific code of ...

A brief discussion on Mysql specified order sorting query

Recently, I have been working on a large-screen d...

How to install mysql on centos and set up remote access

1. Download the mysql repo source $ wget http://r...

Solution to web page confusion caused by web page FOUC problem

FOUC is Flash of Unstyled Content, abbreviated as ...

Serial and parallel operations in JavaScript

Table of contents 1. Introduction 2. es5 method 3...

Linux automatic login example explanation

There are many scripts on the Internet that use e...

CSS float (float, clear) popular explanation and experience sharing

I came into contact with CSS a long time ago, but...

HTML implementation of a simple calculator with detailed ideas

Copy code The code is as follows: <!DOCTYPE ht...