HTML
什么是程序？
程序一词来自于生活。其实就是完成一件事，各个步骤的集合。
我们写的程序，就是为了让计算机完成一个任务，给计算机发送的指令集合。
什么是指令？
所谓指令就是我们给计算机发送的一道命令。
编程语言
什么是语言？
语言是我们用来沟通的工具（规则，协议）
编程语言就是我们和计算机通信的规则。 我们就是通过编程语言给计算机发送指令。
对于新手来说，学习任何语言就是从基本的语法规则开始。
软件
软件相对于硬件而言。
我们现在使用的最基本，最重要的软件就是操作系统本身。
硬件就是：主板，CPU，内存，磁盘等等。（看得见，摸得着的）
软件：操作系统，office软件，开发工具等等。
软件就是一堆程序的集合。
软件的功能：①将用户的数据从用户端，存储到存储端。②将存储端的数据展示给用户。
HTML
HTML：超文本标记语言。
HTML本身是由浏览器（软件）解释运行的。
浏览器根据HTML代码渲染页面：
我们平时看到的网页是怎么来的？
所有的计算机都是连接在互联网上的，当我们输入网址的时候，这个网址会通过DNS服务器转换为对应的IP地址，我们通过这个IP地址找到服务器，
并且从服务器上下载了这个网页对应的HTML代码。 在本地进行解释和运行。
HTML文档
基本结构
[1]文件
HTML文档的文件后缀都是.html或者.htm。
[2]标签
HTML语言都是标签组成的。标签一般都是有三个部分的，开始标签，标签体，结束标签
开始标签
你好！! 标签体
结束标签
使用使用开始标签和结束标签来描述标签体。
[3]HTML文档的基本结构
<html>
<head>
<title>这个是一个HTML文档title>
head>
<body>
这里是文档体，就是我们要展示的内容。（超链接，文本，图片，视频等等）
body>
html>
tisp:HTML文档只能有一个根节点。一个节点，就是一对标签。意思就是最外面只能有一组标签。
标签是可以嵌套的。
文本描述文本
什么是纯文本文件。
所谓纯文本，就是除过文件中的文本内容之外，不记录任何其他的信息。几乎所有的编程语言的源文件都是纯文本文件。
office中的word要记录文档中的文字的格式和字体，所以它不是纯文本文件。
HTML也是来渲染文本，字体，图片等等这些内容，但是HTML是纯文本。HTML是如何标记这些内容呢？
HTML就是使用文本来描述文本：
<i>旗木卡卡西i>
上面的意思就是内部的文就是斜体。 本身也是一个纯文本。
大小写问题
理论上HTML是不区分大小写的。但是一般小写。因为浏览器在解释这个代码之前，会先将大写转换为小写在解释运行。
开发工具
HTML的开发工具特别的多。
比如：记事本，DW，HBuilder，VSCode，webStorm，sublime等等。
HBuilder开箱即用，不需要安装。
文档的第一行是申明。下面的就是HTML的基本结构。
我们可以自己添加标题和内容：
HTML的常用标签
HTML标签主要是表达一个语意。
[1]标题标签
HTML中的标题分为6级，这里的标题就像word中的标题一样。
h1~h6。
h1表示一级标题，h6表示六级标题。
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
h标签的语意是表示这个文本是标题，与字体大小没有关系（字体的样式我们是通过CSS来控制的）。
[2]段落标签
在HTML中要显示任何文本，都是直接写即可。但是要控制结构，就要使用一些标签。
普通的文本
<p>曾经沧海难为水，p>
<p>除却巫山不是云。p>
段落和标题标签都会自动的换行换段。 其重点意思还是表示这一块是一个段落。
[3]换行标签
换行标签是一个自闭合标签。 因为没有标签体。
普通的文本普通的文普通的文普通的文普通的文
普通的文普通的文普通的文普通的文
[4]特殊的字符
由于有些字符在HTML中有特殊的意义，比如：< 和 >
如果要展示就不能使用< 要使用特殊字符
< | < |
|---|---|
| > | > |
| 空格 | |
| “ | " |
| ? | © |
[5]有序列表
在页面展示列表
案例：
- 吃了没？
- 没吃！
- 额
我们可以通过ol标签的属性，修改列表的顺序的表示方式：
[6]无序列表
案例：
- 先吃饭
- 在烧烤
- 再来一打雪花啤酒
我们也可以通过ul的type属性调整列标前显示的图标：
[7]超链接
超链接就是可以通过点击进入这个连接指定的其他资源
去百度
我是超链接
href中填写连接的资源的位置（其他的网页或者网址）
超链接是a标签，必须有href属性。
[8]图片
页面上显示图片使用标签img
img的src属性写图片的地址。
图片的地址应该怎么写？
图片在项目的根目录下（图片和HTML文件在一个目录下），我们可以在页面直接写图片的名字。
这里其实用到的就是相对位置。其实我们也可以使用绝对位置。
相对位置：相对与当前的HTML文件而言的位置。
绝对位置：从盘符开始的位置就是绝对位置。
一般都是使用相对位置。因为不确定别人的目录路径是什么。
img还有两个属性分别是：width和height 这两个属性可以控制图片的宽度和高度。
这两个如果只设置一个，图片会按照比例缩放，但是如果两个都设置，图片会被拉升。
标签的属性
标签的属性，就是在标签的开始标签内部 添加的一些内容，这些内容往往可以控制标签的一些展示形式（其实未来都是使用CSS来控制）。
属性都是有属性名和属性值的。
案例：
其中width和height和src就是属性。 每个属性有自己特殊的意义。
[0]字体常用
：字体加粗
: 斜体
: 表现是字体加粗，语意强调文本。
可以直接在线查看w3school的手册 https://www.w3school.com.cn/
菜鸟教程等。https://www.runoob.com/
[1]表格
在HTML中编写表格，需要用到三个标签：
table: 表示一个表格。
tr: 表示一行。
td:表示一个单元格。
案例1：三行五列的表格。
<table border="1">
<tr>
<td>1-1td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
tr>
<tr>
<td>1-1td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
tr>
<tr>
<td>1-1td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
tr>
table>
案例2： 三行五列，第一行的第二个单元格跨4列(colspan)。第一行只有两个单元格。
<table border="1" align="center">
<tr>
<td>1-1td>
<td colspan="4">1-2td>
tr>
<tr>
<td>1-1td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
tr>
<tr>
<td>1-1td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
tr>
table>
案例3：三行五列的表格，第二行的第五个单元格跨两行（rowspan）。 所以第三行就剩4个单元格了。
<table border="1" align="center">
<tr>
<td>1-1td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
tr>
<tr>
<td>1-1td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
<td rowspan="2">1-2td>
tr>
<tr>
<td>1-1td>
<td>1-2td>
<td>1-2td>
<td>1-2td>
tr>
table>
案例4：
<table width="200" border="1" align="center">
<tr>
<td>1td>
<td colspan="3">2td>
<td>3td>
tr>
<tr>
<td rowspan="2">1td>
<td>1td>
<td>1td>
<td>1td>
<td rowspan="2">1td>
tr>
<tr>
<td>1td>
<td>1td>
<td>1td>
tr>
table>
td的属性:
colspan: 表示单元格跨列。根据属性值跨列。
rowspan: 根据属性值进行跨行。
编写任何表格的思路：
①明确每行有几个单元格。
所有的跨列全部向左靠拢。所有的跨行的单元格，全部向上靠拢。
②明确哪些单元格是跨行跨列的。
③按照上面明确的细节实现即可。
tips:
table和tr之间不能有任何其他的标签和文本。
tr和td之间不能有任何其他的内容。
所有要在表格中显示的内容，必须写在td中。
td里面可以写任何的其他的标签。
在table的中，还有一个标签： th （thead），语意：表示表头。
一般都是在第一行或者第一列。
案例：
<table width="300" border="1" align="center">
<tr>
<th>姓名th>
<th>语文th>
<th>数学th>
<th>大学体育th>
tr>
<tr>
<th>卡卡西th>
<td>86td>
<td>88td>
<td>99td>
tr>
<tr>
<th>卡卡东th>
<td>86td>
<td>88td>
<td>99td>
tr>
<tr>
<th>卡卡北th>
<td>86td>
<td>88td>
<td>99td>
tr>
table>
表格的修饰
常用的属性：
width: 可以写在table和td和th标签上。表示表格或者列的宽度。
height：可以写在table，td，th，tr上。表示表格或者行的高度。
align：表示对齐方式。
如果写在table上，表示这个table在父容器中的对齐方式。
如果写在td或者th上，表示内部文本的对齐方式。
valign: 只能写在td或者th上，表示td中的内容的垂直对齐方式。
border：只有table有border属性，默认是0。如果给table添加了border属性，无论是多少，默认多有的td都有1个像素的边框。
bordercolor：设置边框的颜色的。
bgcolor:表示背景颜色。
bgimage：表示背景图片。
其他的问题：
table的align属性，可以设置表格的水平对齐方式。默认是left靠左对齐。我们可以使用center让其居中。
td的align是设置文本的水平对齐方式的。
td的vlign：设置内容垂直对齐方式。
td的宽度和高度。一个td的高度，会影响一行，一个td的宽度，会影响一列。如果一列设置多个宽度，则按照最宽的来。
table的背景颜色会影响整个表格。tr的背景颜色会覆盖表格的。td的背景颜色会覆盖tr的。
颜色的写法：
[1]直接写英文单词。
[2]16进制的数字设置RGB的颜色。
[3]使用rgb或者rgba函数。
案例：
<table bgcolor="pink" width="500" height="300" border="10" align="center">
<tr bgcolor="#cccccc">
<th width="250">姓名th>
<th>语文th>
<th>数学th>
<th bgcolor="rgb(255,255,0)">大学体育th>
tr>
<tr>
<th height="150" align="right">卡卡西th>
<td>86td>
<td valign="top" align="center">88td>
<td valign="bottom">99td>
tr>
<tr>
<th width="300">卡卡东th>
<td>86td>
<td>88td>
<td>99td>
tr>
<tr>
<th width="100">卡卡北th>
<td>86td>
<td>88td>
<td>99td>
tr