初识HTML

HTML基础架构

1.什么是HTML?

1
2
3
4
5
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2.HTML标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 `<html>`
HTML 标签通常是成对出现的,比如`<p>` 和`</p>`
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
标签就是上面这些< head>、< body>、< table> 等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的,如< table>< /talbe>、< form>< /form>。标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签;当然还有少部分不是成对出现的,如< br>、< hr>等。标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
提前介绍什么是元素(对比)
很多人可能都没有把哪个叫标签,哪个叫元素这个概念搞清楚,学了一直都是混淆着。 为了避免这样的悲剧再发生,我在这里就提前区别,事实上两者之间的概念还是很清楚的
HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。
比如< p>这就是一个标签;< p>内容< /p>这就是一个元素,也就是说元素由一个开始的标签和结束的标签组成,用来包含某些内容;这里有一个值得注意的例外,即< br/>本身既是开始标签也是结束标签,但不包含任何内容,所以这只是个标签。
这里是为了避免概念与标签混乱先简单提一下。

3.HTML 文档 = 网页

1
2
3
4
5
6
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:
<html>
<body>

4.看下面一段代码

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

4.1 <!DOCTYPE html>

DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

4.2

咱们还需要告诉浏览器,咱们的界面使用的语言是什么类型的? en –> English.

4.3 标签

元素是所有头部元素的容器。 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

以下标签都可以添加到 head 部分:<link>、<meta>、<script>、<title>

4.4

几乎大部分 HTML 元素都是写在 body 中的,例如我们最常用的<div>、<a>、<p>、<h1>~<h6>这里暂时不细说这些标签,后面会一一说到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!-- 注释 -->
<!-- ctrl + / -->
<!--
注释主要是为了开发人员书写方便,
让你在后期从新回顾代码的时候,
可以快速的想起来当时是如何去处理的
总结就一句话:注释是给人看的
-->
<!-- 保存: ctrl + s -->
<!-- 新建: ctrl + n -->
<!-- 文档头(类型)声明 -->
<!-- 代表的是 HTML 5 的标准 -->
<!-- 文档头声明 不是标签 -->
<!DOCTYPE html>
<!-- 定义 HTML 的根元素 -->
<!--
所有的 HTML 代码全部是书写在 根元素当中的
-->
<html>
<!-- 头部 -->
<!--
里面包含绝大部分内容都是
不可见的,
里面的内容主要用于辅助页面的展示
-->
<head>
<!--
title : 双
定义页面标题
-->
<title>李先生真帅</title>
<!--
meta : 单
定义页面的元数据
属性:
charset
针对搜索引擎和
解析格式的属性
-->
<meta charset="utf-8">
</head>
<!--
里面包含的绝大部分在页面中都是
可见的,主要用于搭建 HTML 结构
-->
<body>
<!-- 历史上最最最常用的标签 -->
<div></div>
<!--
div : 双
无意义
-->
</body>
</html>
<!--
div 是 body 的子元素
body 是 div 的父元素
div 和 body 就是父子关系
head 和 body 是兄弟关系
如果是父子关系,
一定要使用 tab 去进行标记
可以使用
ctrl + [ 左移
ctrl + ] 右移
-->