HTML5基础之常见文本控制标识

一、文本控制标记

 1.标题标记

  标题标记是指在网页文件中，以独立方式显现的标题内容，其后面的文字内容会在显示时会另起一行,在HTML中有6个级别（按从大到小分）：

   <h1> <h2> <h3> ... <h6>

 语法格式：

  <hn  align="文字对齐方式">标题文本</hn>   (n=1,2,3,4,5,6)

 

  align文件对齐方式取值：left\right\center

 

2. 段落标记

  2-1 p标记

 将成段文字按文字块的方式呈现（相当于文章中的一个段落），在显示时会自动将段落文字中的空格、分行等忽略（注意，若是通过特殊字符方式是不能忽略的）。

   语法格式:

  <p align="文字对齐方式">段落文本</p>

 

  属性align文件对齐方式取值：left\right\center

 

2-2 pre标记

   预格式化标签，即被其包含的内容，会按其原来的格式方式显示出来。(注：与P标记相比，其中包含的空格、换行等均被保留下来 ）

  语法格式：

   <pre>段落文本</pre>

   

3.分割线

 分割线标记hr，其功能是在显示区域内划一个水平分割线，将其分割成两个部分。

 语法格式：

  <hr 属性=“属性值”/>

 

 

属性名	含义	属性值
align	设置对齐方式	选择：left、center、right
size	设置线条粗细度	以像素为单位，默认值为2像素
color	设置线条颜色	颜色名、十六进制#GRB、rgb(r,g,b)
width	设置线条宽度	像素值或浏览器窗口的百分比（默认为100%)

4.换行标记

 

 一般用于段落中，将该标记后的文字换在新行显示

 语法格式:

  <br/>

 

5.文本格式化标记

在网页中需要对文字进行特殊要求显示，如粗体、斜体、下划线等。

标记名	显示效果
b和strong	粗体字
i和em	斜体字
s和del	删除线
u和ins	下划线

 

6.特殊字符标记

在网页中需要增加一些特殊标记符号，其格式是以&开始，以;结束，常用的标记有如下一些（来源于runoop.com）：

 

HTML支持的数学符号

字符	实体编号	实体名称	描述
∀	∀	∀	for all
∂	∂	∂	part
∃	∃	&exists;	exists
∅	∅	∅	empty
∇	∇	∇	nabla
∈	∈	∈	isin
∉	∉	∉	notin
∋	∋	∋	ni
∏	∏	∏	prod
∑	∑	∑	sum
−	−	−	minus
∗	∗	∗	lowast
√	√	√	square root
∝	∝	∝	proportional to
∞	∞	∞	infinity
∠	∠	∠	angle
∧	∧	∧	and
∨	∨	∨	or
∩	∩	∩	cap
∪	∪	∪	cup
∫	∫	∫	integral
∴	∴	∴	therefore
∼	∼	∼	similar to
≅	≅	≅	congruent to
≈	≈	≈	almost equal
≠	≠	≠	not equal
≡	≡	≡	equivalent
≤	≤	≤	less or equal
≥	≥	≥	greater or equal
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	⊄	not subset of
⊆	⊆	⊆	subset or equal
⊇	⊇	⊇	superset or equal
⊕	⊕	⊕	circled plus
⊗	⊗	⊗	cirled times
⊥	⊥	⊥	perpendicular
⋅	⋅	⋅	dot operator

HTML支持的希腊字母

字符	实体编号	实体名称	描述
Α	Α	Α	Alpha
Β	Β	Β	Beta
Γ	Γ	Γ	Gamma
Δ	Δ	Δ	Delta
Ε	Ε	Ε	Epsilon
Ζ	Ζ	Ζ	Zeta
Η	Η	Η	Eta
Θ	Θ	Θ	Theta
Ι	Ι	Ι	Iota
Κ	Κ	Κ	Kappa
Λ	Λ	Λ	Lambda
Μ	Μ	Μ	Mu
Ν	Ν	Ν	Nu
Ξ	Ξ	Ξ	Xi
Ο	Ο	Ο	Omicron
Π	Π	Π	Pi
Ρ	Ρ	Ρ	Rho
	undefined		Sigmaf
Σ	Σ	Σ	Sigma
Τ	Τ	Τ	Tau
Υ	Υ	Υ	Upsilon
Φ	Φ	Φ	Phi
Χ	Χ	Χ	Chi
Ψ	Ψ	Ψ	Psi
Ω	Ω	Ω	Omega
α	α	α	alpha
β	β	β	beta
γ	γ	γ	gamma
δ	δ	δ	delta
ε	ε	ε	epsilon
ζ	ζ	ζ	zeta
η	η	η	eta
θ	θ	θ	theta
ι	ι	ι	iota
κ	κ	κ	kappa
λ	λ	λ	lambda
μ	μ	μ	mu
ν	ν	ν	nu
ξ	ξ	ξ	xi
ο	ο	ο	omicron
π	π	π	pi
ρ	ρ	ρ	rho
ς	ς	ς	sigmaf
σ	σ	σ	sigma
τ	τ	τ	tau
υ	υ	υ	upsilon
φ	φ	φ	phi
χ	χ	χ	chi
ψ	ψ	ψ	psi
ω	ω	ω	omega
ϑ	ϑ	ϑ	theta symbol
ϒ	ϒ	ϒ	upsilon symbol
ϖ	ϖ	ϖ	pi symbol

HTML支持的其它实体

