HTML文字与排版

HTML文字与排版

段落效果——使用排版标记

• < p > 标记:
  用来分出段落，成对出现。
• < br > 标记:
  用来换行，没有结尾标记。建议使用：< br / >
• < pre > 标记:
  成对出现，开始标记与结尾标记之间的文字按照原始代码的排列方式进行显示。
• < blockquote > 标记:
  成对出现，表示引用文字，会将标记内的文字换行并缩进。

属性	设置值	说明
cite	url 网址	说明引用的来源

• < hr > 标记:
  添加分割线，让画面更加容易区分主题或段落。属性有: align, size, width, color, noshade 等。
• < h1> 标记:
  设置段落的标题大小和级别，共有6个级别。由此标记标识的文字将会独占一行。

文字效果——使用文字标记

• < foot > 标记:
  HTML5 已经停用。主要可以设计粗体斜体下划线等。

属性	设置值	说明
size	相对值（size+=2） 绝对值（size=2）	设置文字的大小，默认值为size=3
color	颜色名称（color=”red”） HEX码（color=”#FF0000”）	设置文字的颜色
face	系统内置字形	设置文字的字体

• < b > 标记:
  成对出现，将文字设置为粗体。
• < u > 标记:
  成对出现，为文字添加下划线。
• < i > 标记:
  成对出现，将文字设置为斜体。
• < sup > < sub > 标记:
  成对出现，为文字添加上标和下标。通常用于公式的显示。

项目符号与编号——使用列表标记

• 符号列表，又称为无序列表（Unordered List）

<ul>
    <li> ... </li>
    <li> ... </li>
</ul>

• 编号列表，又称为有序列表（Ordered List）

<ol type="1" start="4" reversed="reversed">
    <li> ... </li>
    <li> ... </li>
</ol>

< ol >标记的属性

属性	设置值	说明
type	设置值有5种	设置数目样式，默认值：type=1
start	1、2、3等整数值	设置编号起始值，默认值：start=1
reversed	reversed	反向排序数字改为由大到小

编号列表的样式

type设置值	项目编号样式	说明
1	1，2，3，…	阿拉伯数字
A	A，B，C，…	大写英文字母
a	a，b，c，…	小写英文字母
I	I，II，III，…	大写罗马数字
i	i，ii，iii，…	小写罗马数字

• 定义列表（Definition List），适用于主题与内容的两段文字，通常第一段以< dt >标记定义主题，第二段以< dd >标记来定义内容。

<dl>
    <dt>
    .....
    <dd>
    ......
</dl>

• 注释

<!-- 批注文字 -->
<!--[if IE]>只有IE会执行这里的语句<![endif]-->
<!--[if lt IE 9]>IE 9 以下的版本才会执行此语句(lt: lower than)<![endif]-->

• 使用特殊符号

HTML中常用到的特殊符号

特殊符号	HTML 表示法
©	&copy ;
<	&lt ;
>	&gt ;
“	&quot ;
&	&amp ;
半角空格	&nbsp ;

新增中继标记——< meta >

meta 标记的语法可分为两大类：
<meta http-equiv="HTTP 表头信息" content="信息内容"
以及
<meta name="网页信息" content="信息内容"
http-equiv 属性主要用于定义HTTP表头信息，例如网页编码方式、自动换页等；name 属性则是描述网页的信息，例如网页关键字、网页作者等。两者必须搭配 content属性使用。meta属性放置与head里。

http-equiv 属性

• content-type
  content-type 是设置网页文件的格式。语法如下：
  <meta http-equiv="content-type" content="text/html; charset=gb2321">
  content 属性里设置网页文件的格式的内容，每一项内容以分号分开；text/html 表示以 text 或 html 的标准来编译网页；charset 则是指定网页的编码字集（Character Set），big5 表示编码的字集使用的是繁体中文，若编码方式不对，用户会看到一对乱码。当网页没有指定编码方式时，浏览器会自动选择最适合的编码方式来显示网页。

• refresh
  refresh 是让网页重新整理，语法如下：
  <meta http-equiv="refresh" content="10; url=http://www.baidu.com">
  content 属性用于设置默认秒数，如果加上 rul 参数，就表示跳到 url 所指定的网页（自动跳转）；如果省略网址，就表示重新整理网页。上述代码中，content 属性的语句表示10秒后转往百度首页。

• expires
  expires 属性是设置网页到期的时间，语法如下：
  <meta http-equiv="expires" content="sun, 22 Jun 2018 15:18:44 GMT">
  通常网页改动不大时，浏览器会先从暂存区读取网页，当网页过期时，才会到服务器重新读取。expires 用于设置网页到期的时间，content 值必须使用 GMT 时间格式。如果希望每次浏览网页都能重新下载网页，那么只要将 content 值设置为过去的时间即可。

• pragma
  pragma 是设置 cache（快取）的模式，语法如下：
  <meta http-equiv="pragma" content="no-cache">
  content 的值表时禁止浏览器从暂存区读取网页，如此一来，用户将无法脱机浏览。

• set-cookie
  set-cookie 是设置 cookie 到期的时间，语法如下：
  <meta http-equiv="set-cookie" content="sun, 22 Jun 2008 15:18:44 GMT">
  当 content 设置的时间到期时，cookie 将被删除。content必须使用 GMT 时间格式。

• windows-target
  windows-target 是限制网页显示的目标窗口，语法如下：
  <meta http-equiv="windows-target" content="_top">
  content 值表示强制将网页显示于最上层，网页加入这句话可以用来防止别人在框架里显示您的网页。

name 属性

• keywords
  keywords 是用来设置网页的关键词，语法如下：
  <meta name="keywords" content="animal,dog,动物,狗,宠物">
  content 属性用于填入网页的关键词，让搜索引擎可以更容易的根据 keywords 所设置的关键词搜寻到网页，关键词可以输入中文或英文，以逗号（,）分隔。

• description
  description 用来说明网页的主要内容，语法如下：
  <meta name="description" content="网站简要说明">
  content 属性是描述此网页的简要说明，内容应简要明了，建议不要超过100个字符。

• author
  author 用来说明网页的作者，语法如下：
  <meta name="author" content="Eileen">
  content 属性用于标明网页的作者姓名等资料。

• creation-date
  creation-date 用来标注网页制作的时间，语法如下：
  <meta name="creation-date" content="sun, 22 Jun 2008 15:18:44 GMT">
  content 值必须使用 GMT 时间格式。

div 标记

< div > 标记是容器标记，结束必须有 < /div > 标记，属于独立的区块标记（block-level）。也就是说，它不会与其它组件同时显示在同一行，< /div > 标记之后会自动换行。其功能有点类似群组，只要放在 div 标记里的组件，都会称为单一对象。在 HTML 语法里，div 标记通常被用来做对齐功能，语法如下：
<div align="center" style="font-size: 13pt ; ">

div 标记属性如下：

• align
  align 属性用来设置 div 标记里的组件对齐方式，设置值有center（居中对齐），left（靠左对齐），以及 right（靠右对齐）。

• style
  style 属性里是 CSS 语法用来设置组件的样式，上面的语法的意思是将文字大小设置为 13pt。

span 标记

span 标记与 div 标记有些类似，差别在于 div 标记之后会换行，而 span 属于行内标记（inline-level），可与其它组件显示于同一行，语法如下：
<span style="font-size: 13pt ; ">
span 标记是 HTML4.0 之后才出现的，主要是针对 CSS 样式列表设计的，在 HTML 语法里较少使用。