當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

wed语言翻译HTML及使用规范,Web前端开发规范

發(fā)布時間：2023/12/29 HTML 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 wed语言翻译HTML及使用规范,Web前端开发规范小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

代碼規(guī)范

DOCTYPE 聲明(視具體情況而定，一般采用HTML5的聲明)

HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明：

頁面語言LANG

推薦使用屬性值 cmn-Hans-CN(簡體, 中國大陸)，但是考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值

其他地區(qū)語言參考：

zh-SG 中文 (簡體, 新加坡) 對應 cmn-Hans-SG 普通話 (簡體, 新加坡)

zh-HK 中文 (繁體, 香港) 對應 cmn-Hant-HK 普通話 (繁體, 香港)

zh-MO 中文 (繁體, 澳門) 對應 cmn-Hant-MO 普通話 (繁體, 澳門)

zh-TW 中文 (繁體, 臺灣) 對應 cmn-Hant-TW 普通話 (繁體, 臺灣)

CHARSET

一般情況下統(tǒng)一使用 “UTF-8” 編碼

由于歷史原因，有些業(yè)務可能會使用 “GBK” 編碼

元素及標簽閉合

HTML元素共有以下5種：

空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

原始文本元素：script、style

RCDATA元素：textarea、title

外來元素：來自MathML命名空間和SVG命名空間的元素。

常規(guī)元素：其他HTML允許的元素都稱為常規(guī)元素。

原始文本元素、RCDATA元素以及常規(guī)元素都有一個開始標簽來表示開始，一個結(jié)束標簽來表示結(jié)束。

某些元素的開始和結(jié)束標簽是可以省略的，如果規(guī)定標簽不能被省略，那么就絕對不能省略它。

空元素只有一個開始標簽，且不能為空元素設(shè)置結(jié)束標簽。

外來元素可以有一個開始標簽和配對的結(jié)束標簽，或者只有一個自閉合的開始標簽，且后者情況下該元素不能有結(jié)束標簽。

推薦：

我是h1標題

我是一段文字，我有始有終，瀏覽器能正確解析

不推薦：

我是h1標題

我是一段文字，我有始無終，瀏覽器亦能正確解析

書寫風格

HTML標簽名、類名、標簽屬性和大部分屬性值統(tǒng)一用小寫

推薦：

不推薦：

HTML文本、CDATA、JavaScript、meta標簽某些屬性等內(nèi)容可大小寫混合

I AM WHAT I AM

var demoName = 'demoName';

...

類型屬性

不需要為 CSS、JS 指定類型屬性，HTML5 中默認已包含

推薦：

不推薦：

元素屬性

元素屬性值使用雙引號語法

元素屬性值可以寫上的都寫上

推薦：

不推薦：

特殊字符的應用

文本可以和字符引用混合出現(xiàn)。這種方法可以用來轉(zhuǎn)義在文本中不能合法出現(xiàn)的字符。

推薦：

more>>

不推薦：

more>>

代碼縮進

統(tǒng)一使用四個空格進行代碼縮進，使得各編輯器表現(xiàn)一致(各編輯器有相關(guān)配置)

純數(shù)字輸入

使用 type="tel" 而不是 type="number"

代碼嵌套

元素嵌套規(guī)范，每個塊狀元素獨立一行，內(nèi)聯(lián)元素可選

推薦：

不推薦：

段落元素與標題元素只能嵌套內(nèi)聯(lián)元素

推薦：

不推薦：

注釋規(guī)范

標準寫法：

單行注釋：一般用于簡單的描述，如某些狀態(tài)描述、屬性描述等(注釋內(nèi)容前后各一個空格字符，注釋位于要注釋代碼的上面，單獨占一行)

推薦：

...

不推薦：

...

模塊注釋：一般用于描述模塊的名稱以及模塊開始與結(jié)束的位置(注釋內(nèi)容前后各一個空格字符，表示模塊開始，表示模塊結(jié)束，模塊與模塊之間相隔一行)

推薦：

...

不推薦：

...

文件模板

HTML模版指的是團隊使用的初始化HTML文件，里面會根據(jù)不同平臺而采用不一樣的設(shè)置，一般主要不同的設(shè)置就是 mata 標簽的設(shè)置，以下是 PC 和移動端的 HTML 模版。

