关于『HTML』:第三弹

关于『HTML』:第三弹

建议缩放90%食用

盼望着, 盼望着, 第三弹来了, HTML基础系列完结了!！

一切都像刚睡醒的样子(包括我), 欣欣然张开了眼(我没有)

敬请期待Markdown语法系列(旧坑填完挖新坑)

开始正文之前又提一个问题:昨天有人偷听牛郎织女吗?
我昨天找了个葡萄架子啥也没听着(哼唧).

OK废话结束, 开始正文

  又双要为大家带来(过时的)HTML了呢~  

---

正文开始

注:

• !DOCTYPE 声明
• <!DOCTYPE>声明有助于浏览器中正确显示网页。
• 网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
• doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
  在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
• HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。
  HTML5 不是基于 SGML，因此不要求引用 DTD。
• 对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码。
• 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。

一. HTML 表格

(接着上一帖最后一点继续)

上一帖传送门-> “关于『HTML』:第二弹”

(四). 合并单元格

1. 合并行单元格(colspan)

• 合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格）

代码:

<table border="1">
<caption>通讯录</caption> //标题
<tr>
  <th>姓名</th> //表头
  <th colspan="2">邮箱</th>
</tr>
<tr>
  <td>zhang san</td>
  <td>12138@qq.com</td>
  <td>12138@163.com</td>
</tr>
</table>

效果:

通讯录

姓名	邮箱
zhang san	12138@qq.com	12138@163.com

2. 合并列单元格(rowspan)

代码:

<table border="1">
<tr>
  <th>姓名</th>
  <td>Lily Smith</td>
</tr>
<tr>
  <th rowspan="3">邮箱</th>
  <td>2147483647@qq.com</td>
</tr>
<tr>
  <td>2147483647@163.com</td>
</tr>
<tr>
  <td>2147483647@huohu.com</td>
</tr>
</table>

效果:

姓名	Lily Smith
邮箱	2147483647@qq.com
	2147483647@163.com
	2147483647@huohu.com

(五). 表格格式设置

1. 单元格的对齐:

• 在对应的标签上增加 align 键值对，生效方式为 "就近原则"

align 值	left	center	right
效果	左对齐	居中	右对齐

代码:

<table  width="600" border="1">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="right">张三</td>
        <td align="right">男</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td align="left">李四</td>
        <td align="left">女</td>
    </tr>
</table>

效果:

编号	姓名	性别
1	张三	男
2	李四	女

2. 显示部分边框（frame 及 rules）

1. 在 <table> </table> 标签内，增加 frame 键值对，控制表格外边框；键值对对应关系如下：

frame 键值	效果
void	不显示外侧边框
above	显示上部的外侧边框
below	显示下部的外侧边框
hsides	显示上部和下部的外侧边框
vsides	显示左边和右边的外侧边框
lhs	显示左边的外侧边框
rhs	显示右边的外侧边框
box	在所有四个边上显示外侧边框
border	在所有四个边上显示外侧边框

三. HTML字符实体

一个字符实体(Character Entity)分成三部分：

• 第一部分是一个 & 符号，英文叫

  a

  m

  p

  e

  r

  s

  a

  n

  d

  ampersand

  ampersand

• 第二部分是实体( Entity )名字 或者是 #加上实体 ( Entity )编号
• 第三部分是一个分号 “;”

比如，要显示小于号，就可以写 &lt; 或者 <。

注: Entity区分大小写。

(一). 如何显示空格

通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 &nbsp; 表示空格。

HTML实在是太贴心了呢

(二). 常用的字符实体

上表

显示结果	说明	Entity Name	Entity Number
	显示一个空格	 
<	小于	&lt;	<
>	大于	&gt;	>
&	取址符(已改正)	&amp;	&
"	双引号	&quot;	"
	版权	&copy;	©
	注册商标	&reg;	®
×	乘号	&times;;	×
÷	除号	&divide;	÷

(三). ISO Latin-1字符集

高能预警, 请保护好您的眼睛

注: 因为 &#00; 至 &#31; 均未使用 Unused, 故跳过

建议全屏食用

字符	十进制字符编号	实体名字	说明
		---	Space
