html開發筆記01-HTML基本格式

言：

本人最近打算開始學習web開發了，每天寫一點筆記，如果需要的話可以留個參考，如果沒有人需要，我就當自己記筆記了，如果哪里有問題歡迎各位高手評論區留言指點，感謝。

筆記正文：

1、基本格式：

書寫文本有文本格式，編寫網頁的時候，html 也有自己的基本結構或基本格式，它是這樣的：↓

大標簽包含小標簽，小標簽內對應不同的內容，而這些標簽的分級結構就是父、子關系，并且層級之間是靠縮進來區分，越靠外的為父。

作各種各樣的網頁，為了更好地實現網頁效果，需要為網頁制作CSS樣式表。如何使用 CSS 同時控制多重網頁的樣式和布局。

（1）編輯代碼

打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。

（2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

什么是 CSS?

1.CSS 指層疊樣式表 (Cascading Style Sheets)

2.樣式定義如何顯示 HTML 元素

3.樣式通常存儲在樣式表中

4.把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題

5.外部樣式表可以極大提高工作效率

6.外部樣式表通常存儲在 CSS 文件中

7.多個樣式定義可層疊為一個

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:

選擇器通常是您需要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

CSS聲明總是以分號(;)結束，聲明總以大括號({})括起來:代碼如下

font-family: "Times New Roman";

font-size: 20px;

}

為了讓CSS可讀性更強，你可以每行只描述一個屬性。

CSS 注釋

注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。

CSS注釋以 "/*" 開始, 以 "*/" 結束, 實例如下:

、html的介紹

1.1 html的定義

HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言。標記：就是標簽, <標簽名稱></標簽名稱>，比如：<html></html>、<h1></h1>等，標簽大多數都是成對出現的。

所謂超文本，有兩層含義:

因為網頁中還可以圖片、視頻、音頻等內容(超越文本限制)
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接(超鏈接文本)

1.2 html的作用

html是用來開發網頁的，它是開發網頁的語言。

1.3 小結

html是開發網頁的語言
html中的標簽大多數都是成對出現的, 格式: <標簽名>

二、html的基本結構

2.1 結構代碼

<!DOCTYPE html>
<html>
   <head>            
       <meta charset="UTF-8">
       <title>網頁標題</title>
   </head>
   <body>
        網頁顯示內容
   </body>
</html>

第一行<!DOCTYPE html>是文檔聲明, 用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔。
<html>...</html>標簽是開發人員在告訴瀏覽器，整個網頁是從<html>這里開始的，到html結束,也就是html文檔的開始和結束標簽。
<head>...</head>標簽用于定義文檔的頭部,是負責對網頁進行設置標題、編碼格式以及引入css和js文件的。
<body>...</body>標簽是編寫網頁上顯示的內容。

2.2 瀏覽網頁文件

網頁文件的后綴是.html或者.htm, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁。

2.3 小結

三、vscode的基本使用

3.1 vscode 的基本介紹

全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發的一款免費、開源的跨平臺代碼編輯器，目前是前端(網頁)開發使用最多的一款軟件開發工具。

3.2 vscode 的安裝

下載網址: https://code.visualstudio.com/Download
選擇對應的安裝包進行下載:

根據下載的安裝包雙擊進行安裝即可，當然為了更好的使用 vscode 還可以安裝對應的插件。

3.3 vscode 的插件安裝

插件名說明Chinese (Simplified) Language Pack for VS Code中文(簡體)漢化包open in browser右擊在瀏覽器打開html

漢化插件安裝

open in browser插件安裝

注意: 如果在vscode打開的html文檔中右擊沒有出現 open in browser 類型的選項，需要把當前打開的文件關掉，重新打開這個文件就好了。

3.4 vscode 的插件卸載

點擊對應安裝的插件，然后再點擊卸載按鈕即可。

3.5 vscode 的使用

打開文件夾創建文件

快速創建html文檔的基本結構

右擊在瀏覽器打開html文檔

3.6 設置字體大小

3.7 設置顏色主題

3.8 設置默認瀏覽器[可選]

可以根據自己的需要設置默認使用的瀏覽器

3.9 小結

vscode 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
通過資源管理器打開文件夾創建HTML文件，編寫 HTML 代碼
可以根據需要安裝對應的插件
可以設置字體大小和顏色主題

在線咨詢

上一篇：XML 命名空間
下一篇：相比 App，Web 開發竟更適合初創公司？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商