一、 HTML介绍
- 什么是HTML？
超文本：比普通文本功能更加强大
标记语言：使用一组标签对内容进行描述的一门语言，它不是变成语言。 - 为什么要学习HTML？
- HTML怎么使用？
语法和规范：
① 所有的html文件后缀名是以.html或者htm结尾的，建议使用,html结尾。
② 整个html文件分别由头部分和体部分
③ html标签都是由开始标签和结束标签组成(
)没有内容，直接在开始位置结束。TIPS：例如表示开始，表示结。
④ html标签忽略大小写，建议大家使用小写。 - HTML相关标签的学习
4.1标题标签
-
标题标签使用<hn></hn>（n从1->6逐渐变小） -
4.2水平线标签：特点：加粗加黑显示，单独占用一行。与其他行有一定的行间距。 TIPS：如何注释：<!--标题标签-->
<hr/>标签在HTML页面中创建一条水平分割线，用于定义内容中的主题变化。
size属性：水平线的高度，单位像素。
noshade属性：没有阴影，取值：noshade。表示显示纯色。
例如：
<！--水平线-->
<hr/>
<hr size =”5”/>
<hr noshade =”noshade”/>
4.3段落标签 段落标签：<p>(加上一段文字)</p>
4.4字体标签 在一段字体前面加上<font></font>
<body>
<font color="darkred" size ="1" face="楷体">今天天气真好</font><br />
<font color="darkred" size ="2"face="宋体">今天天气真好</font> <br />
<font color="darkred" size ="3">今天天气真好</font> <br />
<font color="darkred" size ="4">今天天气真好</font> <br />
</body>
TIPS：<b>(加粗的字体)</b> <i>(需要斜体的字体)</i>
其中<br />可视为换行
案例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站信息显示页面</title>
</head>
<body>
<!--创建一个标签-->
<h2>公司简介</h2>
<!--创建一条横线-->
<hr />
<!--创建段落-->
<p>
<font size="5" color="red" face="楷体">"***企业集团"</font>是由***一手创立的。里面成员主要有<b>***和***。</b>
</p>
<p>
创建原因主要是<i>教育</i>。
</p>
</body
二、 网站图片信息显示页面
- 图片标签
单独使用没有任何效果
图片的位置信息：src
案例：
<body>
<img src ='../../img/logo2.png' width="260px"height="45px" alt="logo图片"/>
<img src="../../img/课堂演示图片汇总/header.png" width="300px" height="45px" alt ="header">
</body>
TIPS:①其中src之后的图片需要从对应的文件夹中复制到本项目中的img文件中，且输入src可自动提供相关的图片显示。src:指的是图片显示的路径(位置)
绝对路径：E:\Users\ThinkPad\Desktop\WEB01_HTML\资料\WEB01\image
相对路径：
①同一级：直接写文件名称或者./文件名称
②上一级：../文件名称
③下一级：写上目录名称/文件名称
②之后需要规定width 和height的属性，其为像素。
③alt之后的属性，表示当图片无法正常显示之后，浏览器所做的页面显示，也是给程序员的一种提示。
-
列表标签
①有序列表： <ol type="各种样式如罗马字符，阿拉伯数字等" start="开始的顺序可以从234等排序" reversed="reversed" （倒序）> <li></li> </ol>
例如：
<body>
<ol start="5" reversed="reversed" type="I">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ol>
</body>
②无序列表：
<ul type="方框 圆圈等">
<li></li>
</ul>
例如：
<body>
<ul type ="square">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ul>
</body>
-
超链接标签
<a href="" target=""></a> href:指定跳转的位置 target：指定跳转页面显示的位置 (取值：_self 、_blank ，self表示只在自身页面发生跳转， blank表示重新跳转一个页面开始进行跳转)
例如：
<body>
<ul>
<li><a href="../案例一：网站信息显示页面/网站信息显示页面.html">阿里巴巴</a></li>
<li><a href="http://www.baidu.com">huawei</a></li>
<li><a href="#">tecent</a></li>
<li><a href="#">iflytel</a></li>
</ul>
</body>
三、 网站首页显示页面
- 表格标签
表格标签使用的是<table></table>
<table>
<tr>
<td></td>
</tr>
</table>
TIPS:<tr></tr>表示行，<td></td>表示列
案例：
<body>
<!--cellspacing:设置边框与边框的间距。cellpadding：设置边框与内容的间距-->
<table border="1px" width="450px" height="150px" align="center" bgcolor="red" cellpadding="0px" cellspacing="0px">
<tr height="50px" bgcolor="yellow">
<td>11</td>
<td><font size="6">12</font></td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
效果如下：
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
TIPS：每个单位需要携带单位即像素，且border表示设置边框将内容包裹住，width表示表格的宽度，height表示高度。aligh表示在网页的位置。如center居中，bgcolor表示背景颜色。cellspacing:设置边框与边框的间距。cellpadding：设置边框与内容的间距。tr 行中也可以设置单独设置属性。
-
表格标签的跨行跨列操作
跨行：rowspan
跨列：colspan
案例：
<body>
<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellspacing="0px">
<tr>
<td colspan="2" align="center">
<img src="../../img/课堂演示图片汇总/1.jpg" height="100%" width="100%" />
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">
<table border="1px" align="center" width="100%" height="100%" >
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
图示：
TIPS：①height=“100%” width=”100%” 表示该内容占整个表格的百分之百。②写表格的时候，养成习惯。一行一列全部写出来。其次，跨行跨列之后需要删除被占用的表格。
3． 案例网站首页的分析
第一步：创建一个八行一列的表格
第二步：实现第一行（镶嵌一个一行三列的表格，然后分别对单元格的内容进行填充）
第三步：实现第二行（暂时使用字体标签结合超链接标签完成导航栏，需要设置当前单元格的背景为黑色）
第四步：实现第三行（直接放置一张图片）
第五步：实现第四行（镶嵌一个三行七列的表格）
第六步：实现第五行（放置一章广告图片）
第七步：实现第六行（复制第四行代码）
第八步：实现第七行（放置一张广告图片）
第九步：实现第八行（使用字体标签和超链接标签完成友情链接和版权信息）
四、 网站后台系统页面显示
1．框架结构标签（<frameset>）
案例一：<html>
<head>
<meta charset="UTF-8">
<title>框架集标签</title>
</head>
<frameset cols="25%,*" >
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</html>
TIPS：①其中body部分需要删除。其次需要在同一目录新建两个html文件，分别为left.html和right.html。左右两个需要用到body部分。② cols部分只使用一个引号，其次，后面的号可以自动计算。即所占百分比剩余的部分。
案例二：
第一部分：主页面部分
<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部分：
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p align="center"><font color="burlywood" size="5">欢迎进入**管理系统</font></p>
</body>
LEFT部分：
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right">成员信息</a><br />
<a href="#">成员管理</a><br />
<a href="#">活动详情</a><br />
<a href="#">创办信息</a><br />
</body>
</html>
RIGHT部分：
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<td width="50%">家庭地位</td>
<td width="50%">用户名称</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
</tr>
</table>
</body>
</html>
页面详情：
TIPS：<frame name ="right" /> 右部门一开始进行隐藏。且注意首页部门划分三个方面，先分上下两个界面，再分下部分的左右界面。
