WEB基础之：HTML文档的基本结构
HTML文档的基本结构
-
- 1. HTML文档的基本结构
- 2. HTML头部标记
-
- 2.1 < title> 标题标记
- 2.2 < meta>元信息标记
- 2.3 < base>基底网址标记
- 2.4 < body>页面的主体标记
- 2.5 文本内容标记
-
- 2.5.1 标题格式
- 2.5.2 文本字体格式
-
- 注：特殊符号代码
- 2.5.3 段落格式
- 2.5.4 水平线格式
- 2.5.5 其他标记
1. HTML文档的基本结构
1) : 文档类型声明（Document Type Declaration,DTD）
表示该文档是HTML，在HTML5中声明如下：
2) <html> 文档开始标签
表示该文档是以HTML编写的。首标签<html>与尾标签html>分别位于文档的最前面和最后面，文档中的所有内容包含和HTML标签都包含在其中。
3) <head> 文档头部标签
表示网页头部，放置关于HTML文档的信息。
4) <title> 文档标题标签
表示网页的名称同时作为窗口的名称显示在网页窗口的最上方。
5) <body> 文档主体标签
放置网页中的主体内容
6) 示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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="具体关键字">
2) 设置页面描述
<meta name="description" content="对页面描述">
3) 设置编辑工具
<meta name="generator" content="编辑软件名称">
4) 设置作者信息
<meta name="author" content="作者名称">
5) 限制搜索方式
<meta name="robots" content="搜索方式">
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="Sat, 24 October 2020 10:10:00 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)">
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" >
2.5 文本内容标记
2.5.1 标题格式
1) <H>标题字标记
<h1>1-6级标题h1>
2) align标题文字对齐
<h1 align="center">1级标题h1>
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>
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" />
5) noshade去掉水平线阴影
<hr noshade="noshade" />
2.5.5 其他标记
1) ruby文字标注
被说明文字
2) var声明变量
定义变量就是给变量赋值
定义变量的格式为:
变量名：数值或表达式的值。
其中符号":=" 是赋值符。
如定义变量x的值为y+6可以表示为：
x:=y+6
3) address设置地址文字
任何问题请访问：www.test.com