整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          網(wǎng)站開發(fā)的步驟有哪些?

          網(wǎng)站開發(fā)的步驟有哪些?

          制作網(wǎng)站之前,我們想好網(wǎng)站的定位,對(duì)網(wǎng)站做好規(guī)劃,比如網(wǎng)站的目標(biāo)群體,想要展示型網(wǎng)站還是營(yíng)銷推廣型,網(wǎng)站的風(fēng)格定位,網(wǎng)站需要的欄目和功能這些都是我們?cè)诮ㄕ厩耙紤]好的,有了初步規(guī)劃之后就是網(wǎng)站的正式搭建了。

          網(wǎng)站開發(fā),其實(shí)也就是建站,流程如下:
          一、平臺(tái)規(guī)劃
          首先,申請(qǐng)網(wǎng)站域名和空間,.com是國(guó)際域名后綴,.cn是中國(guó)的域名。網(wǎng)站空間是用來存放網(wǎng)站內(nèi)容和程序文件的,比如網(wǎng)頁、圖片、視頻資料等。
          然后是網(wǎng)站的界面設(shè)計(jì),不同類型的網(wǎng)站設(shè)計(jì)頁也不一樣,建站前期需要做一個(gè)合理的規(guī)劃。
          二、程序開發(fā)
          當(dāng)頁面設(shè)計(jì)確定之后,頁面只是一張靜態(tài)的圖片,想要實(shí)現(xiàn)信息交互,方便用戶修改資料,還需要程序員去編寫網(wǎng)站程序的。(
          程序員分前后端
          前端程序員負(fù)責(zé)把設(shè)計(jì)好的頁面進(jìn)行切圖,然后布局,用代碼把頁面先進(jìn)行排版,讓頁面可以展示在網(wǎng)頁上,一般網(wǎng)頁上的交互效果也是由前端工程師負(fù)責(zé)的。
          后端程序員主要的工作就是編寫一個(gè)后臺(tái),方便用戶進(jìn)行管理和修改上傳資料。根據(jù)網(wǎng)站功能規(guī)劃進(jìn)行數(shù)據(jù)庫設(shè)計(jì)和代碼編寫,并進(jìn)行系統(tǒng)整合,將程序與界面結(jié)合,并實(shí)施功能性調(diào)試。
          后端的工程師只負(fù)責(zé)提供接口和數(shù)據(jù),專注于業(yè)務(wù)邏輯的實(shí)現(xiàn),前端取到數(shù)據(jù)后在瀏覽器中展示,各司其職。

          企業(yè)網(wǎng)站建設(shè)除了可以宣傳企業(yè)以外,更大的好處是可以開展電子商務(wù)。

          TML的作用

          HTML是用來開發(fā)網(wǎng)頁的,它是開發(fā)網(wǎng)頁的語言

          HTML的定義

          全稱HyperText Mark-up Language,超文本標(biāo)記語言

          標(biāo)記就是標(biāo)簽

          <標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等,標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。

          超文本 兩層含義:

          1. 因?yàn)榫W(wǎng)頁中還可以有圖片、視頻、音頻等內(nèi)容(超越文本限制)
          2. 它還可以在網(wǎng)頁中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁,與世界各地主機(jī)的網(wǎng)頁鏈接(超鏈接文本)

          HTML的基本結(jié)構(gòu)

          <!DOCTYPE html>
          <html>
              <head>
                  <meta charset="UTF-8">
                  <title>網(wǎng)頁標(biāo)題</title>
              </head>
              <body>
                  網(wǎng)頁顯示內(nèi)容
              </body>
          </html>

          第一行<!DOCTYPE html>是文檔聲明

          用來指定頁面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔

          <html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器

          整個(gè)網(wǎng)頁是從<html>這里開始的,到</html>結(jié)束

          也就是html文檔的開始和結(jié)束標(biāo)簽

          <head>...</head>標(biāo)簽用于定義文檔的頭部

          是負(fù)責(zé)對(duì)網(wǎng)頁進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的

          <body>...</body>標(biāo)簽是編寫網(wǎng)頁上顯示的內(nèi)容

          網(wǎng)頁文件的后綴是.html, 一個(gè)html文件就是一個(gè)網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁

          VS Code 安裝

          VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費(fèi)、開源的跨平臺(tái)代碼編輯器

          目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具

          下載網(wǎng)址: https://code.visualstudio.com/Download

          選擇對(duì)應(yīng)的安裝包進(jìn)行下載:

          安裝一切默認(rèn)

          VS Code 的插件安裝

          • Chinese(Simplified) Language Pack for VS Code 中文漢化包
          • open in browser 右擊在瀏覽器打開html

          常用的HTML標(biāo)簽

          1 標(biāo)簽不區(qū)分大小寫,但是推薦使用小寫

          2 根據(jù)標(biāo)簽的書寫形式,標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽,這種標(biāo)簽允許嵌套和承載內(nèi)容,比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成,沒有標(biāo)簽內(nèi)容, 比如: img標(biāo)簽

          標(biāo)簽的使用形式

          1. 成對(duì)出現(xiàn)的標(biāo)簽
          2. 標(biāo)簽的嵌套
          3. 單個(gè)出現(xiàn)的標(biāo)簽
          4. 帶屬性的標(biāo)簽


          列表標(biāo)簽

          1. 無序列表標(biāo)簽(ul標(biāo)簽)
          2. 有序列表標(biāo)簽(ol標(biāo)簽)

          網(wǎng)頁效果

          表格標(biāo)簽

          <table>標(biāo)簽:表示一個(gè)表格

          <tr>標(biāo)簽:表示表格中的一行

          <td>標(biāo)簽:表示表格中的列

          <th>標(biāo)簽:表示表格中的表頭

          屬性設(shè)置

          border: 1px solid black:設(shè)置邊框和顏色

          border-collapse: collapse:設(shè)置邊框合并



          網(wǎng)頁效果

          表單標(biāo)簽

          表單用于搜集不同類型的用戶輸入的數(shù)據(jù),然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

          <form>標(biāo)簽 表示表單標(biāo)簽,定義整體的表單區(qū)域

          一個(gè)表單中有很多信息組成,比如 姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來承載

          這些標(biāo)簽稱為表單元素標(biāo)簽

          網(wǎng)頁效果

          表單提交

          表單用于搜集不同類型的用戶輸入的數(shù)據(jù),然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

          • action屬性 設(shè)置表單數(shù)據(jù)提交地址
          • method屬性 設(shè)置表單提交的方式,一般有“GET”方式和“POST”方式, 不區(qū)分大小寫

          兩種方式的區(qū)別:

          • “GET”方式 : 沒有請(qǐng)求體
          • “POST”方式 : 有請(qǐng)求體

          表單元素屬性設(shè)置

          • name: 表單元素的名稱,用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
          • value: 表單元素的值,用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <meta http-equiv="X-UA-Compatible" content="ie=edge">

          <title>Document</title>

          </head>

          <body>

          <!--

          姓名 type="text" 定義單行文本輸入框

          密碼 type="password" 定義密碼輸入框

          性別 type="radio" 定義單選框

          愛好 type="checkbox" 定義復(fù)選框

          照片 type="file" 定義上傳文件

          個(gè)人描述 <textarea></textarea> 定義多行文本輸入框

          地址 <select></select> 定義下拉列表

          提交 type="submit" 定義提交按鈕

          重置 type="reset" 定義重置按鈕

          按鈕 type="button" 定義一個(gè)普通按鈕

          -->

          <form action="http://192.168.1.106:8080" method="POST">

          <label>姓名:</label>

          <input type="text" name="username" >

          <br>

          <label>密碼:</label>

          <input type="password" name="password">

          <br>

          <label>性別:</label>

          <input type="radio" name="sex" value="1">男

          <input type="radio" name="sex" value="0">女

          <br>

          <label>愛好:</label>

          <input type="checkbox" name="like" value="睡覺">睡覺

          <input type="checkbox" name="like" value="吃飯">吃飯

          <input type="checkbox" name="like" value="打豆豆">打豆豆

          <br>

          <label>照片:</label>

          <input type="file" name="pic">

          <br>

          <label>個(gè)人描述:</label>

          <textarea name="desc"></textarea>

          <br>

          <label>地址:</label>

          <select name="addr">

          <option value="1">北京</option>

          <option value="2">上海</option>

          <option value="3">廣州</option>

          <option value="4">深圳</option>

          </select>

          <br>

          <input type="submit" value="提交">

          <input type="reset" value="重置">

          <input type="button" value="按鈕">

          </form>

          </body>

          </html>


          點(diǎn)擊提交:

          可以看到服務(wù)器收到了請(qǐng)求報(bào)文。


          主站蜘蛛池模板: 人体内射精一区二区三区| 精品人妻少妇一区二区三区在线| 在线日产精品一区| 精品无码一区在线观看| 精品国产毛片一区二区无码| 78成人精品电影在线播放日韩精品电影一区亚洲 | 国产色综合一区二区三区| 国产成人精品亚洲一区 | 亚洲AV无码一区二区三区在线| 久久蜜桃精品一区二区三区| 国产精品一区二区久久不卡| 无码人妻精品一区二| 色综合久久一区二区三区| 久久国产精品一区二区| 精品视频一区二区三区四区五区| 美女免费视频一区二区三区| 亚洲一区二区三区成人网站| 波多野结衣在线观看一区| 免费一区二区三区四区五区| 一本一道波多野结衣一区| 国产精品无码一区二区三区免费| 成人无码精品一区二区三区| 国产精品一区二区香蕉| 全国精品一区二区在线观看| 无码精品人妻一区| 国产精品va无码一区二区| 亚洲色欲一区二区三区在线观看| 内射女校花一区二区三区| 亚洲狠狠久久综合一区77777| 亚洲乱码一区av春药高潮| 午夜视频在线观看一区二区| 一区二区三区免费高清视频| 国精无码欧精品亚洲一区| 在线观看国产一区二三区| 国产精品视频一区国模私拍| 国产vr一区二区在线观看| 日韩一区二区在线观看视频| 成人免费视频一区| 蜜桃传媒视频麻豆第一区| 怡红院一区二区三区| 伊人久久大香线蕉av一区|