如果您使用文字处理器，您必须熟悉将文本加粗、斜体或下划线的能力； 这些只是用于指示文本在 HTML 和 XHTML 中的显示方式的十个选项中的三个。
1.黑体字
<b>…</b>元素之间的字体是黑色的。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html> |
结果：
The following word uses a bold typeface.
2.斜体字
<i>…</i> 元素之间的内容是斜体字
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses an <i>italicized</i> typeface.</p> </body> </html> |
结果：
The following word uses an italicized typeface.
3.下划线
<u>…</u> 之间的任何内容都是有下划线的
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses an <u>underlined</u> typeface.</p> </body> </html> |
结果：
The following word uses an underlined typeface.
4.等宽字体 （Monospaced Font）
<tt>…</tt> 之间的字体是等宽字体。大多数字体被称为可变宽度字体，因为不同的字母具有不同的宽度（例如，字母“m”比字母“i”宽）。 然而，在等宽字体中，每个字母都具有相同的宽度。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Monospaced Font Example</title> </head> <body> <p>The following word uses a <tt>monospaced</tt> typeface.</p> </body> </html> |
结果：
The following word uses a monospaced typeface.
5.上标文字 （Superscript Text）
<sup>…</sup> 之间的文字是上标文字。使用的字体大小与其周围字符的大小相同，但显示在其他字符上方半个字符的高度。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a <sup>superscript</sup> typeface.</p> </body> </html> |
结果：
The following word uses a superscript typeface.
HTML 文本格式化元素
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML “计算机输出” 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
更为详尽的HTML 格式化英文表格 （ 查找用，不要求掌握）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 |
Common Tags for Blogs <h?> heading </h?> Heading (h1 for largest to h6 for smallest) <p> paragraph </p> Paragraph of Text <b> bold </b> Make text between tags bold <i> italic </i> Make text between tags italic <a href="url"> link name </a> Create a link to another page or website <div> ... </div> Divide up page content into sections, and applying styles <img src="filename.jpg"> Show an image <ul> <li> list </li> </ul> Unordered, bullet-point list <br> Line Break (force a new line) <span style="color:red"> red </span> Use CSS style to change text colour Text Formatting <h?> ... </h?> Heading (?= 1 for largest to 6 for smallest, eg h1) <b> ... </b> Bold Text <i> ... </i> Italic Text <u> ... </u> Underline Text <strike> ... </strike> Strikeout <sup> ... </sup> Superscript - Smaller text placed below normal text <sub> ... </sub> Subscript - Smaller text placed below normal text <small> ... </small> Small - Fineprint size text <tt> ... </tt> Typewriter Text <pre> ... </pre> Pre-formatted Text <blockquote> ... </blockquote> Text Block Quote <strong> ... </strong> Strong - Shown as Bold in most browsers <em> ... </em> Emphasis - Shown as Italics in most browsers <font> ... </font> Font tag obsolete, use CSS. (*) Section Divisions Help Help | Top Top <div> ... </div> Division or Section of Page Content <span> ... </span> Section of text within other content <p> ... </p> Paragraph of Text <br> Line Break <hr> Basic Horizontal Line <hr> Tag Attributes: size="?" Line Thickness in pixels width="?" Line Width in pixels width="??%" Line Width as a percentage color="#??????" Line Colour (*) align="?" Horizontal Alignment: left, center, right (*) noshade No 3D cut-out <nobr> ... </nobr> Line Break Images <img src="url" alt="text"> Basic Image <img> Tag Attributes: src="url" URL or filename of image (required!) alt="text" Alternate Text (required!) align="?" Image alignment within surrounding text (*) width="??" Image width (in pixels or %) height="??" Image height (in pixels or %) border="??" Border thickness (in pixels) (*) vspace="??" Space above and below image (in pixels) (*) hspace="??" Space on either side of image (in pixels) (*) Linking Tags <a href="url"> link text </a> Basic Link <a> Tag Attributes: href="url" Location (url) of page to link to. name="??" Name of link (name of anchor, or name of bookmark) target="?" Link target location: _self, _blank, _top, _parent. href="url#bookmark" Link to a bookmark (defined with name attribute). href="mailto:email" Link which initiates an email (dependant on user's email client). Lists <ol> ... </ol> Ordered List <ul> ... </ul> Un-ordered List <li> ... </li> List Item (within ordered or unordered) <ol type="?"> Ordered list type: A, a, I, i, 1 <ol start="??"> Ordered list starting value <ul type="?"> Unordered list bullet type: disc, circle, square <li value="??"> List Item Value (changes current and subsequent items) <li type="??"> List Item Type (changes only current item) <dl> ... </dl> Definition List <dt> ... </dt> Term or phrase being defined <dd> ... </dd> Detailed Definition of term Tables <table> ... </table> Define a Table <table> Tag Attributes: border="?" Thickness of outside border bordercolor="#??????" Border Colour cellspacing="?" Space between cells (pixels) cellpadding="?" Space between cell wall and content align="??" Horizontal Alignment: left, center, right (*) bgcolor="#??????" Background Colour (*) width="??" Table Width (pixels or %) (*) height="??" Table Height (pixels or %) (*) <tr> ... </tr> Table Row within table <th> ... </th> Header Cell within table row <td> ... </td> Table Cell within table row <td> Tag Attributes: colspan="?" Number of columns the cell spans across (cell merge) rowspan="?" Number of row a cell spans across (cell merge) width="??" Cell Width (pixels or %) (*) height="??" Cell Height (pixels or %) (*) bgcolor="#??????" Background Colour (*) align="??" Horizontal Alignment: left, center, right (*) valign="??" Vertical Alignment: top, middle, bottom (*) nowrap Force no line breaks in a particular cell Frames <frameset> ... </frameset> Define the set of Frames <frameset> Tag Attributes: rows="??,??, ..." Define row sizes & number of rows (size in pixels or %) cols="??,??, ..." Define column sizes & number of columns (size in pixels or %) noresize="noresize" User cannot resize any frames in frameset <frame> ... </frame> Define a frame within the frameset <frame> Tag Attributes: src="url" Location of HTML File for a frame name="***" Unique name of frame window marginwidth="?" Horizontal margin spacing inside frame (pixels) marginheight="?" Vertical margin spacing inside frame (pixels) noresize="noresize" Declare all frameset sizes as fixed scrolling="***" Can the user scroll inside the frame: yes, no, auto frameborder="?" Frame Border: (1=yes, 2=no) bordercolor="#??????" Border Colour (*) <noframes> ... </noframes> Unframed content (for browsers not supporting frames) Forms <form> ... </form> Form input group decleration <form> Tag Attributes: action="url" URL of Form Script method="***" Method of Form: get, post enctype="***" For File Upload: enctype="multipart/form-data" <input> ... </input> Input field within form <input> Tag Attributes: type="***" Input Field Type: text, password, checkbox, submit etc. name="***" Form Field Name (for form processing script) value="***" Value of Input Field size="***" Field Size maxlength="?" Maximum Length of Input Field Data checked Mark selected field in radio button group or checkbox <select> ... </select> Select options from drop down list <select> Tag Attributes: name="***" Drop Down Combo-Box Name (for form processing script) size="?" Number of selectable options multiple Allow multiple selections <option> ... </option> Option (item) within drop down list <option> Tag Attributes: value="***" Option Value selected Set option as default selected option <textarea> ... </textarea> Large area for text input <textarea> Tag Attributes: name="***" Text Area Name (for form processing script) rows="?" Number of rows of text shown cols="?" Number of columns (characters per rows) wrap="***" Word Wrapping: off, hard, soft Special Characters &lt; < - Less-Than Symbol &gt; > - Greater-Than Symbol &amp; & - Ampersand, or 'and' sign &quot; " - Quotation Mark &copy; © - Copyright Symbol &trade; ™ - Trademark Symbol &nbsp; - A space (non-breaking space) &#??; ISO 8859-1 character - replace ?? with the iso code Miscellaneous Tags <!-- ... --> Comment within HTML source code <!DOCTYPE html ... > Document Type Definition (wiki) <meta> ... </meta> META information tag <meta> Tag Attributes: name="***" Meta name: description, keywords, author http-equiv="***" HTTP Equivalent Info: title, etc. content="***" Information content <link> LINK content relationship tag <link> Tag Attributes: rel="***" Type of forward relationship http="url" Location (URL) of object or file being linked type="***" Type of object or file, eg: text/css title="***" Link title (optional) Body Background & Colours <body> Tag Attributes: background="url" Background Image (*) bgcolor="#??????" Background Colour (*) text="#??????" Document Text Colour (*) link="#??????" Link Colour (*) vlink="#??????" Visited Link Colour (*) alink="#??????" Active Link Colour (*) bgproperties="fixed" Background Properties - "Fixed" = non-scrolling watermark (*) leftmargin="?" Side Margin Size in Pixels (Internet Explorer) (*) topmargin="?" Top Margin Size in Pixels (Internet Explorer) (*) (*) Important Note: Tags marked with (*) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements. |
除教程外，本网站大部分文章来自互联网，如果有内容冒犯到你，请联系我们删除！