初识 HTML

1、超文本记语言！

HyperText Markup Language，简称：HTML；是一种用于创建网页的标准标记语言。

2、什么是标记语言（markup language ）

• 由无数个标记（标签、tag）组成；
• 是对某些内容进行特殊的标记，以供其他解释器识别处理；
• 比如使用标记的文本会被识别为“标题”进行加粗、文字放大显示；
• 由标签和内容组成的称为元素（element）；

3、什么是超文本（ HyperText ）

• 表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
• 还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；

4、认识元素

• 元素是网页的一部分；
• 一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含；

HTML 有哪些元素

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

5、元素的组成

这个元素的主要部分有：

1. 开始标签（Opening tag）： 包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 ——在本例中即段落由此开始。
2. 结束标签（Closing tag）： 与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。
3. 内容（Content）： 元素的内容，本例中就是所输入的文本本身。
4. 元素（Element）： 开始标签、结束标签与内容相结合，便是一个完整的元素。

6、元素的属性

属性包含元素的额外信息，这些信息不会出现在实际的内容中。

一个属性必须包含如下内容：

1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格)。
2. 属性名称，后面跟着一个等于号。
3. 一个属性值，由一对引号“ ”引起来。

7、属性的分类

有些属性是公共的，每一个元素都可以设置

• 比如 class、id、title 属性

有些属性是元素特有的，不是每一个元素都可以设置

• 比如 meta 元素的 charset 属性、img 元素的 alt 属性等

8、单标签元素 – 双标签元素

双标签元素： html、body、head、h2、p、a；

<html></html>
<body></body>
<head></head>

单标签元素： br、img、hr、meta、input；

<br />
<img
	src=""
	alt=""
/>
<input type="text" />

注意： HTML 元素不区分大小写，但是推荐小写

9、元素的结构总结

10、元素的嵌套关系

某些元素的内容除了可以是文本之外，还可以去其他元素，这样就形成了元素的嵌套

<ul>
	<li>
		<div>
			<span>第一段文字</span>
			<span>第二段文字</span>
			<span>第三段文字</span>
		</div>
		<div></div>
		<div></div>
	</li>
</ul>

11、HTML 的注释

<html>
	<head></head>
	<body>
		<!-- 注释内容 -->
		<!-- <h2>这是一个h2标题</h2> -->
	</body>
</html>