WEB编程（四）HTML页面框架搭建

最新推荐文章于 2024-05-01 20:18:25 发布

liuhelong

最新推荐文章于 2024-05-01 20:18:25 发布

阅读量907

点赞数

分类专栏： WEB编程

本文链接：https://blog.csdn.net/liuhelong/article/details/104435775

版权

WEB编程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前景回顾

上一篇我们介绍的是使用的开发工具，从这篇开始，我们就正式进入WEB编程的编程阶段。

HTML¹是什么

HTML¹称为超文本标记语言，是一种标识性的语言。

正常我们在打开网页时有以下几个步骤：

在电脑上打开浏览器（Chrome、Safari或IE、Firefox等）
在浏览器的地址框中输入网址（通过导航页或黄页的，是网页自动帮我们输入了网址）
然后网页就显示出来了

在这期间电脑都干啥了呢？
请看下图：
在这里插入图片描述
浏览器就是专门用来解析并显示HTML内容的工具。

创建HTML页面

用VSCode，打开我们已经创建好的"Works"文件夹
在这里插入图片描述
新建一个名字叫“baidu.html"的文件

学习HTML我们第一个要记住的标签是”注释”²，要知道注释的写法³，要养成写注释的好习惯。
下面这段代码，就是HTML页面的基本结构，HTML的固定写法（注释除外，不是每行都需要注释的）。

<!--这是一段注释。注释不会在浏览器中显示。-->

<!--声明html版本，固定写法-->
<!DOCTYPE html> 
<!--根标签，所有的网页内容都编写在html标签内，固定定法-->
<html>
    <!--头标签，这里面是给浏览器使用的，像加载一些资源，处理一些预设项目-->
    <head>
        <!--设置网页的标题-->
        <title>模拟百度页面</title>
    </head>
    <!--内容区域，给用户看的东西，都写在这个里面-->
    <body>
        Hello World !
    </body>
</html>

在这里插入图片描述

运行HTML页面

为了方便运行HTML，我们先给VSCode安装个组件"open in browser“
在这里插入图片描述
安装完成后，回到我们的文档视图，运行HTML文件

运行效果如下：
在这里插入图片描述

到这里，我就完成了HTML页面创建和运行环境的配置，并正确运行输出了HTML内容。

在下一章，我们就介绍一些常用的HTML标签⁴，最终是以实现百度首页的效果为目的。

liuhelong

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WEB编程（四）HTML页面框架搭建

目录WEB编程（一）前言学习目标WEB编程（二）拆解目标，分析页面结构WEB编程（三）使用工具准备介绍WEB编程（四）HTML页面框架搭建WEB编程（五）CSS页面装修优化WEB编程（六）JS页面动态效果控制前景回顾上一篇我们介绍的是使用的开发工具，从这篇开始，我们就正式进入WEB编程的编程阶段。HTML1是什么HTML1称为超文本标记语言，是一种标识性的语言。正常我们在...
复制链接

扫一扫