初學JS必會的10種JavaScript代碼優雅寫法

我們剛開始學習JS代碼時，我們只需要掌握JS中對應知識點就好，隨著對JS代碼的熟悉程度，我們就要思考如何寫出更優雅，更簡潔的代碼。

接下來我分享10種常用JS代碼功能，通過常規寫法和優雅寫法的對比，來體現其優雅和簡潔性。代碼中用了ES6新特性，如果你對ES6不了解，可以先收藏好。在后期的VUE中，基本都在和ES6打交道。

1、數組合并

常規寫法

利用concat方法來合并數組

const apples = ["紅蘋果", "綠蘋果"];
const fruits = ["西瓜", "草莓", "葡萄"].concat(apples);
console.log(fruits); // ['西瓜', '草莓', '葡萄', '紅蘋果', '綠蘋果']

優雅寫法

利用ES6中的...擴展運算符來合并數組

const apples = ["紅蘋果", "綠蘋果"];
const fruits = ["西瓜", "草莓", "葡萄", ...apples];
console.log(fruits);//['西瓜', '草莓', '葡萄', '紅蘋果', '綠蘋果']

2、數組中取值

常規寫法

利用數組下標一個一個從數組中取數據

const num = [1, 2];
const num1 = num[0];
const num2 = num[1];
console.log(num1, num2); //1 2

優雅寫法

利用ES6的解構賦值來取值

const num = [1, 2];
const [num1, num2] = num;
console.log(num1, num2);

3、對象取值

常規寫法

對象.屬性名的方式獲取屬性值

const user = {
   name: "張三",
   age: 30,
};
const name = user.name;
const age = user.age;
console.log(name, age);//"張三" 30

優雅寫法

利用ES6的解構賦值來實現

const user = {
   name: "張三",
   age: 30,
};
const { name, age } = user;
console.log(name, age); // 張三 30

4、數組循環

常規寫法

利用for循環來遍歷數組，從而取值

const fruits = ["西瓜", "草莓", "葡萄", "蘋果"];
for (let i = 0; i < fruits.length; i++) {
   console.log(fruits[i]);
}

優雅寫法

利用ES6的for ... of來遍歷數組取值

const fruits = ["西瓜", "草莓", "葡萄", "蘋果"];
for (fruit of fruits) {
   console.log(fruit);
}

5、回調函數

常規寫法

forEach中回調函數為普通函數

const fruits = ["西瓜", "草莓", "葡萄", "蘋果"];
fruits.forEach(function (fruit) {
   console.log(fruit); //西瓜 草莓 葡萄 蘋果
});

優雅寫法

forEach中回調函數為箭頭函數，如果箭頭函數中只有一句代碼，則可以省略{ }

const fruits = ["西瓜", "草莓", "葡萄", "蘋果"];
fruits.forEach((fruit) => console.log(fruit)); //西瓜 草莓 葡萄 蘋果

6、數組搜索

常規寫法

數組中保存著每一條水果的信息，我們通過輸入水果名，到數組中查找到對應的信息。

利用常規的for循環遍歷來查找。

const fruits = [
  { name: "蘋果", order: 1 },
  { name: "李子", order: 4 },
  { name: "香蕉", order: 2 },
];
function getApples(arr, value) {
   for (let index = 0; index < arr.length; index++) {
       if (arr[index].name === value) {
           return arr[index];
      }
  }
}
const result = getApples(fruits, "蘋果");
console.log(result); // { name: "蘋果", order: 1 }

優雅寫法

利用數組的find方法來實現搜索

const fruits = [
  { name: "蘋果", order: 1 },
  { name: "李子", order: 4 },
  { name: "香蕉", order: 2 },
];
function getApples(arr, value) {
   return arr.find((obj) => obj.name === value);
}
const result = getApples(fruits, "李子");
console.log(result);

7、字符串轉換為數字

常規寫法

利用parseInt來實現

const num = parseInt("10");
console.log(num,typeof num); // 10   "number"

優雅寫法

利用+ 號來實現，不過只針對純數字的字符串有效

const num = +"10";
console.log(num,typeof num); //=> 10   "number"
console.log(+"10" === 10); // true;

8、null值初始化

常規寫法

通過if判斷，如果為null，則初始化值為“普通用戶”

