JAVAWEB第一天——html的学习

一、 HTML介绍

什么是HTML？
超文本：比普通文本功能更加强大
标记语言：使用一组标签对内容进行描述的一门语言，它不是变成语言。
为什么要学习HTML？
HTML怎么使用？
语法和规范：
① 所有的html文件后缀名是以.html或者htm结尾的，建议使用,html结尾。
② 整个html文件分别由头部分和体部分
③ html标签都是由开始标签和结束标签组成(
)没有内容，直接在开始位置结束。TIPS：例如表示开始，表示结。
④ html标签忽略大小写，建议大家使用小写。
HTML相关标签的学习
4.1标题标签

 标题标签使用<hn></hn>（n从1->6逐渐变小）

```
 特点：加粗加黑显示，单独占用一行。与其他行有一定的行间距。
 TIPS：如何注释：
```
4.2水平线标签：
<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．案例网站首页的分析
第一步：创建一个八行一列的表格
第二步：实现第一行（镶嵌一个一行三列的表格，然后分别对单元格的内容进行填充）
第三步：实现第二行（暂时使用字体标签结合超链接标签完成导航栏，需要设置当前单元格的背景为黑色）
第四步：实现第三行（直接放置一张图片）
第五步：实现第四行（镶嵌一个三行七列的表格）
第六步：实现第五行（放置一章广告图片）
第七步：实现第六行（复制第四行代码）
第八步：实现第七行（放置一张广告图片）
第九步：实现第八行（使用字体标签和超链接标签完成友情链接和版权信息）

扫描二维码关注公众号，回复： 11537393 查看本文章

四、网站后台系统页面显示
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" /> 右部门一开始进行隐藏。且注意首页部门划分三个方面，先分上下两个界面，再分下部分的左右界面。