-html后缀是 .html .htm
**直接通过浏览器可以运行
-代码
**这是我的<font size = "5" color = "red">第一个html程序！</font>
*html的规范（遵循）
1.一个html文件开始标签和结束标签<html> </html>
-定义一个java方法 {}
2.html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显示在页面上的内容都写在body里面</body>
3.html的标签有开始标签，也有结束标签
-<head></head>
4.html的代码不区分大小写
5.有些标签，没有结束标签，在标签内结束
-比如换行 <br/> <hr/>
*html的操作思想（**********）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据
包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性，就可以实现容器
内数据样式的变化。
html常用的标签
2.文字标签和注释标签
*文字标签：修改文字的样式
-<font></font>
-属性：
*size:文字的大小 取值范围 1-7 ，超出了7，默认还是7
*color：文字的颜色
-两种表示方式
**英文单词： red green blue ...
**使用16进制表示 #ffffff :RGB
--通过工具实现不同的颜色 #66cc66
*注释标签
-Java注释几种？ 三种
-html的注释 ：<!-- html的注释 -->
3.标题标签，水平线标签和特殊字符
*标题标签
-<h1></h1> <h2></h2> ...<h6></h6>
-从h1到h6大小依次变小，同时会自动换行
*水平线标签
-<hr/>
-属性
**size:水平线的粗细 取值范围 1-7
**color：颜色
-代码
<hr size = "5" color = "blue"/>
*特殊字符
-想要在页面上显示这样的内容 <html>:是网页的开始！
-需要对特殊字符进行转义
* < <
* > >
* 空格
* & &
4.列表标签
比如现在显示这样的效果
XX大学
财务部
学工部
人事部
**<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>
-代码
<ol tyepe = "a">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
--想要在页面上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部
**<ul></ul>:表示无序列表的范围
--属性：type:空心圆circle 实心圆disc 实心方块square 默认disc
在ul里面 <li></li>
-代码
<ul type = "circle">
<li>财务部</li>
<li>学工部</li>
</ul>
5.图像标签（*******）
*<img src = "图片的路径"/>
-src 图片的路径
-widthL:图片的宽度
-height:图片的高度
-alt:图片上显示的文字，将鼠标移动到图片上，停留片刻显示内容
**有些浏览器不显示（没有效果）
6.路径的介绍
*分类：两类
**绝对路径
-C:\Users\25717\Desktop\寒假前端学习\a.jpg
-http://www.baidu.com/b.jpg
**相对路径
-一个文件相对于另外一个文件的位置
-三种：
**html文件和图片在一个文件下可以直接写名称
-<img src = "b1.jpg" alt = "这是一个美女"/>
**图片在html文件的下层目录
在html文件中，使用img文件夹下面的a.jpg
C:\Users\25717\Desktop\寒假前端学习\code\ 04-图片标签.html
C:\Users\25717\Desktop\寒假前端学习\code\ img\a.jpg
***在html中使用图片 4.html和img在一个路径下
img\a.jpg
**图片在html文件的上层目录
---C:\Users\25717\Desktop\寒假前端学习\ c.jpg
C:\Users\25717\Desktop\寒假前端学习\ code\04-图片标签.html
***html文件所在的目录和图片文件是一个目录
**图片和html文件是什么关系
--图片再html的所在目录的上层目录 寒假前端学习
**怎么表示上层路径 ../
-- ../表示的就是寒假前端学习
-- ../c.jpg
** 想要表示上层的上层 ../../
7.案例一：列表标签的案例
<html>
<head>
<title>列表图片综合案例</title>
<meta charset = "UTF-8">
</head>
<body>
<img src = "b.jpg"/>
<br/></br>
首页>中国馆>女装>精品
<br/><br/>
<img src = "img/c.jpg">
<br/>
<h3>热点推荐</h3>
<dl>
<dt><img src = "img/a.jpg"></dt>
<dd>一口价</dd>
<dd>全国包邮</dd>
<hr size = "5" color = "blue">
<dl>
<dl>
<dt><img src = "img/b.jpg"/></dt>
<dd>不还价</dd>
<dd>全国包邮</dd>
<hr size = "2" color = "blue">
</dl>
</body>
</html>
8.超链接标签（************）
*连接资源（********）
- <a href = "链接到资源的路径">显示在页面上的内容</a>
** href:链接的资源的地址
** target: 设置打开的方式，默认他是当前页打开
-- _blank:在一个新窗口打开
-- _self:在当前页打开 默认
当超链接不需要到任何的地址 在href里面加一个#
-<a href = "#">这是一个超链接2</a>
*定位资源
**如果想要定位一个资源：定义一个位置
<a name = "top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>
**引入一个标签 pre：原样输出
9.表格标签（*******重要的标签***********）
* 对数据进行格式化，使数据更加清晰完整
*<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 = "blue" cellspacing = "0" width = "400" height = "150">
*画图分析表格的写法
-首先定义一个表格的范围使用table
-定义一行使用 tr
-定义一个单元格使用 td
**操作技巧
-首先数有多少行再数每行里有多少个单元格
**表格的标题
<caption></caption>设置表格的标题
** 合并单元格2018/2/2
-rowspan : 跨行
**<td rowspan = "3">人员信息</td>
-colspan ： 跨列
**<td colspan = "3">人员信息</td>
10.表单标签(*******今天最重要的标签*******)
*可以提交数据到开心网的服务器，这个过程可以使用表单标签来实现
*<form></form>:定义表单的范围
-属性
**action:提交到的地址，默认提交到当前的页面
**method:表单的提交方式
-常用的有两种 get和post ,默认是get请求
**面试题目 get和post区别
1.get请求地址栏会携带提交的数据，post不会携带(请求体里面，在第七天讲http协议的时候)
2.get请求的安全级别较低，post较高
3.get请求有数据大小的限制，post是没有限制的
***enctype:一般情况下不需要这个属性，做文件上传时需要设置这个属性（第22天讲文件上传）
**输入项：可以输入内容或者可以选择内容的部分
-大部分的输入项使用 <input type = "输入项的类型"/>
*********在输入项里面必须要有一个name属性
***普通输入项:<input type = "text"/>
***密码输入项:<input type = "password"/>
***单选输入项:<input type = "radio"/>
-再里面需要属性name
-name的属性值必须要相同
-必须有一个value值
***实现默认选中的属性
--checked = "checked"
shu
***复选输入项：<input type = "checkbox"/>
-再里面需要属性name
-name的属性值必须要相同
-必须有一个value值
***实现默认选中的属性
--checked = "checked"
***文件的输入项（在后面上传的时候用得到）
-<input type = "file">
***下拉输入项（不是在input标签里面）
<select name = "birth">
<option value = "0">请选择</option>
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993" seleccted = "selected">1992</option>
</select>
***实现默认选中的属性
--selected = "selected"
***文本域
<textarea cols = "10" rows ="10"></textarea>
***隐藏项（不会显示在页面上，但是存在html代码里面）
<input type = "hidden">
***提交按钮
<input type = "submit">
<input type = "submit" value = "注册"/>
file:///C:/Users/25717/Desktop/%E5%AF%92%E5%81%87%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/code/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E4%B8%80.html?sex=on&hobby=on&hobby=on&birth=1992
***当在输入项里面写了name属性后，在地址栏对应的值会显示
file:///C:/Users/25717/Desktop/%E5%AF%92%E5%81%87%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/code/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E4%B8%80.html?phone=132&pwd=4894&sex=nv&hobby=on&birth=1992
**？输入项name的值=输入的值&
** 参数类似于key-value的形式
***使用图片来提交
<input type = "image" src = "图片的路径"/>
***重置按钮
<input type = "reset"/> 回到输入项的初始状态
***普通按钮(和明天讲的js一起使用)
<input type = "button" value = ""/>
11.案例：使用表单标签实现注册页面
-使用表格实现页面效果
-超链接不想要他有效果 href="#"
-如果表格里面的单元格没有内容， 使用空格作为占位符
-使用图片提交表单 <input type = "image" src = "图片的路径">
12.html中其他的常用标签的使用
b: 加粗
s： 删除线
u： 下划线
i： 斜体
pre：原样输出
sub：下标
sup：上标
p:段落标签，比br标签多一行
===明天css时候一直使用
div：自动换行
span： 在一行显示
13.html的头标签的使用
*html两部分组成 head和body
**在head里面的标签为头标签
**title：表示在标签上显示的内容
**<meta>标签：设置页面的一些相关的内容
-<meta charset = "UTF-8" name = "keywords" content="毕姥爷，熊出没，刘翔">
-<meta http-equiv="refresh" content="3;url=00-html页面的标准模板.html"> 3秒后定时刷新到url指定的页面
**base标签：设置超链接的基本设置
-可以统一设置超链接的打开方式
<base target = "_blank"/>
** link标签：引入一个外部的文件
**明天css,可以使用link标签引入css文件
14.框架标签（会用）
*<frameset>
-rows:按照行进行划分
**<frameset rows="80,*">
-cols:列
**<frameset cols="80,*">
*<frame>
-具体显示的页面
-<frame name="lower_left" src="b.html">
***使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉
*<frameset rows="80,*"> //把页面划分成上下两个页面
<frame name="top" src="a.html"> //上面的页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset>
*如果在左边的页面超链接，想让内容显示在右边的页面中
-设置超链接里面的属性 target值设置成名称
-<a href="XX.html" target="right">超链接1</a>
15.a标签的扩展（了解）
-百度是网络资源
-当a标签里面访问网络资的时候，必须要加一个协议http: 表示一个网络的公开协议，
如果加上http协议之后，自动识别访问资源是一个网络资源
-当浏览器里面找到相关协议，首先看这个协议是不是公开协议http.
如果不是公开协议，会去本地电脑找支持这个协议的应用程序。
**直接通过浏览器可以运行
-代码
**这是我的<font size = "5" color = "red">第一个html程序！</font>
*html的规范（遵循）
1.一个html文件开始标签和结束标签<html> </html>
-定义一个java方法 {}
2.html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显示在页面上的内容都写在body里面</body>
3.html的标签有开始标签，也有结束标签
-<head></head>
4.html的代码不区分大小写
5.有些标签，没有结束标签，在标签内结束
-比如换行 <br/> <hr/>
*html的操作思想（**********）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据
包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性，就可以实现容器
内数据样式的变化。
html常用的标签
2.文字标签和注释标签
*文字标签：修改文字的样式
-<font></font>
-属性：
*size:文字的大小 取值范围 1-7 ，超出了7，默认还是7
*color：文字的颜色
-两种表示方式
**英文单词： red green blue ...
**使用16进制表示 #ffffff :RGB
--通过工具实现不同的颜色 #66cc66
*注释标签
-Java注释几种？ 三种
-html的注释 ：<!-- html的注释 -->
3.标题标签，水平线标签和特殊字符
*标题标签
-<h1></h1> <h2></h2> ...<h6></h6>
-从h1到h6大小依次变小，同时会自动换行
*水平线标签
-<hr/>
-属性
**size:水平线的粗细 取值范围 1-7
**color：颜色
-代码
<hr size = "5" color = "blue"/>
*特殊字符
-想要在页面上显示这样的内容 <html>:是网页的开始！
-需要对特殊字符进行转义
* < <
* > >
* 空格
* & &
4.列表标签
比如现在显示这样的效果
XX大学
财务部
学工部
人事部
**<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>
-代码
<ol tyepe = "a">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
--想要在页面上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部
**<ul></ul>:表示无序列表的范围
--属性：type:空心圆circle 实心圆disc 实心方块square 默认disc
在ul里面 <li></li>
-代码
<ul type = "circle">
<li>财务部</li>
<li>学工部</li>
</ul>
5.图像标签（*******）
*<img src = "图片的路径"/>
-src 图片的路径
-widthL:图片的宽度
-height:图片的高度
-alt:图片上显示的文字，将鼠标移动到图片上，停留片刻显示内容
**有些浏览器不显示（没有效果）
6.路径的介绍
*分类：两类
**绝对路径
-C:\Users\25717\Desktop\寒假前端学习\a.jpg
-http://www.baidu.com/b.jpg
**相对路径
-一个文件相对于另外一个文件的位置
-三种：
**html文件和图片在一个文件下可以直接写名称
-<img src = "b1.jpg" alt = "这是一个美女"/>
**图片在html文件的下层目录
在html文件中，使用img文件夹下面的a.jpg
C:\Users\25717\Desktop\寒假前端学习\code\ 04-图片标签.html
C:\Users\25717\Desktop\寒假前端学习\code\ img\a.jpg
***在html中使用图片 4.html和img在一个路径下
img\a.jpg
**图片在html文件的上层目录
---C:\Users\25717\Desktop\寒假前端学习\ c.jpg
C:\Users\25717\Desktop\寒假前端学习\ code\04-图片标签.html
***html文件所在的目录和图片文件是一个目录
**图片和html文件是什么关系
--图片再html的所在目录的上层目录 寒假前端学习
**怎么表示上层路径 ../
-- ../表示的就是寒假前端学习
-- ../c.jpg
** 想要表示上层的上层 ../../
7.案例一：列表标签的案例
<html>
<head>
<title>列表图片综合案例</title>
<meta charset = "UTF-8">
</head>
<body>
<img src = "b.jpg"/>
<br/></br>
首页>中国馆>女装>精品
<br/><br/>
<img src = "img/c.jpg">
<br/>
<h3>热点推荐</h3>
<dl>
<dt><img src = "img/a.jpg"></dt>
<dd>一口价</dd>
<dd>全国包邮</dd>
<hr size = "5" color = "blue">
<dl>
<dl>
<dt><img src = "img/b.jpg"/></dt>
<dd>不还价</dd>
<dd>全国包邮</dd>
<hr size = "2" color = "blue">
</dl>
</body>
</html>
8.超链接标签（************）
*连接资源（********）
- <a href = "链接到资源的路径">显示在页面上的内容</a>
** href:链接的资源的地址
** target: 设置打开的方式，默认他是当前页打开
-- _blank:在一个新窗口打开
-- _self:在当前页打开 默认
当超链接不需要到任何的地址 在href里面加一个#
-<a href = "#">这是一个超链接2</a>
*定位资源
**如果想要定位一个资源：定义一个位置
<a name = "top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>
**引入一个标签 pre：原样输出
9.表格标签（*******重要的标签***********）
* 对数据进行格式化，使数据更加清晰完整
*<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 = "blue" cellspacing = "0" width = "400" height = "150">
*画图分析表格的写法
-首先定义一个表格的范围使用table
-定义一行使用 tr
-定义一个单元格使用 td
**操作技巧
-首先数有多少行再数每行里有多少个单元格
**表格的标题
<caption></caption>设置表格的标题
** 合并单元格2018/2/2
-rowspan : 跨行
**<td rowspan = "3">人员信息</td>
-colspan ： 跨列
**<td colspan = "3">人员信息</td>
10.表单标签(*******今天最重要的标签*******)
*可以提交数据到开心网的服务器，这个过程可以使用表单标签来实现
*<form></form>:定义表单的范围
-属性
**action:提交到的地址，默认提交到当前的页面
**method:表单的提交方式
-常用的有两种 get和post ,默认是get请求
**面试题目 get和post区别
1.get请求地址栏会携带提交的数据，post不会携带(请求体里面，在第七天讲http协议的时候)
2.get请求的安全级别较低，post较高
3.get请求有数据大小的限制，post是没有限制的
***enctype:一般情况下不需要这个属性，做文件上传时需要设置这个属性（第22天讲文件上传）
**输入项：可以输入内容或者可以选择内容的部分
-大部分的输入项使用 <input type = "输入项的类型"/>
*********在输入项里面必须要有一个name属性
***普通输入项:<input type = "text"/>
***密码输入项:<input type = "password"/>
***单选输入项:<input type = "radio"/>
-再里面需要属性name
-name的属性值必须要相同
-必须有一个value值
***实现默认选中的属性
--checked = "checked"
shu
***复选输入项：<input type = "checkbox"/>
-再里面需要属性name
-name的属性值必须要相同
-必须有一个value值
***实现默认选中的属性
--checked = "checked"
***文件的输入项（在后面上传的时候用得到）
-<input type = "file">
***下拉输入项（不是在input标签里面）
<select name = "birth">
<option value = "0">请选择</option>
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993" seleccted = "selected">1992</option>
</select>
***实现默认选中的属性
--selected = "selected"
***文本域
<textarea cols = "10" rows ="10"></textarea>
***隐藏项（不会显示在页面上，但是存在html代码里面）
<input type = "hidden">
***提交按钮
<input type = "submit">
<input type = "submit" value = "注册"/>
file:///C:/Users/25717/Desktop/%E5%AF%92%E5%81%87%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/code/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E4%B8%80.html?sex=on&hobby=on&hobby=on&birth=1992
***当在输入项里面写了name属性后，在地址栏对应的值会显示
file:///C:/Users/25717/Desktop/%E5%AF%92%E5%81%87%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/code/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E4%B8%80.html?phone=132&pwd=4894&sex=nv&hobby=on&birth=1992
**？输入项name的值=输入的值&
** 参数类似于key-value的形式
***使用图片来提交
<input type = "image" src = "图片的路径"/>
***重置按钮
<input type = "reset"/> 回到输入项的初始状态
***普通按钮(和明天讲的js一起使用)
<input type = "button" value = ""/>
11.案例：使用表单标签实现注册页面
-使用表格实现页面效果
-超链接不想要他有效果 href="#"
-如果表格里面的单元格没有内容， 使用空格作为占位符
-使用图片提交表单 <input type = "image" src = "图片的路径">
12.html中其他的常用标签的使用
b: 加粗
s： 删除线
u： 下划线
i： 斜体
pre：原样输出
sub：下标
sup：上标
p:段落标签，比br标签多一行
===明天css时候一直使用
div：自动换行
span： 在一行显示
13.html的头标签的使用
*html两部分组成 head和body
**在head里面的标签为头标签
**title：表示在标签上显示的内容
**<meta>标签：设置页面的一些相关的内容
-<meta charset = "UTF-8" name = "keywords" content="毕姥爷，熊出没，刘翔">
-<meta http-equiv="refresh" content="3;url=00-html页面的标准模板.html"> 3秒后定时刷新到url指定的页面
**base标签：设置超链接的基本设置
-可以统一设置超链接的打开方式
<base target = "_blank"/>
** link标签：引入一个外部的文件
**明天css,可以使用link标签引入css文件
14.框架标签（会用）
*<frameset>
-rows:按照行进行划分
**<frameset rows="80,*">
-cols:列
**<frameset cols="80,*">
*<frame>
-具体显示的页面
-<frame name="lower_left" src="b.html">
***使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉
*<frameset rows="80,*"> //把页面划分成上下两个页面
<frame name="top" src="a.html"> //上面的页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset>
*如果在左边的页面超链接，想让内容显示在右边的页面中
-设置超链接里面的属性 target值设置成名称
-<a href="XX.html" target="right">超链接1</a>
15.a标签的扩展（了解）
-百度是网络资源
-当a标签里面访问网络资的时候，必须要加一个协议http: 表示一个网络的公开协议，
如果加上http协议之后，自动识别访问资源是一个网络资源
-当浏览器里面找到相关协议，首先看这个协议是不是公开协议http.
如果不是公开协议，会去本地电脑找支持这个协议的应用程序。
2285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