//獲取用戶角色
function getUserRole(role) {
   let userRole;
   if (role) {
       userRole = role;
  } else {
       userRole = "普通用戶";
  }
   return userRole;
}
console.log(getUserRole()); //普通用戶
console.log(getUserRole("管理員")); //管理員

優雅寫法

通過 || 或短路運算符來實現

function getUserRole(role) {
   return role || "普通用戶"; // 默認值定義的常見方法
}
console.log(getUserRole()); // "普通用戶"
console.log(getUserRole("管理員")); // "管理員";

9、字符串拼接

常規寫法

const name = "張三";
const age = 23;
const message = "大家好,我叫" + name + "今年" + age + "歲了！";
console.log(message); //大家好，我叫張三，今年23歲了！

優雅寫法

const name = "張三";
const age = 23;
const message = `大家好，我叫${name}，今年${age}歲了！`;
console.log(message); // Hi DevPoint!

10、對象合并

常規寫法

利用for循環來遍歷

const employee = { name: "張三", age: 30 };
const salary = { grade: "A" };
const summary = salary; //用來做合并后對象
for (const key in employee) {
   summary[key] = employee[key];
}
console.log(summary); // {grade: 'A', name: '張三', age: 30}

優雅寫法

利用es6的擴展運算符和解構賦值來實現

const employee = { name: "張三", age: 30 };
const salary = { grade: "A" };
const summary = { ...employee, ...salary };
console.log(summary); // { name: '張三', age: 30, grade: 'A' }

最后我想告訴大家一個好消息，為了幫助關注我的同學，我們創建了《30天挑戰學習計劃》，全程免費，不涉及任何費用和利益，具體內容為以下4部分

1、HTML5+CSS3核心知識

2、30個HTML5+CSS3案例

3、2個PC+移動+響應式綜合項目實戰

4、網站全面上云部署與發布

接下來我來詳細介紹下這個課程體系！

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，云服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，并給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

種包管理器到ESLint，從CommonJS到AMD，再從ES6模塊到Babel和Webpack，好多工具啊！

好累……

是的，今天我覺得很疲勞。我不禁想，我本應該繼續我的銷售職業，不應該抄近路做前端開發。但我意識到，前端開發是給勇敢者準備的，而勇敢者絕不會放棄，他們才是人生贏家。

所以我決定做人生贏家，我要寫點東西給前端開發和工具鏈疲勞的受害者們看。我要寫一下我是怎樣將初學者級別的代碼變成令人贊嘆的產品級代碼的，以及這個過程中我用到的工具。

現在開始吧！

我們在做的東西

其實沒什么令人激動的東西。我們做了個Web應用，從某個API讀取一些隨機的用戶，然后顯示在前端上。它沒有路由的能力。本文的最終目標是讓你熟悉前端的工具鏈。

我們的AngularJS代碼中沒有使用樣板代碼，所以我們不會被CLI的那些黑科技搞得暈頭轉向。注意我用的是AngularJS，不是Angular。使用AngularJS的原因是我找不到任何關于AngularJS工具鏈和打包的文章。

首先在根目錄下建一個index文件。

<html>

<head>

<title>Random User!</title>

</head>

<body>

<h1 class="text-center">Random User!</h1>

</div>

</body>

</html>

中規中矩的老式代碼。這段代碼從CDN上加載AngularJS文件和一個最小化的CSS框架，然后開始一點點編寫JavaScript代碼并添加到index中。

但隨著應用程序的增長，我們有必要跟蹤所有的依賴（這里的依賴就是Angular）。

使用包管理器

許多人使用包管理器跟蹤項目所需的依賴的版本。包管理器的最大賣點就是，它會訪問依賴的GitHub主頁，下載到你的文件夾里，并且跟蹤下載的版本。這樣可以保證，移動代碼位置或者下載其他版本的依賴不會造成代碼無法工作。

代碼管理器有過duojs、jspm、bower、npm，現在還有Yarn。現在去裝一個yarn，我們稍后會用到。

向應用程序里添加依賴時，yarn會下載所需的文件，并保存到node_modules文件夾中。之后，需要用到依賴時，可以在index文件里引入：

裝好這個后，我們再往根目錄下添加app.js、userController.js和userFactory.js文件，然后全都鏈接到index文件里。

