HTML簡介：想成為前端開發者？先從掌握HTML開始！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

誰見過風呢

勿論你和我

但當樹木俯首

風正經過

- 2024.03.05 -

在這個數字化的時代，我們每天都在與網頁打交道。你是否曾經好奇過，這些充滿魔力的網頁是如何誕生的呢？今天，我們就來揭開構成這些網頁的神秘面紗——HTML（超文本標記語言）。

一、什么是HTML

網頁的基本組成

網頁是構成網站的基本元素，通常由圖片、鏈接、文字、聲音、視頻等元素組成，通常我們看見的網頁都是.htm和.html后綴結尾的文件，因為都稱為HTML文件。

什么是HTML

HTML 英文全稱是 Hyper Text Markup Language，中文譯為“超文本標記語言”，專門用來設計和編輯網頁。

使用 HTML 編寫的文件稱為“HTML 文檔”，一般后綴為.html（也可以使用.htm，不過比較少見）。HTML 文檔是一種純文本文件，您可以使用 Windows 記事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本編輯來打開或者創建。

每個網頁都是一個 HTML 文檔，使用瀏覽器訪問一個鏈接（URL），實際上就是下載、解析和顯示 HTML 文檔的過程。將眾多 HTML 文檔放在一個文件夾中，然后提供對外訪問權限，就構成了一個網站。

二、HTML的歷史

HTML的故事始于1989年，當時蒂姆·伯納斯-李在歐洲核子研究中心（CERN）提出了一個名為“萬維網”的概念。

為了實現這一概念，他發明了HTML，并隨后與羅伯特·卡里奧一起發明了HTTP協議。從那時起，HTML就成為了互聯網不可或缺的一部分。

上圖簡單羅列了HTML的發展歷史，大家可以簡單了解一下。

三、HTML相關概念

什么是標簽

HTML 標記通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如<html/>。

封閉類型標記（也叫雙標記），必須成對出現,如<p></p> 。

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽，開始和結束標簽也被稱為開放標簽和閉合標簽。

非封閉類型標記，也叫作空標記，或者單標記，如<br/>

<標簽>內容<標簽/>

什么是元素

"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思。但是嚴格來講，一個HTML 元素包含了開始標簽與結束標簽，如下實例。

HTML 元素：

<p>這是一個段落</p>

web瀏覽器

Web 瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取 HTML 文件，并將其作為網頁顯示。瀏覽器并不是直接顯示的 HTML 標簽，但可以使用標簽來決定如何展現 HTML頁面的內容給用戶：

HTML 屬性

屬性是用來修飾元素的，屬性必須位于開始標簽里，一個元素的屬性可能不止一個，多個屬性之間用空格隔開，多個屬性之間不區分先后順序。

每個屬性都有值，屬性和屬性的值之間用等號鏈接，屬性的值包含在引號當中，屬性總是以名稱/值對的形式出現。

四、HTML的基本結構

一個典型的HTML文檔由以下幾個基本元素構成：

<!DOCTYPE html>

這是文檔類型聲明，告訴瀏覽器這個文檔使用的是HTML5標準。

<html>

這是整個HTML文檔的根元素，其他所有元素都包含在這個標簽內。

<head>

這個部分包含了所有關于網頁的元信息，如標題、字符集聲明、引入的CSS樣式表和JavaScript文件等。

<title>

這個標簽定義了網頁的標題，它顯示在瀏覽器的標題欄或標簽頁上。

<body>

這個部分包含了網頁的所有內容，如文本、圖片、鏈接、表格、列表等。

HTML的結構示例

讓我們通過一個簡單的例子來具體了解HTML的結構：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個HTML頁面</title>
</head>
<body>
<h1>歡迎來到我的網頁！</h1>
<p>這是一個簡單的段落。</p>
<a href="https://www.example.com">點擊這里訪問示例網站</a>
</body>
</html>

在這個例子中，我們可以看到一個完整的HTML文檔結構，從<!DOCTYPE html>開始，到最后一個</html>結束。

想象一下，如果HTML是一棵樹，那么<html>就是樹干，<head>和<body>就像是樹的兩個主要分支。<head>中的標簽好比是樹葉，它們雖然不起眼，但卻至關重要，為樹木提供營養。而<body>中的標簽則像是樹枝和果實，它們構成了樹的主體，吸引人們的目光。

想要快速入門HTML嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！搜索【云端源想】前往學習哦！

五、HTML的特點

HTML的特點主要包括簡易性、可擴展性、平臺無關性和通用性等。具體如下：

