WEB基础之：HTML文档的基本结构
HTML文档的基本结构
1. HTML文档的基本结构
1) <!DOCTYPE html>: 文档类型声明（Document Type Declaration,DTD）
表示该文档是HTML，在HTML5中声明如下：
<!DOCTYPE html>
2) <html> 文档开始标签
表示该文档是以HTML编写的。首标签<html>与尾标签</html>分别位于文档的最前面和最后面，文档中的所有内容包含和HTML标签都包含在其中。
3) <head> 文档头部标签
表示网页头部，放置关于HTML文档的信息。
4) <title> 文档标题标签
表示网页的名称同时作为窗口的名称显示在网页窗口的最上方。
5) <body> 文档主体标签
放置网页中的主体内容
6) 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
7) <!--注释内容-->
2. HTML头部标记
| 标记 | 描述 |
|---|---|
| < base> | 当前文档的URL全称（基底网址） |
| < basefont> | 设定基准的文字字体、字号和颜色 |
| < title> | 设定显示在浏览器左上方的标题内容 |
| < isindex> | 表明该文档是一个可用于检索的网关脚本，由服务器自动建立 |
| < meta> | 有关文档本身的元信息，例如用于查询的关键字，用于获取该文档的有效期等 |
| < style> | 设定CSS层叠样式表的内容 |
| < link> | 设定外部文档的链接 |
| < script> | 设定页面中程序脚本的内容，常有JavaScript脚本 |
2.1 < title> 标题标记
HTML文件的标题显示在浏览器的标题栏，用以说明文件的用途，每个HTML文档都应该有标题，标题文字位于< title >和< /title >之间。
2.2 < meta>元信息标记
< meta>的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便爬虫查找和分类。
1) 设置页面关键字
<meta name="keywords" content="具体关键字">
<!-- 用于设置HTML文档检索的关键字，便于搜索引擎进行查找和分类。多个关键字之间以逗号隔开。-->
2) 设置页面描述
<meta name="description" content="对页面描述">
3) 设置编辑工具
<meta name="generator" content="编辑软件名称">
4) 设置作者信息
<meta name="author" content="作者名称">
5) 限制搜索方式
<meta name="robots" content="搜索方式">
<!--
content值与其对应的含义:
All: 表示能搜索当前网页及其链接的网页
Index: 表示能搜索当前网页
Noindex: 表示不能搜索当前网页
None: 表示不能搜索当前网页与其链接的网页
Nofollow: 表示不能搜索与当前网页链接的网页
-->
6) 设置网页文字及语言
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh_CN">
7) 设置网页的定时跳转
<meta http-equiv="Refresh" Content="5; Url=链接地址" />
8) 设定有效期限
<meta http-equiv="expires" content=到期时间" />
<meta http-equiv="expires" content="Sat, 24 October 2020 10:10:00 GMT" />
<!-- 到期时间必须是GMT的时间格式。 -->
9) 禁止从缓存中调用
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
10) 删除过期的cookie
<meta http-equiv="Set-Cookie" content="Sat, 24 October 2020 10:10:00 GMT" />
11) 强制打开新窗口
<meta http-equiv="Window-target" content="_top">
12) 设置网页的过渡效果
设定进入页面时的特殊效果
<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion=12)">
设定离开页面时的特殊效果
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion=12)">
<!--
Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：
0: 盒状收缩 12: 随意溶解
1: 盒状放射 13: 从左右两端向中间展开
2: 圆形收缩 14: 从中间向左右两端展开
3: 圆形放射 15: 从上下两端向中间展开
4: 由下往上 16: 从中间向上下两端展开
5: 由上往下 17: 从右上角向左下角展开
6: 从左至右 18: 从右下角向左上角展开
7: 从右至左 19: 从左上角向右下角展开
8: 垂直百叶窗 20: 从左下角向右上角展开
9: 水平百叶窗 21: 水平线状展开
10: 水平格状百叶窗 22: 垂直线状展开
11: 垂直格状百叶窗 23: 随机产生一种过渡方式
-->
13) 设置建立网站的日期
<meta name="build" content="2020.10.24">
14) 设定网页版权信息
<meta name="copyright" content="网页版权信息">
15) 设定联系人的邮箱
<meta name="reply-to" content="邮箱地址">
16) 定义浏览器的渲染方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
2.3 < base>基底网址标记
URL路径是一种互联网地址的表示方法。在这个数据里可以包括以任何种协议连接、要连接到哪一个地址、连接地址的端口（port）号以及服务器里面完整的路径和页面名称等信息。HTML页面通过基底网址能够把当前的HTML页面中所有的相对URL转换成绝对URL。
在HTML里面，URL路径分为两种形式：
绝对路径：将服务器上磁盘驱动器名称和完整路径。
相对路径：相对于当前HTML文档所在目录或站点根目录的路径。
例如: 在HTML页面的头部定义基底网址如下:
<base href="http://www.test.com" target="_parent">
在页面主体中设置某个相对地址如下:
<a href="../html/index.html"></a>
当使用浏览器浏览时，这个链接地址就变成如下的绝对地址:
http://www.test.com/html/index.html
新窗口打开方式如下：
_parent: 在上一级窗口打开，一般常用在分帧的框架页中
_blank: 在新窗口打开
_self: 在同一窗口中打开，可以省略
_top: 在浏览器的整个窗口中打开，忽略任何框架
2.4 < body>页面的主体标记
body标记属性:
| 属性 | 描述 |
|---|---|
| text | 设定页面文字的颜色 |
| bgcolor | 设定页面背景的颜色 |
| background | 设定页面的背景图像 |
| bgproperties | 设定页面的背景图像为固定，不随页面的滚动而滚动 |
| link | 设定页面默认的链接颜色 |
| alink | 设定鼠标正在单击时的链接颜色 |
| vlink | 设定访问过后的链接颜色 |
| topmargin | 设定页面的上边距 |
| leftmargin | 设定页面的左边距 |
1) text文字颜色属性
<body text="blue">
2) bgcolor背景颜色属性
<body bgcolor="black" text="#adff2f">
3) background背景图像属性
<!--默认图像在水平和垂直方向平铺-->
<body background="images/1.jpg" text="#adff2f">
4) link链接文字属性
<body link="#ff0000">
5) alink修改正在访问链接文字颜色属性
<body alink="#yellow">
6) vlink修改访问后的链接文字颜色属性
<body vlink="#008000">
7) margin设置边距
<body topmargin="60" leftmargin="50" >
<!--设置上边距为60像素，左边距为50像素；-->
2.5 文本内容标记
2.5.1 标题格式
1) <H>标题字标记
<h1>1-6级标题</h1>
2) align标题文字对齐
<h1 align="center">1级标题</h1>
<!--
对齐方式有
center：控制面板居中；
left：控制面板居左；
right：控制面板居右；
top：控制面板的顶部与当前行中的最高对象的顶部对齐；
bottom：控制面板的底部与当前行中的对象的基线对齐；
baseline：控制面板的底部与文本的基线对齐；
texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；
middle：控制面板的中间与当前行的基线对齐；
absmiddle：控制面板的中间与当前文本或对象的中间对齐；
absbottom：控制面板的底部与文字的底部对齐。
-->
2.5.2 文本字体格式
1) font设置文字字体
<font face="华文彩云">设置文字字体</font>
2) size字号
<font size="10">设置文字字号，默认为3号字体</font>
<font size="+2">默认字号+2，也就是5号字体</font><br />
3) color设置文字颜色
<font color="blue">设置文字字体</font><br />
4) 斜体/粗体/下划线
<strong>粗体</strong>
<em>斜体</em>
<u>下划线</u>
5) sup/sub上标与下标
<sup>上标</sup>
<sub>下标</sub>
6) strike删除线
<strike>删除线</strike>
7) code等宽文字标记
<code>等宽文字标记</code>
<samp>文字</samp>
注：特殊符号代码
| 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
|---|---|---|---|---|---|---|---|---|
| Α | Α | Α | Β | Β | Β | Γ | Γ | Γ |
| Δ | Δ | Δ | Ε | Ε | Ε | Ζ | Ζ | Ζ |
| Η | Η | Η | Θ | Θ | Θ | Ι | Ι | Ι |
| Κ | Κ | Κ | Λ | Λ | Λ | Μ | Μ | Μ |
| Ν | Ν | Ν | Ξ | Ξ | Ξ | Ο | Ο | Ο |
| Π | Π | Π | Ρ | Ρ | Ρ | Σ | Σ | Σ |
| Τ | Τ | Τ | Υ | Υ | Υ | Φ | Φ | Φ |
| Χ | Χ | Χ | Ψ | Ψ | Ψ | Ω | Ω | Ω |
| α | α | α | β | β | β | γ | γ | γ |
| δ | δ | δ | ε | ε | ε | ζ | ζ | ζ |
| η | η | η | θ | θ | θ | ι | ι | ι |
| κ | κ | κ | λ | λ | λ | μ | μ | μ |
| ν | ν | ν | ξ | ξ | ξ | ο | ο | ο |
| π | π | π | ρ | ρ | ρ | ς | ς | ς |
| σ | σ | σ | τ | τ | τ | υ | υ | υ |
| φ | φ | φ | χ | χ | χ | ψ | ψ | ψ |
| ω | ω | ω | ϑ | ϑ | ϑ | ϒ | ϒ | ϒ |
| ϖ | ϖ | ϖ | • | • | • | … | … | … |
| ′ | ′ | ′ | ″ | ″ | ″ | ‾ | ‾ | ‾ |
| ⁄ | ⁄ | ⁄ | ℘ | ℘ | ℘ | ℑ | ℑ | ℑ |
| ℜ | ℜ | ℜ | ™ | ™ | ™ | ℵ | ℵ | ℵ |
| ← | ← | ← | ↑ | ↑ | ↑ | → | → | → |
| ↓ | ↓ | ↓ | ↔ | ↔ | ↔ | ↵ | ↵ | ↵ |
| ⇐ | ⇐ | ⇐ | ⇑ | ⇑ | ⇑ | ⇒ | ⇒ | ⇒ |
| ⇓ | ⇓ | ⇓ | ⇔ | ⇔ | ⇔ | ∀ | ∀ | ∀ |
| ∂ | ∂ | ∂ | ∃ | ∃ | ∃ | ∅ | ∅ | ∅ |
| ∇ | ∇ | ∇ | ∈ | ∈ | ∈ | ∉ | ∉ | ∉ |
| ∋ | ∋ | ∋ | ∏ | ∏ | ∏ | ∑ | ∑ | − |
| − | − | − | ∗ | ∗ | ∗ | √ | √ | √ |
| ∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
| ∧ | ∧ | ⊥ | ∨ | ∨ | ⊦ | ∩ | ∩ | ∩ |
| ∪ | ∪ | ∪ | ∫ | ∫ | ∫ | ∴ | ∴ | ∴ |
| ∼ | ∼ | ∼ | ≅ | ≅ | ≅ | ≈ | ≈ | ≅ |
| ≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
| ≥ | ≥ | ≥ | ⊂ | ⊂ | ⊂ | ⊃ | ⊃ | ⊃ |
| ⊄ | ⊄ | ⊄ | ⊆ | ⊆ | ⊆ | ⊇ | ⊇ | ⊇ |
| ⊕ | ⊕ | ⊕ | ⊗ | ⊗ | ⊗ | ⊥ | ⊥ | ⊥ |
| ⋅ | ⋅ | ⋅ | ⌈ | ⌈ | ⌈ | ⌉ | ⌉ | ⌉ |
| ⌊ | ⌊ | ⌊ | ⌋ | ⌋ | ⌋ | ◊ | ◊ | ◊ |
| ♠ | ♠ | ♠ | ♣ | ♣ | ♣ | ♥ | ♥ | ♥ |
| ♦ | ♦ | ♦ | |   | ¡ | ¡ | ¡ | |
| ¢ | ¢ | ¢ | £ | £ | £ | ¤ | ¤ | ¤ |
| ¥ | ¥ | ¥ | ¦ | ¦ | ¦ | § | § | § |
| ¨ | ¨ | ¨ | © | © | © | ª | ª | ª |
| « | « | « | ¬ | ¬ | ¬ | | ­ | ­ |
| ® | ® | ® | ¯ | ¯ | ¯ | ° | ° | ° |
| ± | ± | ± | ² | ² | ² | ³ | ³ | ³ |
| ´ | ´ | ´ | µ | µ | µ | " | " | " |
| < | < | < | > | > | > | ’ | ' |
2.5.3 段落格式
1) p段落标记
<p>段落标记</p>
2) nobr取消浏览器自动换行显示标记
<p><nobr>これ以上何をう失(し)なえば 心は许(ゆる)されるの どれ程(ほど)の痛(いた)みならば もう一度君に会(あ)える One more time 季节(きせつ)よ
うつろわないで One more time ふざけあった时间(じかん)よ くいちがうときはいつも 仆が先(さき)に折(お)れたね わがままな性格(せいかく)が
なおさら爱(いと)しくさせた</nobr></p>
<!--如果浏览器中单行文字的宽度过长，浏览器会自动将该文字换行显示，使用nobr强制禁用自动换行显示-->
3) br换行标记
<br />
4) pre保留原始排版方式标记
<pre>
a b
aaa bbb
</pre>
5) center居中对齐标记
<center>居中对齐</center>
6) blockquote向右缩进标记
<blockquote>向右缩进标记</blockquote>
2.5.4 水平线格式
1) hr水平线标记
<hr />
2) width, size水平线高度与宽度属性
<hr width="130" size="10" />
3) color水平线颜色属性
<hr color="#ff0000" />
4) align水平线对齐
<hr align="center" />
<!--有3种对齐方式，left, center, right-->
5) noshade去掉水平线阴影
<hr noshade="noshade" />
2.5.5 其他标记
1) ruby文字标注
<ruby>
被说明文字
<rt>
文字标注
</rt>
</ruby>
2) var声明变量
<p>定义变量就是给变量赋值</p>
定义变量的格式为:<br />
变量名：数值或表达式的值。<br />
其中符号":=" 是赋值符。
<p>如定义变量<var>x</var>的值为<var>y+6</var>可以表示为：</p>
<p><var>x</var>:=<var>y</var>+6</p>
3) address设置地址文字
任何问题请访问：<address>www.test.com</address>