字符	实体编号	实体名称	描述
Œ	Œ	Œ	capital ligature OE
œ	œ	œ	small ligature oe
Š	Š	Š	capital S with caron
š	š	š	small S with caron
Ÿ	Ÿ	Ÿ	capital Y with diaeres
ƒ	ƒ	ƒ	f with hook
ˆ	ˆ	ˆ	modifier letter circumflex accent
˜	˜	˜	small tilde
	 	 	en space
	 	 	em space
	 	 	thin space
‌	‌	‌	zero width non-joiner
‍	‍	‍	zero width joiner
‎	‎	‎	left-to-right mark
‏	‏	‏	right-to-left mark
–	–	–	en dash
—	—	—	em dash
‘	‘	‘	left single quotation mark
’	’	’	right single quotation mark
‚	‚	‚	single low-9 quotation mark
“	“	“	left double quotation mark
”	”	”	right double quotation mark
„	„	„	double low-9 quotation mark
†	†	†	dagger
‡	‡	‡	double dagger
•	•	•	bullet
…	…	…	horizontal ellipsis
‰	‰	‰	per mille
′	′	′	minutes
″	″	″	seconds
‹	‹	‹	single left angle quotation
›	›	›	single right angle quotation
‾	‾	‾	overline
€	€	€	euro
™	™	™	trademark
←	←	←	left arrow
↑	↑	↑	up arrow
→	→	→	right arrow
↓	↓	↓	down arrow
↔	↔	↔	left right arrow
↵	↵	↵	carriage return arrow
⌈	⌈	⌈	left ceiling
⌉	⌉	⌉	right ceiling
⌊	⌊	⌊	left floor
⌋	⌋	⌋	right floor
◊	◊	◊	lozenge
♠	♠	♠	spade
♣	♣	♣	club
♥	♥	♥	heart
♦	♦	♦	diamond

 

7.图像标记

  7-1 图像格式

  GIF：支持动画、无损图像格式、支持透明、256颜色；常用于Logo等色彩单一的图像

 PNG：体积小（与GIF相比）、支持alpha透明、色彩丰富（颜色过渡更平滑）【目前三种格式：PNG-8、PNG-24、PNG-32】

 JPG：颜色最丰富、有损图像格式；常用于广告、商品图片、插图等 

 

7-2 图像标记

网页中插入图片文件，需要用到图像元素将图片内容引入到页面中，其语法格式如下：

<img  src="图像URL“  其它属性=属性值 />

说明：

   Scr指定图片文件所在的位置及图片文件全名

  

属性	属性值	说明	备注
src	URL	图片文件位置及图片全名	相对位置与绝对位置
alt	文本	图片不正常显示时，显示该属性中的文字
title	文本	鼠标悬停时显示的文字
height/width	像素	设置图片的高度或宽度
border	数字	设置图片的边框
vspace/hspace	像素	设置图片上下或左右空白区域的宽度
align	left\right\middle\top\bottom	设置图片的位置

 

8.文件路径

  相对路径：从当前文件所在的位置查找到引用文件所在的位置，这两个位置间的文件路径，被称为相对路径

  绝对路径：从根目录（比如盘符）开始，将被引用的文件所在的位置表示出来的路径，被称为绝对路径

 

  特殊文件文件夹：

    .        指代当前文件夹，即目前文件所在的位置

   ..        指代当前文件夹的父文件夹，即指包含当前文夹的文件夹(上一级目录)

 

相对路径： ../help/h1.txt

绝对路径:  C:/windows/help/h1.txt

 

9.超链接

  超链接是迅速定位（或打开）目标位置上的文件的一种标记。按功能区别分为：超链接和锚点

  9-1 超链接

  在当前网页中打开引用页面（文件）元素，其语法如下：

  <a  href="URL目标文件"  target="目标窗口弹出方式">文本或图像</a>

 说明：

   target的值有二：

     _self----在原窗口打开链接文件

    _blank---在新窗口中打开链接文件

 

 9-2 锚点链接

   在一个页面中，进行页面内容迅速定位的一种功能。

  语法格式：

  <a href="#id">文字或图片</a>

   说明:

      href="#id"中的id指的是元素的命名（id名），当单击锚点后，文字内容迅速定位到id所对应的位置上的内容

 

10.列表元素

  10-1  无序列表

   标记：UL，其下列项无序

 10-2  列表项

   标记:LI  ,用于罗列标记项的内容

 10-3 有序列表

   标记：OL  ，与UL功能相似，区别在于其下项是有序号的

   属性：start="值” 设置第一项的起始序号

            reversed:设置反向罗列

10-4 词条列表

    标记：dl  词条项，词条的根元素

             dt 词条子元素，用于罗列被解释名词词条

             dd词条子元素，用于对其前的词条进行解释

     说明：一个DL元素可以包含若干个dt和dd元素，一个dt后可以跟随几个dd,相当于一个名词有若干个词义

 

   10-5 列表嵌套

     在一个列表元素中，允许其中的元素也是一个列表，从而构造列表的嵌套使用

    嵌套使用形成树状结构。

    

11.表格标记

   11-1  表格元素

   table   表格总元素，所有表格的元素均直接或间接包含在此元素中

  th        表格头元素，相当于表格第一行，其中即使没有元素，其至少也有一个空单元

  tr      表格内容区域的行元素

  td     表格中的单元格，表格一行能够包含多个单元格

11-2 表格属性

  width   表格（单元格、行）宽

 height  表格行高

 colspan  跨列数，即将相邻列几个单元格合并成一个单元格

 rowspan 跨行数，即将相邻行几个单元格合并成一个单元格

 bgcolor   设置背景颜色