1、簡易性：

HTML是一種相對容易學習和使用的語言，它的版本升級通常采用超集方式，使得新版本能夠兼容舊版本的標簽和功能，這樣既保持了向后兼容性，又能夠靈活方便地引入新的功能。

2、可擴展性：

隨著互聯網的發展，HTML也在不斷增加新的元素和屬性來滿足新的需求，如支持多媒體內容的嵌入、更豐富的表單控件等。這種設計使得HTML能夠適應不斷變化的網絡環境。

3、平臺無關性：

HTML編寫的網頁可以在不同的操作系統和瀏覽器上顯示，這是因為HTML是一種與平臺無關的語言。這意味著無論用戶使用什么設備或瀏覽器，都能夠訪問和瀏覽HTML頁面。

4、通用性：

HTML是網絡的通用語言，它是一種簡單的標記語言，用于創建和結構化網頁內容。由于其廣泛的支持和普及，幾乎所有的設備和瀏覽器都能夠解析和顯示HTML內容。

5、支持多種媒體格式：

HTML不僅支持文本內容，還能夠嵌入圖片、音頻、視頻等多種媒體格式，這使得網頁可以提供豐富的用戶體驗。

6、標準化：

HTML遵循萬維網聯盟（W3C）制定的國際標準，這意味著網頁開發者可以根據這些標準來創建網頁，確保網頁的互操作性和可訪問性。

7、標簽豐富：

HTML提供了一系列的標簽，如標題、列表、鏈接、表格等，這些標簽使得開發者能夠創建出結構清晰、功能豐富的網頁。

綜上所述，HTML作為一種基礎的網頁開發語言，因其易學易用、跨平臺、多功能和高度標準化的特點，成為了構建現代網絡內容的核心工具。

HTML作為連接世界的紐帶，其重要性不言而喻。它是數字世界的基石，也是每個想要進入互聯網領域的人必須掌握的技能。無論你是夢想成為前端開發者，還是僅僅想要更好地理解這個由代碼構成的世界，學習HTML都是一個不錯的開始。

今天就先講到這里了，

更多前端開發基礎知識點擊文末閱讀原文查看哦！

記得關注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

在HTML中，任何元素都可以被編輯；啟用編輯功能：HTML標簽設置contenteditable屬性，或者在Javascript中設置該元素的contentEditable屬性；

<div id="editor" contenteditable>單擊編輯</div>
<div id="mydiv">也可編輯</div>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
</script>

元素被設置成可編輯后，除了常規的插入刪除等操作外，還可以使用document.execCommand()方法對當前選擇的內容進行編輯，比如，設置文本的樣式，如加粗、傾斜等；

另外，有些瀏覽器允許鍵盤快捷鍵（如Ctrl+B加粗）來加粗當前選中的文本，Firefox使用Ctrl+B和Ctrl+I；

contenteditable也存在著兼容問題，如，當回車換行時，不同的瀏覽器有不同有處理，標準瀏覽器一般會使用div，而IE會使用p來分段，有些會使用br；所以，可以使用一個替代的方案document.execCommand()方法；如：

mydiv.addEventListener("keydown", function(e){
    if(e.keyCode == 13)
        document.execCommand("defaultParagraphSeparator", false, "p");
});

HTMLElement.isContentEditable屬性：

只讀屬性返回一個布爾值：如果當前元素的內容為可編輯狀態，則返回true，否則返回false；

var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
console.log(mydiv.isContentEditable);

瀏覽器有可能為表單控件和具有contenteditable元素支持自動拼寫檢查；在支持該功能的瀏覽器中，檢查可能默認開啟或關閉；為元素添加spellcheck屬性來顯式開啟拼寫檢查，或設置為false來顯式關閉該功能；

designMode屬性：

將Document對象的designMode屬性設置為”on”使得整個文檔可編輯，設置為”off”將恢復為只讀文檔；designMode屬性并沒有對應的HTML屬性；

window.onload = function(){
    document.designMode = "on";
}

如，使<iframe>內部的文檔可編輯；

<iframe id="editor" src="about:blank"></iframe>
<script>
window.onload = function(){
    var editor = document.getElementById("editor");
    editor.contentDocument.designMode = "on";
}
</script>

document.execCommand()方法：

瀏覽器定義了多個文本編輯命令，但大部分沒有鍵盤快捷鍵；為了執行這些命令，可以使用Document對象的execCommand()方法；當HTML文檔切換到designMode模式或存在可編輯元素或當前選擇或給出范圍，就可以使用此方法運行命令來操縱內容區域的元素；

