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小时内与您取得联系。

整合营销服务商