码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记(三)设计网页文本内容

时间:2016-04-03 13:04:48      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:

     标题文字标记<h>,在该语法中1级标题使用最大的字号表示,6级标题使用的是最小的字号。

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>标题文字的效果</title>
 6 </head>
 7 <h1>1级明日科技</h1>
 8 <h2>2级明日科</h2>
 9 <h3>3级明日科</h3>
10 <h4>4级明日科</h4>
11 <h5>5级明日科</h5>
12 <h6>6级明日科</h6>
13 <body>
14 </body>
15 </html>
View Code

     标题文字的对齐方式:left 左对齐; center 居中对齐; right 右对齐。 

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>标题文字的对齐效果</title>
 6 </head>
 7 <h1>古诗介绍</h1>
 8 <h2 align="left">作者辛弃疾</h2>
 9 <h3 align="center">三更灯火五更鸡,正是男儿发愤时</h3>
10 <h4 align="right">黑发不知勤学早,白首方悔读书迟</h4>
11 <body>
12 </body>
13 </html>
View Code

      设置文字字体<font face="字体1,字体2,.....">应用了该字体的文字</font>,默认情况下,使用第1种字体进行显示;如果第1种字体不存在,则使用第2种字体进行代替,以此类推。

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>不同字体的显示效果</title>
 6 </head>
 7 <font face="华文彩云">登山则情满于山</font><br /><br />
 8 <font face="隶书">观海则意溢于海</font>
 9 <body>
10 </body>
11 </html>
View Code

     设置字号<font size="文字字号"></font>,在该语法中,文字的字号可以设置为1-7.

     设置文字颜色<font color="颜色代码"></font>

     粗体、斜体、下划线<strong>粗体的文字</strong>、<em>斜体字</em>、<u>带下划线的文字</u>

     上标和下标<sup></sup>上标标记,<sub></sub>下标标记  

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>上标与下标的效果</title>
 6 </head>
 7 在方程式中应用上标的效果<br />
 8 X<sup>3</sup>+9X<sup>2</sup>-3=0<br /><br />
 9 在文字中应用下标的效果<br />
10 3X<sub>1</sub>+2X<sub>2</sub>=10
11 <body>
12 </body>
13 </html>
View Code

     设置删除线<strike>文字</strike>或<s>文字</s>

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>文字的删除线的效果</title>
 6 </head>
 7 正常的文字效果<br />
 8 在文字上使用s标记来添加删除线<br />
 9 <s>删除文字的效果</s><br /><br />
10 在文字上使用strike标记来添加删除线<br />
11 <strike>删除文字的效果</strike>
12 <body>
13 </body>
14 </html>
View Code

      等宽文字标记<code>文字</code>或<samp>文字</samp>

      空格标记 &nbsp;(分号必须有)    段落标记<p>段落文字</p>   取消文字换行标记<nobr>不换行显示的文字</nobr>    换行标记<br/>

      如果要保留原始的文本排版效果,则需要使用<pre></pre>标记 

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>保留原始排版方式</title>
 6 </head>
 7 <p>下面是原始文字的排版效果</p>
 8 <pre>
 9         m      mm          rrrrrr
10       mmmmm   mmmmmm       rrr
11       mmm      mmmmmmm      mmmmmm
12 </pre>
13 <body>
14 </body>
15 </html>
View Code

      居中对齐标记<center>文字</center>    水平线<br width="水平线高度" height="水平线高度" color="颜色代码" aligh="对齐方式" />  去掉水平线阴影<hr noshade="noshade"/>

      文字标注标记<ruby>被说明的文字<rt>文字的标记</rt></ruby> 

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>添加文字标注</title>
 6 </head>
 7 <ruby>
 8 有情芍药含春泪,无力蔷薇卧晓枝。<br /><br />
 9 <rt>
10 作者秦观
11 </rt>
12 </ruby>
13 <body>
14 </body>
15 </html>
View Code

      在使用网页讲解某些知识时,为了统一突出变量,常常将其设置为斜体。声明变量标记<var>变量</var>

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>声明变量标记</title>
 6 </head>
 7 <p>所谓的定义变量就是给变量赋值</p>
 8 定义变量的格式为:<br />
 9 变量名:数值或者表达式的值。<br />
10 其中符号":="是定义符,又称赋值符。<br />
11 <p>例如定义变量<var>x</var>的值为<var>y+6</var>,可以表示为:</p>
12 <p><var>x</var>:=<var>y</var>+6</p>
13 <body>
14 </body>
15 </html>
View Code

 

HTML学习笔记(三)设计网页文本内容

标签:

原文地址:http://www.cnblogs.com/yyxiangjava/p/5348728.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!