語法：bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)；

其返回一個Boolean值，如果是false，則表示操作不被支持或未被啟用；該方法需要三個參數：aCommandName命令名稱，如”bold”、”subscript”、”justifycenter”和”insertimage”等之類的字符串；aShowDefaultUI是個布爾值，表示瀏覽器要不要提示用戶輸入所需要值，一般為false；aValueArgument為用戶輸入的值，默認為null；

<div id="mydiv">Web前端開發</div>
<button id="btnBold">加粗</button>
<button id="btnLink">插入鏈接</button>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
var btnBold = document.getElementById("btnBold");
btnBold.addEventListener("click",bold, false);
function bold(){
    document.execCommand("bold");
}
var btnLink = document.getElementById("btnLink");
btnLink.addEventListener("click", link, false);
function link(){
    var url = prompt("輸入鏈接URL：");
    if(url)
        document.execCommand("createlink", true,url);
}
</script>

命令列表：

2D-Position：允許通過拖曳移動絕對定位的對象；
AbsolutePosition：設定元素的 position 屬性為“absolute”(絕對)；
backColor：修改文檔的背景顏色，需要一個<color>類型的字符串值作為參數傳入，注：IE瀏覽器用這個設置文字的背景顏色；
BlockDirLTR：目前尚未支持；
BlockDirRTL：目前尚未支持；
bold：開啟或關閉選中文字或插入點的粗體字效果，IE使用 <strong>標簽，而不是<b>標簽；
BrowseMode：目前尚未支持；
ClearAuthenticationCache：清除緩存中的所有身份驗證憑據；
contentReadOnly：通過傳入一個布爾參數設置文檔內容的可編輯性；(IE瀏覽器不支持)
copy：拷貝當前選中內容到剪貼板；
CreateBookmark：創建一個書簽錨或獲取當前選中區或插入點的書簽錨的名稱；
createLink：將選中內容創建為一個錨鏈接，該命令需要一個hrefURI字符串作為參數值傳入；
cut：剪貼當前選中的文字并復制到剪貼板；
decreaseFontSize：給選中文字加上<small>標簽，或在選中點插入該標簽；(IE瀏覽器不支持)
defaultParagraphSeparator：更改在可編輯文本區域中創建新段落時使用的段落分隔符
delete：刪除選中部分；
DirLTR：目前尚未支持；
DirRTL：目前尚未支持；
EditMode：目前尚未支持；
enableAbsolutePositionEditor：啟用或禁用允許移動絕對定位元素的抓取器；
enableInlineTableEditing：啟用或禁用表格行和列插入和刪除控件；(IE瀏覽器不支持)
enableObjectResizing：啟用或禁用圖像和其他對象的大小可調整大小手柄；(IE瀏覽器不支持)
fontName：在插入點或者選中文字部分修改字體名稱，需要提供一個字體名稱字符串 (例如："Arial")作為參數；
fontSize：在插入點或者選中文字部分修改字體大小，需要提供一個HTML字體尺寸 (1-7) 作為參數；
foreColor：在插入點或者選中文字部分修改字體顏色，需要提供一個顏色值字符串作為參數；
formatBlock：添加一個HTML塊式標簽在包含當前選擇的行, 如果已經存在了，更換包含該行的塊元素 (在 Firefox中, BLOCKQUOTE 是一個例外 -它將包含任何包含塊元素)；需要提供一個標簽名稱字符串作為參數；幾乎所有的塊樣式標簽都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE")；(IE瀏覽器僅僅支持標題標簽 H1 - H6, ADDRESS, 和 PRE,使用時還必須包含標簽分隔符 < >, 例如 "<H1>")；
forwardDelete：刪除光標所在位置的字符，和按下刪除鍵一樣；
heading：添加一個標題標簽在光標處或者所選文字上，需要提供標簽名稱字符串作為參數 (例如. "H1", "H6"). (IE 和 Safari不支持)；
hiliteColor：更改選擇或插入點的背景顏色，需要一個顏色值字符串作為值參數傳遞；UseCSS 必須開啟此功能。(IE瀏覽器不支持)；
increaseFontSize：在選擇或插入點周圍添加一個BIG標簽；(IE瀏覽器不支持)
indent：縮進選擇或插入點所在的行，在 Firefox 中, 如果選擇多行，但是這些行存在不同級別的縮進, 只有縮進最少的行被縮進；
InlineDirLTR：目前尚未支持；
InlineDirRTL：目前尚未支持；
insertBrOnReturn：控制當按下Enter鍵時，是插入br標簽還是把當前塊元素變成兩個；(IE瀏覽器不支持)；
InsertButton：用按鈕控件覆蓋當前選中區；
InsertFieldset：用方框覆蓋當前選中區；
insertHorizontalRule：在插入點插入一個水平線（刪除選中的部分）；
insertHTML：在插入點插入一個HTML字符串（刪除選中的部分），需要一個個HTML字符串作為參數；(IE瀏覽器不支持)；
InsertIFrame：用內嵌框架覆蓋當前選中區；
insertImage：在插入點插入一張圖片（刪除選中的部分），需要一個 URL 字符串作為參數，這個 URL 圖片地址至少包含一個字符，空白字符也可以（IE會創建一個鏈接其值為null）；
InsertInputButton：用按鈕控件覆蓋當前選中區；
InsertInputCheckbox：用復選框控件覆蓋當前選中區；
InsertInputFileUpload：用文件上載控件覆蓋當前選中區；
InsertInputHidden：插入隱藏控件覆蓋當前選中區；
InsertInputImage：用圖像控件覆蓋當前選中區；
InsertInputPassword：用密碼控件覆蓋當前選中區；
InsertInputRadio：用單選鈕控件覆蓋當前選中區；
InsertInputReset：用重置控件覆蓋當前選中區；
InsertInputSubmit：用提交控件覆蓋當前選中區；
InsertInputText：用文本控件覆蓋當前選中區；
InsertMarquee：用空字幕覆蓋當前選中區；
insertOrderedList：在插入點或者選中文字上創建一個有序列表；
insertUnorderedList：在插入點或者選中文字上創建一個無序列表；
insertParagraph：在選擇或當前行周圍插入一個段落；(IE會在插入點插入一個段落并刪除選中的部分)
InsertSelectDropdown：用下拉框控件覆蓋當前選中區；
InsertSelectListbox：用列表框控件覆蓋當前選中區；
InsertTextArea：用多行文本輸入控件覆蓋當前選中區；
insertText：在光標插入位置插入文本內容或者覆蓋所選的文本內容；
InsertUnorderedList：切換當前選中區是項目符號列表還是常規格式化塊；
italic：在光標插入點開啟或關閉斜體字；(IE使用EM標簽，而不是I )；
justifyCenter：對光標插入位置或者所選內容進行文字居中；
justifyFull：對光標插入位置或者所選內容進行文本對齊；
justifyLeft：對光標插入位置或者所選內容進行左對齊；
justifyRight：對光標插入位置或者所選內容進行右對齊；
JustifyNone：目前尚未支持；
LiveResize：迫使 MSHTML 編輯器在縮放或移動過程中持續更新元素外觀，而不是只在移動或縮放完成后更新；
MultipleSelection：允許當用戶按住 Shift 或 Ctrl 鍵時一次選中多于一個站點可選元素；
open：打開；
outdent：對光標插入行或者所選行內容減少縮進量；
OverWrite：切換文本狀態的插入和覆蓋；
paste：在光標位置粘貼剪貼板的內容，如果有被選中的內容，會被替換；剪貼板功能必須在 user.js 配置文件中啟用；
PlayImage：目前尚未支持
Print：打開打印對話框以便用戶可以打印當前頁；
redo：重做被撤銷的操作；
Refresh：刷新當前文檔；
removeFormat：對所選內容去除所有格式；
RemoveParaFormat：目前尚未支持；
SaveAs：將當前 Web 頁面保存為文件；
selectAll：選中編輯區里的全部內容；
SizeToControl：目前尚未支持；
SizeToControlHeight：目前尚未支持；
SizeToControlWidth：目前尚未支持；
Stop：停止；
StopImage：目前尚未支持；
strikeThrough：在光標插入點開啟或關閉刪除線；
subscript：在光標插入點開啟或關閉下角標；
superscript：在光標插入點開啟或關閉上角標；
UnBookmark：從當前選中區中刪除全部書簽；
underline：在光標插入點開啟或關閉下劃線；
undo：撤銷最近執行的命令；
unlink：去除所選的錨鏈接<a>標簽；
Unselect：清除當前選中區的選中狀態；
useCSS：切換使用HTML tags還是CSS來生成標記，要求一個布爾值true/false作為參數；注: 這個屬性是邏輯上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)；該屬性已經廢棄，使用 styleWithCSS 代替；
styleWithCSS：用這個取代 useCSS 命令，false 生成格式化元素；

