HTML
<html>
<head><meta charset="UTF-8"></head>
<body>
<pre>
day01
1、html的简介
*什么是html？
-HyperText Markup Lanuage 超文本标记语言 网页语言
**超文本：超出文本范畴，使用html
可以轻松实现这样操作
**标记：html所有的操作都是通过标记实现的，标记就是标签，<标签语言>
**网页语言
*第一个html程序
-创建一个java文件 .java
**.java 先编译，后运行
-创建一个html文件。.html .htm
**直接通过浏览器运行
*html的规范（遵循）
1、一个html文件开始标签和结束标签<html></html>
-定义一个java方法{}
2、html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body>显示在页面上的内容都写在body里面</body>
3、html的标签有个开始标签就要有个结束标签
-<head></head>
4、html不区分代码的大小写的
5、有些标签没有结束标签,在标签内结束
-比如 换行 <br/> <hr/>(水平线)
6、编码
-<meta charset="编码方式">
*html操作思想(*****)
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据抱起来（封装起来）
通过修改标签的属性值实现标签内数据的变化。
一个标签就相当于一个容器，想要修改容器内数据的样式，只需要改变容器内的属性值，就可以实现容器内的数据样式变化。
html常用的标签
2、文字标签和注释标签
*文字标签：修改文字的样式
-<font></font>
-属性：
*size:文字的大小，取值范围1-7 超出7，默认还是7
*color：
-两种表示方式
**英文单词：blue,red,green,yellow,black,gray,white,pink.....
**使用十六进制数表示：#ffffff：RGB
-通过工具实现不同的颜色#66ff66
*注释标签
-java注释集中？三种
-html的注释：<!-- html注释 -->
3、标题标签、水平线标签和特殊字符
*标题标签
-<h1></h1> <h2></h2> <h3></h3> .... <h6></h6>
-从h1到h6，大小一次变小，同时会自动换行
*水平线标签
-<hr/>
-属性
**size：水平线粗细 范围（1-7）
**color: 水平线颜色
<hr size="5" color="blue"/>
*特殊字符
-想要在页面上显示这样的内容 <html>:是网页的开始！
-需要对特殊字符进行转义：
*< : <
*> : >
*空格 ：
*& : &
*双引号 ： "
*注册符 ： ®
*版权 ： ©
4、列表标签
定义列表（dl标签）
<dl><dt></dt><dd></dd></dl>
有序列表（ol列表）
<ol type="1"><li></li></ol>
无序标签（ul标签）
<ul type="circle"><li></li><ul>
type:空心圆circle 实心圆disc 实心方块square 默认disc
-比如现在显示这样的效果
安阳工学院
计科
机械
电气
**<dl></dl>:表示列表的范围
**在dl里面<dt></dt> : 上层内容
**在dl里面<dd></dd> : 下层内容
-代码
<dl>
<dt>安阳工学院</dt>
<dd>计科</dd>
<dd>机械</dd>
<dd>电气</dd>
</dl>
-想要在页面显示这样的效果
安阳工学院
1.计科
2.机械
3.电气
安阳工学院
a.计科
b.机械
c.电气
安阳工学院
i.计科
ii.机械
iii.电气
**<ol></ol>:有序列表的范围
-属性 type：设置排序方式 1（缺省） a i
**在ol标签里面<li>具体内容</li>
-想要在页面上显示这样的 果
-属性 type: 设置无序排序 disc（缺省） circle square
特殊符号（方框） 财务部
特殊符号（实心圆）学工部
5、图像标签（*****）
*<img src="路径"/>
-src ：图片路径
-width:图片宽度
-height:图片高度
-alt:图片上显示文字，把鼠标移动到图片上停留一会就会显示内容，主要显示错误，当图片不存在，就显示这个文字
6、路径的介绍
*分类：两类
**绝对路径：
-http://www.baidu.com/a.jpg
-具体的路径
**相对路径：
-一个文件相对于另外一个文件的位置
-三种：
**HTML文件和图片在一个路径下，可以直接写文件名称
**图片在HTML文件的下层目录，去除公共部分即可
**图片在html文件中的上层目录，../a.jpg
7、案例 list.html
8、超链接标签（-******）
*链接资源
-<a href="链接到资源的路径" target="_blank">显示在页面的内容</a>
**href:链接的资源的地址
**target：设置打开的方式
-- _blank（新窗口打开）
-- _self（默认，在当前页打开）
-当超链接不需要当任何的地址，这时候只需要在href加#
**<a href="#">这是一个超链接</a>
*定位资源
**如果我想要定位资源：定义一个位置
<a name="top">顶部<a>
**回到这个位置
<a href="#top">回到顶部</a>
**引入一个标签 pre：原样输出
<pre>
原样输出
</pre>
9、表格标签（*****）
*可以对数据进行格式化，是数据显示更加清楚
*<table></table>：表格的范围
-border:表格线
-bordercolor:表格线颜色
-cellspacing：单元格间距
-width：表格的宽度
-height:表格的高度
*在table里面<tr></tr>
-设置显示方式 align： left center right
-设置加粗方式：
*在tr里面<td></td>:单元格
*在tr里面<th></th>：单元格 可以实现居中和加粗
*表格标题：<caption></caption>
*画图分析表格的写法
-首先定义一个表格的范围使用table
-定义一行使用tr
-定义一个单元格使用td
*操作技巧：
-首先数有多少行，数每行里面有多少单元格
*合并单元格
-rowspan:<td colspan="3" align="center">人员信息</td>
-colspan：<th rowspan="3">4153456</th>
10、表单标签（****最重要的标签****）
*******在输入项里面必须要有name的属性
*可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
*<form></form>定义一个表单的范围
-属性：action="路径" 供提交的数据提交到指定路径下
-属性：mehtod=""表单提交方式
--属性值：get（缺省） post
--面试题：get和post区别？
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面，http协议）
2、get请求安全级别较低，post较高
3、get请求数据的大小的限制，post没有限制
-属性：enctype="" 文件上传时需要这个属性
**输入项：可以输入内容或者选择内容的部分
-大部分的输入项 使用 <input type="输入项的类型"/>
**普通输入项：<input type="text"/>
**邮箱：<input type="email" name=""><br>
**密码输入项：<input type="password"/>
**单选输入项：<input type="radio"/>男
-在里面需要属性 name：且单选的在一个组，即name属性值一样，并且需要value属性
-实现默认选中，需要加个属性：checked="checked"
**复选输入项：<input type="checkbox" name="check" value="jsj"/>计算机
-在里面需要属性 name：且多选的在一个组，即name属性值一样,并且需要value属性
-实现默认选中，需要加个属性：checked="checked"
**文件输入项：<input type="file"/>
**下拉输入项：（不是在input标签里面）
<select name="birthday">
<option value="1991">请选择</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
</select>
-默认选中某一个下拉选项，需要加入属性：selected="selected"
**文本域：
<textarea cols="10" rows="10" name="text"></textarea>
**隐藏项：<input type="hidden" />
**提交按钮：<input type="submit" value="注册" />
****提交过后会传递参数
-？输入项name的值=输入的值&
-参数类似于key-value形式
file:///D:/html/day01/html/hello.html
?phone=12312312&pwd=&sex1=man&check=jsj&check=pb&check=ym&file=&birthday=1992&textArea=321412412&hidden=®edit=注册
****使用图片来提交
<input type="submit" value="注册"><br/>
<input type="image" src="2.jpg"/>
**重置按钮：<input type="reset" value="重置注册">
-回到输入项的初始状态
**普通按钮：<input type="button" value="Button">
11、案例 regedit.html
12、其他标签的使用
<b></b>加粗
<i></i>斜体
<u></u>下划线
<s></s>删除
<pre></pre>原样
<sub></sub>下标
<sup></sup>上标
<p></p>段落
<div></div>自动换行
<span></span>一行显示
13、html头标签的使用
*html两部分组成：head body
**在head里面的标签就是头标签
-title标签：浏览器标题
-base标签：<base target="_blank">统一设置页面里超链接打开方式
-meta标签：设置页面一些相关的内容
<meta content="供早期搜索引擎检索使用"content="3;url=hello.html" charset="UTF-8"/>
<!--<meta http-equiv="refresh"content="3;url=hello.html">-->网页3秒后跳转
-link标签：引入一个外部文件
14、框架标签
*<frameset>
-rows:按行进行划分
<frameset rows="80,*"></frameset>
-cols:按列进行划分
<frameset cols="80,*"></frameset>
*<frame>
-具体的显示页面
<frame name="lower_left" src="路径"/>
***注意：使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉、
*例：<frameset rows="150,*">
<frame name="top" src="hello.html"/>
<frameset cols="200,*">
<frame name="left" src="Other.html">
<frame name="right" src="regedit.html">
</frameset>
</frameset>
15、a标签ed扩展（了解）
-百度是网络资源
-当a标签里面访问网络资源时候，必须要加一个协议http：表示一个网络的公共协议，如果加上http协议之后，自动识别访问资源是一个网络资源
-当浏览器里面找到相关协议，首先看这个协议是不是公共协议http，如果不是公共协议，回去本地电脑找支持这个协议的应用程序
16、内容总结
1、html操作思想
-使用标签把要操作的数据包装起来，通过修改标签的属性值，来实现标签内数据样式的变化
2、font标签 属性：size 取值范围 1-7 color ：英文单词 十六进制
3、标题标签<h1></h1>....<h6></h6> 从h1到h6越来越小，自动换行
4、注释：<!--html的注释-->
5、列表标签
-<dl>
<dt></dt>
<dd></dd>
</dl>
-有序：<ol><li></li></ol>
-无序：<ul><li></li></ul>
6、图形标签
-<img src="路径" width="" height="" alt=""/>
**alt：浏览器兼容很差
7、路径(相对路径)
-在同一级：直接写
-在下层目录：image/1.jpg
-在上层目录：../
8、超链接标签
<a href="路径"> 显示在页面的内容</a>
-打开方式：target 值：_blank _self
-默认是当前页面打开
9、表格标签(****)
<table>
<tr>
<td></td>
<th></th>//加粗和居中
</tr>
</table>
-技巧：先数多少行，再数多少单元格
10、表单标签（********）
-<form></form>:
-action:提交到地址
-method:提交方式：常用两种 get post（两者区别）
-输入项：
-输入项里面name属性
-普通输入项：<input type="text"/>
-密码输入项：<input type="password"/>
-单选框：<input type="radio"/>
-复选框：<input type="checkbox"/>
-下拉框：
<select name="">
<option value=""></option>
</select>
-文本域：<textarea cols="" rows=""></textarea>
-文件输入框：<input type="file"/>
-提交按钮：<input type="submit"/>
-重置按钮：<input type="reset"/>
-图片提交：<input type="image" src=""/>
-隐藏项:<input type="hidden"/>
-普通按钮：<input type="button"/>
11、其他标签
b i s u pre sup sub div span
div:自动换行 span：一行显示
12、框架标签
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="80,*">
<frame name="left" src="b.html"/>
<frame name="right"src="c.html"/>
</frameset>
</frameset>
</pre>
</body>
</html>
