整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
用HTML怎么制作網(wǎng)頁呢?靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設(shè)計(jì) ? ,常用的網(wǎng)頁設(shè)計(jì)軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當(dāng)然不同軟件寫出的前端Html5代碼都是一致的。
一、網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
二、網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
三、網(wǎng)站素材方面：計(jì)劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
四、網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件;
五、網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作)。 其中： (1) html文件包含：其中index.html是首頁、其他html為二級頁面; (2) css文件包含：css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含：js實(shí)現(xiàn)動態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等(個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼)。
精品長文創(chuàng)作季#
JSP，全稱是Java Server Pages，中文含義是Java服務(wù)端頁面，它是一種用于動態(tài)網(wǎng)頁開發(fā)的技術(shù)，本質(zhì)上就是Servlet程序，只不過JSP是將Servlet中和HTML、CSS、JavaScript等界面相關(guān)的代碼單獨(dú)抽取出來，從而形成了JSP，下面就介紹一下JSP程序。
JSP是專門用于前端界面顯示的一個(gè)文件，為什么會出現(xiàn)JSP呢？？？首先我們來看下，JSP沒有出來之前，如果我們要使用Servlet程序編寫一個(gè)HTML界面，此時(shí)你會寫出下面的代碼：
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 {
// 響應(yīng)HTML內(nèi)容
response.setContentType("text/html;charset=UTF-8");
// 獲取輸出流
PrintWriter writer = response.getWriter();
// 輸出HTML內(nèi)容
writer.println("<!DOCTYPE html>");
writer.println("<html lang=\"en\">");
writer.println("<head>");
writer.println(" <meta charset=\"UTF-8\">");
writer.println(" <title>響應(yīng)HTML內(nèi)容</title>");
writer.println("</head>");
writer.println("<body>");
writer.println(" <h3>Hello World！你好，世界！</h3>");
writer.println("</body>");
writer.println("</html>");
// 關(guān)閉流
writer.close();
}
}從上面代碼中，可以看出來，開發(fā)一個(gè)HTML界面，需要使用writer輸出流，將HTML代碼拼接起來，通過HttpServletResponse響應(yīng)對象，返回給客戶端。
可想而知，這是多么復(fù)雜的事情，這還只是一個(gè)HTML界面，一個(gè)Web工程中有著幾十、幾百個(gè)HTML，那么通過這種編碼方式，一方面開發(fā)效率非常低，另一方面后期維護(hù)起來的時(shí)候，也是非常困難。
所以，為了解決這個(gè)問題，Sun公司就提出了一種新的動態(tài)網(wǎng)頁開發(fā)技術(shù)，也就是我們這里所學(xué)的JSP程序。
JSP是如何解決輸出HTML問題的呢？？？
我們這樣想一下，在上面的代碼中，大部分代碼都是使用writer.println()方法輸出HTML標(biāo)簽內(nèi)容，那么我們能不能將這一部分代碼單獨(dú)抽取出來，然后在程序運(yùn)行的時(shí)候，再把這些代碼嵌入到對應(yīng)的位置，最終拼接成一個(gè)完整的HTML返回給客戶端。
Sun公司就是采用了這種思想，將這些和HTML相關(guān)的代碼都單獨(dú)抽取了出來，將其單獨(dú)保存到一個(gè)以【.jsp】為后綴的文件里面，這個(gè).jsp文件就叫做JSP程序。Sun公司開發(fā)了一個(gè)JSP引擎程序，在程序運(yùn)行過程中，通過JSP引擎將對應(yīng)的jsp文件渲染成Servlet程序，最終將渲染的結(jié)果響應(yīng)給客戶端，這樣就實(shí)現(xiàn)了簡化Servlet的開發(fā)。
所以說，JSP程序本質(zhì)上就是Servlet程序，這是因?yàn)镴SP引擎會將我們訪問的JSP文件，渲染成Servlet程序，然后再執(zhí)行這個(gè)Servlet程序，從而完成客戶端的響應(yīng)處理。
創(chuàng)建JSP程序非常簡單，我們只需要創(chuàng)建一個(gè)以【.jsp】為后綴的文件，接著編寫相關(guān)的代碼即可。在IDEA中的web目錄下，創(chuàng)建一個(gè)HelloWorld.jsp文件，如下：
這樣就創(chuàng)建成功啦！！！啟動Tomcat容器，瀏覽器訪問http://localhost:8080/servlet/HelloWorld.jsp地址，看到下面內(nèi)容，那么第一個(gè)JSP程序就算完成啦。
PS：一般情況下，我們會將jsp文件保存在WEB-INF目錄下面，因?yàn)檫@個(gè)目錄下的文件是受保護(hù)的，瀏覽器不能直接訪問。
今天就到這里，未完待續(xù)~~
解如何在 JavaScript 中輕松創(chuàng)建腳本元素并為您的網(wǎng)頁添加豐富的功能。
在 JavaScript 中創(chuàng)建腳本元素：
考慮這個(gè)示例 HTML 標(biāo)記：
index.html
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body>
<div id="box"></div> <script src="index.js"></script>
</body>
</html>以下是我們?nèi)绾问褂?JavaScript 在 HTML 中創(chuàng)建腳本元素：
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() 方法創(chuàng)建一個(gè)由標(biāo)簽名稱指定的 HTML 元素并返回該元素。 通過傳遞一個(gè)腳本標(biāo)簽，我們創(chuàng)建了一個(gè)腳本元素。
const script = document.createElement('script');我們在 script 元素上設(shè)置 src 屬性來指定要加載的腳本文件。 我們使用 URL 指定遠(yuǎn)程文件，但我們也可以使用相對或絕對文件路徑指定本地文件。
// use local file
// script.src = 'script.js';script.src =
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';通過將 async 屬性設(shè)置為 true，瀏覽器不必在繼續(xù)解析 HTML 之前加載和評估腳本。 相反，腳本文件將被并行加載，以減少延遲并加快頁面的處理速度。
script.async = true;type 屬性指示文件是什么類型的腳本。 如果它是一個(gè) JavaScript 模塊，我們需要將 type 屬性設(shè)置為 module 來顯示它。
script.type = 'module';有關(guān) script 元素支持的所有屬性的完整列表，請?jiān)L問有關(guān) script 元素的 MDN 文檔。
我們監(jiān)聽 onload 事件，以便在腳本文件成功加載時(shí)執(zhí)行操作。
script.onload = () => {
console.log('Script loaded successfuly');
const box = document.getElementById('box');
box.textContent = 'The script has loaded.';
};我們監(jiān)聽 onerror 事件，以便在加載腳本出錯(cuò)時(shí)執(zhí)行不同的操作。
script.onerror = () => {
console.log('Error occurred while loading script');
};appendChild() 方法添加一個(gè) DOM 元素作為指定父元素的最后一個(gè)子元素。 通過在 document.body 上調(diào)用 appendChild()，我們將腳本文件添加到正文中。
document.body.appendChild(script);要將腳本文件添加到文檔的頭部，我們可以將 document.body 替換為 document.head。
document.head.appendChild(script);關(guān)注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
