在线学习HTML5的第01天
（灯哥日记）从小白做起，在线学习HTML5
一.HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 -----百度百科
1.版本新特性
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
来源网络
2.特点
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。—百度百科
3.编写(百度百科)
标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/> <img/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
部分标记也可以不成对出现，如<p>，但是一般并不赞同这样做。
标记符<html>，说明该文件是用超文本标记语言来描述的，它是文件的开头;而<html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
<head></head>：这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用做书签和收藏清单。
以下表格列出了 HTML head 元素：
| 标签 | 描述 |
|---|---|
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<style> | 定义了HTML文档的样式文件 |
<body></body>网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
标题：总共有6个等级，定义方法如下
<h1></h1>定义一级标题
<h2></h2>定义二级标题
以此类推
二.编译器之Hello H5
以下仅部分编译器，或推荐或不推荐
1.记事本
超级免费，创建容易，无需占用过多内存和硬盘空间
- 创建文本文档
- 直接写入＂Hello H5＂
- 修改后缀
- 双击看结果
结果截图
推荐使用指数：★
理由：
- 新手入门娱乐玩耍，创建恶搞室友得最佳之选。
- 标签拼错了错过了你就找不着了
- 懂得都懂…
2.WebStorm
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
- 购买软件解锁下一步
- 已锁🔒
巴啦啦小魔仙！变变变~ !!!解锁完成~
- 安装并打开
- 新建项目
- 选择HTML
- 项目名称处右键新建HTML文件
- 编写
- 运行
- 完美出结果
虽然是一款付费软件，但功能还是挺强大的。
推荐使用指数：★★★★
理由：
- 这是WebStorm最大的缺点，收费还不便宜。
- 启动速度以及打开工程速度缓慢，有时候打开一个小项目都要等1分钟甚至更长时间。
- 占用资源高，占用的内存远高于VSCode。
3.Visual Studio Code
Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器， 可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。------百度百科
特色：
该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。Microsoft Docs（微软文档）提供了相应的学习教程帮助用户在 Visual Studio Code 中登陆 GitHub 。
Visual Studio Code 提供了丰富的快捷键 。用户可通过快捷键 [Ctrl] + [K] + [S] （按住Ctrl键不放，再按字母K键和S键）调出快捷键面板，查看全部的快捷键定义。也可在面板中双击任一快捷键，为某项功能指定新的快捷键。一些预定义的常用快捷键包括：格式化文档（整理当前视图中的全部代码），[Shift] + [Alt] + [F]；格式化选定内容（整理当前视图中被选定部分代码），[Ctrl] + [K] + [F]；放大视图，[Ctrl] + [Shift] + [=]；缩小视图，[Ctrl] + [Shift] + [-]；打开新的外部终端（打开新的命令行提示符）：[Ctrl] + [Shift] + [C]。
特色2：该编辑器支持多种语言和文件格式的编写，截止2019年9月，已经支持了如下37种语言或文件：F#、HandleBars、Markdown、Python、Java、PHP、Haxe、Ruby、Sass、Rust、PowerShell、Groovy、R、Makefile、HTML、JSON、TypeScript、Batch、Visual Basic、Swift、Less、SQL、XML、Lua、Go、C++、Ini、Razor、Clojure、C#、Objective-C、CSS、JavaScript、Perl、Coffee Script、Dockerfile、Dart。
作为一个**免费**的软件，他的功能依旧很强大
- 官网搜索并下载
此时可能会触发特殊任务★★下载速度巨慢★★解决方法如下：
1.在官网选择好版本以后点击下载，在浏览器的下载管理器中找到下载任务（速度60kb），右键复制下载链接
2.复制在浏览器的网址输入框内，然后/stable…地址之前的地址换为如下内容：vscode.cdn.azure.cn，按回车儿，下载速度暴增。 - 安装并打开
- 在最左侧的从上往下数第5个（4个方块跑了1个）点进去，准备下载插件
vscode编程工具几乎都是基于插件来完成的，在这个编程工具的里面也集成了很多的插件，我们直接在里面配置好就可以的了。直接在vscode这个编程工具里面点击左边的图标后就会在上面出现一个搜索框，然后在里面搜索你需要的插件，点击install安装就可以的了，安装插件后，重新启动vscode就可以了。-----知乎.徒步
主要下载的插件是为了可以使代码可以在浏览器运行
- 如选择下载open in browser
- 右键创建文件/也可以提前外面创建好拖进去
- 选择html语种
- 编码输入＂Hello H5＂
- 右键选择open in browser插件
- 完美出结果
推荐使用指数：★★★★★
理由：
- 免费且开源，这也是大部分大前端选择VSCode的原因，可以下载或者自己写个插件解决。
- 启动速度以及打开项目速度非常快，几乎同样的配置同样的工程，VSCode的打开速度远远快于WebStorm。
- 插件非常多，而且VSCode本身就基于Electron开发，所以大前端自己写插件显得不是那么困难。
扫一扫
767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