不同的瀏覽器實現不同的編輯命令；只有少部分命令得到了很好的支持，所以在使用之前一定要檢測瀏覽器是否支持該命令；

document.queryCommandSupport(command)方法：傳入command命令名，返回一個布爾值，用來查詢瀏覽器是否支持該命令；

var selectAll = document.queryCommandSupported("selectAll");
console.log(selectAll);

doument.queryCommandEnable(command)方法：傳入command命令名，返回一個布爾值，查詢瀏覽器中指定的編輯指令是否可用；

mydiv.addEventListener("mouseup",function(e){
    var createLink = document.queryCommandEnabled("createLink");
    console.log(createLink);
},false);

document.queryCommandState(command)方法：用來判定命令的當前狀態：有一些命令如”bold”和”italic”有一個布爾值狀態，開或關取決于當前選區或光標的位置；這些命令通常用工具欄上的開關按鈕表示；

var flag = document.queryCommandState("bold");
console.log(flag);

document.queryCommandValue()方法：查詢相關聯的值，有些命令如”fontname”有一個相關聯的值，字體系列名；

var fontSize = document.queryCommandValue("fontSize");
console.log(fontSize);  // 默認是3
var foreColor = document.queryCommandValue("foreColor");
console.log(foreColor);  // rgb(0,0,0)

