一.什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
二.安装编译器
HbuilderX
下载地址链接：HBuilderX-高效极客技巧 (dcloud.io)
三.基础操作和了解整体结构
新建普通项目，一般使用基本HTML项目（里面都已经添加好部件）， 点击创建，如下图所示
创建传建好之后便是如下图所示：
?
?四.HTML学习（基础语法和常用标签）
首先推荐大家一个视频学习的网站（适合新手小白）：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
然后推荐大家一个网站去学习（里面有详细的语法讲解）：HTML 教程 | 菜鸟教程 (runoob.com)
1.1.单标签
单标签，不设置属性值。如：
<br\>,<hr\>
1.2.单标签属性
单标签（也叫空元素），设置属性值。如：
<hr width="800"\>1.3.双标签
双标签，不设置属性值，如：
<title>...</title>
1.4.双标签属性
双标签，设置属性值。如：
<body bgcolor="red">...</body>
<font size="7">...</font>
2.1.标题和水平线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--
标题
h1-h6字数大小逐渐减小
块级元素，自动换行
-->
<hr>
<!--
换行
常用属性：
颜色
粗细
长度
-->
</body>
</html>
效果如图：
?2.2.段落与换行
<p>虎头虎脑</p>
<p>不会嘴瓢</p>
<!--
标题标签
p
块级元素，自动换行
-->
虎年<br>大吉
<!--
换行标签
br
-->效果如图：
2.3.列表（有序列表和无序列表）
<ul>
<li>刘德华</li>
<li>张学友</li>
<li>郭富城</li>
</ul>
<ol>
<li>刘德华</li>
<li>张学友</li>
<li>郭富城</li>
</ol>
<!--
有序列表<ol></ol>
无需列表<ul></ul>
type更换类型
-->?效果如图：
2.4.div和span?
<div>这是一个div？</div>
yes
<!--
块级元素
默认占全部的宽度，有多少内容占多少高度
可以设置div的高和宽
通过align设置内容的对齐方式
-->
<span>这是一个span？</span>
yes效果如图：
?2.5.格式化标签
<font color="aqua" size="7" face="楷体">你好</font>
<pre>
hello world
</pre>
<p><b>梅克尔</b><i>属实</i><u>永远</u><del>的神</del></p>
H<sub>2</sub>O
<hr>
2<sup>3</sup>=8
<!--
格式化标签
font标签
color 颜色
size 字体大小
face 字体风格
pre
预格式化标签，保留空格和换行
b 加粗
i 倾斜
u 下划线
del 中划线
sub 下标
sup 上标
-->效果如图
?3.1.a标签
<a href="http://www.baidu.com">百度</a>
<!--
a标签
超链接性标签
常用属性：
href：需要跳转的地址（必须属性）
target：窗口打开的方式
_self：当前窗口（默认）
_blank：在空白窗口
作为锚点（回到顶部）
-->效果如图：
?3.2.图片
<img src="img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png" width="200" height="100" title="看赛事上百度"/>
<!--
img标签:
向网页嵌入一张图片
常用属性：
src；需要引入的图片的的地址（必须属性）
alt：当图片破损或不存在时，显示文本的内容
title：当鼠标悬停在图片上时显示的内容
width：图片的长度
height：图片的高度
border：图片边框
-->效果如图：
3.3.表格?
<table width="400px" align="center" border="1" style="border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<tr align="center">
<td>1</td>
<td>刘德华</td>
<td>48</td>
<tr align="center">
<td>1</td>
<td>张学友</td>
<td>48</td>
<tr align="center">
<td>1</td>
<td>郭富城</td>
<td>48</td>
<!--
表格标签
table 表格
tr 行
td 标准单元格
th 表头（字体居中，加粗效果）
table的属性
width 长度
border 边框
align 对齐方式
style="border-collapse: collapse;合并表格的边框
tr的属性
align 行内容的对齐方式
-->效果如图：
?