【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验（一）
【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验（一）
HTML 教程- (HTML5 标准)
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
在本教程中，您将学习如何使用 HTML 来创建站点。
HTML很容易学习！相信您能很快学会它！
HTML 编辑器
HTML 编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML，教程将为大家推荐几款常用的编辑器：
- VS Code：https://code.visualstudio.com/
- Sublime Text：http://www.sublimetext.com/
- 在线编辑器：https://c.runoob.com/front-end/61/
接下来将为大家演示如何使用 VS Code 工具来创建 HTML 文件。
本地编辑器
当然了，每一种操作系统都带有简单的文本编辑器，如果不想使用上面的软件的话，我们也可以使用本地的文本编辑器
- Windows：记事本
- Linux：vi、vim、Emacs
- Mac：TextEdi
VSCode演示
选择一个合适的位置新建文件夹。
打开VSCode
使用Ctrl O打开刚刚创建的文件夹。以后所有的HTML实例都会保存在该文件夹下面
创建第一个HTML文件
选中刚刚创建的文件夹->新建文件，输入代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程(runoob.com)</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>![]()
我们可以直接点击运行->启动调试选择相对应的浏览器进行打开查看
也可以在文件夹中打开该文件，选择对应的浏览器。
当您保存 HTML 文件时，既可以使用.htm也可以使用.html扩展名。两者没有区别，完全根据您的喜好，我建议统一用.html。
实时预览插件
Live Prrivw插件安装
插件使用
安装完插件后，回到代码界面。
右键->显示预览，这样我们我们的每一步操作都可以实时预览了！
![]()
HTML简介
实例一
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程(runoob.com)</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>实例解析
https://boardmix.cn/app/share/CAE.CLWx5g0gASoQVHn8xrnR7j9-XX-AcyOPezAFQAE/x9bMM4，
点击链接加入boardmix中的文件「HTML简介」，可以进行编辑查看。
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如 定义网页编码格式为utf-8。
- 元素描述了文档的标题
- 元素包含了可见的页面内容
元素定义一个大标题
- 元素定义一个段落
注：在浏览器的页面上按下F12按键或者右键查看页面源代码，就可以看到组成标签
什么是HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言:HyperTextMarkupLanguage
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签(markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML标签及文本内容
- HTML文档也叫做web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
这是一个段落。
Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Microsoft Edge）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
HTML 网页结构
我们使用F12查看刚刚编辑的源代码
只有区域（红色选框）才能显示出来。
<!DOCTYPE> 声明
声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可
<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> #修改为`UTF-8`或`GBK` <title> 页面标题</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>utf8和gbk都是字符编码方式，用于将字符转换成计算机可以识别的二进制数据。 它们的区别在于编码方式不同，utf8是一种变长编码方式，可以表示Unicode字符集中的所有字符，而gbk是一种定长编码方式，只能表示汉字和部分符号。
PS:牛牛学习的语言没几个，语言领悟能力也不算强，所以大部分都是借鉴别人的。但是只要学过来的就是自己的。所以还请各位看官手下留情，多多包涵。牛牛也欢迎给位看官指正、讨论交流！
《网络安全从零到精通全套学习大礼包》
96节从入门到精通的全套视频教程免费领取
如果你也想通过学网络安全技术去帮助就业和转行，我可以把我自己亲自录制的96节 从零基础到精通的视频教程以及配套学习资料无偿分享给你。
网络安全学习路线图
想要学习 网络安全，作为新手一定要先按照路线图学习，方向不对，努力白费。对于从来没有接触过网络安全的同学，我帮大家准备了从零基础到精通学习成长路线图以及学习规划。可以说是最科学最系统的学习路线，大家跟着这个路线图学习准没错。
配套实战项目/源码
所有视频教程所涉及的实战项目和项目源码
学习电子书籍
学习网络安全必看的书籍和文章的PDF，市面上网络安全书籍确实太多了，这些是我精选出来的