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 表示法 |
---|---|
© | © ; |
< | < ; |
> | > ; |
“ | " ; |
& | & ; |
半角空格 |   ; |
新增中继标记——< 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 语法里较少使用。