HTML基础概述
1.html的简介（HyperText Markup Language:超文本标记语言，网页语言）
*超文本：超出文本的范畴，使用HTML可以轻松实现这样操作
*标记：HTML所有的操作都是通过标记来实现的，标记就是标签，<标签名称>
*网页语言：
*第一个html程序。
-创建一个java文件.java
**先编译，然后再执行
-html后缀是.html .htm
**直接通过浏览器就可以执行
代码：<font size="5" color="red">这是我的第一个html程序！</font>
*html的规范：
1、一个html文件开始标签和结束的标签
1、-定义一个Java方法{}
-<html> 开始 </html> 结束
2、html包含两部分内容
(1)<head> 设置相关信息 </head>
(2)<body> 显示在界面上的内容</body>
3、html的标签有开视标签，也有结束标签
标签成对出现
4、HTML的代码不区分大小写
5、有些标签没有结束标签
-比如换行 <br/> 分割线<hr/>
*html操作思想(***)
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签吧操作的数据封装起来
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以是西安容器内数据样式的变化
HTML中常用的标签：
2、文字标签和注释标签
*文字标签：修改文字的样式
-<font></font>
-属性：
*size:文字的大小 取值范围1-7，超出了7，默认还是7
*color:文字颜色
-两种表示方式：
**英文单词：red green blue black white yellow gray...
**使用16进制的数表示 #ffffff :RGB 三颜色调试出来的
-通过工具实现不同的颜色
*注释标签：
-Java注释集中？三种
-HTML的注释：<!-- HTML的注释 -->界面不会显示，但是源代码会出现
3、标题标签、水平线标签和特殊字符
*标题标签：
-<h1></h1> .....<h6></h6>
-从h1到h6，到校依次变小，同时会自动换行
*水平线标签
-<hr/>
-属性：
**size：水平线的粗细 取值范围1-7
**color：水平线的颜色
-代码：
<hr size="6" color="blue"/>
*特殊字符：
-想要再页面上显示这样的内容 <html>:是网页的开始！
-需要对特殊字符进行转义
*< <
*> >
*空格
*& &
4、列表标签
-比如现在显示这样的效果
传智播客
财务部
学工部
人事部
** <dl></dl>:表示列表的范围
** 在dl里面 <dt></dt>:上层内容
** 在dl里面 <dd></dd>:下层内容
-代码：
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
</dl>
-想要在页面上显示这样的效果
1，财务部
2，学工部
a.财务部
b.学工部
**<ol></ol> :有序列表的范围
-属性type:设置排序方式 1(缺省) a i
**在ol标签里边<li>具体内容</li>
<ol type="a">
<li>财务部</li>
</ol>
-想要在页面上显示这样的效果
特殊符号(方框)财务部
特殊符号(方框)学工部
**<ul></ul>:表示无需列表的范围
属性：type：空心有circle、实心圆disc、实心方框square，默认disc
在ul里边<li></li>
-代码;
<ul>
<li>财务部</li>
</ul>
5、图像标签(*******)
*<img src="图片的路径">
-src:图片的路径
-width：图像的宽度
-height：图像的高度
-alt:图片上显示的文字，鼠标移动到图片上，停留片刻显示内容
**有些浏览器下不显示(没有效果)
6、路径的介绍：
*分类:两类：
**绝对路径
-c:\User\
-http
**相对路径
-一个文件相对于另外一个文件的位置
-三种：
**html文件和图片在一个路径下边，可以直接写文件名称
**在html中，使用相对路径下的
7、超链接标签：
链接资源
-<a href="链接到资源的路径">显示在界面上的内容</a>
**href:链接的资源的地址
**target:设置打开方式，默认是当前页打开
-- _blank:在新窗口打开
--_self:在当前页打开
-当超链接不需要到任何的地址，在href里面加#
定位资源符
**如果想要定位资源：先定义一个位置
<a name="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>
**引入一个标签 pre：原样输出
8、表格标签(*****重要的标签*****)
*可以对数据进行格式化，使数据显示更加清晰
*<table></table>:表示表格的范围
-border:表格线
-bordercolor:表格显得颜色
-cellspacing:单元格之间的距离
-width：表格的宽度
-height：表格的高度
**在table里面<tr></tr>
-设置对其方式align:left center right
***在tr里面<td></td>
-设置对其方式align:left center right
***使用th也可以表示单元格
-表示可以实现剧中和加粗
*代码：
<table border='1' bordercolor="blur" cellspacing="0" width="200" height="150">
<tr>
<td></td>
</tr>
</table>
*画图分析表格的写法：
-首先定义一个表格的范围使用table
-定义一个行使用tr
-定义一个单元格使用 td
**操作技巧：
-首先数有多少行，数每行里面有多少哥单元格
**表格的标题：
<capation> </capation>
**合并单元格
-rowspan:跨行合并
-colspan:跨列合并
10、表单标签(*****必须掌握)
*可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
*<form></form>:定义一个表单的范围
-属性
**action :提交到地址，默认提交到当前页面
**method: 表单提交方式
-常用有两种： get 和post 默认的是get
**面试题目：get 和post区别：
1.get请求地址栏携带提交的数据，post不会携带(请求体里)
2.get请求安全级别较低，post较高
3.get请求数据大小的限制。post没有限制
**enctype：一般请求下不需要这个属性，做文件上传的时候需要设置这个属性
**输入项：可以输入内容或者选择内容的部分
-大部分的输入项使用 <input type="输入项的类型"/>
******在输入项里边必须有一个name属性
***普通输入项：<input type="text"/>
***密码输入项：<input type="password"/>
***单选输入项：<input type="raido"/>
-在里面需要属性 name
—name的属性值必须要相同
-必须要有一个value值
-默认选项参数 checked="checked"
***复选输入项：<input type="checkbox"/>
-在里面需要属性 name
—name的属性值必须要相同
-必须要有一个value值
-默认选项参数 selected="selected"
***文件输入项(在后面上传时候用到)
-<input type="file"/>
***下拉输入项：(不是在input标签里边的)
<select name="birth">
<option value="1991">1991</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
</select>
***文本域
<textarea cols="10" rows="10"></textarea>
***隐藏项：存在代码中，不在页面显示
<input type="hidden"/>
***提交按钮
<input type="submit"/>
<input type="submit" value="注册"/>
***使用图片提交
<input type="image" src="图片路径"/>
***重置按钮
<input type="reset" value="重置">
***普通按钮(和js一起使用)
<input type="button" value=""/>
11使用表单标签练习
12其他常用标签
b:加粗
i:斜体
u:下划线
s:删除线
pre:原样输出标签
p:段落标签，比br多一行
sub:下标
sup:上标
div:自动换行
span:显示在一行
13html的头标签的使用
*html两部分组成head 和body
**在head里边的标签就是头标签
** title:在标签上显示的内容
** meta:设置页面的一些相关内容，设置定时跳转
<meta http-equiv="refresh" content="3;url=hello.html"/>
**base:设置超链接的基本设置:
-可以同意设置超链接的打开方式
<base target="_blank"/>
**link标签：引入外部文件
**css:可以使用link标签引入css文件
14、框架标签
*<frameset>
-rows:按照行进行划分
**<frameset rows="80,*"> </frameset>
-cols:
**<frameset cols="80,*">
*<frame>
-具体显示的页面
-<frame name="lower_left" src="b.html"> </frame>
*使用框架标签的时候，不能在body里面，使用了框架标签，需要把body去掉
15、扩展a标签
