一、什么是 HTML？
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
二、HTML结构：
由标签构成，并且是成对出现的，后缀名是.html，用浏览器打开
<html>
<head
<title>标题</title>
</head>
<body>
内容
</body>
</html>
三、HTML标签分类
- 标题标签：
HTML 标题是通过<h1>到<h6>等标签进行定义的，大小依次变小
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
- 段落标签:
HTML 段落是通过<p>标签进行定义的。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- 链接标签：
HTML 链接是通过<a>标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
属性：在href 属性中指定链接的地址
target 你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
- 图片标签：
HTML 图像是通过<img>标签进行定义的。
属性：src表示图片所在的地址，分为绝对路径和相对路径；
width表示宽度，height表示长度。
- 水平线标签：
<hr />标签在 HTML 页面中创建水平线。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
- 注释：
快捷键：ctrl+/
<!-- This is a comment -->
- 换行标签：
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br />标签：
<p>This is<br />a para<br />graph with line breaks</p>
- 文本格式化标签：
字体格式化.png
9.表格标签：
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
属性：border:边框的大小
cellspacing：内容与边框的距离
cellpadding:边框与边框的距离
bgcolor:单元格背景色
align:单元格中内容显示方式，如center居中
rowspan:合并行单元格
colspan:合并列单元格
10.列表标签：
有序列表：
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
无序列表:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
11.框架集标签：
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
案例：点击会员管理，在右侧显示用户信息
网站后台显示页面.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站后台显示页面</title>
</head>
<frameset rows="20%,*">
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.html"/>
<frame name="right" />
</frameset>
</frameset>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="5">欢迎XXX进入后台管理系统</font>
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right"><font>会员管理</font></a><br /><br />
<a href="#"><font>品牌管理</font></a><br /><br />
<a href="#"><font>商品管理</font></a><br /><br />
<a href="#"><font>分类管理</font></a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
这里显示的是所有用户信息。。。
</body>
</html>
