整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          WebStorm的入門使用介紹總結

          WebStorm的入門使用介紹總結

          ebStorm建立在開源IntelliJ平臺之上,JetBrains已經開發和完善了超過15年。其提供了統一的UI,可與許多流行的版本控制系統配合使用,確保在git,GitHub,SVN,Mercurial和Perforce之間提供一致的用戶體驗。WebStorm提供可定制功能,調整它以完全適合您的編碼風格,從快捷方式,字體和視覺主題到工具窗口和編輯器布局。

          智能編碼輔助

          WebStorm可以幫助您編寫出色的代碼。其智能編輯器具有代碼完成,動態代碼分析,代碼格式化和重構,可提高您的工作效率,并將您的開發體驗提升到一個全新的水平。

          支持的語言和框架

          WebStorm提供JavaScript,ECMAScript 6,TypeScript,CoffeeScript,Dart和Flow 的一流編碼幫助。

          WebStorm可以幫助您編寫HTML,CSS,Less,Sass和Stylus代碼。

          最重要的是,您可以受益于對Node.js和流行框架的高級支持,例如React,Angular,Vue.js,Meteor等。

          代碼智能輔助功能

          WebStorm分析您的項目,為應用程序中定義的所有方法,函數,模塊,變量和類提供最佳代碼完成結果。Сoding協助是上下文感知的,也可以是特定于框架的。

          在WebStorm中使用CSS時,享受屬性及其值的代碼完成。在Less和Sass中,獲得mixins的幫助。當然,在HTML中,您可以獲得所有標簽和屬性的代碼完成。

          代碼質量分析與檢測

          WebStorm有數百種內置檢查功能,涵蓋所有支持的語言。除此之外,您還可以使用ESLint,TSLint,Stylelint,JSCS,JSHint和JSLint。

          在您鍵入時,WebStorm編輯器會直接報告所有錯誤和警告,并提供許多快速修復選項。

          WebStorm具有可能問題的任何代碼行都標記在右側編輯器裝訂線中,因此您可以輕松地在長文件中發現錯誤和警告。

          您還可以使用WebStorm為整個項目運行代碼質量分析,并自動應用選定的快速修復程序。

          webstorm使用技巧

          • WebStorm如何更改主題(字體&配色):
          • File -> settings -> Editor -> colors&fonts -> scheme name.主題下載地址
          • 如何讓webstorm啟動的時候不打開工程文件:
          • File -> Settings->General去掉Reopen last project on startup.
          • WebStorm如何完美顯示中文:
          • File -> Settings->Appearance中勾選Override default fonts by (not recommended),設置Name:NSimSun,Size:12
          • WebStorm如何顯示行號:
          • File -> Settings->Editor,”Show line numbers”打上勾,就顯示行號了
          • WebStorm如何讓代碼自動換行:
          • File -> settings -> Editor “Use Soft Wraps in editor” 打上鉤,代碼就自動換行了
          • 如何點擊光標,如何WebStorm顯示在本行末尾:
          • File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。
          • 如何修改WebStorm快鍵鍵:
          • File -> Settings->Keymap,然后雙擊要修改快捷的功能會有提示框出來,按提示操作
          • 如何WebStorm換成自己熟悉編輯器的快鍵鍵:
          • File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans這樣的主流IDE。
          • javascript類庫提示。
          • File -> settings -> Javascript -> Libraries -> 然后在列表里選擇自己經常用到的javascript類庫,最后Download and Install就ok了.
          • 在WebStorm中開發js時發現,需要ctrl + return 才能選候選項:
          • File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改為 “Always”
          • WebStorm中js提示比較遲緩設置策略
          • File -> Code Completion -> Autopopup in 下 1000改為0
          • WebStorm中git配置:
          • File -> settings -> Editor -> github,進去改github的賬戶,如果沒有git則不需要.
          • WebStorm的插件安裝:
          • File ->plugins,然后就選擇給力的插件們再安裝.(“css-X-fire”插件,用于當使用firebug修改css屬性時,編輯器內的css代碼也會發生變化。)

          webstorm使用心得

          • WebStorm的收藏夾功能:
          • 當工程目錄很龐大時,有些子目錄很經常打開,但層級又很深,這時候可以把目錄添加到收藏夾里面,添加成功后,左側有個“Favorites”菜單
          • WebStorm的面包屑導航:
          • 除了左側的工程頁面,可以選擇目錄之外,在頂部菜單下有一個類似網站面包屑導航一樣的目錄也可以實現相同功。點擊每個目錄就會有下拉菜單顯示其下的子目錄,很實用.
          • WebStorm的構造器界面:
          • 注釋符合格式的話就會出現。如果是js文件則是js類的函數和對象;css文件的話則是這個css文件的概括;html文件的話則是節點的結構圖。話說這幾個就是為了方便查看代碼的結構性.
          • WebStorm的todo界面:
          • 給代碼加todo注釋就會出現這個界面
          • WebStorm的雙欄代碼界面:
          • 右擊代碼選項卡上的文件,然后右鍵 -> spilt vertically(左右兩屏)或者spilt horizontally(上下兩屏)
          • WebStorm的本地歷史功能:
          • 找回代碼的好辦法

          WebStorm集成git使用

          webstorm中只集成了git的常用操作,并不能完全替代命令行工具。在界面的右下角可以查看處于哪個git分支。也可以在上面點擊切換或者新建分支。

          • 查看當前代碼與版本庫代碼的差異:
          • 右擊代碼界面任意區域,選擇git -> compare with然后選擇要比較的版本庫。

          webstorm快捷鍵說明

          WebStorm的Editing編輯相關快捷鍵

          • Ctrl + Space:
          • Basic code completion (the name of any class, method or variable) 基本代碼完成(任何類、函數或者變量名稱),改為Alt+S
          • Ctrl + Shift + Enter:
          • Complete statement 補全當前語句
          • Ctrl + P:
          • Parameter info (within method call arguments) 參數信息 包括方法調用參數
          • Ctrl + mouse over code
          • Brief Info 簡單信息
          • Ctrl + F1
          • Show description of error or warning at caret 顯示光標所在位置的錯誤信息或者警告信息
          • Alt + Insert
          • Generate code…(Getters, Setters, Constructors)新建一個文件或者生成代碼,…構造函數,可以創建類里面任何字段的getter與setter方法
          • Ctrl + O
          • Override methods 重載方法
          • Ctrl + I
          • Implement methods 實現方法
          • Ctrl + Alt + T
          • Surround with…(if, else, try, catch, for, etc)用 * 來圍繞選中的代碼行,( * 包括 if 、 while 、 try catch 等)
          • Ctrl + /
          • Comment/uncomment with line comment 行注釋/取消行注釋
          • Ctrl + Shift + /
          • Comment/uncomment with block comment 塊注釋/取消塊注釋
          • Ctrl + W
          • Select successively increasing code blocks 選擇代碼塊,一般是增量選擇
          • Ctrl + Shift + W
          • Decrease current selection to previous state 上個快捷鍵的回退,減量選擇代碼
          • Alt + Q
          • Context info 上下文信息
          • Alt + Enter
          • Show intention actions and quick-fixes 意圖行動,快速見效
          • Ctrl + Alt + L
          • Reformat code 根據模板格式對代碼格式化
          • Tab/ Shift + Tab
          • Indent/unindent selected lines 對所選行進行縮排處理/撤銷縮排處理
          • Ctrl + X or Shift + Delete
          • Cut current line or selected block to clipboard 剪切當前行或所選代碼塊到剪切板
          • Ctrl + C or Ctrl + Insert
          • Copy current line or selected block to chipboard 拷貝當前行或者所選代碼塊到剪切板
          • Ctrl + V or Shift + Insert
          • Paste from clipboard 粘貼剪切板上的內容
          • Ctrl + Shift + V
          • Paste from recent buffers 粘貼緩沖器中最新的內容
          • Ctrl + D
          • Duplicate current line or selected block 復制當前行或者所選代碼塊
          • Ctrl + Y
          • Delete line at caret 刪除光標所在位置行
          • Ctrl + Shift + J
          • Smart line join(HTML and JavaScript only)加入智能行 (HTML 和JavaScript)
          • Ctrl + Enter
          • Smart line split(HTML and JavaScript only)分離智能行 (HTML 和JavaScript)
          • Shift + Enter
          • Start new line 另起一行
          • Ctrl + Shift + U
          • Toggle case for word at caret or selected block 光標所在位置大小寫轉換
          • Ctrl + Shift + ]/[
          • Select till code block end/start 選擇直到代碼塊結束/開始
          • Ctrl + Delete
          • Delete to word end 刪除文字結束
          • Ctrl + Backspace
          • Delete to word start 刪除文字開始
          • Ctrl + NumPad+/-
          • Expand/collapse code block 擴展/縮減代碼塊
          • Ctrl + Shift+ NumPad+
          • Expand all 擴張所有
          • Ctrl + Shift+ NumPad-
          • Collapse 縮減所有
          • Ctrl + F4
          • Close active editor tab 關閉活躍編輯標簽

          WebStorm的Search/replace搜索/替代相關快捷鍵

          • Ctrl + F
          • Find 當前文件內快速查找代碼
          • Ctrl + Shift + F
          • Find in path 指定文件內尋找路徑
          • F3
          • Find next 查找下一個
          • Shift + F3
          • Find previous 查找上一個
          • Ctrl + R
          • Replace 當前文件內代碼替代
          • Ctrl + Shift + R
          • Replace in path 指定文件內代碼批量替代

          WebStorm的Usage Search搜索相關快捷鍵

          • Alt + F7/Ctrl + F7
          • Find usages/Find usages in file 找到使用/在文件找到使用
          • Ctrl + Shift + F7
          • Highlight usages in file文件中精彩使用
          • Ctrl + Alt + F7
          • Show usages 顯示使用

          WebStorm的Running運行

          • Alt + Shift + F10
          • Select configuration and run 選擇構架,運行
          • Alt + Shift + F9
          • Select configuration and debug 選擇構架,修補漏洞
          • Shift + F10
          • Run 運行
          • Shift + F9
          • Debug 修補漏洞
          • Ctrl + Shift + F10
          • Run context configuration from editor 從編輯運行內容構架
          • Ctrl + Shift + X
          • Run command line 運行命令行

          WebStorm的Debugging Debugging相關快捷鍵

          • F8
          • Step over 不進入函數
          • F7
          • Step into 單步執行
          • Shift + F7
          • Smart step into 智能單步執行
          • Shift + F8
          • Step out 跳出
          • Alt + F9
          • Run to cursor 運行到光標處
          • Alt+ F8
          • Evaluate expression 評估表達
          • F9
          • Resume program 重新開始程序
          • Ctrl + F8
          • Toggle breakpoint 切換斷點
          • Ctrl + Shift + F8
          • View breakpoints 查看斷點

          WebStorm的Navigation 定位相關快捷鍵

          • Ctrl + N
          • Go to class跳轉到指定類
          • Ctrl + Shift + N
          • Go to file 通過文件名快速查找工程內的文件
          • Ctrl + Alt +Shift + N
          • Go to symbol 通過一個字符查找函數位置
          • Alt + Right/ left
          • Go to next/ previous editor tab 進入下一個/ 上一個編輯器選項
          • F12
          • Go back to previous tool window 進入上一個工具窗口
          • Esc
          • Go to editor(from tool window) 從工具窗口進入編輯器
          • Shift + Esc
          • Hide active or last active window 隱藏活動窗口
          • Ctrl + Shift + F4
          • Close active run/message/find/…tab 關閉活動….標簽
          • Ctrl + G
          • Go to line 跳轉到第幾行
          • Ctrl + E
          • Recent files popup 彈出最近打開的文件
          • Ctrl + Alt + Left/Right
          • Navigate back/forward 導航前進/后退
          • Ctrl + Shift + Backspace
          • Navigate to last edit location 向最近編輯定位導航
          • Alt + F1
          • Select current file or symbol in any view 查找當前選中的代碼或文件在其他界面模塊的位置
          • Ctrl + B or Ctrl + Click
          • Go to declaration跳轉到定義處
          • Ctrl + Alt + B
          • Go to implementation(s) 跳轉方法實現處
          • Ctrl + Shift + B
          • Go to type declaration 跳轉方法定義處
          • Ctrl + Shift + I
          • Open quick definition lookup 打開定義快速查找
          • Ctrl + U
          • Go to super-method/super-class 跳轉方法/超階級
          • Alt + Up/Down
          • Go to previous/next method 在方法間快速移動定位
          • Ctrl + ]/[
          • Move to code block end/start 跳轉到編碼塊結束/開始
          • Ctrl + F12
          • File structure popup 文件結構彈出
          • Ctrl + H
          • Type hierarchy 類型層次
          • Ctrl + Alt + H
          • Call hierarchy 調用層次結構
          • F2/ Shift + F2
          • Next/previous highlighted error 跳轉到后一個/前一個錯誤,高亮錯誤或警告快速定位,使用這個快捷鍵可以快捷在出錯的語句之間進行跳轉。
          • F4/Ctrl + Enter
          • Edit source/ View source 編輯源代碼/查看源代碼
          • Alt + Home
          • Show navigation bar 顯示導航欄
          • F11
          • Toggle bookmark 切換標記
          • Ctrl + F11
          • Toggle bookmark with mnemonic 采用記憶切換標記
          • Ctrl + #[0-9]
          • Go to numbered bookmark 跳轉到帶編號的標記
          • Shift + F11
          • Show bookmark 顯示標記

          WebStorm的Refactoring 重構相關快捷鍵

          • F5
          • Copy 拷貝
          • F6
          • Move 移動
          • Alt + Delete
          • Safe Delete 安全刪除
          • Shift + F6
          • Rename 重新命名
          • Ctrl + Alt + N
          • Inline Variable 嵌入變量
          • Ctrl + Alt + M
          • Extract Method( Javascript only) 提取函數
          • Ctrl + Alt + V
          • Introduce Variable 引入變量
          • Ctrl + Alt + F
          • Introduce Field 引入域
          • Ctrl + Alt + C
          • Introduce Constant 引入常量

          在WebStorm中VCS/Local History 版本控制系統/ 本地歷史相關的快捷鍵

          • Alt + BackQuote( )
          • ‘VCS’quick popup 快速彈出 VCS
          • Ctrl + K
          • Commit project to VCS 提交項目至VCS
          • Ctrl + T
          • Update project from VCS 從VCS 更新項目
          • Alt + Shift + C
          • View recent changes 查看最新改變

          使用WebStorm時General 常用的相關快捷鍵

          • Ctrl + Shift +A
          • Find action 查找并調用編輯器的功能
          • Alt + #[0-9]
          • Open corresponding tool window 快速切換打開界面模塊
          • Ctrl + Alt + F11
          • Toggle full screen mode 切換全屏模式
          • Ctrl + Shift + F12
          • Toggle maximizing editor 切換最大化編輯器
          • Alt + Shift + F
          • Add to Favorites 將當前文件添至收藏夾
          • Alt + Shift + I
          • Inspect current file with current profile 使用當前屬性檢查當前文件
          • Ctrl + BackQuote( )
          • Quick switch current scheme 快速轉換現有組合
          • Ctrl + Alt + S
          • Open setting dialog 打開設置對話框
          • Ctrl + Tab
          • Switch between tabs and tool window 標簽和工具窗的轉換(與windows快捷鍵沖突)

          .1 HTML簡介

          1.1.1 HTML:Hyper Text Markup Language(超文本標記語言)

          在學習使用HTML之前,大家經常會問,什么是HTML?HTML是用來描述頁面的一種語言,它是一種超文本標記語言,也就是說,HTML不是一種編程語言,僅是一種標記語言。 HTML由一套標記標簽組成,在制作網頁時,HTML使用標記標簽來描述網頁。

          1.1.2 發展史


          1.1.3 HTML5的優勢

          HTML5自正式推出以來,就以一種驚人的速度被迅速推廣著,各主流瀏覽器對于HTML5表現出來的熱烈歡迎、積極支持。

          1、世界知名瀏覽器廠商對HTML5的支持

          通過對Internet、Explorer、Google、Firefox、Safari、Opera等主要的web瀏覽器發展策略調查,發現它們都在支持HTML5上采取了措施

          - 微軟:2010年3月16日,微軟與拉斯維加斯市舉行的MIX10技術大會上宣布已推出InternetExplorer(IE)9瀏覽器開發者預覽版。

          - Google:2010年2月19日,GoogleGears項目經理伊安~費特通過博客宣布,谷歌將放棄對Gears瀏覽器插件項目支持、重點開發HTML5項目

          - 蘋果:2010年6月7日,蘋果開發者大會的會后發布了Safari5。這款瀏覽器支持10個以上HTML5的新技術,包括全屏播放、HTML5地理位置、HTML5的形式驗證等功能

          - Opera:2010年5月5日,Opera軟件公司首席技術官Hakon Wium Lie先生在訪華之際,接受了中國軟件資訊網等少數幾家媒體采訪,他認為HTML5和CSS3將是全球互聯網發展的未來趨勢

          - Mozilla:2010年7月,Mozilla基金會發布了Firefox4瀏覽器的第一個測試版,從官方文檔看,它對HTML5是完全級別的支持

          2、市場的需求

          現在的市場已經迫不及待地要求有一個統一的互聯網通用標準。HTML5之前的情況是,由于各瀏覽器之間不統一,僅修改web瀏覽器之間的由于兼容性而引起的bug就浪費了大量的時間。而HTML5的目標就是將web帶入一個成熟的應用平臺,在HTML5平臺上,視頻,音頻,圖像,動畫及同計算器的交互都被標準化。

          3、跨平臺

          HTML5可以做到跨平臺開發,用戶只用打開瀏覽器即可訪問應用,PC網站、各種移動設備,插件等核心代碼就可以不需要重復編寫,極大地減少了開發人員的工作量。

          1.1.4 W3C標準

          發明HTML的初衷是實現信息資料的網絡傳播和共享,希望HTML文檔具有平臺無關性,即同一個HTML文件,在不同的瀏覽器上看到同樣的頁面內容和效果。但是遺憾的是,隨著瀏覽器市場的激烈競爭,各大瀏覽器廠商為了吸引用戶,都在早期HTML版本的基礎上擴展各類標簽,各瀏覽器之間互不兼容,導致HTML編碼規則混亂,違背了HTML發明的初衷,因此需要一個組織來指定和維護統一的國際化web開發標準,確保多個瀏覽器都兼容,HTML內容結構都是語義化的。

          W3C標準不是某一個標準,而是一系列的標準集合,一個網頁主要有三部分組成,即結構、表現、行為。

          對應的標準也分三方面:結構化標準語言主要包括XHTML和XML,表現標準語言主要包括CSS,行為標準主要包括對象模型(如W3CDOM)、ECMAScript等。這些標準大部分由W3C起草和發布,也有一些是其他標準組織制訂的標準,比如ECMA(European Computer Manufacturers Association)的ECMAScript標準。

          1.1.5 網頁編輯工具

          1、開發工具

          • 記事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
          • 你可以從以上軟件的官網中下載對應的軟件,按步驟安裝即可。
          • 接下來我們將為大家演示如何使用 WebStorm來創建 HTML 文件。

          2、使用WebStorm編輯HTML文檔如下

          • 打開WebStorm編輯器后,選擇File->New->HTML File命令,打開“HTML File”對話框;
          • 在“Name”文本框中輸入HTML的文件名為“my_firstPage”在“Kind”下拉列表框中選擇HTML5 file選項 后OK按鈕即可創建一個HTML5頁面的模板;
          • 在body元素和title元素中添加網頁內容;
          • 網頁內容添加完成后,鼠標移動到編輯器的右上方,會出現幾個常見的瀏覽器圖標,單擊Chrome瀏覽器附表即可打開頁面;
          • 在Chrome瀏覽器中可以顯示出結果。

          2.1 HTML基礎

          2.1.1 HTML5的基本結構

          <html>
              <head>
                       <title>我的第一個網頁</title>
              </head>
              <body>
                       我的第一個網頁
              </body>
          </html>
          

          標簽都是成對出現的。 有一個開頭標記就應該有一個對應的結束標記記,“<>”開始,以“</>”結束,要求成對出現,標簽之間有縮進,提現層次感,方便閱讀。

          HTML5的基本結構分為兩部分。整個HTML包括頭部{head}和主體{body}兩部分,頭部包括網頁標題{title}等基本信息,主體包括頁面的內容信息,如圖片、文字等。

          2.1.2 網頁的基本信息

          1、DOCTYPE 聲明在這個HTML5文件最上面有一行關于DOCTYPE文檔類型的聲明,約束HTML文檔結構。檢查是否符合相關WEB標準,同時告訴瀏覽器使用那中規范來解釋這個文檔中的代碼。DOCTYPE聲明必須位于HTML文檔的第一行。

          HTML5:

          <!DOCTYPE html>
          <html>
          <head lang="en">
              <meta charset="UTF-8">
              <title></title>
          </head>
          <body>
          
          </body>
          </html>
          

          HTML4:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">
          

          2、<title>標簽 使用<title>標簽描述頁面的標簽,類似一個文檔的標題,為一個簡介的主題,并能使讀者有興趣。

          <title>搜狐-中國最大的門戶網站</title>
          

          3、<meta>標簽 使用<meta>標簽描述網頁的摘要信息,包括文檔內容類型、字符編碼信息,搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標簽的內容并不顯示,其目的是方便瀏覽器解析或利于搜索引擎搜索,它采用“名稱/值”對的方式描述摘要信息。

          meta標簽可分為兩大部分:http-equiv和name變量。

          http-equiv相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助瀏覽器正確地顯示網頁內容。




          name屬性主要用于描述網頁,與之對應的屬性值為content,content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。



          1.文檔內容類型,字符編碼信息書寫如下

          HTML5:

          <meta charset="UTF-8">
          

          HTML4:

          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
          

          屬性:charset表示字符集編碼,常用的編碼有以下幾種。

          1.gb2312:簡體中文,一般用于包含中文和英文的頁面;

          2.ISO-885901:純英文,一般用于只包含英文的頁面;

          3.big5:繁體,用于帶有繁體字的頁面;

          4.UTF-8:國際性通用的編碼,同樣適用于中文和英文的頁面。和gb2312編碼相比,國際通用性更好。

          2.搜索關鍵字和內容描述信息書寫如下

          <meta name="keywords" content="云圖智聯">
          <meta name="description"content="云圖智聯是國內的IT教育集團,致力于為中國培養優秀的IT技術人才">
          

          網站示例:

          <!--京東-->
           <meta name="description"
                    content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務,為您提供愉悅的網上購物體驗!"/>
              <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>
          
          <!--淘寶-->
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
            <meta name="renderer" content="webkit" />
            <title>淘寶網 - 淘!我喜歡</title>
            <meta name="spm-id" content="a21bo" />
            <meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺,提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品,同時提供擔保交易(先收貨后付款)等安全交易保障服務,并由商家提供退貨承諾、破損補寄等消費者保障服務,讓你安心享受網上購物樂趣!" />
            <meta name="aplus-xplug" content="NONE">
            <meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪" />
          

          2.1.3 HTML5的基本標簽

          1、標題標簽

          <h1>…</h1>
          <h2>…</h2>
          <h3>…</h3>
          <h4>…</h4>
          <h5>…</h5>
          <h6>…</h6>
          

          標題標簽表示一段文字和標題或主題,并且支持多層的內容結構。例如,一級標題采用h1,二級標題采用h2,其他級別標題以此類推。HTML共提供了六級標題h1~h6,并賦予了標題一定的外觀,所有標題字體加粗,h1字號最大,h6字號最小。

          2、段落標簽、換行標簽和水平線標簽

          <p>段落標簽</p>
          <br/><!--換行標簽-->
          <hr><!--水平線標簽-->
          

          3、字體樣式標簽

          <!--加粗-->
          <strong></strong>
          <b></b>
          <!--傾斜-->
          <em></em>
          <i></i>
          <!--字體縮小-->
          <small></small>
          <!--刪除線-->
          <s></s>
          <!--下劃線-->
          <u></u>
          

          4、圖像標簽

          (1)常見的圖像格式

          1.JPG格式

          JPG格式圖像是在Internet上被廣泛支持的圖像格式,它是聯合圖像專家組格式的英文縮寫。JPG格式采用的是有損壓縮,會造成圖像畫面的失真,不過壓縮之后的體積很小,而且比較清晰,所以比較適合在網頁中應用此格式最適合用于排和或連續取色調圖像的高級格式,這事因為JPG文件可以包含數百萬種顏色。隨著JPG格式文件品格式質的提高,文件的大小和下載時間也會隨著增加。通常可以通過壓縮JPG格式文件在圖像品質和文件大小之間達到良好的平衡。

          2.GIF格式

          GIF格式圖像是網頁中使用最廣泛,最普通的一種圖像格式,它是圖像交換格式的英文縮寫。GIF格式文件支持透明色,使得GIF格式在網頁的背景和一些多層特效的顯示上 用得非常多;還支持動畫,這是它最突出的一個特點,因此GIF格式圖像在網頁中應用非常廣泛。

          3.BMP格式

          BMP格式圖像在Windows操作系統中使用得比較多,它是位圖的英文縮寫。BMP格式圖像格式與其他Microsoft Windows程序兼容。它不支持文件壓縮,也不是用于Web頁。

          4.PNG格式

          PNG格式是20世紀90年代中期開始開發的圖像文件儲存格式,它兼有GIF和JPG格式的優勢,同時具備GIF格式不具備的特性。

          (2)圖像標簽

          <img src="path" alt="text" title="text"  width="x"  height="y" />
          

          src屬性表示圖片路徑,alt屬性指定圖像的代替文本,表示圖像無法顯示時(如圖片路徑錯誤或網速太慢等)替代先是文本,這樣,即使當圖像無法顯示時,用戶還可以看到網頁丟失的信息內容。

          title屬性可以提供額外的提示或幫助信息,當鼠標移至圖片上時顯示提示信息,方便用戶使用。

          width和height兩個屬性分別表示圖片的寬度和高度,如果不設置,那么圖片默認顯示原始大小。

          5、超鏈接標簽

          (1)超鏈接包含兩部分內容,一是鏈接地址,即鏈接的目標,可以是某個網站或文件路徑,對應a標簽的href屬性;二是鏈接文本或圖像,點擊該文本或圖像,將跳轉到href屬性指定的鏈接地址。

          <a href="path" target="目標窗口位置">鏈接文本或圖像</a>
          

          href:鏈接地址的路徑;

          target:指定鏈接在哪個窗口打開,常用的取值有_self(自身窗口)、_blank(新建窗口)。 超鏈接即可以是文本超鏈接,也可以使圖片超鏈接

          (2)常用的超鏈接

          1>頁面間鏈接

          從一個頁面鏈接到另一個頁面

          2>錨鏈接

          錨鏈接也稱錨點鏈接,命名錨點鏈接(也叫書簽鏈接)常常用于那些內容龐大繁瑣的網頁,通過點擊命名錨點,自動跳轉到我們設置錨點的位置,類似于我們閱讀書籍時的目錄頁碼或章回提示。

          錨點鏈接可以跳轉到頁面的任何位置。一般用于在頁面下面的時候,點擊回到最上面。錨點鏈接的名稱可以隨意取,只起到標記作用。

          1.從A頁面的甲位置跳轉到本頁中的乙位置

          示例:

              <a href="#a1">a1</a>
              <a href="#a2">a2</a>
              <a href="#a3">a3</a>
              <a href="#a4">a4</a>
          
              <div id="a1">a1</div>
              <div id="a2">a2</div>
              <div id="a3">a3</div>
              <div id="a4">a4</div>

          2.從A頁面的甲位置跳轉到B頁面中的乙位置

          示例:

          <!--A頁面-->
          <!DOCTYPE html>
          <html>
          <head lang="en">
              <meta charset="UTF-8">
          <title>錨鏈接</title>
          </head>
          <body>
          <p>
              [<a href="help.html#register">A位置</a>] 
              [<a href="help.html#login">B位置</a>]
          </p>
          </body>
          </html>
          <!--B頁面-->
          <!DOCTYPE html>
          <html>
          <head lang="en">
              <meta charset="UTF-8">
              <title>錨鏈接</title>
              <style>
                  div{
                      width: 100%;
                      height: 500px;
                      border: 1px solid red;
                  }
              </style>
          </head>
          <body>
          <h4><a name="register">A位置</a></h4>
          <div>
              <h2>A位置</h2>
          </div>
          <h4><a name="login">B位置</a></h4>
          <div>
              <h2>B位置</h2>
          </div>
          </body>
          </html>

          3>功能性鏈接

          <!--下載圖片-->
          <a href="img/qq.jpg">點擊下載圖片</a>
          <!--發送郵件-->
          <a href="mailto:Webmaster@ytzl.cn">聯系我們</a>
          <!--引用腳本語言-->
          <a href="javascript:alert('哈哈哈哈')"></a>

          6、注釋和特殊符號

          <!--注釋符號-->

          當頁面的HTML結構復雜或內容較多時,需要添加必要的注釋方便代碼閱讀和維護。同時,有時為了調試,需要暫時注釋掉一些不必要的HTML代碼。特殊符號一般以"&"符號開頭,";"結尾。



          3.1 練習

          3.1.1 制作《悟空》歌詞

          需求:

          1、標題使用標題標簽,文字使用p標簽標題與正文之間的分隔線使用水平線標簽;歌詞詞結束后使用換行標簽換行

          2、人名加粗顯示,時間斜體顯示

          3、制作頁面版權部分

          <html>
              <head>
                       <title>我的第一個網頁</title>
              </head>
              <body>
                       我的第一個網頁
              </body>
          </html>
          

          3.1.2 制作圖書簡介頁面

          使用學過的圖像標簽、標題標簽、水平線標簽、斜體標簽、加粗標簽、段落標簽等制作京東讀書新聞資訊頁面,主標題使用一級標題標簽,副標題使用二級標題標簽,二級標題與圖片之間使用水平線分隔。

          <h1>HTML5+CSS3從入門到精通(標準版)</h1>
          <h2>作者:未來科技</h2>
          <hr/>
          <p><img src="images/book.jpg" alt="圖書" width="200"/></p>
          <p><em>HTML 5 CSS 3 JavaScript從入門到精通(標準版)</em></p>
          <p><em>  以基礎知識、示例、實戰案例相結合的方式詳盡講述了HTML  CSS  JavaScript及目前*的前端技術html5移動開發 html5實戰 html5 canvas html5 app html5入門 html5 動畫  html5揭秘 html 游戲 html5權威指南 的基本知識都有涉及。</em></p>
          <p><strong>全書分兩大部分,共12章</strong></p>
          <p>介紹了HTML5入門和CSS3實戰入門內容:使用HTML標簽標識網頁內容,使用CSS設計網頁基本樣式,如使用并美化文本、圖像、超鏈接、列表、表單和表格等</p>
          <p>第二部分為CSS3布局部分,主要講解使用CSS3設計完整網頁的方法和技巧,以及CSS3中的各種新技術應用;</p>
          <p>? 2015-2025 云圖智聯</p>
          

          3.1.3 錨鏈接的應用

          <!DOCTYPE html>
          <html>
          <head lang="en">
              <meta charset="UTF-8">
              <title></title>
              <style>
                  a{
                      display: block;
                      width: 30px;
                      height: 30px;
                      line-height: 30px;
                      font-size: 18px;
                  }
                  div{
                      width: 400px;
                      height: 400px;
                      margin-top: 20px;
                      border: 1px solid red;
                  }
              </style>
          </head>
          <body>
          <a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
          <div id="a1">a1</div>
          <div id="a2">a2</div>
          <div id="a3">a3</div>
          <div id="a4">a4</div>
          </body>
          </html>

          免費學習視頻歡迎關注云圖智聯:https://e.yuntuzhilian.com/

          中級

          學習時間

          一小時

          學前準備

          有一定編程經驗。

          開發語言

          Typescript

          開發環境

          • Node.js v10.9.0
          • npm v6.2.0
          • WebStorm v2018.2.3
          • Angular CLI v6.1.5

          1.內聯 (inline) 模板還是模板文件?

          接著上一章,我們先來看AppComponent組件類中的內容:

          之前說過,@Component 裝飾器中的 templateUrl 屬性指定了組件模版文件地址;同時也可以用template屬性來指定內聯模版。下面就依次講解這兩種方式。

          在講解之前,看看官方是如何看待“內聯 (inline) 模板還是模板文件?”這個問題的:

          你可以在兩種地方存放組件模板。 你可以使用 template 屬性把它定義為內聯的,或者把模板定義在一個獨立的 HTML 文件中, 再通過 @Component 裝飾器中的 templateUrl 屬性, 在組件元數據中把它鏈接到組件。

          到底選擇內聯 HTML 還是獨立 HTML 取決于個人喜好、具體狀況和組織級策略。 上面的應用選擇內聯 HTML ,是因為模板很小,而且沒有額外的 HTML 文件顯得這個演示簡單些。

          無論用哪種風格,模板數據綁定在訪問組件屬性方面都是完全一樣的。

          這里呢,個人給出一個答案:實際開發中使用模版文件

          2.模版文件templateUrl

          模版就是HTML,所以模版文件那就是HTML文件啦。我們一起來找到這個模版文件,然后書寫自己的內容。

          下面看看組件元數據中的templateUrl屬性

          templateUrl屬性的值為“./app.component.html”,其中“.”表示當前目錄,于是整體表示的是當前目錄下的“app.component.html”文件,看文件類型就知道是HTML文件。那么當前目錄是哪個目錄呢?這個當前目錄表示“app.component.ts”所在的目錄,也就是app目錄:

          既然AppComponent組件的模版文件是“app.component.html”,那么打開“app.component.html”來看看:

          我們上一章中牛刀小試的部分也保留了下來,現在來更改其中的內容,刪除第一個<div>標簽中的<img>標簽:

          刪除第一個<div>標簽后面的所有內容:

          啟動Angular應用:

          看看你的界面是否和我的一樣。

          模版文件就是HTML文件,它里面的內容就是HTML。所以,大家只要會寫HTML,那么就會寫組件模版。組件模版也是組件的樣子,組件模版長什么樣,組件就長什么樣。

          接著來看看templateUrl屬性官方說明

          屬性名稱:templateUrl

          屬性詳情:組件模板文件的 URL。如果提供了它,就不要再用 template 來提供內聯模板了。

          屬性類型:templateUrl: string

          牛刀小試

          來一個非常簡單的示例,將“I like Angular”字體顏色變為紅色。

          參考示例:

          “app.component.html”:

          結果頁面:

          示例雖然很簡單,但是就想告訴大家,書寫模版文件沒有那么難,就是普通的HTML。大家也可以試試其他你會的HTML元素。

          3.內聯模版template

          內聯就是寫在和組件類同一個文件里面;模版和上面說過的一樣,就是HTML;內聯模版綜合就是寫在組件類文件中的HTML。

          注意,我說的是組件類文件中,還沒有說具體寫在哪。

          具體寫在組件類上@Component 裝飾器中的 template 屬性中。

          下面一步一步來書寫一個內聯模版。

          打開“app.component.ts”組件類文件:

          @Component 裝飾器中的 templateUrl 改為 template

          然后將template屬性值“./app.component.html”刪掉,寫上兩個“``”(反引號,反引號在鍵盤的ESC鍵下面,TAB鍵的上面,數字1鍵的左邊。別忘了在英文輸入法狀態下進行輸入)

          再看看瀏覽器中應用界面:

          空的,什么都沒有。因為我們沒有在內聯模版中寫東西。

          內聯模版中寫的也是HTML代碼?

          是的,和在模版文件中寫的一樣。

          現在,在template屬性值寫上“<h1>Welcome</h1>”

          再看瀏覽器中界面的變化:

          那么問題來了,內聯模版中也能想模版文件中那樣使用插值表達式嗎?

          答案是可以的。我們來試試,將template屬性值更改為“<h1>Welcome to {{ title }}!</h1>”

          瀏覽器中的界面:

          正確的將“Welcome to hello”顯示出來了,這也說明在內聯模版中使用插值表達式是完全沒有問題的。

          有人估計想問了,template屬性值為什么要寫在反引號中?引號不可以嗎?

          首先,反引號是字符串模版,寫在“``” 反引號中的字符串內容將原生輸出,不會對其中對內容進行轉義。而引號則會對其中對內容進行轉義,那樣就達不到書寫HTML代碼的目的。

          既然如此,我們將template屬性值更改為和“app.component.html”模版文件一樣的內容。

          刪除原有的template屬性值內容,并在反引號中間回車,也就是換行:

          然后,將“app.component.html”里面的內容復制粘貼到反引號中,當然了,你也可以照著寫一遍:

          再去看看瀏覽器中Angular應用界面:

          和模版文件呈現出的內容一摸一樣。

          這就是內聯模版,它將HTML書寫在了組件類的元數據上。在實際開發中,我們通常不會采用內聯模版的方式,因為它書寫起來極不方便,也不美觀,更沒有閱讀性,所以我們采用模版文件的方式,將組件類和組件模版關聯起來。

          接下來看看template屬性官方說明

          屬性名稱:template

          屬性詳情:組件的內聯模板。如果提供了它,就不要再用 templateUrl 提供模板了。

          屬性類型:template: string

          4.模板與視圖

          官方是如何描述模版與視圖的呢?

          你要通過組件的配套模板來定義其視圖。模板就是一種 HTML,它會告訴 Angular 如何渲染該組件。

          視圖通常會分層次進行組織,讓你能以 UI 分區或頁面為單位進行修改、顯示或隱藏。 與組件直接關聯的模板會定義該組件的宿主視圖。該組件還可以定義一個帶層次結構的視圖,它包含一些內嵌的視圖作為其它組件的宿主。

          帶層次結構的視圖可以包含同一模塊(NgModule)中組件的視圖,也可以(而且經常會)包含其它模塊中定義的組件的視圖。

          以上就是官方對模版與視圖的描述,上面最后的一張圖我們可以簡單說一下,從圖中可以看到,頂層的是RootComponent和RootTemplate,也就是根組件和根組件的模版。

          我們當前的根組件就是AppComponent。接著,在根組件的下面有Child A Component 和Child A Template,還有Child B Component 和Child B Template,雖然它只是列了兩個子組件A和子組件B,其實還可以有無限的子組件。

          從圖中還可以看出,子組件A還有一個GrandChild Component 和GrandChild Template,也就是孫子組件和孫子組件的模版。

          這張圖它想表達的意思是什么?

          它想表達的意思是,一個頁面(即視圖)可以是由很多個子視圖組成的

          大家如果還是有點搞不懂,我們來看一個實際頁面來說明,以百度舉例說明。

          上圖是百度的官網,假設這是我們編寫的AppComponent,其中哪些部分可以由多個子組件組合而成的呢?我標注出來給大家看:

          其中,將網頁分為三部分:頁面頂部、頁面內容區、頁面底部。頁面頂部放置網站導航,頁面內容放置LOGO和搜索框,頁面底部放置網站版權信息。

          AppComponent對應的是整體頁面,由導航組件、內容組件和底部組件組成。

          頁面頂部可以是NavComponent,導航組件。

          頁面內容可以是ContentComponent,內容組件。

          頁面底部可以是FooterComponent,底部組件。

          這樣是不是一下子把整體頁面單獨區分開來?一目了然有沒有。

          當你要編輯網頁頂部導航時,只需去編輯NavComponent組件即可,其他的組件完全不用動,這幾個組件之間完全互不干擾,獨立存在。

          為什么要分的這么細?

          因為不想在后續的開發過程因一個小小的改動牽一發而動全身,那是災難。另外一個原因就是組件復用,相同組件只需寫一次,要用到的地方寫上selector即可。

          至此,組件的模版講解就先告一段落啦,后續還有根組件模版息息相關的內容,敬請關注!

          答疑

          如果大家有問題或想了解更多前沿技術,請在下方留言或評論,我會為大家解答。

          上一章

          Angular第二十一章:組件

          下一章

          Angular第二十三章:組件的CSS樣式

          學習小組

          加入同步學習小組,共同交流與進步。

          • 方式一:通過關注我們的頭條號,然后私信我們。
          • 方式二:通過公眾號gorhaf,回復“Angular學習小組”。

          關注我們

          如果你也熱愛前沿技術,歡迎關注我們。

          版權聲明

          原創不易,未經允許不得轉載!


          主站蜘蛛池模板: 不卡一区二区在线| 精品免费AV一区二区三区| 国产精品免费一区二区三区| 国产成人一区二区三区在线| 日韩一区二区三区四区不卡| 久久国产香蕉一区精品| 国产一区二区成人| 亚洲色无码一区二区三区 | 亚洲AⅤ无码一区二区三区在线| 无码精品人妻一区二区三区漫画 | 无码毛片视频一区二区本码| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 精品国产一区二区三区香蕉| 91精品一区国产高清在线| av一区二区三区人妻少妇| 一区二区三区福利视频免费观看| 成人免费视频一区二区| 精品国产区一区二区三区在线观看| 国产成人一区二区三区在线观看| 人妻内射一区二区在线视频| 无码视频一区二区三区| tom影院亚洲国产一区二区 | 国产成人AV区一区二区三| 麻豆一区二区99久久久久| 久久久国产一区二区三区| 内射一区二区精品视频在线观看| 日韩免费一区二区三区在线播放| 亚洲爆乳无码一区二区三区| 变态拳头交视频一区二区| 日韩精品一区二区三区在线观看| 国产精品成人免费一区二区 | 国产无套精品一区二区 | 丰满爆乳无码一区二区三区| 精品国产一区AV天美传媒| 日本亚洲成高清一区二区三区| 国产韩国精品一区二区三区 | 亚洲一区二区三区在线网站| 精品视频无码一区二区三区| 精品一区二区久久| 中文字幕在线精品视频入口一区| 激情内射亚州一区二区三区爱妻|