document.queryCommandIndeterm(command)方法：返回一個布爾值，用于檢測指定的命令是否處于不確定狀態；例如，如果當前選取的文本使用了兩種不同的字體，使用該方法查詢”fontname”的結果是不確定的；

需要注意的是，這些編輯器生成的HTML標記很可能是雜亂無章的；

另外，一旦用戶編輯了某元素的內容，就可以使用innerHTML屬性得到已經編輯內容的HTML標記；如何處理這些富文本，有多種方式，可以把它存儲在隱藏的表單控件中，并通過提交該表單發送到服務器，也可以保存在本地；

示例：一個HTML編輯器：

<head>
    <style>
        *{margin:0;padding:0; box-sizing: border-box;}
        #editor{width:600px;margin:100px auto;}
        #editor #toolBar1,#editor #toolBar2{width:100%;background-color: lightgray;}
        img.intLink{cursor:pointer;border:none;}
        #toolBar1 select{font-size:16px;}
        #textBox{width:100%; height:200px; border:1px solid;padding:10px; overflow:scroll;}
        #textBox #sourceText{margin:0;padding:0; min-width:498px; min-height:200px;}
    </style>
    <script>
        var oDoc, sDefTxt;
        function initDoc(){
            oDoc = document.getElementById("textBox");
            sDefTxt = oDoc.innerHTML;
            if(document.compForm.switchMode.checked)
                setDocMode(true);
        }
        function formatDoc(sCmd, sValue){
            if(validateMode()){
                document.execCommand(sCmd, false, sValue);
                oDoc.focus();
            }
        }
        function validateMode(){
            if(!document.compForm.switchMode.checked)
                return true;
            alert("Uncheck 'Show HTML");
            oDoc.focus();
            return false;
        }
        function setDocMode(bToSource){
            var oContent;
            if(bToSource){
                oContent = document.createTextNode(oDoc.innerHTML);
                oDoc.innerHTML = "";
                var oPre = document.createElement("pre");
                oDoc.contentEditable = false;
                oPre.id = "sourceText";
                oPre.contentEditable = true;
                oPre.appendChild(oContent);
                oDoc.appendChild(oPre);
                document.execCommand("defaultParagraphSeparator", false, "div");
            }else{
                if(document.all)
                    oDoc.innerHTML = oDoc.innerText;
                else{
                    oContent = document.createRange();
                    oContent.selectNodeContents(oDoc.firstChild);
                    oDoc.innerHTML = oContent.toString();
                }
                oDoc.contentEditable = true;
            }
            oDoc.focus();
        }
        function printDoc(){
            if(!validateMode())
                return;
            var oPrintWin = window.open("","_blank","width=450,height=450,left=400,top=100,menubar=yes,toolbar=no,scrollbars=yes");
            oPrintWin.document.open();
            oPrintWin.document.write("<!doctype html><html><head><title>打印<\/title><\/head><body onload='print();'>" + oDoc.innerHTML + "<\/body><\/html>");
            oPrintWin.document.close();
        }
    </script>