!	!	---	惊叹号Exclamation mark
"	"	"	双引号Quotation mark
#	#	---	数字标志Number sign
$	$	---	美元标志Dollar sign
%	%	---	百分号Percent sign
&	&	&	取址符Ampersand
'	'	---	单引号Apostrophe
(	(	---	小括号左边部分Left parenthesis
)	)	---	小括号右边部分Right parenthesis
*	*	---	星号Asterisk
+	+	---	加号Plus sign
,	,	---	逗号Comma
-	-	---	连字号Hyphen
.	.	---	句号Period (fullstop)
/	/	---	斜杠Solidus (slash)
0	0	---	数字0 Digit 0
1	1	---	数字1 Digit 1
2	2	---	数字2 Digit 2
3	3	---	数字3 Digit 3
4	4	---	数字4 Digit 4
5	5	---	数字5 Digit 5
6	6	---	数字6 Digit 6
7	7	---	数字7 Digit 7
8	8	---	数字8 Digit 8
9	9	---	数字9 Digit 9
:	:	---	冒号Colon
;	;	---	分号Semicolon
<	<	&lt;	小于号Less than
=	=	---	等于符号Equals sign
>	>	&gt;	大于号Greater than
?	?	---	问号Question mark
@	@	---	Commercial at
A	A	---	大写A Capital A
B	B	---	大写B Capital B
C	C	---	大写C Capital C
D	D	---	大写D Capital D
E	E	---	大写E Capital E
F	F	---	大写F Capital F
G	G	---	大写G Capital G
H	H	---	大写H Capital H
I	I	---	大写J Capital I
J	J	---	大写K Capital J
K	K	---	大写L Capital K
L	L	---	大写K Capital L
M	M	---	大写M Capital M
N	N	---	大写N Capital N
O	O	---	大写O Capital O
P	P	---	大写P Capital P
Q	Q	---	大写Q Capital Q
R	R	---	大写R Capital R
S	S	---	大写S Capital S
T	T	---	大写T Capital T
U	U	---	大写U Capital U
V	V	---	大写V Capital V
W	W	---	大写W Capital W
X	X	---	大写X Capital X
Y	Y	---	大写Y Capital Y
Z	Z	---	大写Z Capital Z
[	[	---	中括号左边部分Left square bracket
\	\	---	反斜杠Reverse solidus (backslash)
]	]	---	中括号右边部分Right square bracket
^	^	---	Caret
_	_	---	下划线Horizontal bar (underscore)
`	`	---	尖重音符Acute accent
a	a	---	小写a Small a
b	b	---	小写b Small b
c	c	---	小写c Small c
d	d	---	小写d Small d
e	e	---	小写e Small e
f	f	---	小写f Small f
g	g	---	小写g Small g
h	h	---	小写h Small h
i	i	---	小写i Small i
j	j	---	小写j Small j
k	k	---	小写k Small k
l	l	---	小写l Small l
m	m	---	小写m Small m
n	n	---	小写n Small n
o	o	---	小写o Small o
p	p	---	小写p Small p
q	q	---	小写q Small q
r	r	---	小写r Small r
s	s	---	小写s Small s
t	t	---	小写t Small t
u	u	---	小写u Small u
v	v	---	小写v Small v
w	w	---	小写w Small w
x	x	---	小写x Small x
y	y	---	小写y Small y
z	z	---	小写z Small z
｛	{	---	大括号左边部分Left curly brace
|	|	---	竖线Vertical bar
｝	}	---	大括号右边部分Right curly brace
~	~	---	Tilde
---		---	未使用Unused
		&nbsp;	空格Nonbreaking space
