什么是 HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:
<html>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
实例解释
- <html> 与 </html> 之间的语句描述网页
- <body> 与 </body> 之间的语句是能看见的页面的内容
- <h1> 与 </h1> 之间的语句被显示为标题
- <p> 与 </p> 之间的语句被显示为段落
HTML编辑器
使用 Notepad 来编写 HTML
我们可以使用专业的 HTML 编辑器来编辑 HTML:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
不过,我们现在都是初学者,所以推荐大家使用文本编辑器来学习 HTML,比如 Notepad (Windows)。我认为,使用一款简单易懂的文本编辑器是我们通向HTML大师的第一步。
通过记事本,依照以下四步来创建我们的第一张网页。
步骤一:创建一个txt后缀名的文件
类似这样:
步骤二:用此文件编辑HTML
步骤三:在记事本的文件菜单选择“另存为”
当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。
在一个容易记忆的文件夹中保存这个文件。
步骤四:运行这个文件
HTML基础
HTML标题
HTML的标题是通过<h1>-<h6>等标签进行定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
<p>这是一个段落</p>
<p>这是一个段落</p>
HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
<a href="https://www.csdn.net/">这是一个网站链接</a>
HTML 元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
开始标签 | 元素内容 | 结束标签 |
---|---|---|
<p> | 这是一个段落 | </p> |
<a href="HTML初学.html"> | 这是一个网站链接 | </a> |
<h1> | 这是一个标题 | </h1> |
HTML 元素语法
- HTML 元素以开始标签开始
- HTML 元素以结束标签结束
- 元素的内容是开始标签与结束标签之间的内容
- 有些 HTML 元素具有空的空间
- 空元素在开始标签中进行关闭
- 大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。
<html>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
这个文档一共有4个元素
HTML 实例解释
<h1>元素:
<h1>这是一个标题</h1>
这个 <h1> 元素定义了 HTML 文档中的一个标题。
这个元素拥有一个开始标签 <h1>,以及一个结束标签 </h1>。
元素内容是:这是一个标题。
<p> 元素:
<p>这是一个段落</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。
元素内容是:这是一个段落。
<body> 元素:
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。
元素内容是另外几个 HTML 元素(p,h 元素)。
<html> 元素:
<html>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>。
元素内容是另一个 HTML 元素(body 元素)。
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
HTML 属性
HTML 标签可以拥有属性。
属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:href="HTML初学.html"。
属性总是在 HTML 元素的开始标签中规定
属性实例
实例1:
<html>
<body>
<h1 align="center">这是标题</h1>
<p>上面的标题在页面中居中.上面的标题在页面中居中.上面的标题在页面中居中.上面的标题在页面中居中</p>
</body>
</html>
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的信息。
实例2:
<html>
<body bgcolor="green">
<h1 align="center">这是标题</h1>
<p>上面的标题在页面中居中,上面的标题在页面中居中,上面的标题在页面中居中,上面的标题在页面中居中,上面的标题在页面中居中</p>
</body>
</html>
<body bgcolor="green">这句语句可以使页面的背景颜色变成绿色。
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<html>
<body>
<p>这是个段落</p>
<hr />
<p>这是个段落</p>
<hr />
<p>这是个段落</p>
<hr />
</body>
</html>
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释是这样写的:
<!-- 这是注解 -->
HTML标签参考:
标签 | 描述 |
---|---|
<html> | 定义HTML文档 |
<h1> | 定义HTML文档标题 |
<hr /> | 定义水平线 |
<body> | 定义文档的主题 |
<!-- .... --> | 定义注解 |
HTML 折行
如果我们希望在不产生一个新段落的情况下进行换行(新行),可以使用 <br /> 标签:
<p>这是<br />一个<br />段落</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
这是本蒟蒻第一次发表文章,请各位大佬轻点批评。