写在前面

想了很久不知道该怎么开始这个专栏，怎么算简单，怎么算有趣，生怕一不小心就难了，如果直接讲一个整的小工具的开发吧，又需要阅读者需要一定的基础，如果讲某一个好玩的技巧，又与编程违背，思来想去决定从web开始做这个专栏，一点一点做起一个完整的个人博客会更有成就感。这个系列完成后还会有硬体上的教程，基于我参加机器人比赛和一些专利小发明的经验。

为了做到简单和不乏味，我尽量缩短每篇文章的长度，讲最重要的一些部分，如果想要深入研究，还需读者搜索更多的资料。

什么是HTML

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

简单来讲，html就是用一套通用的标记来表示网页中的元素

html中的标签

  • HTML 标签是由尖括弧包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

html长什么样

<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

一个简单的例子就是上面这样，其中，这样即是标签,被尖括弧括起来的即是内容，title中的内容即是该页面的标题

一个基本的html至少应该包括html,head,title,body,即头尾，标题

  • html 中的文本描述网页
  • body 中的文本是可见的页面内容
  • h1 中的文本被显示为标题
  • p 中的文本被显示为段落

你可以新建一个文本文档，复制这段内容进来，另存为hello.html用浏览器打开即可看到效果

工具

通过上面这个txt开发不难发现，windows自带的notepad编写代码不太好用，这里我推荐一下microft的visual studio code 40多Mb的体积，智能提示，代码高亮

官方主页 双击打开按照提示即可完成安装

插件

vscode 自带的插件机制使得扩展功能非常方便，在此推荐一些好用的html开发插件

  • open defaut broserVSCode 不能通过内置界面来直接在浏览器中打开文件。此扩展将添加一个 [Open With Default Browser] 选项到右键菜单，使您在客户端（Firefox，Chrome，IE）中打开命令面板选项。
  • TODO Highlight此工具可以在你的代码中的标记出所有的 TODO 注释，以便在推送到生产环境之前轻松跟踪任何未完成的业务。默认情况下，它会查找 TODO 和 FIXME 关键字，当然，您也可以添加自定义表达式。
  • Prettier

    Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式

  • Color Info这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停游标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

打开的vscode左侧找到插件搜索你想用的插件，点击安装就可以使用了。

推荐阅读：

相关文章