HTML Tutorial: Collection of commonly used HTML tags (6)
|
Related articles: Beginners learn some HTML tags (5) These introduced HTML tags do not necessarily fully conform to the XHTML specification. You should make some choices when making actual layout, for example: the B tag and the FONT tag are not in compliance with the XHTML specification. 1. Basic TAG elements -------------------------------------------------------------------------- File format <HTML></HTML> (beginning and end of HTML file) Title <TITLE></TITLE> (Must be placed in the header section) Header section <HEAD></HEAD> (description of the document, such as "subject") Body section <BODY></BODY> (where the content is located) 2. Structural elements -------------------------------------------------------------------------- Title <H?></H?> (There are six types: H1, H2, H3, H4, H5, H6) Title alignment <H? ALIGN=LEFT|CENTER|RIGHT></H?> Section <DIV></DIV> Section alignment <DIV ALIGN=LEFT|RIGHT|CENTER></DIV> Short quotes <Q> and </Q> Yes for some referenced files, if the referenced part is not long. Then you can consider using this tag, which is the new syntax of HTML3.0. Citation section <BLOCKQUOTE></BLOCKQUOTE> (usually indented when displayed) blockquote is used to indicate that the document in the area is quoting a person or information in a document. Usually quoted text is quoted using <BLOCKQUOTE> and </BLOCKQUOTE> to mark them. Then most browsers will represent it in another way when reading these words. This is just to remind readers that this is a quote from someone else. Emphasis <EM></EM> (usually in italics) Strong emphasis <STRONG></STRONG> (usually in bold) This character is STRONG, which is similar to EM is just a way of strengthening the tone of speech. Most browsers use bold font to indicate words marked with <STRONG> and </STRONG>. Citation statement <CITE></CITE> (usually in italics) Use <CITE> and </CITE> to mark the words quoted by others Program source code <CODE></CODE> If the reader is writing something about computers, then CODE This tag marks some related words together. The way of using it is to mark the related words with <CODE> and </CODE>. Program output sample <SAMP></SAMP> is not modified in HTML. If you want to print HTML The syntax of . Then readers may need to use some special techniques to print these characters. Outside of these characters, readers can use SAMP This symbol marks them. The characteristic of this tag is that the marked text will be represented by a fixed width. Keyboard input <KBD></KBD> The KBD tag is usually used to tell the reader which words can be typed. These are marked as KBD characters are usually represented in fixed-width bold font. But some browsers only use fixed-width characters. Program variables <VAR></VAR> For some words that may change, HTML provides a It is displayed with the VAR tag, which is meant for variables or words that may be easily changed. You can use <VAR> and <VAR> to mark them. This serves to alert the user that these variables may be subject to change. Define <DFN></DFN> (some browsers do not have this function) If the reader in HTML The words used in it are some definitions. Then readers can consider using the DFN label. If the reader uses Mosaic browser. Then <DFN> and The text marked by </DFN> will be shown in italics. Other browsers may not. Author address <ADDRESS></ADDRESS> Big font <BIG></BIG> Small font <SMALL></SMALL> Language <LANG> If more than two languages are used in a document, <LANG> and </LANG> can be used to mark them. This is also the new syntax of HTML3.0. Author (AU) <AU> and </AU> do not represent general AU files. This tag is used in readers' articles. If certain authors are mentioned, they can be marked with a tag. This is also HTML 3.0 is a tag specially designed for authors. personal (PERSON) In many indexing programs, the program sometimes displays some information pages, and when displaying these information pages. If any individual names are mentioned. Then you can use <PERSON> and </PERSON> to mark these names. This syntax is also a new syntax added in HTML 3.0. A word composed of several words (ACRONYM) In English, some words are composed of several words. If you encounter this kind of word, you can consider using <ACRONYM> and The </ACRONYM> tags enclose them in special brackets. Although this is a new syntax in HTML3.0. But for those of us who use Chinese, such a grammar is not very helpful. Abbreviation (ABBREV) Like ACRONYM, there are many abbreviations in English. HTML 3.0 A new tag is also specially created for these abbreviations. This new tag is called <ABBREV> and of course it also has an ending symbol called </ABBREV>. Insert (INS) In HTML files, if you want to insert a word into an existing file, you can consider using <INS> and </INS> to mark these words. This will make it easier for readers to know whether the document has been revised when they check it. Of course, this syntax is also HTML 3.0 New syntax added in . The syntax of delete (DEL) is used to tell the reader that certain words or some parts related to deletion are going to be deleted. This new tag also appeared in HTML3.0. 3. TAG elements related to display mode -------------------------------------------------------------------------- Bold Italic<I></I> Draw underline <U></U> (some browsers do not have this feature) Strikethrough <STRIKE></STRIKE> (some browsers do not have this feature) Delete line <S></S> (some browsers do not have this function) Subscript word <SUB></SUB> Superscript <SUP></SUP> Typewriter font <TT></TT> (a font in which space characters have the same width as other text elements) According to the preset format <PRE></PRE> (keep the relative position between the characters) Preformatted width <PRE WIDTH=?></PRE> (in characters) Center <CENTER></CENTER> (text and graphics will be centered) Flash<BLINK></BLINK> Font size <FONT SIZE=?></FONT> (from 1 to 7) Change font size <FONT SIZE=" |-?"></FONT> Base font size <BASEFONT SIZE=?> (default value is 3) Font color <FONT COLOR="#$$$$$$"></FONT> Specify font style <FONT FACE="***"></FONT> Multiple columns <MULTICOL COLS=?></MULTICOL> Column text and edge spacing <MULTICOL GUTTER=?></MULTICOL> (default value is 10 pixels) Column width <MULTICOL WIDTH=?></MULTICOL> Leave space <SPACER> Spacing type <SPACER TYPE=horizontal| vertical|block> Spacing size <SPACER SIZE=?> Spacing size <SPACER WIDTH=? HEIGHT=?> Spacing<SPACER ALIGN=left|right|center> 4. Hypertext links and graphic elements -------------------------------------------------------------------------- Link to a specific URL <A HREF="URL"></A> Link to anchor <A HREF="URL#***"></A> (anchor in another document) <A HREF="#***"></A> (anchor in the same document) Link to the specified FRAME <A HREF="URL" TARGET="***|_blank|_self|_parent|_top"></A> Set "anchor point" <A NAME="***"></A> Forward link <A REL="***"></A> (some browsers do not have this function) Reverse link <A REV="***"></A> (some browsers do not have this function) Display Graphics <IMG SRC="URL"> Graphics position <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> Graphics location <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> Alternative graphic text <IMG SRC="URL" ALT="***"> (text to display if the graphic cannot be displayed) You can click on the graphic <IMG SRC="URL" ISMAP> (need to be used with the .map file) Clients can click on the graphic <IMG SRC="URL" USEMAP="URL"> Click the map name <MAP NAME="***"></MAP> Specify a clickable area <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF> Graphics size <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels) describes the width and height of the graphic display. Border size <IMG SRC="URL" BORDER=?> (in pixels) The width of the border outside the shape. White space around <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels) vspace, hspace describe the vertical and horizontal spacing of graphics and text. Low resolution graphics <IMG SRC="URL" LOWSRC="URL"> Client-side scheduled updates <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> Plug-in object <EMBED SRC="URL"> (add a plug-in object to a document) Object size <EMBED SRC="URL" WIDTH=? HEIGHT=?> 5. Divide paragraphs into TAG elements -------------------------------------------------------------------------- Paragraph <P></P> (the closing tag </p> can usually be omitted) Specify text alignment <P ALIGN=LEFT|CENTER|RIGHT></P> Force line break<BR> Specify the starting point after line break <BR CLEAR=LEFT|RIGHT|ALL> Horizontal line <HR> Horizontal line position <HR ALIGN=LEFT|RIGHT|CENTER> Horizontal line thickness (downward) <HR SIZE=?> (in pixels) Horizontal line length (right) <HR WIDTH=?> (in pixels) Horizontal rule ratio width <HR WIDTH="%"> (percentage of page width) Solid line <HR NOSHADE> (no 3D effect) No line break<NOBR></NOBR> Line break <WBR> (You can break the line here if necessary) 6. List element <list> -------------------------------------------------------------------------- Unordered list <UL><LI></UL> UL COMPACT Header symbol type <UL TYPE=DISC|CIRCLE|SQUARE> (for all enumeration items) <LI TYPE=DISC|CIRCLE|SQUARE> (this item and the following items) Ordered List<OL><LI></OL> COMPACT Numeric type <OL TYPE=A|a|I|i|1> (for all enumeration items) <LI TYPE=A|a|I|i|1> (this item and the following items) Starting number <OL START=?> (for all enumeration items) <LI VALUE=?> (this item and the following items) Definition list <DL><DT><DD></DL> (<DT>=definition item, <DD>=definition content) DL COMPACT Menu-style enumeration <MENU><LI></MENU> (<LI> is placed before each enumeration item) Simplify <MENU COMPACT></MENU> Directory listing <DIR><LI></DIR> (<LI> is placed before each listing item) Simplify <DIR COMPACT></DIR> 7. Background and color tag elements -------------------------------------------------------------------------- Background pattern <BODY BACKGROUND="URL"> Background Color<BODY BGCOLOR="#$$$$$$"> Text color <BODY TEXT="#$$$$$$"> Unconnected point color<BODY LINK="#$$$$$$"> Color of the connected points<BODY VLINK="#$$$$$$"> Color of positive link point<BODY ALINK="#$$$$$$"> 8. Special character replacement (the following replacement marks must be lowercase) -------------------------------------------------------------------------- Special characters &#?; (? is ISO 8859-1 code) < < > > & & " " Registered TM ? Copyright ? Non-Breaking Space 9. Mathematical equations -------------------------------------------------------------------------- Example 1: <math> H(s)=∫<sub>0</sub><sup>∞ </sup>e<sup>st</sup>h(t)dt </math> Example 2: <math> C<box>dV<sub>out</sub> <over>dt</box>=I<sub>b</sub> &tanh;(<box>κ(V<sub>in </sub>-V<sub>out</sub>)<over>2</box> CdVoutdt=Ib &tanh;(κ(Vin-Vout)2 Example 3: <math> (<array align="C"><item> &ldet;<array align="cc"> <item>x<sub>11</sub> <item>x<sub>12</sub> <item>x<sub>21</sub> <item>x<sub>22</sub> <array><rd>&rdet; <item>y<item>z </array>)</math> , From these three examples we can see: We use &int to represent the "integral symbol", <sub> to represent a subscript, and <sup> to represent a superscript; <box> is used to indicate that the following items will be considered as a group; <over> represents a division sign. <array> to process the matrix symbol, <array align=C|L|R> Position of table items in center, left, or right. Items are indicated by adding <item> in front of the data. &Ldet represents the left side of the determinant, and &Rdet represents the right side of the determinant. (Carriage Return Line Feed) <br> (Space character) & (AND symbol) & < (left angle bracket, less than sign) < > (right angle bracket, greater than sign) > ° (degrees) ° ? (separator) • ′ ´ " " “ “ ” ” ‰ ‰ ← ← ↑ ↑ → → ↓ ↓ ? ↔ √ √ ∝ ∝ ∞ ∞ ∠ ∠ ∧ ∧ ∨ ∨ ∩ ∩ ∪ ∪ ? Ø ∫ ∫ ∴ ∴ ≈ ≈ ￥（RMB） ¥ ≠ ≠ ≡ ≡ ≤ ≤ ≥ ≥ ⊕ ⊕ λ λ μ μ ν ν ξ ξ ν ν ξ ξ ∏ ∏ ∑ ∑ ￥ ¥ … … 1 (power symbol) ¹ 2 (square symbol) ² 3 (cubic symbol) ³ (Superscript case) n<sup>r</sup> (Subscript case) C<sub>i</sub> Bold<b>Bold</b> italic<i>italic</i> Underline <u>Underline</u> ± (plus and minus signs) ± × (multiplication symbol) × ÷ (division symbol) ÷ ? (Copyright) © ?(Registered Trademark) ® ? (trademark symbol) ™ — (dash) — |
<<: Example of ellipsis when CSS multi-line text overflows
>>: How to connect to docker server using ssh
Recommend
Introduction and usage summary of React-Native screenshot component react-native-view-shot
Table of contents 1. Phenomenon 2. Solution 3. Su...
Detailed explanation of how to efficiently import multiple .sql files into MySQL
MySQL has multiple ways to import multiple .sql f...
In-depth understanding of asynchronous waiting in Javascript
In this article, we’ll explore how async/await is...
Solution to inconsistent display of cursor size in input box
The cursor size in the input box is inconsistent T...
MySQL joint table query basic operation left-join common pitfalls
Overview For small and medium-sized projects, joi...
How to quickly create tens of millions of test data in MySQL
Remark: The amount of data in this article is 1 m...
Solution to the timeout problem when installing docker-compose with PIP
1: Installation command pip install docker-compos...
Nginx anti-crawler strategy to prevent UA from crawling websites
Added anti-crawler policy file: vim /usr/www/serv...
HTML exceeds the text line interception implementation principle and code
The HTML code for intercepting text beyond multipl...
Concat() of combined fields in MySQL
Table of contents 1. Introduction 2. Main text 2....
Detailed instructions for installing mysql5.7 database under centos7.2
The mysql on the server is installed with version...
MySQL variable declaration and stored procedure analysis
Declaring variables Setting Global Variables set ...
CSS Paint API: A CSS-like Drawing Board
1. Use Canvas images as CSS background images The...
Detailed explanation of webpage screenshot function in Vue
Recently, there is a requirement for uploading pi...
Detailed usage of docker-maven-plugin
Table of contents Docker-Maven-Plugin Maven plugi...