TML 符號實體
HTML 符號是不呈現在標準的鍵盤上,比如數學運算符、箭頭符號、技術符號和形狀。
如需向 HTML 頁面添加這些符號,您可以使用 HTML 實體名稱。
如果不存在實體名稱,您可以使用實體編號。
如果字符沒有實體名稱,您可以使用十進制(或十六進制)引用。
實例
<p>我將顯示 €</p>
<p>我將顯示 €</p>
<p>我將顯示 €</p>
結果如下:
我將顯示 €
我將顯示 €
我將顯示 €
HTML 支持的數學符號
如果您使用的是一個 HTML 實體名稱或一個十六進制編號,字符總是能正確顯示。
這是與您頁面使用的字符集相互獨立的!
字符 | 編號 | 實體 | 描述 |
---|---|---|---|
? | ∀ | ∀ | 所有(for all) |
? | ∂ | ∂ | 部分(part) |
? | ∃ | ∃ | 存在(exists) |
? | ∅ | ∅ | 空(empty) |
? | ∇ | ∇ | 倒三角(nabla) |
∈ | ∈ | ∈ | 屬于(isin) |
? | ∉ | ∉ | 不屬于(notin) |
? | ∋ | ∋ | 包含的成員(ni) |
∏ | ∏ | ∏ | 連乘(prod) |
∑ | ∑ | ∑ | 總和(sum) |
完整的數學(Math)參考手冊
HTML 支持的希臘字母
字符 | 編號 | 實體 | 描述 |
---|---|---|---|
Α | Α | Α | Alpha(中文注音:阿耳法) |
Β | Β | Β | Beta(中文注音:貝塔) |
Γ | Γ | Γ | Gamma(中文注音:伽馬) |
Δ | Δ | Δ | Delta(中文注音:德耳塔) |
Ε | Ε | Ε | Epsilon(中文注音:艾普西隆) |
Ζ | Ζ | Ζ | Zeta(中文注音:截塔) |
完整的希臘(Greek)參考手冊
HTML 支持的其他實體
字符 | 編號 | 實體 | 描述 |
---|---|---|---|
? | © | © | 版權所有(REGISTERED SIGN) |
? | ® | ® | 注冊商標(REGISTERED SIGN) |
€ | € | € | 歐元符號(EURO SIGN) |
? | ™ | ™ | 商標(trademark) |
← | ← | ← | 向左箭頭(LEFTWARDS ARROW) |
↑ | ↑ | ↑ | 向上箭頭(UPWARDS ARROW) |
→ | → | → | 向右箭頭(RIGHTWARDS ARROW) |
↓ | ↓ | ↓ | 向下箭頭(DOWNWARDS ARROW) |
? | ♠ | ♠ | 黑桃(BLACK SPADE SUIT) |
? | ♣ | ♣ | 黑梅花(BLACK CLUB SUIT) |
? | ♥ | ♥ | 黑心(BLACK HEART SUIT) |
? | ♦ | ♦ | 黑方塊(BLACK DIAMOND SUIT) |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
tml如何選擇編碼,常見utf-8和gb2312編碼如何判斷選擇!
一、首先了解目前國內中文網頁常用編碼是utf-8 還是gb2313。
百度搜索 使用utf-8
騰訊新聞 使用utf-8
淘寶 使用utf-8
亞馬遜 使用utf-8
W3Cschool.cn 也使用utf-8
支付寶 使用utf-8
360搜索 使用utf-8
小米官網 使用utf-8
魅族官網 使用utf-8
可見截止2017年05月02日這些名站,均使用utf-8編碼。
二、了解常見html編碼utf-8和gb2312。
1、utf-8
UTF-8(8-bit Unicode Transformation Format)是一種針對Unicode的可變長度字符編碼,又稱萬國碼。由Ken Thompson于1992年創建。現在已經標準化為RFC 3629。UTF-8用1到4個字節編碼UNICODE字符。用在網頁上可以同一頁面顯示中文簡體繁體及其它語言(如日文,韓文)一般顯示簡體中文字、繁體中文字、英文、日文、韓文均支持。
2、GB2312
GB2312即信息交換用漢字編碼字符集。《信息交換用漢字編碼字符集》是由中國國家標準總局1980年發布,1981年5月1日開始實施的一套國家標準,標準號是GB 2312—1980。GB2312編碼適用于漢字處理、漢字通信等系統之間的信息交換,通行于中國大陸;新加坡等地也采用此編碼。中國大陸幾乎所有的中文系統和國際化的軟件都支持GB 2312。一般簡體中文的網站使用GB2312比較多。
3、W3Cschool小結
從文字支持上說utf-8比GB2312要多。一般企業站看情況自己選擇網頁編碼。
三、如何選擇utf-8和gb2313編碼制作html
單獨做html如果你是先div css做HTML,可以不用考慮編碼問題,及時制作好了HTML編碼要轉換也很簡單,只需要通過DW等軟件即可完成html編碼轉換。
根據程序文件編碼定如果在開發DIV CSS時就知道了程序文件時哪種編碼。這個時候就要根據開發程序文件編碼確定編碼。如果程序文件和HTML編碼不同很容易照成Html亂碼(html中文亂碼)。如果不會程序開發卻使用開源程序比如dedecms 、帝國、phpcms 等網站系統時,開發HTML和使用開源程序編碼也要保持一致。
總結:
無論什么情況下開發DIV CSS使用HTML編碼要根據程序確定,如果無法確定要使用程序編碼,這個時候選擇常用gbk和utf編碼兩種均可,如果在開發HTML時知道程序文件使用什么HTML編碼,這個時候在開發DIV CSS時候就要與程序文件使用編碼保持一致,避免網頁亂碼問題。
所以建議最好用UTF-8,國際通用。GB2312是國內用的,簡體中文。
以下是一個標準的html結構
html復制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- 頁面標題不能為空 -->
<title>京東商城:商家后臺</title>
<!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 樣式文件 以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
</head>
<body>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內容區域,比如:菜單頭</header>
<div class="content">主內容區域</div>
<footer>頂部頁尾區域,比如:備案號</footer>
</div>
<!-- js文件 在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
避免多個框架混合使用,在同一個工程里面要保持主框架的一致性,多框架同時使用會造成代碼混亂,后期會變得越來越難維護。
1、全局樣式禁止使用!important
2、避免使用導入式引入css樣式文件;
css復制代碼<style type="text/css">
@import url(./demo.css);
</style>
歷史頁面會有一些功能下線,在去除頁面初始化的js語句的同時,也要將依賴的js文件刪除,避免資源加載浪費
開啟Gzip壓縮功能, 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮,提高訪問速度
在開發過程中,發現無用字段占傳輸比例30%以上時,請進行返回數據的刪減,加快數據請求速度
上傳圖片之前一定要做圖片的無損壓縮,節省網絡流量,推薦網站tinypng
html復制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- keywords 關鍵詞 和 Description 頁面描述 便于搜索引擎檢索,不強制使用 -->
<meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
<meta name="Description" Content=”頁面描述″>
<!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 推薦手動引入指定路徑 favicon -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 樣式文件必須以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
<!-- 內聯樣式 -->
<style type="text/css">
.warp {
margin: 0;
padding: 0;
}
</style> -->
<!-- 頁面標題不能為空 -->
<title>頁面標題</title>
</head>
<body>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內容區域,比如:菜單頭</header>
<div class="content">主內容區域</div>
<footer>頂部頁尾區域,比如:備案號</footer>
</div>
<!-- JavaScript 文件在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
原生 HTML 標簽元素小寫使用,自定義組件使用小駝峰命名(自定義標簽避免和原生標簽同名)
html復制代碼<!-- 錯誤 ? -->
<DIV></DIV>
<SPAN></SPAN>
<!-- 正確 ? -->
<div></div>
<p></p>
<!-- 自定義組件 -->
<shareDialog><shareDialog/>
禁止在行內元素中嵌套塊級元素??
html復制代碼<!-- 錯誤的嵌套 ? -->
<span><div></div></span>
<i><p></p></i>
<!-- 正確的嵌套 ? -->
<div><span></span></div>
<p><i></i></p>
更多標簽使用規則介紹請查看尾部附錄
定義屬性賦值時,使用雙引號,禁止單雙引號混用
html復制代碼<!-- 錯誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標題">
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標題" data="formTitle">
除自閉合標簽外,所有標簽都需正確的編寫閉合標簽
常用自閉合標簽: <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />
ID 和 Class 取通用且有意義的名字;
使用連字符 - 作為 ID、Class 名稱界定符 ,不要駝峰命名法和下劃線;
避免選擇器嵌套層級過多,盡量少于 3 級;
使用命名空間防止命名沖突,利于維護;
css復制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
css復制代碼/* 標準的聲明順序 */
.declaration-order {
/* 布局屬性 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型屬性 */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* 文本屬性 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* 視覺屬性 */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* 其他屬性 */
cursor: pointer;
}
<img/>標簽守則
html復制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
尺寸 小于 50 ×?50 的請使用 字體圖標(iconfont)或者 將多個圖標合成一張大圖使用(雪碧圖) 尺寸大于 50 ×?50 的圖片,引入前先使用 在線壓縮 對其進行壓縮 ,圖片大小盡量控制在 300kb 以內
PC端、移動端 推薦使用 2倍圖 (@2x),避免設備分辨率過高,圖片顯示失真模糊 如有兼容 iPad 場景等特殊場景,可使用 3倍圖(@3x)
html復制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
2倍圖: 圖片展示區域大小 : 圖片實際尺寸 = 1 :2
無論使用幾倍圖,圖片大小都需遵守上條限制
如遇圖片倍圖問題,可咨詢 @UI童鞋
js復制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName('li')
1個頁面中建議CSS文件不要超過3個(1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式); JS文件不要超過5個(1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件)。
縮進使用 2個空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號
保持一定的代碼潔癖,尤其在大型項目中
性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具,主要用于改進網絡應用的質量。Lighthouse會對各個測試項的結果打分,并給出優化建議,這些打分標準和優化建議可以視為Google的網頁最佳實踐。
Chrome拓展程序 谷歌商店安裝lighthouse后,在右上角或者菜單里點擊圖中圖標,Options可以配置測試項目,點擊Generate report即可測試。
命令行
js復制代碼<!-- 安裝 lighthouse 組件(Node.js V5.0 或以上版本) -->
npm install -g lighthouse
<!-- 啟動測試 (測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態HTML文件) -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help
檢測結果
標簽 | 語義 | 嵌套常見錯誤 | 常用屬性 |
<a></a> | 超鏈接/錨 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 塊級容器 | ||
<p></p> | 段落 | 不能嵌套塊級元素 | |
<span></span> | 內聯容器(行內元素) | 不可嵌套塊級容器 | |
<form></form> | 表單 | action,target,method,name | |
<input /> | 輸入框 | 不可嵌套元素 | type,name,value,checked,disabled,maxlength,readonly,accesskey |
<textarea></textarea> | 多行文本輸入控件 | name,accesskey,disabled,readonly,rows,cols | |
<img /> | 圖像 | 不可嵌套元素 | alt,src,width,height |
<label></label> | 標簽(常用input元素定義標注) | 不可嵌套塊級容器 | for |
<table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主體 | 只能嵌套在table內 | |
<thead></thead> | 表頭 | 只能嵌套在table內 | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<td></td> | 表格中的單元格 | 只用于tr | colspan,rowspan |
<th></th> | 表格中的標題單元格 | 只用于tr | colspan,rowspan |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<button></button> | 按鈕 | 不可嵌套表單、表格等塊級元素 | type,disabled |
<select></select> | 列表框或下拉框 | 只能嵌套option或optgroup | name,disabled,multiple |
<option></option> | select中的一個選項 | 只能嵌套在select內 | value,selected,disabled |
<ol></ol> | 有序列表 | 只能嵌套li | |
<ul></ul> | 無序列表 | 只能嵌套li | |
<li></li> | 無序列表項 | 只能嵌套在 ul 或 ol 內 | |
<iframe></iframe> | 內嵌一個網頁 | frameborder,width,height,src,scrolling,name | |
<br /> | 換行 | ||
<link /> | 引用樣式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文檔信息 | 只用于head內 | content,http-equiv,name |
<script></script> | 引用腳本 | 不可嵌套任何元素 | type,src |
<style></style> | 引用樣式 | 不可嵌套任何元素 | type,media |
<title></title> | 文檔標題 | 只用于head內 |
點贊收藏支持、手留余香、與有榮焉,動動你發財的小手喲,感謝各位大佬能留下您的足跡。
作者:StriveToY
鏈接:https://juejin.cn/post/7262378982255394873
*請認真填寫需求信息,我們會在24小時內與您取得聯系。