初体验HTML

刘春龙原创...大约 6 分钟

在学习本章节之前，先了解一下什么是前端

现在是一个大前端时代，简单来说，大前端就是所有前端的统称，比如网站、小程序、Android、iOS、Watch 等，最接近用户的那一层也就是 UI 层，然后将其统一起来，就是大前端。

引用网友的一句话：ES2015 开始 JavaScript 的发展宛如坐上了火箭，有幸见证了一场又一场繁荣，由此可见，前端发展之迅猛。我们既然站在风口浪尖上，那就赶紧乘风而起吧!

前端技术体系：

在我们的课程中，已经为大家设计好了整套的前端技术体系

所有技术的核新（基础）是：HTML5+CSS3+JavaScript，但其实这些内容都是简单易学的

提示

HTML5+CSS3 都十分简单，而 JavaScript 才是重中之重，你在前端的道路上能够走多远，这完全取决于你对 JavaScript 的理解和掌握程度！

这里会写一个最简单的小例子，讲述 HTML5+CSS3+JavaScript 效果

前端小例子

<p>我是Hello World</p>

var pText = document.querySelector("p");
pText.innerHTML = "我是修改之后的Hello World";
pText.style.color = "red";

p {
  height: 60px;
  width: 100%;
  background-color: #000;
  line-height: 60px;
  text-align: center;
  color: #fff;
}

总结

通过上面的案例，我们明显的能够体会到，HTML 会让你的网页有内容，css 会让网页上的内容更加好看，而 js 则会动态的去修改网页内容，具有支配浏览器的能力。

下面，正式开始进入 HTML 的学习了！

开发工具推荐

工欲善其事，必先利其器，要想有好的开发体验，选择一款合适的开发工具是十分必要的

VS Code，全称是Visual Studio Code，但因为全称太长，微软旗下另一款产品visual studio又经常被简称为VS，所以这款与 vs 有一定渊源的代码编辑器就被简称为VSCode。

VSCode 是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

VS Code 使用 Monaco Editor 作为其底层的代码编辑器。

在 2019 年的 Stack Overflow 组织的开发者调查中，Visual Studio Code 被认为是最受开发者欢迎的开发环境。

提示

下载地址：https://code.visualstudio.com/Downloadopen in new window

vscode 生成 HTML 结构快捷键：！+回车，代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

插件推荐和设置

设置：自动保存文件--首选项--设置--自动保存

设置：保存时自动格式化文件--首选项--设置--格式化

VSCode 常用快捷键列表

代码格式化：Shift+Alt+F
向上或向下移动一行：Alt+Up 或 Alt+Down
快速复制一行代码：Shift+Alt+Up 或 Shift+Alt+Down
快速保存：Ctrl + S
快速查找：Ctrl + F
快速替换：Ctrl + H
注释：Ctrl + ？

浏览器是我们最重要的合作伙伴

我们推荐谷歌浏览器，有两点原因：

简洁大方，打开响应速度快
开发者调试工具
下载地址：https://www.google.cn/intl/zh-CN/chrome/dev/open in new window

HTML5 简介

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用 HTML5 编写的文件，后缀以.html 结尾，HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html>

提示

文件后缀名以.html 结尾

在编写代码的过程中，<>必须是英文状态下编写

HTML 标签有两种表现形式：

双标签，例如：<html></html>
单标签，例如：<img>

基本结构

HTML5 的 DOCTYPE 声明
DOCTYPE是 document type (文档类型) 的缩写。是 H5 的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。
```
<!DOCTYPE html>
```
html 标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个 HTML 文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。
```
<!DOCTYPE html>
<html></html>
```
head 标签
head 标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
```
<!DOCTYPE html>
<html>
  <head> </head>
</html>
```
body 标签
body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
它会直接在页面中显示出来，也就是用户可以直观看到的内容
```
<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    我会显示在浏览器中
  </body>
</html>
```
title 标签
可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写 head 一定要写 title
<title>的增加有利于 SEO 优化
提示
SEO 是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求
```
<!DOCTYPE html>
<html>
  <head>
    <title>第一个页面</title>
  </head>
  <body>
    我会显示在浏览器中
  </body>
</html>
```
meta 标签
meta 标签用来描述一个 HTML 网页文档的属性，关键词等，例如：charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是 gbk，这些都是编码格式，通常使用utf-8。
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>itbaizhan</title>
  </head>
  <body>
    
  </body>
</html>
```

设置网站 logo

<link rel="shortcut icon" href="favicon.ico" />

HTML 注释

浏览器不会显示注释

<!-- 这是一段注释 -->
<!-- 这里的内容不会被浏览器显示 -->

注意

在开始标签中有一个叹号，但是结束标签中没有

轻松一刻 🎧

音乐

视频教程 🎥

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服open in new window进行相关咨询。

昵称

邮箱

网址

按正序
按倒序
按热度

初体验HTML

# 前端技术体系：

# 开发工具推荐

# HTML5 简介

# 基本结构

# HTML 注释

预览:

前端技术体系：

开发工具推荐

HTML5 简介

基本结构

HTML 注释