用HTML怎么制作网页呢？

　用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ‍ ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的。

　　一、网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

　　二、网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

　　三、网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

　　四、网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

　　五、网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。其中： (1) html文件包含：其中index.html是首页、其他html为二级页面; (2) css文件包含：css全部页面样式,文字滚动, 图片放大等; (3) js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

精品长文创作季#

JSP，全称是Java Server Pages，中文含义是Java服务端页面，它是一种用于动态网页开发的技术，本质上就是Servlet程序，只不过JSP是将Servlet中和HTML、CSS、JavaScript等界面相关的代码单独抽取出来，从而形成了JSP，下面就介绍一下JSP程序。

1.1、JSP的本质

JSP是专门用于前端界面显示的一个文件，为什么会出现JSP呢？？？首先我们来看下，JSP没有出来之前，如果我们要使用Servlet程序编写一个HTML界面，此时你会写出下面的代码：

package com.gitcode.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * @version 1.0.0
 * @Date: 2024/2/10 20:20
 * @Author ZhuYouBin
 * @Description:
 */
public class HtmlResponseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 响应HTML内容
        response.setContentType("text/html;charset=UTF-8");
        // 获取输出流
        PrintWriter writer = response.getWriter();

        // 输出HTML内容
        writer.println("<!DOCTYPE html>");
        writer.println("<html lang=\"en\">");
        writer.println("<head>");
        writer.println("    <meta charset=\"UTF-8\">");
        writer.println("    <title>响应HTML内容</title>");
        writer.println("</head>");
        writer.println("<body>");
        writer.println("    <h3>Hello World！你好，世界！</h3>");
        writer.println("</body>");
        writer.println("</html>");

        // 关闭流
        writer.close();
    }
}

从上面代码中，可以看出来，开发一个HTML界面，需要使用writer输出流，将HTML代码拼接起来，通过HttpServletResponse响应对象，返回给客户端。

可想而知，这是多么复杂的事情，这还只是一个HTML界面，一个Web工程中有着几十、几百个HTML，那么通过这种编码方式，一方面开发效率非常低，另一方面后期维护起来的时候，也是非常困难。

所以，为了解决这个问题，Sun公司就提出了一种新的动态网页开发技术，也就是我们这里所学的JSP程序。

JSP是如何解决输出HTML问题的呢？？？

我们这样想一下，在上面的代码中，大部分代码都是使用writer.println()方法输出HTML标签内容，那么我们能不能将这一部分代码单独抽取出来，然后在程序运行的时候，再把这些代码嵌入到对应的位置，最终拼接成一个完整的HTML返回给客户端。

Sun公司就是采用了这种思想，将这些和HTML相关的代码都单独抽取了出来，将其单独保存到一个以【.jsp】为后缀的文件里面，这个.jsp文件就叫做JSP程序。Sun公司开发了一个JSP引擎程序，在程序运行过程中，通过JSP引擎将对应的jsp文件渲染成Servlet程序，最终将渲染的结果响应给客户端，这样就实现了简化Servlet的开发。

所以说，JSP程序本质上就是Servlet程序，这是因为JSP引擎会将我们访问的JSP文件，渲染成Servlet程序，然后再执行这个Servlet程序，从而完成客户端的响应处理。

1.2、创建JSP程序

创建JSP程序非常简单，我们只需要创建一个以【.jsp】为后缀的文件，接着编写相关的代码即可。在IDEA中的web目录下，创建一个HelloWorld.jsp文件，如下：

这样就创建成功啦！！！启动Tomcat容器，浏览器访问http://localhost:8080/servlet/HelloWorld.jsp地址，看到下面内容，那么第一个JSP程序就算完成啦。

PS：一般情况下，我们会将jsp文件保存在WEB-INF目录下面，因为这个目录下的文件是受保护的，浏览器不能直接访问。

今天就到这里，未完待续~~

解如何在 JavaScript 中轻松创建脚本元素并为您的网页添加丰富的功能。

在 JavaScript 中创建脚本元素：

使用 document.createElement() 方法创建脚本元素。
将元素对象的 src 属性设置为脚本文件。
使用 appendChild() 方法在 HTML 中包含脚本元素。

考虑这个示例 HTML 标记：

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

以下是我们如何使用 JavaScript 在 HTML 中创建脚本元素：

index.js

const script = document.createElement('script');// use local file
// script.src = 'script.js';script.src =
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';script.async = true;// make code in script to be treated as JavaScript module
// script.type = 'module';script.onload = () => {
  console.log('Script loaded successfuly');
  const box = document.getElementById('box');
  box.textContent = 'The script has loaded.';
};script.onerror = () => {
  console.log('Error occurred while loading script');
};document.body.appendChild(script);

document.createElement() 方法创建一个由标签名称指定的 HTML 元素并返回该元素。通过传递一个脚本标签，我们创建了一个脚本元素。

const script = document.createElement('script');

我们在 script 元素上设置 src 属性来指定要加载的脚本文件。我们使用 URL 指定远程文件，但我们也可以使用相对或绝对文件路径指定本地文件。

// use local file
// script.src = 'script.js';script.src =
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';

通过将 async 属性设置为 true，浏览器不必在继续解析 HTML 之前加载和评估脚本。相反，脚本文件将被并行加载，以减少延迟并加快页面的处理速度。

script.async = true;

type 属性指示文件是什么类型的脚本。如果它是一个 JavaScript 模块，我们需要将 type 属性设置为 module 来显示它。

script.type = 'module';

有关 script 元素支持的所有属性的完整列表，请访问有关 script 元素的 MDN 文档。

我们监听 onload 事件，以便在脚本文件成功加载时执行操作。

script.onload = () => {
  console.log('Script loaded successfuly');
  const box = document.getElementById('box');
  box.textContent = 'The script has loaded.';
};

我们监听 onerror 事件，以便在加载脚本出错时执行不同的操作。

script.onerror = () => {
  console.log('Error occurred while loading script');
};

appendChild() 方法添加一个 DOM 元素作为指定父元素的最后一个子元素。通过在 document.body 上调用 appendChild()，我们将脚本文件添加到正文中。

document.body.appendChild(script);

要将脚本文件添加到文档的头部，我们可以将 document.body 替换为 document.head。

document.head.appendChild(script);

关注七爪网，获取更多APP/小程序/网站源码资源！

在线咨询

上一篇：HTML progress标签怎么用？progress标签的属性介绍
下一篇：前端学习随笔2 在线简历

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

用HTML怎么制作网页呢？

1.1、JSP的本质

1.2、创建JSP程序

您的项目需求