<!-- 1.什么是网页
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的‘一页’通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。通常我们看到的网页，
常见的以.htm或.html后缀结尾的文件，因此俗称为HTML文件。
-->
<!-- 2.什么是HTML
HTML指的是超文本标记语言，他是用来描述网页的一种语言。
HTML不是一种编程语言，它是一种标记语言。
标记语言是一套标记标签
所谓超文本有两层含义：
1.它可以加入图片，声音，动画，多媒体等内容（超越了文本的限制）。
2.它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
-->
<!-- 3.网页的形成
网页是由网页元素组成的，这些元素是由html标签描述出来的，然后通过浏览器解析来显示给用户的。
-->
<!-- 4.浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算机网页的显示方式并显示页面。
常用的浏览器内核：
浏览器 内核 备注
IE Trident IE，猎豹安全，360极速浏览器，百度浏览器
firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
chrome/Opera Blink chrome/Opera浏览器内核，Blink其实是Webkit的分支
-->
<!-- 5.为什么需要web标准
由于不同浏览器解析出来的效果可能不一致，开发者常常需要为多版本的开发而艰苦工作
Web标准优点：
1.首先可以让不同的开发者写出的页面更标准，更统一
2.让Web的发展前景更广阔
3.更容易被搜寻引擎搜索
4.降低网站流量费用
5.使网站更易于维护
6.提高页面浏览速度
7.内容能被更广泛的设备访问
-->
<!-- 6.Web标准构成
主要包括结构，表现和行为三个方面。
标准 说明
结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现 表现用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS。
行为 行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript。
Web标准提出的最佳方案：结构，样式，行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
-->
<!-- 7.骨架标签
标签名 定义 说明
html HTML标签 页面中最大的标签，我们称之为根标签
head 文档的头部 注意在head标签中我们必须要设置的标签是title
title 文档的标题 让页面拥有一个属于自己的网页标题
body 文档的主体 元素包含文档的所有内容，页面内容基本都是放到body里面的
html文档的后缀名必须是.html或.htm，浏览器的作用是读取html文档，并以网页的形式显示出他们。
-->
<!-- 这句声明，告诉浏览器使用HTML5来解析这个网页，但是它不是HTML标签 -->
<!DOCTYPE html>
<!-- long="zh-CN"定义当前文档的显示语言，en为英语，zh-CN定义语言为中文
定义英文的也可以显示中文，定义中文的也可以显示英文
-->
<html long="zh-CN">
<!-- 表示网页的头部，这里的信息是对网页的整体说明 -->
<head>
<!-- 定义字符集，charset规定我们的html文档使用哪种字符编码，其中UTF-8也被称为万国码，基本包含了全世界所有国家用到的字符 -->
<meta charset="UTF-8">
<title>学习黑马视频的第一个HTML</title>
</head>
<!-- 表示网页的身体，网页的主要内容都写在这里 -->
<body>
<!-- 标题标签h1到h6，它是一个双标签，每个标题都是独占一行的 -->
<!-- 可以让网页上显示空格，一个 显示一个空格 -->
<h1>吃 饭</h1>
<!-- 斜体 -->
<i>2020.12.27</i>
<!-- 分割线 -->
<hr>
<li class="a"></li>
<!-- 定义段落，段落标签 段落和段落留有间隙-->
<!-- br标签换行，换行没有间隙 -->
<p> 今天中<br/>午我吃的面食 今天中午我吃的面食今天中午我吃的面食今天中午我吃的面食今天中午我吃的面食今天中午我吃的面食今天中午我吃的面食今天中午我吃的面食今天中午我吃的面食今
天中午我吃的面食今天中午我吃的面食今天中午我吃的面食今天中午我吃的面食今天中午我吃的面食</p>
<!-- b标签，给文字加粗 -->
<p>服务员告诉我面不够了，
<br>
<b>只够做一个小碗</b>
</p>
<br/>
<!-- 文本格式化标签
语义 标签 说明
加粗 strong或者b 更推荐使用strong标签，语义更强烈
斜体 em或者i 更推荐使用em标签，语义更强烈
删除线 del或者s 更推荐使用del标签，语义更强烈
下划线 ins或者u 更推荐使用ins标签，语义更强烈
-->
<b>我是加粗文字</b>
<strong>我也是加粗文字</strong>
<em>我是倾斜文字</em>
<i>我也是倾斜文字</i>
<s>我是删除线</s>
<del>我也是删除线</del>
<ins>我是下划线文字</ins>
<u>我也是下划线文字</u>
<!-- div和span标签
div和span标签是没有语义的，它们就是一个盒子，用来装内容的。
特点：div标签是用来布局的，但是一行只能够放一个div，可以理解为一个大盒子
span意为跨度，跨行，一行可以有多个span，可以理解为一个小盒子
-->
<div>我是一个div标签，我一个人独占一行</div>
<div>我是一个div标签，我一个人独占一行</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<br/>
<!-- 图像标签
img标签，是一个单标签
src属性是图像标签的必须属性，它用于指定文件的路径和文件名。
alt属性如果图片加载不出来，显示的默认文字
title属性，鼠标放到图片上之后显示的文字
width 像素设置图像的宽度
height 像素设置图像的高度
border 像素设置图像的边框粗细
-->
<br/>
<img src="images/a.png" alt="我是默认吃饭图片"
title="我是鼠标放图片上显示的文字" width="500px" height="300px" border="15px">
<br/>
<!-- 超链接标签
从一个网页链接到另一个网页
href属性，用于指定链接目标的url地址
target属性为目标窗口的显示方式，
其中_self为默认值语义为在当前网页打开新的网页
_blank为在新的窗口打开新的网页
超链接分类：
1.外部链接，例如www.baidu.com，相对于我们网站来说他是外部的网站。外部链接，必须以http://开头
2.内部链接，新网页在我们网站的内部。不需要加http://
3.空链接
4.下载链接，地址是.exe或者是zip等压缩包形式
5.网页元素链接：在网页中各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
6.锚点链接：点击我们的链接可以快速定位到网页中的某个位置，在href中使用#名字，在目标位置标签中添加一个id属性=名字
-->
<a href="https://www.baidu.com" target="_blank">百度</a>
<br>
<a href="gongsijianjie.html" target="_blank">公司简介</a>
<br>
<a href="#" target="_blank">空链接</a>
<br>
<a href="images/a.png.zip" target="_blank">下载文件</a>
<br>
<a href="https://www.baidu.com" target="_blank"><img src="images/a.png"></a>
<br>
<a href="#user">我是谁</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id="user">谁是我</h3>
<br>
<!-- HTML表格标签
1.表格的主要作用
用于显示，展示数据。它可以让数据显示的非常规整，可读性非常高。
2.表格的基本语法
table：用于定义表格标签
tr：用来定义表格中的行
td：用来定义表格中的内容行中的单元格
3.表头单元格
th：用于定义表头单元格，显示在第一行，突出重要性，表头单元格中的内容，会加粗居中显示
4.表格的属性，实际开发中基本上不使用（实际开发中，一般用css）
属性名 属性值 描述
align left,center,right 规定表格相对周围元素的对齐方式
border 1或"" 规定表格单元是否拥有边框，默认为""表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格宽度
hight 像素值或百分比 规定表格高度
5.使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体，两大部分。
在表格标签中分别用thead表示头部区域tbody表示主体区域，这样可以更好的分清表格结构
6.合并单元格：
方式一---》跨行合并---》rowspan="合并单元格的个数"
最上侧单元格为目标单元格，写合并代码
方式二---》跨列合并---》colspan="合并单元格的个数"
最左侧单元格为目标单元格，写合并代码
-->
<table align="center" border="1" cellpadding="20px" cellspacing="0px" width="600px" height="200px">
<thead>
<tr>
<th colspan="2">姓名，性别</th>
<!-- <th>性别</th> -->
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">张三--男</td>
<!-- <td>男</td> -->
<td rowspan="2">22</td>
</tr>
<tr>
<td>李四--女</td>
<!-- <td>女</td> -->
<!-- <td>21</td> -->
</tr>
</tbody>
</table>
</body>
</html>