HTML5標準模版

移動端

移動端HTML模版

PC端

PC端HTML模版

圖片格式

常見的圖片格式有 GIF、PNG8、PNG24、JPEG、WEBP，根據(jù)圖片格式的特性和場景需要選取適合的圖片格式。

GIF(一般用作動圖，不適合圖片)

優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時將體積變得很小。

可插入多幀，從而實現(xiàn)動畫效果。

可設(shè)置透明色以產(chǎn)生對象浮現(xiàn)于背景之上的效果。

由于采用了8位壓縮，最多只能處理256種顏色，故不宜應用于真彩色圖片。

PNG

支持256色調(diào)色板技術(shù)，文件體積小。

無損壓縮

最高支持48位真彩色圖像以及16位灰度圖像。

支持Alpha通道的透明/半透明特性。

支持圖像亮度的Gamma校準信息。

支持存儲附加文本信息，以保留圖像名稱、作者、版權(quán)、創(chuàng)作時間、注釋等信息。

漸近顯示和流式讀寫，適合在網(wǎng)絡(luò)傳輸中快速顯示預覽效果后再展示全貌。

使用CRC防止文件出錯。

最新的PNG標準允許在一個文件內(nèi)存儲多幅圖像。

JPEG

適用于儲存24位元全采影像

采取的壓縮方式通常為有損壓縮

不支持透明或動畫

壓縮比越高影像耗損越大，失真越嚴重

壓縮比在10左右肉眼無法分辨出壓縮圖與原圖的差別

WEBP

同時提供有損壓縮和無損壓縮兩種圖片文件格式

文件體積小，無損壓縮后，比 PNG 文件少了 45％的文件大小；有損壓縮后，比 JPEG 文件少了 25% - 34% 文件大小

瀏覽器兼容差，目前只支持客戶端 Chrome 和 Opera 瀏覽器以及安卓原生瀏覽器(Andriod 4.0+)

如何采用：

內(nèi)容圖：

優(yōu)先考慮 JPEG 格式,條件允許的話優(yōu)先考慮 WebP 格式

背景圖：

PNG 與 GIF 格式，優(yōu)先考慮使用 PNG 格式,PNG格式允許更多的顏色并提供更好的壓縮率

圖片引入

HTML 中圖片引入不需添加 width、height 屬性，alt 屬性應該寫上

推薦：

...

不推薦：

...

模塊命名

全站公共模塊：以 mod_ 開頭

業(yè)務公共模塊：以業(yè)務名mod 開頭

常用命名推薦

注意：ad、banner、gg、guanggao 等有機會和廣告掛勾的字眠不建議直接用來做ClassName，因為有些瀏覽器插件(Chrome的廣告攔截插件等)會直接過濾這些類名

ClassName 含義

about 關(guān)于

account 賬戶

arrow 箭頭圖標

article 文章

aside 邊欄

audio 音頻

avatar 頭像

bg,background 背景

bar 欄(工具類)

branding 品牌化

crumb,breadcrumbs 面包屑

btn,button 按鈕

caption 標題，說明

category 分類

chart 圖表

clearfix 清除浮動

close 關(guān)閉

col,column 列

comment 評論

community 社區(qū)

container 容器

content 內(nèi)容

current 當前態(tài)，選中態(tài)

default 默認

description 描述

details 細節(jié)

disabled 不可用

entry 文章，博文

error 錯誤

even 偶數(shù)，常用于多行列表或表格中

fail 失敗(提示)

feature 專題

fewer 收起

field 用于表單的輸入?yún)^(qū)域

figure 圖

filter 篩選

first 第一個，常用于列表中

footer 頁腳

forum 論壇

gallery 畫廊

group 模塊，清除浮動

header 頁頭

help 幫助

hide 隱藏

hightlight 高亮

home 主頁

icon 圖標

info,information 信息

last 最后一個，常用于列表中

links 鏈接

logout 退出

logo 標志

main 主體

menu 菜單

meta 作者、更新時間等信息欄，一般位于標題之下

module 模塊

more 更多(展開)

