追求卓越一諾千金

藍藍設計||-易投彩票网站,2011年成立|-监察特使,主創清華團隊__-雷暴套装,專注軟件和互聯網ui設計開發|-_重庆万盛黑山论坛。擅長企業信息化管理-_诺基亚5310xm怎么样、監控|__易旺彩票网正规吗、大數據軟件UIUE谘詢和設計開發服務|--金庸2加强版。立足UI--_宝塔镇河妖下一句,好好學習-日升丰,天天進步-_|重庆援交网!


WEB前端之HTML 規範

2019-7-18 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容|||说话犀利是什么意思,每天自動發到您的郵箱中||_云购彩票是什么, 請點這裏


摘要
優秀的項目源碼|-节操卫视,即使是多人開發__-2018白姐正版四不像图,看代碼也如出一人之手-_-云购梦想。統一的編碼規範-_冰心原名是什么,可使代碼更易於閱讀_||重庆食品舞厅,易於理解___东港宋老六,易於維護

HTML 規範
縮進
統一兩個空格縮進

命名規範
class 應以功能或內容命名-||集安市政府公众信息网,不以表現形式命名|青岛小港洗头房;
class 與 id 單詞字母小寫__刘翔死了,多個單詞組成時_-父亲的盾牌,采用中劃線-分隔_|_中科彩票是合法的吗;
使用唯一的 id 作為 Javascript hook, 同時避免創建無樣式信息的 class||天通银招商;
DOCTYPE 聲明
HTML 文件必須加上 DOCTYPE 聲明--王晗祥康快车,並統一使用 HTML5 的文檔聲明-|-2d横版格斗网游:

<!DOCTYPE html>


meta 標簽
統一使用 “UTF-8” 編碼
<meta charset="utf-8">


SEO 優化
<!-- 頁麵關鍵詞 -->
<meta name ="keywords" content =""/>
<!-- 頁麵描述 -->
<meta name ="description" content ="">
<!-- 網頁作者 -->
<meta name ="author" content ="">


優先使用 IE 最新版本和 Chrome
<meta http-equiv ="X-UA-Compatible" content ="IE = edge|-五成微商已消失,chrome = 1">


為移動設備添加視口
<!-- device-width 是指這個設備最理想的 viewport 寬度 -->
<!-- initial-scale=1.0 是指初始化的時候縮放大小是1-坛缘坊,也就是不縮放 -->
<!-- user-scalable=0 是指禁止用戶進行縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


禁止自動識別頁麵中有可能是電話格式的數字
<meta name="format-detection" content="telephone=no">


團隊約定__亚当夏娃怡情谷:

pc 端|__盈发彩票app:

<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
web前端開發資源Q-q-u-n|2019六香港145期: 767273102 --|众赢国际,內有免費開發工具_canster,零基礎|||美女一级片,進階視頻教程|_本色屋,希望新手少走彎路 

移動端|_-葛兰雪:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">


標簽
html 標簽分為以下幾類__2019能用的彩票软件:

自閉合標簽(self-closing)-|诛仙入魔任务流程,無需閉合_-_moko路遥。例如__-120富婆看图中肖特:area|_海博出租车叫车电话、base-_|105彩票苹果系统、br_苏州人才新干线网、col||-花儿乐队演唱会高清、command|_106上买的彩票是真的吗、embed|新乡窝窝团购网、hr_-_天弘基金余额宝计算器、img|||非常了得陈星光、input|--亿彩注册邀请码、keygen|_我要身份证号码、link_描写大自然的优美语句、meta--_现金盘点表格式、param--_盈彩网没有邀请码、source||东莞石甜甜、track|_-为啥人们啪啪后会感到悲伤、wbr 等 )
閉合標簽(closing tag)|-众彩平台怎么样,需閉合 -_|欧莱雅祛疤产品价格。例如|_诛仙离央:textarea_|-天翼无线上网卡驱动、title|-陕西2套都市快报、h_-镇江老兵事件最新进展、div|-淘宝画报首页、span 等
團隊約定_-中兴v880官方刷机包:

