HTML 基础教程(第一章)

#创作灵感#

    ·想到了自己之前学过HTML

    ·让更多人认识HTML


目录

一.什么是HTML

二.有趣的HTML标签

三.HTML 文档 = 网页

试一下你的第一个HTML文档:

不知道怎么编辑?

怎么改后缀名?

四.使用 Notepad 或 TextEdit 来编写 HTML

步骤一.启动记事本

步骤二:用记事本来编辑 HTML

​编辑

步骤三:保存 HTML

步骤四:在浏览器中运行这个 HTML 文件

 ​编辑

五.基本的 HTML 标签 - 四个实例

HTML 标题

HTML 段落

HTML 链接

HTML 图像

六.HTML 元素

HTML 元素语法

嵌套的 HTML 元素

HTML 实例解释

元素:

元素:

元素:

不要忘记结束标签

空的 HTML 元素

HTML 提示:使用小写标签

第一章.End


一.什么是HTML

HTML 是用来描述网页的一种语言。

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

二.有趣的HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

三.HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

试一下你的第一个HTML文档:

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

例子解释:

1.<html>与</html>之间的文本描述网页

2.<body> 与 </body> 之间的文本是可见的页面内容

3.<h1>与</h1>之间的文本被显示为标题

4.<p1>与</p1>之间的内容被显示为段落

不知道怎么编辑?

没关系,使用windows自带的记事本就可以 ,你也可以使用Visual Studio Code等专业工具

怎么改后缀名?

1.保存为NASI格式

2.打开任意一个文件夹

3.点查看 > 选项 > 查看,最后在高级设置里找到“隐藏已知的文件拓展名”勾掉皆可

看看,多了什么? 

四.使用 Notepad 或 TextEdit 来编写 HTML

可以使用专业的 HTML 编辑器来编辑 HTML:

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor

不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法。

通过记事本,依照以下四步来创建您的第一张网页。

步骤一.启动记事本

如何启动记事本:

开始
    所有程序
        附件
            记事本


步骤二:用记事本来编辑 HTML

在记事本中键入 HTML 代码:

<!doctype html>
<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>


步骤三:保存 HTML

在记事本的文件菜单选择“另存为”。

当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。

在一个容易记忆的文件夹中保存这个文件


步骤四:在浏览器中运行这个 HTML 文件

启动您的浏览器,然后选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双击您的 HTML 文件。

结果应该类似这样:

 

五.基本的 HTML 标签 - 四个实例

本章通过实例向您演示最常用的 HTML 标签。

提示:不要担心本章中您还没有学过的例子,您将在下面的章节中学到它们。


HTML 标题

HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.baidu.com.cn">This is a link</a>

注释:在 href 属性中指定链接的地址。

(您将在本教程稍后的章节中学习更多有关属性的知识)。


HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

<img src="image.jpg" width="104" height="142" />

注释:图像的名称和尺寸是以属性的形式提供的。

六.HTML 元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

开始标签元素内容结束标签
<p>This is a paragraph</p>
<a href="default.htm" >This is a link</a>
<br />

 注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。


HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

HTML 文档由嵌套的 HTML 元素构成。

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

上面的例子包含三个 HTML 元素。

HTML 实例解释

<p> 元素:

<p>This is my first paragraph.</p>

这个 <p> 元素定义了 HTML 文档中的一段落。

这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。

元素内容是:This is my first paragraph。

<body> 元素:

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。

元素内容是另一个 HTML 元素(p 元素)。

<html> 元素:

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>。

元素内容是另一个 HTML 元素(body 元素)。


不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<p>This is a paragraph
<p>This is a paragraph

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注释:未来的 HTML 版本不允许省略结束标签


空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。


HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

第一章.End

  • 21
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值