「HTML一」 html基礎(chǔ)

、html的介紹

1.1 html的定義

HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標(biāo)記語(yǔ)言。標(biāo)記：就是標(biāo)簽, <標(biāo)簽名稱></標(biāo)簽名稱>，比如：<html></html>、<h1></h1>等，標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。

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

因?yàn)榫W(wǎng)頁(yè)中還可以圖片、視頻、音頻等內(nèi)容(超越文本限制)
它還可以在網(wǎng)頁(yè)中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，與世界各地主機(jī)的網(wǎng)頁(yè)鏈接(超鏈接文本)

1.2 html的作用

html是用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)的，它是開(kāi)發(fā)網(wǎng)頁(yè)的語(yǔ)言。

1.3 小結(jié)

html是開(kāi)發(fā)網(wǎng)頁(yè)的語(yǔ)言
html中的標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的, 格式: <標(biāo)簽名>

二、html的基本結(jié)構(gòu)

2.1 結(jié)構(gòu)代碼

<!DOCTYPE html>
<html>
   <head>            
       <meta charset="UTF-8">
       <title>網(wǎng)頁(yè)標(biāo)題</title>
   </head>
   <body>
        網(wǎng)頁(yè)顯示內(nèi)容
   </body>
</html>

第一行<!DOCTYPE html>是文檔聲明, 用來(lái)指定頁(yè)面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔。
<html>...</html>標(biāo)簽是開(kāi)發(fā)人員在告訴瀏覽器，整個(gè)網(wǎng)頁(yè)是從<html>這里開(kāi)始的，到html結(jié)束,也就是html文檔的開(kāi)始和結(jié)束標(biāo)簽。
<head>...</head>標(biāo)簽用于定義文檔的頭部,是負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的。
<body>...</body>標(biāo)簽是編寫(xiě)網(wǎng)頁(yè)上顯示的內(nèi)容。

2.2 瀏覽網(wǎng)頁(yè)文件

網(wǎng)頁(yè)文件的后綴是.html或者.htm, 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)。

2.3 小結(jié)

三、vscode的基本使用

3.1 vscode 的基本介紹

全拼是 Visual Studio Code (簡(jiǎn)稱 VS Code) 是由微軟研發(fā)的一款免費(fèi)、開(kāi)源的跨平臺(tái)代碼編輯器，目前是前端(網(wǎng)頁(yè))開(kāi)發(fā)使用最多的一款軟件開(kāi)發(fā)工具。

3.2 vscode 的安裝

下載網(wǎng)址: https://code.visualstudio.com/Download
選擇對(duì)應(yīng)的安裝包進(jìn)行下載:

根據(jù)下載的安裝包雙擊進(jìn)行安裝即可，當(dāng)然為了更好的使用 vscode 還可以安裝對(duì)應(yīng)的插件。

3.3 vscode 的插件安裝

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

漢化插件安裝

open in browser插件安裝

注意: 如果在vscode打開(kāi)的html文檔中右擊沒(méi)有出現(xiàn) open in browser 類型的選項(xiàng)，需要把當(dāng)前打開(kāi)的文件關(guān)掉，重新打開(kāi)這個(gè)文件就好了。

3.4 vscode 的插件卸載

點(diǎn)擊對(duì)應(yīng)安裝的插件，然后再點(diǎn)擊卸載按鈕即可。

3.5 vscode 的使用

打開(kāi)文件夾創(chuàng)建文件

快速創(chuàng)建html文檔的基本結(jié)構(gòu)

右擊在瀏覽器打開(kāi)html文檔

3.6 設(shè)置字體大小

3.7 設(shè)置顏色主題

3.8 設(shè)置默認(rèn)瀏覽器[可選]

可以根據(jù)自己的需要設(shè)置默認(rèn)使用的瀏覽器

3.9 小結(jié)

vscode 是由微軟研發(fā)的一款免費(fèi)、開(kāi)源的跨平臺(tái)代碼編輯器
通過(guò)資源管理器打開(kāi)文件夾創(chuàng)建HTML文件，編寫(xiě) HTML 代碼
可以根據(jù)需要安裝對(duì)應(yīng)的插件
可以設(shè)置字體大小和顏色主題

SS3實(shí)現(xiàn)文本字體漸變雙色變化，實(shí)現(xiàn)顏色過(guò)渡漸變，可以用在首頁(yè)展示欄中，增強(qiáng)用戶體驗(yàn)！下面來(lái)看看效果：

實(shí)現(xiàn)代碼非常簡(jiǎn)單：

體效果

<h1></h1> 標(biāo)題字(最大)

<h6></h6> 標(biāo)題字(最小)

<strong></strong> 粗體字(突出強(qiáng)調(diào))

<b></b> 粗體字(bold:粗體)

<i></i> 斜體字(italic:斜體)

<u></u> 底線,文本添加下劃線：(underline:下劃線)

<strike></strike>或<s></s> 橫線,相當(dāng)于加刪除線文本 <del></del> HTML5

等寬文字標(biāo)簽:對(duì)于等寬文字設(shè)置多數(shù)情況用在英文文字顯示中

<tt></tt> 打字體,類似打字機(jī)或者等寬的文本效果。

<code></code> 等寬文字設(shè)置內(nèi)容(定義計(jì)算機(jī)代碼文本)

<samp></samp> 等寬文字設(shè)置內(nèi)容(定義樣本文本)

<kbd> 定義鍵盤文本。

<sup></sup> 文字上標(biāo)字體標(biāo)簽(super)

<sub></sub> 文字下標(biāo)字體標(biāo)簽(subscipt)

<address></address> 設(shè)置地址文字(可定義一個(gè)地址,比如電子郵件地址。您應(yīng)當(dāng)使用它來(lái)定義地址、簽名或者文檔的作者身份。)

<font></font> 編輯網(wǎng)頁(yè)文字樣式

<font face="" size="" color=""></font>

face屬性可以用于設(shè)置文字的名稱,可以是宋體、隸書(shū)、楷體等;

size屬性用于設(shè)置字號(hào)的大小(單位:字號(hào)),從 1 到 7 的數(shù)字,或h1-h6。瀏覽器默認(rèn)值是3。

color用于設(shè)置字體的顏色

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

手冊(cè)上沒(méi)有

<ruby></ruby>和<rt></rt> 設(shè)置文字標(biāo)注標(biāo)記

實(shí)例:

<ruby>當(dāng)代最可愛(ài)的人<rt>志愿軍</rt></ruby>

在線咨詢

上一篇：徹底弄懂Javascript模塊導(dǎo)入導(dǎo)出
下一篇：關(guān)于前端學(xué)習(xí)路線的一些建議（內(nèi)含經(jīng)典自測(cè)題）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商