</head>
<body onload="initDoc()">
<div id="editor">
<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML; return true;}return false;">
    <input type="hidden" name="myDoc">
    <div id="toolBar1">
        <select onchange="formatDoc('formatblock',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option selected>-文本格式-</option>
            <option value="h1">標題1 <h1></option>
            <option value="h2">標題2 <h2></option>
            <option value="h3">標題3 <h3></option>
            <option value="h4">標題4 <h4></option>
            <option value="h5">標題5 <h5></option>
            <option value="h6">標題6 <h6></option>
            <option value="p">段落 <p></option>
            <option value="pre">預定義 <pre></option>
        </select>
        <select onchange="formatDoc('fontname', this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-字體-</option>
            <option>Arial</option>
            <option>Arial Black</option>
            <option>Courier New</option>
            <option>Times New Roman</option>
        </select>
        <select onchange="formatDoc('fontsize',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-字號-</option>
            <option value="1">非常小</option>
            <option value="2">小</option>
            <option value="3">正常</option>
            <option value="4">中大</option>
            <option value="5">大</option>
            <option value="6">非常大</option>
            <option value="7">最大</option>
        </select>
        <select onchange="formatDoc('forecolor',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-顏色-</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
        </select>
        <select onchange="formatDoc('backcolor',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-背景顏色-</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
        </select>
    </div>
    <div id="toolBar2">
    <img class="intLink" src="icons/clean.gif" onclick="if(validateMode()&&confirm('確定清除所有嗎？')){oDoc.innerHTML = sDefTxt};" /> 
    <img class="intLink" src="icons/print.png" onclick="printDoc();" /> 
    <img class="intLink" src="icons/undo.gif" onclick="formatDoc('undo');" /> 
    <img class="intLink" src="icons/redo.gif" onclick="formatDoc('redo');" /> 
    <img class="intLink" src="icons/format.png" onclick="formatDoc('removeFormat');" /> 
    <img class="intLink" src="icons/bold.gif" onclick="formatDoc('bold')" /> 
    <img class="intLink" src="icons/italic.gif" onclick="formatDoc('italic')" /> 
    <img class="intLink" src="icons/underline.gif" onclick="formatDoc('underline')" /> 
    <img class="intLink" src="icons/justifyleft.gif" onclick="formatDoc('justifyleft')" /> 
    <img class="intLink" src="icons/justifycenter.gif" onclick="formatDoc('justifycenter')" /> 
    <img class="intLink" src="icons/justifyright.gif" onclick="formatDoc('justifyright')" /> 
    <img class="intLink" src="icons/numberedlist.gif" onclick="formatDoc('insertorderedlist')" /> 
    <img class="intLink" src="icons/dottedlist.gif" onclick="formatDoc('insertunorderedlist')" /> 
    <img class="intLink" src="icons/quote.gif" onclick="formatDoc('formatblock','blockquote')" /> 
    <img class="intLink" src="icons/outdent.gif" onclick="formatDoc('outdent')" /> 
    <img class="intLink" src="icons/indent.gif" onclick="formatDoc('indent')" /> 
    <img class="intLink" src="icons/hyperlink.gif" onclick="var sLnk=prompt('輸入鏈接地址','http:\/\/'); if(sLnk&&sLnk!=''&&sLnk!='http:\/\/'){formatDoc('createlink',sLnk);}" /> 
    <img class="intLink" src="icons/cut.gif" onclick="formatDoc('cut')" /> 
    <img class="intLink" src="icons/copy.gif" onclick="formatDoc('copy')" /> 
    <img class="intLink" src="icons/paste.gif" onclick="formatDoc('paste')" /> 
    </div>
    <div id="textBox" contenteditable="true"><p>富文本編輯器</p></div>
    <p id="editMode">
        <input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);">
        <label for="switchBox">顯示HTML</label>
    </p>
    <p><input type="submit" value="保存" /></p>
</form>
</div>
</body>

這些瀏覽器內置的編輯功能對用戶輸入少量的富文本來說，足夠使用了；但要解決所有種類的文檔的編輯來說，這些API還顯得不足；在實際開發中，一般采用的是第三方的類庫，比如百度UEditor和layui.layedit和Dojo，它們都包含了編輯器組件；

、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 代碼
可以根據需要安裝對應的插件
可以設置字體大小和顏色主題

在線咨詢

上一篇：前端網頁加載渲染鏈路優化
下一篇：HTML、CSS 和 JavaScript等前端開發技術，必備入門級學習書單

您的項目需求

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

整合營銷服務商