前端小白入门系列——HTML简介
HTML 教程- (HTML5 标准)
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在本教程中，您将学习如何使用 HTML 来创建站点。HTML 很容易学习！相信您能很快学会它！
注意：对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为。
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如定义网页编码格式为utf-8。
</b>元素描述了文档的标题</li> <li id="7de26cae-6fa9-4d09-bfbe-b0e60b37493c" style="font-size:18px;margin:20px 0px;text-align:left;"><b id="e15cb423-e91e-492a-9107-a8ba8b6f7545" style="font-size:18px;margin:20px 0px;text-align:left;"><body></b>元素包含了可见的页面内容</li> <li id="9b06e8b4-b52f-441c-a5b4-eadaf5be03e4" style="font-size:18px;margin:20px 0px;text-align:left;"><b id="9dc4227e-bd1d-41ed-a9d9-1fc84a042526" style="font-size:18px;margin:20px 0px;text-align:left;"><br /> <h1></b>元素定义一个大标题</li> <li id="603b0f40-93ed-4ca5-83a5-8a869ef34423" style="font-size:18px;margin:20px 0px;text-align:left;"><b id="cc780ae3-e6d7-48bf-92ef-b538f5b0959f" style="font-size:18px;margin:20px 0px;text-align:left;"> <p></b>元素定义一个段落</li> </ul> <hr id="0dbf7af7-45be-4011-b590-4488f9ba3f2a" style="font-size:18px;margin:20px 0px;text-align:left;"></hr> <h2 id="5e8c1444-1c22-4f15-8a82-d27c2f135bca" style="font-size:20px;margin:20px 0px;font-weight:700;">什么是HTML?</h2> <p id="c4aa6cf8-3da7-46e6-a84b-d8dc3d7c761f" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">HTML 是用来描述网页的一种语言。</p> <ul id="999544a2-3825-4b36-b912-86afcf9cb50c" style="font-size:18px;margin:20px 0px;text-align:left;"> <li id="358a5069-2391-403f-a269-9cdcd73d1037" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 指的是超文本标记语言:<b id="f2535323-844c-4e8b-bcfe-8f561ed85fd4" style="font-size:18px;margin:20px 0px;text-align:left;">H</b>yper<b id="07e7acec-cd3d-49d6-9dbb-fea740650c6e" style="font-size:18px;margin:20px 0px;text-align:left;">T</b>ext<b id="15e674a4-3825-4845-8612-c2a3c9c7a07f" style="font-size:18px;margin:20px 0px;text-align:left;">M</b>arkup<b id="14361c2f-b117-410e-b7da-a2da193056b4" style="font-size:18px;margin:20px 0px;text-align:left;">L</b>anguage</li> <li id="ee397579-0c67-4717-a190-0c28a0458730" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 不是一种编程语言，而是一种<b id="610bd85a-04c7-4fca-9ee6-83c49c5b8f74" style="font-size:18px;margin:20px 0px;text-align:left;">标记</b>语言</li> <li id="9839210a-6364-43c9-9891-b817285207d9" style="font-size:18px;margin:20px 0px;text-align:left;">标记语言是一套<b id="a424309c-7bab-4dea-9518-a4e8efff41a1" style="font-size:18px;margin:20px 0px;text-align:left;">标记标签</b>(markup tag)</li> <li id="69cade8d-e406-4ca9-a769-2e959c80c938" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 使用标记标签来<b id="2c70015f-eeab-4066-9022-01492718e47e" style="font-size:18px;margin:20px 0px;text-align:left;">描述</b>网页</li> <li id="6016b635-76be-4dc5-a04d-4c8d3c78c920" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 文档包含了HTML<b id="dfbb2965-a290-4e8f-b701-748103f73285" style="font-size:18px;margin:20px 0px;text-align:left;">标签</b>及<b id="f52172c6-5075-441f-a99e-78e4a0470401" style="font-size:18px;margin:20px 0px;text-align:left;">文本</b>内容</li> <li id="3496ddcc-ae4e-4ba8-920b-4c42a9f257c5" style="font-size:18px;margin:20px 0px;text-align:left;">HTML文档也叫做<b id="2e6134ac-ccdf-4f6f-9000-0a0d06dc2dfe" style="font-size:18px;margin:20px 0px;text-align:left;">web 页面</b></li> </ul> <hr id="038a3dfe-2924-48b2-9c37-c16ac0c526be" style="font-size:18px;margin:20px 0px;text-align:left;"></hr> <h2 id="e855418d-11ad-42f7-b624-f34b3f96229e" style="font-size:20px;margin:20px 0px;font-weight:700;">HTML 标签</h2> <p id="ac5bee4f-a037-40e6-816a-3046c20f812d" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p> <ul id="939ba102-7283-498f-aa16-481f7761c08d" style="font-size:18px;margin:20px 0px;text-align:left;"> <li id="e11f90d9-b877-4a1a-8e49-ae478c143f01" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 标签是由<i id="9f48e2f1-e255-4cc3-879f-bfbf2be73fd1" style="font-size:18px;margin:20px 0px;text-align:left;">尖括号</i>包围的关键词，比如 <html></li> <li id="1b9d7585-b55b-4c9b-a061-973dac28ad89" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 标签通常是<i id="58410a8d-9bd2-4fc5-9e28-11866caebe39" style="font-size:18px;margin:20px 0px;text-align:left;">成对出现</i>的，比如 <b> 和 </b></li> <li id="8a621400-2113-4d87-9f4f-43aa06c9cd61" style="font-size:18px;margin:20px 0px;text-align:left;">标签对中的第一个标签是<i id="cf6b66d2-36e3-4680-999c-94383aba5240" style="font-size:18px;margin:20px 0px;text-align:left;">开始标签</i>，第二个标签是<i id="03f82265-c987-4602-b138-2703ecf567da" style="font-size:18px;margin:20px 0px;text-align:left;">结束标签</i></li> <li id="5e066ffe-ad56-490c-92b0-18073fe682a0" style="font-size:18px;margin:20px 0px;text-align:left;">开始和结束标签也被称为<i id="c58d4c83-78c7-4e00-9c6f-f42bd7d545da" style="font-size:18px;margin:20px 0px;text-align:left;">开放标签</i>和<i id="a804ced7-4f77-46fb-86c4-09a82eb4f7ca" style="font-size:18px;margin:20px 0px;text-align:left;">闭合标签</i></li> </ul> <p id="7135cbde-53c5-450b-9e80-af18cf92f744" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;"><标签>内容</标签></p> <hr id="4ddc6af8-ca06-47be-a500-7fdbb318946b" style="font-size:18px;margin:20px 0px;text-align:left;"></hr> <h2 id="c5522426-829e-4c43-9b08-f54520db3cec" style="font-size:20px;margin:20px 0px;font-weight:700;">HTML 元素</h2> <p id="f3ecb9c8-c901-452e-950a-5460313fb419" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.</p> <p id="0215ce33-dd86-4e04-9554-71bc5355aecc" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:</p> <p id="e7832aa8-60b0-48cf-886a-e0d16f0aabab" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">HTML 元素:</p> <p id="774a70cb-5c07-477e-9ea6-e5ef189a0964" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;"> <p>这是一个段落。</p> </p> <hr id="c8226257-6ece-4894-813a-b17c13456279" style="font-size:18px;margin:20px 0px;text-align:left;"></hr> <h2 id="273e9a77-694c-4c52-8b30-492d18e87aca" style="font-size:20px;margin:20px 0px;font-weight:700;">Web 浏览器</h2> <p id="4cf1bbfe-d346-43c3-bf90-16bc1cead506" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。</p> <p id="b493d64f-9b1c-474f-98d1-800dc5c7e509" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：</p> <figure id="72e019a7-a135-4d6e-8181-7de7f26f9049" style="font-size:18px;margin:20px 0px;text-align:left;"><img loading="lazy" class="lazyload alignnone size-full wp-image-91824" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="http://www.9502669.com/wp-content/uploads/2022/04/1650329426-95b74d79dde164e.jpg?x-oss-process=style/p63q90" width="720" height="358" srcset="http://www.9502669.com/wp-content/uploads/2022/04/1650329426-95b74d79dde164e.jpg?x-oss-process=style/p63q90 720w, http://www.9502669.com/wp-content/uploads/2022/04/1650329426-95b74d79dde164e-300x149.jpg 300w" sizes="(max-width: 720px) 100vw, 720px" /><noscript><img loading="lazy" class="alignnone size-full wp-image-91824" src="http://www.9502669.com/wp-content/uploads/2022/04/1650329426-95b74d79dde164e.jpg?x-oss-process=style/p63q90" width="720" height="358" srcset="http://www.9502669.com/wp-content/uploads/2022/04/1650329426-95b74d79dde164e.jpg?x-oss-process=style/p63q90 720w, http://www.9502669.com/wp-content/uploads/2022/04/1650329426-95b74d79dde164e-300x149.jpg 300w" sizes="(max-width: 720px) 100vw, 720px" /></noscript></figure> <hr id="c52b004b-cfd3-4646-877e-35d1f596de7b" style="font-size:18px;margin:20px 0px;text-align:left;"></hr> <h2 id="988fda5d-5f7a-472e-8e09-794bb62676f2" style="font-size:20px;margin:20px 0px;font-weight:700;">HTML 网页结构</h2> <p id="42aa64b3-6817-46d5-8651-426f94d9af23" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">下面是一个可视化的HTML页面结构：</p> <p id="4f9fe26f-a29f-4aa3-9e9b-9789b1620065" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;"><html><head><title>页面标题 这是一个标题
这是一个段落。
这是另外一个段落。
只有
区域 (白色部分) 才会在浏览器中显示。
HTML版本
从初期的网络诞生后，已经出现了许多HTML版本:
版本 发布时间 HTML 1991 HTML 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
声明
声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
通用声明
HTML5
HTML 4.01
XHTML 1.0
中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
页面标题 我的第一个标题
我的第一个段落。
HTML文档的后缀名
- .html
- .htm
以上两种后缀名没有区别，都可以使用。
我建了一个前端小白交流群，私信我，进入交流群。我会给大家分享我收集整理的各种学习资料，组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习，欢迎加入
链接：HTML简介