msg,message 消息

nav,navigation 導航

next 下一頁

nub 小塊

odd 奇數(shù)，常用于多行列表或表格中

off 鼠標離開

on 鼠標移過

output 輸出

pagination 分頁

pop,popup 彈窗

preview 預覽

previous 上一頁

primary 主要

progress 進度條

promotion 促銷

rcommd,recommendations 推薦

reg,register 注冊

save 保存

search 搜索

secondary 次要

section 區(qū)塊

selected 已選

share 分享

show 顯示

sidebar 邊欄，側(cè)欄

slide 幻燈片，圖片切換

sort 排序

sub 次級的，子級的

submit 提交

subscribe 訂閱

subtitle 副標題

success 成功(提示)

summary 摘要

tab 標簽頁

table 表格

txt,text 文本

thumbnail 縮略圖

time 時間

tips 提示

title 標題

video 視頻

wrap 容器，包，一般用于最外層

wrapper 容器，包，一般用于最外層

JS規(guī)范

語言規(guī)范

基本類型

字符串

數(shù)值

布爾類型

null

undefined

const foo = 1

let bar = foo

bar = 9

console.log(foo, bar) // 1, 9

復雜數(shù)據(jù)類型

object

array

function

const foo = [1, 2, 3]

const bar = foo

bar[0] = 9

console.log(foo[0], bar[0]) // 9, 9

引用(const聲明常量，let聲明變量)

const 和 let 都是塊級作用域，var 是函數(shù)級作用域

對所有引用都使用 const，不要使用 var

// bad

var a = 1

var b = 2

// good

const a = 1

const b = 2

如果引用是可變動的，則使用 let

// bad

var count = 1

if (count < 10) {

count += 1

}

// good

let count = 1

if (count < 10) {

count += 1

}

對象

請使用字面量值創(chuàng)建對象

// bad

const a = new Object{}

// good

const a = {}

別使用保留字作為對象的鍵值，這樣在 IE8 下不會運行

// bad

const a = {

default: {}, // default 是保留字

common: {}

}

// good

const a = {

defaults: {},

common: {}

}

請使用對象方法的簡寫方式

// bad