所有具有開始標簽和結束標簽的元素都必須要寫上起止標簽_||重庆烟,某些允許省略開始標簽或和束標簽的元素亦都要寫上
自閉合標簽不要加上結束標簽
自定義標簽的名字必須包含一個破折號(-)|_青山湖教体局,<x-tags>|_泰国女演员bee、<my-element>和<my-awesome-app>都是正確的名字-英歌海,而<tabs>和<foo_bar>是不正確的||永盛国际。這樣的限製使得 HTML 解析器可以分辨那些是標準元素__-掌上平台336时时彩,哪些是自定義元素
自定義標簽必須寫上開始標簽和閉合標簽
盡量減少標簽數量
元素屬性
元素屬性值使用雙引號語法
推薦|--魔兽地图大唐双龙传:

<input type="text">


不推薦__ibm服务器客服电话:

<input type=text>
<input type='text'>


代碼嵌套
塊元素可以包含內聯元素或某些塊元素_||艺龙团购后台,但內聯元素卻不能包含塊元素||-12371共产党员网,它隻能包含其它的內聯元素
標題和段落中不能包含塊-|-掌上购彩软件,如_-德国thomas锅具:h1_终极一班3曹吉利唱的歌、h2-土左旗吧、h3_--248彩票平台下线、h4_-帮我起个好听的网名、h5--赢咖登录、h6-_lb是什么单位、p-_111cc彩票安卓、dt
塊與內聯不能並列_-htcg11报价,塊級元素與塊級元素並列-_|数学排列组合公式、內嵌元素與內嵌元素並列
有些標簽是固定的嵌套規則-_进口摩托车市场,比如 ul 包含 li-_角竹光寿、ol 包含 li|_111cc彩票绿源、dl 包含 dt 和 dd 等等||诺亚信a700。
靈活使用偽類
不要讓非內容信息汙染了你的 HTML_|-农行黄金价格,打亂了 HTML 結構-__上海股市大盘。可以使用:before--_188小鱼儿玄机2站开奖、:after 等偽類元素

推薦-_高中排列组合:

HTML 代碼

<!-- That is clean markup! -->
<span class="text-box">
  See the square next to me?
</span>


CSS 代碼-__亿万彩票APP平台合法吗?:

/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

1

不推薦|-蓝色冰晶瘦身霜:

HTML 代碼-_帅康热水器说明书:

<!-- We should not introduce an additional element just to solve a design problem  -->
<span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>


CSS 代碼-||160彩票邀请:

.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}
web前端開發資源Q-q-u-n--_海带的血型: 767273102 -|_金扬沙,內有免費開發工具_-2018街拍偷拍下体走光,零基礎|娱乐彩票平台代理,進階視頻教程_-小爸爸姗姗结局,希望新手少走彎路 

特殊符號必須使用轉義符
符號 描述 轉義符
空格 &nbsp;
< 小於 &lt;
> 大於 &gt;
& &amp;
" 引號 &quot;
純數字輸入框
使用 type=“tel” 而不是 type=“number”

<input type="tel">


類型屬性
不需要為 CSS-|maxdos5 8、JS 指定類型屬性|_2019最新捕鱼游戏排行,HTML5 中默認已包含|-|润美娇。

推薦--高考几天时间:

<link rel="stylesheet" href="" >
<script src=""></script>


不推薦|||至尊彩网站是合法的吗?:

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>


注釋規範
單行注釋

一般用於簡單的描述|_20018年期期精准杀五肖图片,如某些狀態描述_2013上映的电影有哪些、屬性描述等
注釋內容前後各一個空格字符_洛克王国潘多许愿蛋,注釋位於要注釋代碼的上麵|__雅马哈r6报价,單獨占一行
推薦|-_33选7走势图综合:

<!-- Comment Text -->
<div>...</div>


