HTML其他概念

来源:https://www.cnblogs.com/MaricoCheung/archive/2020/07/23/13368677.html

俗話說,出來江湖混的,持善良之心,懷正義之氣,總有志同道合者共相為謀。而HTML也有這麼幾個大哥們er、小兄dei、小寶貝兒。他們一起乾大事,為服務好普羅大眾貢獻自己一份力量,接下來讓我們一起走進他們吧。 ...


(一)WEB初識
【1】瀏覽器

五大主流瀏覽器 開發團隊或瀏覽器內核簡稱 CSS3特定屬性(新屬性加首碼)
Chrome webkit -webkit-transform
Safari webkit
IE ms
Firefox moz
Opera o

瀏覽器內核(渲染內核和js內核,前者渲染代碼,計算顯示方式,進而讀取呈現頁面;後者偏向於動態效果的展示)

【2】web標準
瀏覽器編寫的代碼統一規範,讓瀏覽器儘可能顯示一致的效果
①由此依據,內容能被更廣泛的設備訪問
②方便代碼維護,提高頁面載入速度
③網站流量的費用就降低了
④更容易被搜索引擎搜索
⑤讓web的發展前景更廣闊

(二)SEO規範
(Search Engine Optimization)搜索引擎優化
【1】瀏覽器標簽頁title 標題
控制在28個字元最佳,網站名(或產品名)-網站的介紹

【2】Keywords 關鍵字
6~8個關鍵字最佳,電商類網站可以多些

【3】Description 網站說明
字元數含空格不超過120個漢字最佳
補title、Keywords未能充分的描述
用英文逗號隔開: "關鍵字1,關鍵字2"

【4】LOGO
加個h標題,告訴搜索引擎這裡很重要--h里放個鏈接--鏈接裡加個網站名和title提示,便於搜索引擎收錄

(三)IDE
(Integrated Department Environment)集成開發環境,又叫代碼編輯工具
【1】常用
Dreamweaver
Sublime Text
WebStorm
VScode

【2】Emmet語法

  • 頁面骨架:! 按下tab鍵
  • 多個子元素:ul>li*6
  • 序列化:h$*6
  • 內容化:h{學生}*6
  • 帶名:.div #div
  • 複製粘貼上下行:游標到對象,shift+alt+↑或↓
  • 多行選擇:游標到對象,shift+alt+按下拖動游標
    查詢:ctrl+h
    替換:ctrl+alt+enter

(四)切圖
【1】Cutterman是個嵌入正版PhotoShop的一個快速成圖的插件,便於web前端與UI設計工作上的對接

【2】比PS更小巧的就是Framework,建議用此軟體進行精靈圖的代碼書寫
精靈圖(sprite),因諧音又叫雪碧圖,把大量小圖片集中於一張大背景圖,一般用svg格式會好點

  • 優點:可應用於大量的矢量小圖標,減少伺服器請求次數,加快頁面載入速度,提升用戶體驗
  • 代碼:background:url()no-repeat position
  • 切記:position是根據切圖軟體選取對象的x,y坐標而定,且多為負值

您的分享是我們最大的動力!

更多相關文章
  • 一、隱士intent,緊接著上一次複習 得到第二個活動返回的數據之後,我們需要重寫onActivityResult()來獲取數據 protected void onActivityResult(int requestCode,int resultCode,Intent data){ switch(r ...
  • 請輸入有效的11位數字手機號碼,或者包含區號的11位或12位數字座機號碼 出現這個問題按照提示上的來看應該是手機號碼輸入的不對 但是輸入的手機號碼的確是11位 這個手機號是開發者賬號綁定的手機號 也就是這個開發者賬號的蘋果ID綁定的電子郵箱和綁定的手機號碼 解決方案就是在手機上登錄上開發者的那個賬號 ...
  • 首先刪除 SceneDelegate.h 和 SceneDelegate.m ,info.plist中的 Application Scene Manifest 和 AppDelegate.m 中的 #pragma mark - UISceneSession lifecycle - (UISceneC ...
  • 功能點: 1.更新彈窗UI 2.強更與非強更且別控制 3.屏蔽物理返回鍵(因為強更的時候點擊返回鍵,彈窗會消失) 4.點擊彈窗外透明區域時,彈窗不消失 ...
  • 1.盒子模型主要定義四個區域:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin) 2.border,設置元素的邊框,屬性(邊框三要素):寬度、樣式、顏色,這也是通常border屬性值的書寫順序(非嚴格要求) 單獨書寫:border-width(寬度,預設3 ...
  • 快速反饋對於任何 UI 的實現都是至關重要的。研究表明,100ms 是界面讓用戶感到即時的最大延遲。儘管如此,移動網路仍然受到一個巨大的反饋問題的困擾:觸摸任何元素後,延遲 300 毫秒。這種延遲是許多用戶認為基於 HTML 的 Web 應用程式“卡頓”的最重要原因之一。在本文中,本文將帶你瞭解移動... ...
  • 一個網站建立以後,如果不註意安全方面的問題,很容易被人攻擊,下麵就討論一下幾種漏洞情況和防止攻擊的辦法。 一、SQL註入 所謂SQL註入,就是通過把SQL命令插入到Web表單提交或輸入功能變數名稱或頁面請求的查詢字元串,最終達到欺騙伺服器執行惡意的SQL命令。具體來說,它是利用現有應用程式,將(惡意)的SQ ...
  • 通過 javascript 偽協議, HTML5 dialog 元素實現的分屏書簽程式 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...