const item = {

value: 1,

addValue: function (val) {

return item.value + val

}

// good

const item = {

value: 1,

addValue(val) {

return item.value + val

}

請使用對象屬性值的簡寫方式

const job = 'FrontEnd'

// bad

const item = {

job: job

}

// good

const item = {

job

}

對象屬性值的簡寫方式要和聲明式的方式分組

const job = 'FrontEnd'

const department = 'JDC'

// bad

const item = {

sex: 'male',

job,

age: 25,

department

}

// good

const item = {

job,

department,

sex: 'male',

age: 25

}

數(shù)組

請使用字面量值創(chuàng)建數(shù)組

// bad

const items = new Array()

// good

const items = []

向數(shù)組中添加元素時，請使用 push 方法

const items = []

// bad

items[items.length] = 'test'

// good

items.push('test')

使用拓展運算符 ... 復制數(shù)組

// bad

const items = []

const itemsCopy = []

const len = items.length

let i

// bad

for (i = 0; i < len; i++) {

itemsCopy[i] = items[i]

}

// good

itemsCopy = [...items]

解構(gòu)賦值

當需要使用對象的多個屬性時，請使用解構(gòu)賦值

// bad

function getFullName (user) {

const firstName = user.firstName

const lastName = user.lastName

return `${firstName} ${lastName}`

}

// good

function getFullName (user) {

const { firstName, lastName } = user

return `${firstName} ${lastName}`

}

// better

function getFullName ({ firstName, lastName }) {

return `${firstName} ${lastName}`

}

當需要使用數(shù)組的多個值時，請同樣使用解構(gòu)賦值

const arr = [1, 2, 3, 4]

// bad

const first = arr[0]

const second = arr[1]

// good

const [first, second] = arr

函數(shù)需要回傳多個值時，請使用對象的解構(gòu)，而不是數(shù)組的解構(gòu)

// bad

function doSomething () {

return [top, right, bottom, left]

}

// 如果是數(shù)組解構(gòu)，那么在調(diào)用時就需要考慮數(shù)據(jù)的順序

const [top, xx, xxx, left] = doSomething()

// good

function doSomething () {

return { top, right, bottom, left }

}

// 此時不需要考慮數(shù)據(jù)的順序

const { top, left } = doSomething()

字符串

字符串統(tǒng)一使用單引號的形式 ''

// bad

const department = "JDC"

// good

const department = 'JDC'

字符串太長的時候，請不要使用字符串連接符換行 \，而是使用 +

const str = '凹凸實驗室凹凸實驗室凹凸實驗室' +

'凹凸實驗室凹凸實驗室凹凸實驗室' +

'凹凸實驗室凹凸實驗室'

程序化生成字符串時，請使用模板字符串

const test = 'test'

// bad

const str = ['a', 'b', test].join()

// bad

const str = 'a' + 'b' + test

// good

const str = `ab${test}`

函數(shù)

請使用函數(shù)聲明，而不是函數(shù)表達式

// bad

const foo = function () {

// do something

}

// good

function foo () {

// do something

}

不要在非函數(shù)代碼塊中聲明函數(shù)

// bad

if (isUse) {

function test () {

// do something

}

// good

let test

if (isUse) {

test = () => {

// do something

}

不要使用 arguments，可以選擇使用 ...

arguments 只是一個類數(shù)組，而 ... 是一個真正的數(shù)組

// bad

function test () {

const args = Array.prototype.slice.call(arguments)

return args.join('')

}

// good

function test (...args) {

return args.join('')

}

不要更改函數(shù)參數(shù)的值

// bad

function test (opts) {

opts = opts || {}

}

// good

function test (opts = {}) {

// ...

}

模塊

使用標準的 ES6 模塊語法 import 和 export

// bad

const util = require('./util')

module.exports = util

// good

import Util from './util'

export default Util

// better

import { Util } from './util'

export default Util

不要使用 import 的通配符 *，這樣可以確保你只有一個默認的 export

// bad

import * as Util from './util'

// good

import Util from './util'

對象屬性

使用 . 來訪問對象屬性

const joke = {

name: 'haha',

age: 28

}

// bad

const name = joke['name']

// good

const name = joke.name

代碼規(guī)范

單行代碼塊(在單行代碼塊中使用空格)

不推薦

function foo () {return true}

if (foo) {bar = 0}

推薦

function foo () { return true }

if (foo) { bar = 0 }

大括號風格(建議使用第一種)

One True Brace Style

if (foo) {

bar()

} else {

baz()

}

Stroustrup

if (foo) {

bar()

}

else {

baz()

}

Allman

if (foo)

{

bar()

}

else

{

baz()

}

變量命名(建議使用駝峰式)

當命名變量時，主流分為駝峰式命名(variableName)和下劃線命名(variable_name)兩大陣營。

拖尾逗號(建議最后一個字面量可以不加拖尾逗號)

在 ECMAScript5 里面，對象字面量中的拖尾逗號是合法的，但在 IE8(非 IE8 文檔模式)下，當出現(xiàn)拖尾逗號，則會拋出錯誤。

var foo = {

name: 'foo',

age: '22',

}

逗號空格

逗號前后的空格可以提高代碼的可讀性

不推薦

var foo = 1,bar = 2

var foo = 1 , bar = 2

var foo = 1 ,bar = 2

推薦

var foo = 1, bar = 2

逗號風格

標準風格，逗號放置在當前行的末尾

逗號前置風格，逗號放置在下一行的開始位置

不推薦

var foo = 1

bar = 2

var foo = 1

, bar = 2

var foo = ['name'

, 'age']

推薦

var foo = 1,

bar = 2

var foo = ['name',

'age']

計算屬性空格

不推薦

obj['foo' ]

obj[ 'foo']

obj[ 'foo' ]

推薦

obj['foo']

構(gòu)造函數(shù)首字母大寫

不推薦

var fooItem = new foo()

推薦

var fooItem = new Foo()

總結(jié)

以上是生活随笔為你收集整理的wed语言翻译HTML及使用规范,Web前端开发规范的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于javaweb+SSM健身房健身俱乐
下一篇： KEBA 控制器通过 NT50 连接西门