?	¡	&iexcl;	Inverted exclamation
￠	¢	&cent;	货币分标志Cent sign
￡	£	&pound;	英镑标志Pound sterling
¤	¤	&curren;	通用货币标志General currency sign
￥	¥	&yen;	日元标志Yen sign
|	¦	&brvbar; or &brkbar;	断竖线Broken vertical bar
§	§	&sect;	分节号Section sign
¨	¨	&uml; or &die;	变音符号Umlaut
?	©	&copy;	版权标志Copyright
a	ª	&ordf;	Feminine ordinal
?	«	&laquo;	Left angle quote, guillemet left
?	¬	&not	Not sign
­	­	&shy;	Soft hyphen
?	®	&reg;	注册商标标志Registered trademark
ˉ	¯	&macr; or &hibar;	长音符号Macron accent
°	°	&deg;	度数标志Degree sign
±	±	&plusmn;	加或减Plus or minus
2	²	&sup2;	上标2 Superscript two
3	³	&sup3;	上标3 Superscript three
′	´	&acute;	尖重音符Acute accent
μ	µ	&micro;	Micro sign
?	¶	&para;	Paragraph sign
·	·	&middot;	Middle dot
?	¸	&cedil;	Cedilla
1	¹	&sup1;	上标1 Superscript one
o	º	&ordm;	Masculine ordinal
?	»	&raquo;	Right angle quote, guillemet right
?	¼	&frac14;	四分之一Fraction one-fourth
?	½	&frac12;	二分之一Fraction one-half
?	¾	&frac34;	四分之三Fraction three-fourths
?	¿	&iquest;	Inverted question mark
à	À	&Agrave;	Capital A, grave accent
á	Á	&Aacute;	Capital A, acute accent
?	Â	&Acirc;	Capital A, circumflex
?	Ã	&Atilde;	Capital A, tilde
?	Ä	&Auml;	Capital A, di?esis / umlaut
?	Å	&Aring;	Capital A, ring
?	Æ	&AElig;	Capital AE ligature
?	Ç	&Ccedil;	Capital C, cedilla
è	È	&Egrave;	Capital E, grave accent
é	É	&Eacute;	Capital E, acute accent
ê	Ê	&Ecirc;	Capital E, circumflex
?	Ë	&Euml;	Capital E, di?esis / umlaut
ì	Ì	&Igrave;	Capital I, grave accent
í	Í	&Iacute;	Capital I, acute accent
?	Î	&Icirc;	Capital I, circumflex
?	Ï	&Iuml;	Capital I, di?esis / umlaut
D	Ð	&ETH;	Capital Eth, Icelandic
?	Ñ	&Ntilde;	Capital N, tilde
ò	Ò	&Ograve;	Capital O, grave accent
ó	Ó	&Oacute;	Capital O, acute accent
?	Ô	&Ocirc;	Capital O, circumflex
?	Õ	&Otilde;	Capital O, tilde
?	Ö	&Ouml;	Capital O, di?esis / umlaut
×	×	&times;	乘号Multiply sign
?	Ø	&Oslash;	Capital O, slash
ù	Ù	&Ugrave;	Capital U, grave accent
ú	Ú	&Uacute;	Capital U, acute accent
?	Û	&Ucirc;	Capital U, circumflex
ü	Ü	&Uuml;	Capital U, di?esis / umlaut
Y	Ý	&Yacute;	Capital Y, acute accent
T	Þ	&THORN;	Capital Thorn, Icelandic
?	ß	&szlig;	Small sharp s, German sz
à	à	&agrave;	Small a, grave accent
á	á	&aacute;	Small a, acute accent
a	â	&acirc;	Small a, circumflex
?	ã	&atilde;	Small a, tilde
?	ä	&auml;	Small a, di?esis / umlaut
?	å	&aring;	Small a, ring
?	æ	&aelig;	Small ae ligature
?	ç	&ccedil;	Small c, cedilla
è	è	&egrave;	Small e, grave accent
é	é	&eacute;	Small e, acute accent
ê	ê	&ecirc;	Small e, circumflex
?	ë	&euml;	Small e, di?esis / umlaut
ì	ì	&igrave;	Small i, grave accent
í	í	&iacute;	Small i, acute accent
?	î	&icirc;	Small i, circumflex
?	ï	&iuml;	Small i, di?esis / umlaut
e	ð	&eth;	Small eth, Icelandic
?	ñ	&ntilde;	Small n, tilde
ò	ò	&ograve;	Small o, grave accent
ó	ó	&oacute;	Small o, acute accent
?	ô	&ocirc;	Small o, circumflex
?	õ	&otilde;	Small o, tilde
?	ö	&ouml;	Small o, di?esis / umlaut
÷	÷	&divide;	除号Division sign
?	ø	&oslash;	Small o, slash
ù	ù	&ugrave;	Small u, grave accent
ú	ú	&uacute;	Small u, acute accent
?	û	&ucirc;	Small u, circumflex
ü	ü	&uuml;	Small u, di?esis / umlaut
y	ý	&yacute;	Small y, acute accent
t	þ	&thorn;	Small thorn, Icelandic
?	ÿ	&yuml;	Small y, umlaut

字符补充

?	ƒ	Α	Α	Β	Β	Γ	Γ	Δ	Δ
Ε	Ε	Ζ	Ζ	Η	Η	Θ	Θ	Ι	Ι
Κ	Κ	Λ	Λ	Μ	Μ	Ν	Ν	Ξ	Ξ
Ο	Ο	Π	Π	Ρ	Ρ	Σ	Σ	Τ	Τ
Υ	Υ	Φ	Φ	Χ	Χ	Ψ	Ψ	Ω	Ω
α	α	β	β	γ	γ	δ	δ	ε	ε
ζ	ζ	η	η	θ	θ	ι	ι	κ	κ
λ	λ	μ	μ	ν	ν	ξ	ξ	ο	ο
π	π	ρ	ρ	?	ς	σ	σ	τ	τ
υ	υ	φ	φ	χ	χ	ψ	ψ	ω	ω
?	ϑ	?	ϒ	?	ϖ	?	•	…	…
′	′	″	″	￣	‾	?	⁄	?	℘
?	ℑ	?	ℜ	?	™	?	ℵ	←	←
↑	↑	→	→	↓	↓	?	↔	?	↵
?	⇐	?	⇑	?	⇒	?	⇓	?	⇔
?	∀	?	∂	?	∃	?	∅	?	∇
∈	∈	?	∉	?	∋	∏	∏	∑	∑
?	−	?	∗	√	√	∝	∝	∞	∞
∠	∠	∧	∧	∨	∨	∩	∩	∪	∪
∫	∫	∴	∴	～	∼	?	≅	≈	≈
≠	≠	≡	≡	≤	≤	≥	≥	?	⊂
?	⊃	?	⊄	?	⊆	?	⊇	⊕	⊕
?	⊗	⊥	⊥	?	⋅	?	⌈	?	⌉
?	⌊	?	⌋	?	⟨	?	⟩	?	◊
?	♠	?	♣	?	♥	?	♦

电脑要炸裂了嘤嘤嘤

第三弹到也到此结束了呢亲亲

---

HTML基础系列完结啦~ []_(￣▽￣)*

敬请期待 " Markdown语法系列"

(我真的还能再苟五百年)

注: "HTML基础系列"仅达科普效果, 并非宣传使用, 若要使用, 敬请期待 "Markdown语法系列"

关于『HTML』:第三弹 就酱紫结束啦~ 叭叭 ~(′▽`~)

上一篇: "关于『HTML』:第二弹"