/**

* /app.js

var app = angular.module("RandomApp", []);

// /userFactory.js

app.factory("UserF", function($http) {

var UserF = {};

UserF.getUsers = function(){

return $http({

method: 'GET',

url: 'https://www.reqres.in/api/users',

})

};

return UserF;

});

// /userController.js

app.controller("userController", function($scope, UserF){

$scope.users = [];

UserF.getUsers()

.then(function(res) {

$scope.users = res.data.data;

})

});

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>Random User!</title>

</head>

<body>

<h1 class="text-center">Random User!</h1>

</div>

<div class="card-title h5">{{user.first_name}} {{user.last_name}}</div>

</div>

</body>

</html>

index越來越大了。他遇到了他自己的問題。他的手心開始出汗，膝蓋發軟，胳膊也越來越沉重……

這種方式的問題

所有的script標簽必須按照固定的順序。app.js生成app，然后附加到全局的window對象上。這個app變量會被其他腳本文件用到。這種情況通常被稱為“全局命名空間污染”。

如果你還在用這種方式，就趁早改了吧。它的問題是，不管我們什么時候打開哪個文件，都無法得知app變量的值究竟是什么。

這段代碼的另一個語義上的問題是，它使用了匿名函數。匿名函數是JavaScript的天使，也是魔鬼。

永遠不要忘記給匿名函數起名字。這樣以后調試代碼會變得容易很多。

那么，要是有個JS警察負責找出這些問題，豈不是很好？

ESLint

ESLint是個清理器。就像個嚴格的結對編程的伙伴一樣。清理器會在你運行應用程序之前就幫你調試代碼，并且強迫你和你的團隊遵循整潔代碼的實踐。誰說這樣的老師不存在的？

配置ESLint

我們使用Airbnb的樣式配置，在我們編寫代碼時進行檢查，并指出不當的地方。上面的命令會將配置安裝到node_modules目錄下，但我們得告訴ESLint怎么用這個配置。建立一個名為.eslintrc.json的文件，內容如下：

// .eslintrc.json

{

"extends": [

"airbnb/legacy"

"env": {

"browser": true

}

extends列表告訴ESLint在它自己的默認規則之上使用Airbnb的規則。env變量告訴ESLint不要抱怨沒有初始化的window變量等。要清理所有文件，可以使用通配符 * 。

現在運行下ESLint看看有什么結果。

這些都是Airbnb樣式指南定義的規則。我留給你自己去改正這些文件。一開始就有個清理器是最理想的。當然，你可以關閉某個特定的規則。

比如，如果你喜歡不用分號，或者使用雙引號而不是單引號，你可以關閉相應的規則。ESLint很靈活，允許你這么做。

模塊

現在來討論下模塊。在創建大規模應用時，我們要求代碼有良好的結構，以便于以后的擴展。

我們把代碼放到不同的模塊中，以實現代碼分割的目的。JavaScript直到ES6才支持模塊。但模塊化的概念早在ES6之前就出現了。

CommonJS

在ES6之前，人們使用CommonJS標準。你可以寫一段代碼，然后告訴環境導出這段代碼。之后就能使用像RequireJS之類的庫導入模塊了。

// util.js

module.export = {

noop: function(){},

validateUrl: function(s){

return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)

}

};

// postController.js

var validateUrl = require('./util').validateUrl;

var handleSubmit = function handleSubmit(e) {

if(!validateUrl(e.target.value)) {

return;

}

submitUrl(e.target.value);

}

如果你玩過Node，你會覺得這段代碼看起來很眼熟。不過這個標準有個缺陷——它是同步的。

也就是說，只有在validateUrl被require了之后，postController的第3行的handleSubmit才會被執行。在這之前代碼會暫停。

這種體系在Node.js中沒什么問題。Node可以在服務器啟動之前加載所有依賴，比如配置日志文件、連接云端的數據庫、配置秘鑰等。但在前端，這種方法并不是太理想。

異步模塊定義（Asynchronous Module Definition，AMD）

顧名思義，這種方式會異步加載模塊，比CommonJS的方式好一些。下面是使用AMD的代碼（我加了幾個函數）。看著眼熟嗎？

define(['validateSpam', 'blockUser', function(validateSpam, blockUser){

return {

noop: function(){},

validateUrl: function(s) {

return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)

validateSpammyComment: function validateSpammyComment(comment, userID) {

if(validateSpam(comment)) {

blockUser(userID);

return false;

}

return true;

}

}])

第1行看起來就像AngularJS中的依賴注入一樣。

ES6模塊

TC39委員會看到開發者們使用外部庫之后，他們深切感受到JavaScript需要支持模塊。因此他們在ES6中引入了模塊功能。現在使用ES6吧！

function noop(){};

function validateUrl(s) {

return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)

}

export {

noop,

validateUrl

}

import { validateUrl } from './util';

var handleSubmit = function handleSubmit(e) {

if(!validateUrl(e.target.value)) {

return;

}

submitUrl(e.target.value);

}

不需要再調用外部庫。import和export都是原生支持的。但依然有些版本的瀏覽器并不能完全支持ES6的所有功能。

但這種瀏覽器之間的不一致并不能阻止程序員編寫下一代的JavaScript。像babel等工具可以掃描所有JavaScript，并將它們轉譯成能兼容所有瀏覽器的代碼。因此，你的代碼甚至可以支持IE之類的老瀏覽器。

Babel和ES6

好了，現在我們把舊的JavaScript轉換成新的JavaScript。先做一點改動，以便添加模塊功能。現在我們先不管清理器……讓它去抱怨吧。

// /userFactory.js

let angular = window.angular;

let app = angular.module('RandomApp');

/**

* A User factory which gets the user list

* @param $http

let userFactory = $http => {

let UserF = {};

UserF.getUsers = () => $http({

method: 'GET',

url: 'https://www.reqres.in/api/users'

});

return UserF;

};

app.factory('UserF', userFactory);

// /userController.js

let angular = window.angular;

let app = angular.module('RandomApp');

/**

* Controls the user

* @param $scope

* @param UserF

let userController = ($scope, UserF) => {

$scope.users = [];

UserF.getUsers().then(res => $scope.users = res.data.data);

};

userController.$inject = ['$scope', 'UserFactory'];

app.controller('userController', userController);

這段代碼的問題

這段代碼無法工作。因為ES6的let關鍵字創建的變量是代碼塊上下文內的變量，而在同一個上下文內無法重復定義代碼塊級別的變量。

別忘了：我們還在全局上下文里呢。現在來改正這個問題。

我希望重構代碼的原因是，我想引入babel，這樣可以親眼看看babel的魔法。現在可以在終端里安裝babel：yarn add babel-cli babel-preset-env

這行命令會安裝babel-cli和babel-preset-env。

babel插件和預設

JavaScript代碼會通過一系列轉換器，而我們可以選擇需要什么轉換器。你可以讓它把箭頭函數轉換成匿名函數，轉換擴展運算符（spread），轉換for...of循環，等等。這些轉換器叫做插件。

你可以選擇任何你想要的插件。成組的插件叫做預設。babel-preset-env會給babel一個靈活的目標。

它并不是指定某個特定版本的JavaScript，而是告訴babel自動跟蹤最新的n個版本瀏覽器。

現在來設置babel配置文件：.babelrc，把它放到根目錄下。

{

"presets": [

["env", {

"targets": {

"browsers": "last 2 versions"

}

}]

]

}

現在從終端運行如下命令，babel就能正常工作。輸入以下命令：

node_modules/.bin/babel *.js

很方便對吧？babel會在轉換之前預覽以下。

現在喘口氣，考慮下我們學過的東西。我們將一個JavaScript文件分解成了許多個文件。我們添加了清理器，防止寫出不合規范的代碼。

我們使用未來的JavaScript語法，并將其轉換成特定版本的瀏覽器能理解的東西。我們污染了全局命名空間，但暫時還能接受，我們稍后會解決這個問題。

如果有個工具能自動完成這一切就好了。我們給它所有代碼，自動運行清理器找出所有錯誤，然后轉譯成瀏覽器兼容的代碼。沒錯，確實有這么個工具。現在把這些東西都自動化吧。

用Webpack進行構建

首先，把所有JS文件都移動到一個目錄下。我們使用標準的命名方式，將文件夾命名為build。同時，我們重構下JavaScript文件，這樣所有文件都能被構建到同一個文件下。

// /build/userController.js

/**

* Controls the user

* @param $scope

* @param UserF

let userController = ($scope, UserF) => {

$scope.users = [];

UserF.getUsers().then(res => $scope.users = res.data.data);

};

userController.$inject = ['$scope', 'userFactory'];

export default userController;

// /build/userFactory.js

/**

* A User factory which gets the user list

* @param $http

let userFactory = $http => {

let UserF = {};

UserF.getUsers = () => $http({

method: 'GET',

url: 'https://www.reqres.in/api/users'

});

return UserF;

};

userFactory.$inject = ['$http'];

export default userFactory;

/// /build/app.js

import angular from 'angular';

import userController from './userController';

import userFactory from './userFactory';

angular.module('RandomApp', [])

.factory('userFactory', userFactory)

.controller('userController', userController);

現在創建webpack.config.js文件：

var path = require('path');

module.exports = {

mode: 'development', // tells webpack that this is a development build. the 'production' switch will minify the code among other things

devtool: 'cheap-eval-source-map', // generate source maps for better debugging and dont take much time.

context: __dirname, // since this runs in a node environment, webpack will need the current directory name

entry: './build/app.js', // take this file and add to the bundled file whatever this file imports

output: {

path: path.join(__dirname, 'dist'), // output this in a dist folder

filename: 'bundle.js' // and name it bundle.js

// read medium post to know what's module and devServer because I dont have much room for comments

module: {

rules: [{

enforce: 'pre',

loader: 'eslint-loader',

test: /\.js$/

}, {

loader: 'babel-loader',

test: /\.js$/

}]

devServer: {

publicPath: '/dist/',

filename: 'bundle.js',

historyApiFallback: true,

overlay: true

}

};

如果現在運行webpack，就會看到所有文件都被打包成一個文件，放到dist目錄下：

webpack配置揭秘

祝賀你，給自己點獎勵吧。現在我們把所有文件都打包到一起，它幾乎可以用于生產環境了。

現在來討論下這個配置。我會逐一介紹每個配置項的意思。更詳細的資料可以參考手冊（https://webpack.js.org/）。

大多數配置項我都給出了注釋。這里說說沒加注釋的那些。

Webpack加載器（module對象）

這個可以想像成一條流水線上的一串代碼加載單元。最后一個加載器（這里是babel-loader）會最先被Webpack用來加載代碼。

我們要求webpack遍歷所有代碼，然后用babel-loader將代碼轉譯成ES5。

加載器對象還需要一個test設置項。它用這個設置項來匹配所有它應該負責的文件（本例中用一段正則表達式匹配了所有擴展名為.js的文件）。

轉譯之后，就執行下一個加載器（這里是eslint-loader）。最后，把所有改變從內存中寫到文件中，然后輸出到output對象指定的文件里。

但這并不是我們的配置文件的行為。我們在ESLint加載器上加了個enforce: pre，因為我們希望先運行清理器。

這是因為輸出的結果只有一個文件，而且如果使用最小化和混淆功能的話，這個文件通常會變成人類無法閱讀的格式（生產環境中經常會如此）。

清理器看這個文件就會瘋了。這不是我們想要的，所以我們希望webpack先運行清理器，再進行轉譯。

除此之外，你還可以使用好幾個加載器，可以加載樣式表文件、SVG圖像，以及字體。有個我總會用到的加載器就是html-loader。

HTML加載器

在Angular下，我們通常會在directive/component中包含模板文件，因此可以在Webpack中使用html-loader進行加載。

templateUrl: './users/partial/user.tpl.html' // 把這種寫法改成：templateUrl: require('./users/partial/user.tpl.html')

Webpack由一個超大規模的社區支持，他們寫了很多優秀的加載器，以及很完善的文檔。不管你有什么需求，很可能已經有現成的加載器了。

Webpack開發服務器（devServer）

Webpack開發服務器是個獨立于Webpack的模塊。它會啟動自己的服務器，然后監視任何文件的改動。如果文件發生變化，Webpack開發服務器就會重新打包并自動刷新頁面。

如果發生錯誤，它會在屏幕上顯示一個覆蓋層（通過overlay配置項設置），并直接在瀏覽器中顯示錯誤信息。而且它速度非常快，因為一切都在內存中完成，不會訪問硬盤。

當然，為了運行webpack開發服務器，你首先得有一個基礎的構建好的文件（即，至少要運行webpack一次以生成構建好的文件）。

一旦生成之后，就可以運行該命令。該命令會啟動服務器并提供靜態文件，打開瀏覽器（默認是8080端口），并持續監視任何變動。

搞定了！

不過這并不是結局。還有許多你能做的事情。在工作中，我們使用Flow在編碼時進行靜態類型檢查。

靜態類型檢查器可以檢查代碼，并在發生錯誤時發出警告，比如調用函數時提供了錯誤類型的參數等。Flow也可以集成到Webpack中。

我們還使用Prettier實現編碼時的自動格式化。它能讓代碼更可讀。

傻瓜都能寫計算機能看懂的代碼。
好的程序員寫人類能看懂的代碼。
—— Martin Fowler。

我要把這句話貼在我的桌子上。祝賀你！你成功了！

如果你讀完了這篇超長的文章，我要跟你擊掌向你道喜，你是人生贏家。JavaScript對我而言并不容易。

我很希望我在第一個項目中編寫UI時能懂得這些東西。但我估計這就是前端開發對我的意義。持續學習，持續進步。

原文：https://medium.freecodecamp.org/the-brain-fatigued-javascripters-guide-to-modern-frontend-tooling-in-2018-9818a04e9ec5
作者：Amin Mohamed Ajani，Javascript開發人員，曾為FireFox開發工具貢獻代碼。用戶界面工程師，擅長iQuanti，reactjs，nodejs和TheIsmaili。
譯者：彎月，責編：胡巍巍

“征稿啦”
CSDN 公眾號秉持著「與千萬技術人共成長」理念，不僅以「極客頭條」、「暢言」欄目在第一時間以技術人的獨特視角描述技術人關心的行業焦點事件，更有「技術頭條」專欄，深度解讀行業內的熱門技術與場景應用，讓所有的開發者緊跟技術潮流，保持警醒的技術嗅覺，對行業趨勢、技術有更為全面的認知。
如果你有優質的文章，或是行業熱點事件、技術趨勢的真知灼見，或是深度的應用實踐、場景方案等的新見解，歡迎聯系 CSDN 投稿，聯系方式：微信（guorui_1118，請備注投稿+姓名+公司職位），郵箱（guorui@csdn.net）。

TML的作用

HTML是用來開發網頁的，它是開發網頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標記語言

標記就是標簽

<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數都是成對出現的。

超文本兩層含義：

因為網頁中還可以有圖片、視頻、音頻等內容（超越文本限制）
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接（超鏈接文本）

HTML的基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
        網頁顯示內容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發人員在告訴瀏覽器
整個網頁是從<html>這里開始的，到</html>結束
也就是html文檔的開始和結束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網頁進行設置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網頁上顯示的內容

網頁文件的后綴是.html, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
目前是前端(網頁)開發使用最多的一款軟件開發工具

下載網址: https://code.visualstudio.com/Download

選擇對應的安裝包進行下載:

安裝一切默認

VS Code 的插件安裝

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

常用的HTML標簽

1 標簽不區分大小寫，但是推薦使用小寫
2 根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

標簽的使用形式

成對出現的標簽
標簽的嵌套
單個出現的標簽
帶屬性的標簽

列表標簽

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

網頁效果

表格標簽

<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

屬性設置
border: 1px solid black:設置邊框和顏色
border-collapse: collapse:設置邊框合并

網頁效果

表單標簽

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

<form>標簽表示表單標簽，定義整體的表單區域

一個表單中有很多信息組成,比如姓名,愛好,地址等,這些內容有很多其他標簽來承載

這些標簽稱為表單元素標簽

網頁效果

表單提交

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

action屬性設置表單數據提交地址
method屬性設置表單提交的方式，一般有“GET”方式和“POST”方式, 不區分大小寫

兩種方式的區別:

“GET”方式 : 沒有請求體
“POST”方式 : 有請求體

表單元素屬性設置

name: 表單元素的名稱，用于作為提交表單數據時的參數名
value: 表單元素的值，用于作為提交表單數據時參數名所對應的值

<!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>

<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>個人描述:</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>

點擊提交：

可以看到服務器收到了請求報文。

在線咨詢

上一篇：HTML基礎教程：瀏覽器中符號是怎么顯示出來的
下一篇：分享20個值得收藏的抖音短視頻素材庫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

初學JS必會的10種JavaScript代碼優雅寫法

1、數組合并

2、數組中取值

3、對象取值

4、數組循環

5、回調函數

6、數組搜索

7、字符串轉換為數字

8、null值初始化

9、字符串拼接

10、對象合并

TML的作用

HTML的定義

HTML的基本結構

VS Code 安裝

VS Code 的插件安裝

常用的HTML標簽

表單提交

您的項目需求