HTML 快速入门

HTML 快速入门

本节的主要内容是帮助大家编写第一个 HTML 文件,类似于其它语言的 Hello World,目的是快速让你熟悉 HTML 页面的编写流程。不过在编写 HTML 文件之前,你需要两个先安装两个东西,一个是文本编辑器,另一个则是电脑必备的浏览器。

文本编辑器主要是编写 HTML 代码,当然 Windows 自带的笔记本也可以写,但是因为没有语法高亮和错误提示,编写代码的时候非常容易犯错,特别是大部分浏览器对于 HTML 的错误容忍特别强,很有可能你显示的效果和最终效果一样,但是编写的代码却包含很多错误。

如果你没有接触过任何编程开发,学习 HTML 个人推荐安装微软出品的 vscode,当然这不是强制的,看个人喜好。浏览器大家电脑上肯定都有,之所以用浏览器是因为你要检查最后的显示效果,默认情况下,咱们编写完 HTML 代码,可以直接将代码文件拖到浏览器上,现代浏览器一般都支持本地文件解析,这里推荐 Chrome 浏览器,同样的你也可以使用其它浏览器。

创建 HTML 第一步,打开你自己的文本编辑器,我这里使用的是 vscode,新建并创建一个后缀名为 .html 的文本文件:

vscode 文本编辑器

HTML 语言推荐的文件扩展名是 .html.htm ,如果的文件是这两个扩展名中的一个,用 vscode 打开的时候,它会自动识别,并启动语法解析,进行默认的高亮提示。如果你没用这两个后缀名,那么你需要手动告诉 vscode 编辑器,启动 HTML 语法高亮,具体在右下角,在弹出的选择中,选择 HTML 选项:

语法高亮

输入第一个页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!<p>
</body>
</html>

ctrl + s 保存当前文件。在磁盘上找到该文件:

HTML 页面

如果你的后缀名正确,默认情况下会显示默认浏览器图标,可以直接双击打开。如果你想用另外的浏览器打开,可以右键选择额外的打开方式,或者将文件拖放到想要打开文件的浏览器即可。最终的显示效果如下:

页面显示效果

效果出来了,我们简单的解释一下代码:

首行的 <!DOCTYPE html> 是文档的类型声明,这里表明此文档是 HTML5 文档,它不区分大小写。

接下来是 <html> 标签,在 HTML 中每个标签都是由尖括号括起来的,并且一组完整的标签包括打开和关闭两个部分:<html>……</html>,二者是一对,标签内部包含的是完整 HTML 文档内容。当前 html 标签包含了一个属性 lang ,该属性表明文档内容的语言是英语,如果是中文,可以写 zh-CN

接下来是 <head> 标签,用于标记文档的头部,提供文档的信息。这里文档头部内部定义了一个文档标题标签,而标题的内容会显示在浏览器的 tab 标签内。

最后是 <body> 标签,主要包含最终浏览器的呈现内容,包括文字、表格、图片、视频等内容。这里仅仅包含了一个段落标签 <p>

要学习 HTML,其实就是掌握这些常用的标签即可,接下来咱们就详细的讲一讲 HTML 涉及的具体内容。

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top