不推薦_-|马德里公开赛直播:

<div>...</div><!-- Comment Text -->

<div><!-- Comment Text -->
    ...
</div>


6
模塊注釋

注釋內容前後各一個空格字符
<!-- S Comment Text -->表示模塊開始
<!-- E Comment Text -->表示模塊結束||_云购彩票的网址是什么,模塊與模塊之間相隔一行
模塊注釋內部嵌套模塊注釋|_尊彩app是干什么的,<!-- /Comment Text -->
推薦-|可调式电热板:

<!-- S Comment Text A -->
<div class="mod_a">

    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->

    <div class="mod_c">
    ...
    </div>
    <!-- /mod_c -->

</div>
<!-- E Comment Text A -->

<!-- S Comment Text D -->
<div class="mod_d">
    ...
</div>
<!-- E Comment Text D -->
web前端開發資源Q-q-u-n__-赛罗奥特曼大电影: 767273102 _|诸葛智彩软件是干嘛的,內有免費開發工具||_钟小江微博,零基礎__-qq游戏网页商城,進階視頻教程|快乐大本营落跑甜心剧组,希望新手少走彎路 

22
語義化
沒有 CSS 的 HTML 是一個語義係統而不是 UI 係統
通常情況下|-10年的信誉彩票平台,每個標簽都是有語義的
語義化的 HTML 結構_|淘宝网上开店的步骤,有助於機器(搜索引擎)理解||10年的信誉彩票平台,另一方麵多人協作時--|英菲迪尼qx56,能迅速了解開發者意圖
建議頁麵中多使用語義化標簽-|高三毕业班主任寄语,而不是整個頁麵以 div 構成
常見標簽語義--_注册彩票送18元彩金APP:
標簽 語義
<p> 段落
<hn> 標題(h1~h6)
<ul> 無序列表
<ol> 有序列表
<nav> 標記導航|10元可提现的彩票平台,僅對文檔中重要的鏈接群使用
<main> 頁麵主要內容__|小爸爸13集插曲,一個頁麵隻能使用一次-||娱乐天地点检官方下载。如果是 web 應用|_谭国箱,則包圍其主要功能
<article> 定義外部的內容_|-有关春天的词语,其中的內容獨立於文檔的其餘部分
<section> 定義文檔中的節(section||-卓易彩票是不是没有了、區段)__|奇乐影院。比如章節-小学语文教学随笔、頁眉_--许君浩博客、頁腳或文檔中的其他部分|__中国特殊教育。
<aside> 定義其所處內容之外的內容_|105彩票靠谱吗。如側欄|街头篮球葡萄论坛、文章的一組鏈接|_-怎样克隆空间、廣告|-106官网彩票福利版、友情鏈接_-|花都区教育局网站、相關產品列表
<header> 頁眉通常包括網站標誌-_智胜彩票官方、主導航-|_038手机彩票、全站鏈接以及搜索框
<footer> 頁腳_-|锈水财阀,隻有當父級是 body 時-||锈水财阀声望,才是整個頁麵的頁腳
<figure> 規定獨立的流內容(圖像_-卓易彩票官方、圖表-|038彩票是官网平台吗、照片|_6120c软件下载、代碼等等)(默認有 40px 左右 margin)
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-|黄山奇石图片天狗望月,為期望卓越的國內外企業提供卓越的UI界麵設計_11选5漏洞赚千万、BS界麵設計 _|-诺顿最新激活码、 cs界麵設計 -|钓鱼用具大全、 ipad界麵設計 _|_青年汇佳园、 包裝設計 ---维多利亚科鲁兹、 圖標定製 __康恒保险、 用戶體驗 --360双色球走势图、交互設計_-亿博娱乐、網站建設 __|耳鸣466专家、平麵設計服務__-垃圾短信轰炸机。

標簽: 規範 WEB前端之HTML « 設計師必須了解的色彩理論 | 社交互動創新 | 從點讚到擊掌»


訂閱Rss