前端-html+CSS基礎到高級(三)html基礎和開發工具

一、html語法規范

什么是注釋?
在同學上課學習時，我們會在書本段落間記錄內容的注解，方便下次看到此處理解。
問題：我們在書本段落間記錄下的注解是為了給誰看的？?下次的閱讀課本者（自己）。
程序員在寫代碼時也會添加注釋，方便下次看到此處時方便想起功能和含義。
問題：程序員在代碼中添加的注釋，是為了給誰看的？下次的閱讀代碼者（自己或者其他程序員）。

注釋的作用：
為代碼添加的具有解釋性、描述性的信息，主要用來幫助開發人員理解代碼，?瀏覽器執行代碼時會忽略所有的注釋。
注釋的快捷鍵：在VS Code中：ctrl + / 。

HTML標簽的結構：

1. 標簽由<、>、/、英文單詞或字母組成。并且把標簽中<>包括起來的英文單詞或字母稱為標簽名
2. 常見標簽由兩部分組成，我們稱之為：雙標簽。前部分叫開始標簽，后部分叫結束標簽，兩部分之間包裹內容
3. 少數標簽由一部分組成，我們稱之為：單標簽。自成一體，無法包裹內容

HTML標簽與標簽之間的關系可分為：

父子關系（嵌套關系）：

<head><title></title>
</head>

兄弟關系（并列關系）：

<head></head>
<body></body>

二、開發工具的使用

1）開發工具自動生成代碼
工具優勢：開發工具能自動補全HTML骨架結構，相比手動編寫可節省80%以上的基礎代碼輸入時間
典型場景：創建新HTML文件時，工具會自動生成<!DOCTYPE html>聲明、<html>標簽、<head>和<body>等必要結構
2）VS Code介紹

市場地位：當前企業級開發最流行的前端工具，2023年市場占有率超過65%
核心優勢：
輕量化：安裝包僅70MB左右，運行時內存占用低
插件生態：支持超過3萬款擴展插件（如Emmet、Live Server等）
跨平臺：完美支持Windows/macOS/Linux三大系統
免費開源：MIT許可證允許商業用途且無功能限制
競品對比：
WebStorm：功能強大但收費（$129/年），內存占用高
Sublime Text：部分高級功能需付費（$80終身）
Dreamweaver：安裝包超過1GB，大學教學常用但企業少用
HBuilder：中文友好但功能臃腫
3）使用文本編輯器寫代碼

傳統方式：使用記事本等文本編輯器需手動輸入所有標簽和符號
效率問題：
輸入<tag></tag>等閉合標簽耗時增加300%
缺少語法高亮和錯誤提示，調試困難
無法使用代碼片段(Snippet)等快捷輸入功能

三、 VS Code使用前要求

1. VSCode 軟件安裝完畢

2. Chinese (Simplified) Language Pack for Visual Studio Code 簡體中文插件安裝完畢

3. open in browser 直接打開瀏覽器插件安裝完畢

四、VS?Code快捷鍵

1. 快速生成標簽：英文 + tab

2. 保存文件：ctrl + s
注意1：寫完文件之后務必需要保存文件，否則網頁無變化
注意2：可以設置自動保存省去每次保存的麻煩

3. 快速查看網頁效果：右擊 → Open in Default Browser
快捷鍵：alt + b
注意：必須安裝了open in browser 插件

4. 快速生成結構標簽：! + tab
注意1：!必須是英文的，中文!無效
注意2：必須保證當前文件后綴名是.html，否則無效
VS Code自動生成的骨架多了其他標簽，之后會介紹

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/93509.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/93509.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/93509.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！