java程序员第一课 html 网页标签
2015-11-12 19:45
567 查看
HTML
1、html简介
* HyperText Markup Language：超文本标记语言，同时网页语言。
- 超文本：超出文本的范畴
- 标记：标签，html里面所有的操作都是通过标签来实现的
- 网页语言：
* 第一个html程序。
** 以html或者htm为后缀
* html的规范
1、html以<html>开始，同时以</html>结束
2、html有两部分组成：<head>设置一些相关信息</head>和<body>显示在页面上的内容</body>
3、html是非严谨性语言，遵循规范
4、html标签有开始标签，也要有结束标签 <title>这是一个标题</title>
5、html标签不区分大小写
6、要对数据进行操作，首先使用标签封装起来，通过设置属性和属性值来实现样式的变化
* <FONT color="red" size="5">html程序</FONT>
* 格式：<标签 属性="属性值"></标签>，属性="属性值"（可以使用单引号）
* 但是有些标签没有结束标签 ,比如换行 <br/>在标签内结束
**** html操作思想（理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时间需要使用标签把数据包起来，
通过修改标签的属性值，来实现标签内数据样式的变化。而标签相当于一个容器，通过修改容器的属性值
来实现容器内数据样式的变化。
2、html常用的标签
** 字体标签
- <font color="" size=""></font>
- color: 字体颜色
* 使用英文单词：red、yellow blue green gray .....
* 使用十六进制数表示 #ffffff 颜色由RGB #99ccff
- size：字体大小
* 范围 1-7 ，如果值超过7 ，还是按照7操作
** 注释标签
*** java里面注释 单行注释 // 多行注释/* 文档注释 /**
*** <!-- -->
** 标题标签
<h1></h1> <h2></h2> .......<h6></h6>：从h1到h6标题依次变小
** 水平线标签
<hr color="" size=""/>:
- color:水平线颜色
- size：水平线的粗细
** 特殊字符
- 在页面上显示 <html>是网页的开始
* < <
* > >
* 空格
* & : &
** 列表标签
- 想要在页面中显示这样的效果
以诺学堂
人事部
学工部
财务部
* 使用标签
<dl></dl>：表示定义一个列表的范围
<dt></dt>：上层内容
<dd></dd>：下层内容
- 想要显示效果(有序)
1.人事部
2.学工部
3.财务部
a.人事部
b.学工部
c.财务部
i.人事部
ii.学工部
iii.财务部
* 使用标签
<ol></ol>：标签范围 属性 type 值 1（默认） a i
<li></li>：封装具体的内容
- 显示的效果（无序）
特殊符号（方块）人事部
特殊符号（方块）学工部
特殊符号（方块）财务部
* 使用标签
<ul></ul>: 标签范围 属性 type 值 空心圆circle 、实心圆disc 、实心方块square ，默认disc
<li></li>：封装的具体内容
** 图像标签
- <img src="图片路径地址" width="" height=""/>
* src: 图片地址
* width：图片宽度
* height：图片高度
* alt: 图片上显示的内容（鼠标放到图片上，等片刻出现文字，某些版本浏览器不支持）
* 安装ie9 火狐 谷歌
** 路径介绍（特别重要）
* 完全路径
C:\Users\asus\Desktop\0302\day01\code\img\b.jpg
* 相对路径
一个文件相对于另一个文件的位置
1、 两个文件在一个目录下
** 直接写图片名称
2、图片在html的下级目录 (在html所在目录的下级目录)
C:\Users\asus\Desktop\0302\day01\code\ 03.html
* 03.html在code目录下
C:\Users\asus\Desktop\0302\day01\code\ img\a.jpg
* a.jpg在img目录下
* img目录在code目录下
* 在03.html中使用图片a.jpg
（1）找到html文件所在的目录 code
（2）找html文件和图片路径相同的部分
C:\Users\asus\Desktop\0302\day01\code\
（3）img/a.jpg
3、图片在html的上级目录 (在html所在目录的上级目录)
* 在C:\Users\asus\Desktop\0302\day01\ code\03.html
* C:\Users\asus\Desktop\0302\day01\ w01.png
（1）找到html文件所在的目录 code
（2）找html文件和图片路径相同的部分
C:\Users\asus\Desktop\0302\day01\
（3）w01.png在03.html所在目录code 的上层目录 day01
* 表示上层目录 ../
* ../w01.png
* 多级上层 ../../
* http://www.baidu.com/img/1.jpg
* /day10/img/1.jpg
** 案例一：使用列表标签实现商品列表
* 作业：完成列表标签实现商品列表的剩余部分
** 超链接标签
* 链接资源
<a href="要链接到的地址">显示在页面上的内容</a>
* 设置打开方式： target 值 _self:在当前页面打开（默认） _blank：在新窗口打开
* 定位资源（了解）
* 定义位置： <a name="定义一个位置 top"></a>
* 到这个位置： <a href="#top"></a>
* 引入一个标签 <pre></pre>: 原样输出
** 表格标签(*********)
* 对数据进行格式化，使数据显示更加整洁
** 技巧：首先数表格里面有多少行，然后数每行里面有多少个单元格
* <table></table>: 表示表格范围
- 属性
** border：表格线
** bordercolor: 表格线颜色
** width:设置表格宽
** height:设置表格的高
** cellspacing：设置单元格之间的距离
* <tr></tr>：表示行
** 设置对齐方式：align 值 left center right
* <td></td>：表示单元格
** 设置对齐方式： align 值 left center right
** 表示单元格 <th></th>: 居中和加粗
* 引入一个标签 <b></b> <center></center>
* <caption></caption>:设置表格的标题
* 合并单元格
rowspan:跨行
* <td rowspan="3">年龄</td>
clospan:跨列
* <td colspan="3">岳不群</td>
** 表单标签(最重要的标签**************)
* 什么是表单？
** 输入一些信息或者选择一些信息，把这些信息提交到服务器，由服务器保存
** 输入项：可以输入数据或者选择数据地方
* 表单
<form></form>: 表示表单的范围
** 设置要提交的服务器（地方），不设置默认提交到当前页面
* 使用属性 aciton：设置提交到的服务器
* 设置提交方式 常用 get post
** 默认情况下 get请求
** 使用method="post"
** 属性 enctype属性 ，一般情况下不需要设置，但是文件上传时候设置这个属性（讲到文件上传下载时候详细讲）
** 面试题目 get和post区别
1、get请求地址栏会携带提交的数据，post不会携带提交的数据（请求体里面 讲到http请求详细说）
2、get请求安全级别低，post安全级别相对较高
3、get请求数据大小会有限制，post不会有限制
** 输入项必须要写name属性
** 在单选输入项里面必须要有一个value属性
** 在复选框里面必须要有一个value属性
- love=lanqiu&love=yumaoqiu
** 在下拉选择输入项里面value属性
* 大部分的输入项使用一个标签进行封装 <input type="不同输入项的类型"/>
** 输入项的类型
1、普通输入项：<input type="text"/>
2、密码输入项：<input type="password"/>
3、单选输入项：<input type="radio" name="sex"/>:
* 必须要写name属性
* name属性值必须相同
* 默认选中状态 属性 checked="checked"
4、复选框：<input type="checkbox"/>
* 必须要写name属性
* name属性值必须相同
* 默认选中状态 属性 checked="checked"
5、下拉选择框（不是input标签里面封装的）
<select name="xueli">
<option value="1">大学</option>
<option value="2">中学</option>
</select>
* 必须有name属性
6、文本域（不是input标签里面封装的）
<textarea cols="列" rows="行"></textarea>
7、文件输入项
<input type="file"/>
8、提交按钮（把数据提交到服务器）
<input type="submit"/>
* 属性 value：设置按钮上显示的内容
* file:///C:/Users/asus/Desktop/0302/day01/code/09-表单标签一.html
?sex=on&love=on&love=on&
* 在输入项里面写了name属性之后
file:///C:/Users/asus/Desktop/0302/day01/code/09-表单标签一.html
?user=1111&pwd=123456&sex=on&love=on&love=on&xueli=%B2%A9%CA%BF&miaoshu=qqqqqq
* file:///C:/Users/asus/Desktop/0302/day01/code/09-表单标签一.html
?user=555&pwd=5555&sex=nv&love=lanqiu&love=yumaoqiu&love=pingpang&xueli=3&miaoshu=wwwwww
** 每个输入项提交的数据部分 使用&进行隔开
** 提交数据相当于一个key-value形式
9、提交操作，使用图片进行提交（把数据提交到服务器）
<input type="image" src="图片地址"/>
10、重置按钮：
<input type="reset"/>：回到表单的初始状态
11、普通按钮
<input type="button" value="普通按钮"/>:经常和js一起使用
12、隐藏项
<input type="hidden" name=""/>
* 比如系统，用户管理系统
存储用户信息
比如： id 用户名 性别 年龄
001 张三 男 20
002 李四 女 20
003 张三 男 20
需要在页面上显示用户信息
* 只需要显示 用户名 性别 年龄
<input type="hidden" name="id"/>
** 案例二：使用表单标签实现注册页面
** 作业：看着注册页面图，把代码写出来
** html中其他常用标签
b 加粗
u 下划线
i 斜体
s 删除线
p 段落标签
sub 下标
sup 上标
pre 原样输出
div 会自动换行
span 在一行显示
** html头标签（了解）
* html有两部分组成 head body
* 在head里面的标签是头标签
** title：设置标题
** base：设置超链接一些操作
** meta：可提供有关页面的基本信息
** link：引入一些外部的文件 经常和css、js一起使用
** 框架标签的使用（会用）
* 把页面分成独立的多个页面
** <FRAMESET>
- rows: 页面划分方式
- cols: 页面划分方式
** <FRAME>
***** 在使用框架标签时候，这个框架标签不能写在body里面，把body去掉
* <frameset rows="80,*"> //把页面分成上下两部分，上面部分值80，剩下的值是下面的部分
<frame name="top" src="a.html"> //封装页面 name值top
<frameset cols="150,*"> // 把下面的部分分成左右两部分，左边部分值150，剩下的值是右边的部分
<frame name="left" src="b.html"> //封装页面 name是left
<frame name="right" src="c.html"> //封装页面 name 是right
</frameset>
</frameset>
* 点击b.html里面的超链接，把链接到的页面显示在右边的部分
* 设置b.html里面的超链接的打开方式 target值是c.html的name值
** 扩展a标签(了解)
<a href="路径"></a>
* 比如说 <a href="www.baidu.com">百度</a>
* 百度是网络资源 ，如果访问网络资源 必须要加一个协议 http://
* 如果不写协议，到当前路径下去找百度
* 浏览器不支持的协议，
** thunder://qqqq
** ed2k://
** mailto:www@163.com
* 比如迅雷，电驴协议，公司自己开发的协议，到本地去找支持这个协议的应用程序
1、html简介
* HyperText Markup Language：超文本标记语言，同时网页语言。
- 超文本：超出文本的范畴
- 标记：标签，html里面所有的操作都是通过标签来实现的
- 网页语言：
* 第一个html程序。
** 以html或者htm为后缀
* html的规范
1、html以<html>开始，同时以</html>结束
2、html有两部分组成：<head>设置一些相关信息</head>和<body>显示在页面上的内容</body>
3、html是非严谨性语言，遵循规范
4、html标签有开始标签，也要有结束标签 <title>这是一个标题</title>
5、html标签不区分大小写
6、要对数据进行操作，首先使用标签封装起来，通过设置属性和属性值来实现样式的变化
* <FONT color="red" size="5">html程序</FONT>
* 格式：<标签 属性="属性值"></标签>，属性="属性值"（可以使用单引号）
* 但是有些标签没有结束标签 ,比如换行 <br/>在标签内结束
**** html操作思想（理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时间需要使用标签把数据包起来，
通过修改标签的属性值，来实现标签内数据样式的变化。而标签相当于一个容器，通过修改容器的属性值
来实现容器内数据样式的变化。
2、html常用的标签
** 字体标签
- <font color="" size=""></font>
- color: 字体颜色
* 使用英文单词：red、yellow blue green gray .....
* 使用十六进制数表示 #ffffff 颜色由RGB #99ccff
- size：字体大小
* 范围 1-7 ，如果值超过7 ，还是按照7操作
** 注释标签
*** java里面注释 单行注释 // 多行注释/* 文档注释 /**
*** <!-- -->
** 标题标签
<h1></h1> <h2></h2> .......<h6></h6>：从h1到h6标题依次变小
** 水平线标签
<hr color="" size=""/>:
- color:水平线颜色
- size：水平线的粗细
** 特殊字符
- 在页面上显示 <html>是网页的开始
* < <
* > >
* 空格
* & : &
** 列表标签
- 想要在页面中显示这样的效果
以诺学堂
人事部
学工部
财务部
* 使用标签
<dl></dl>：表示定义一个列表的范围
<dt></dt>：上层内容
<dd></dd>：下层内容
- 想要显示效果(有序)
1.人事部
2.学工部
3.财务部
a.人事部
b.学工部
c.财务部
i.人事部
ii.学工部
iii.财务部
* 使用标签
<ol></ol>：标签范围 属性 type 值 1（默认） a i
<li></li>：封装具体的内容
- 显示的效果（无序）
特殊符号（方块）人事部
特殊符号（方块）学工部
特殊符号（方块）财务部
* 使用标签
<ul></ul>: 标签范围 属性 type 值 空心圆circle 、实心圆disc 、实心方块square ，默认disc
<li></li>：封装的具体内容
** 图像标签
- <img src="图片路径地址" width="" height=""/>
* src: 图片地址
* width：图片宽度
* height：图片高度
* alt: 图片上显示的内容（鼠标放到图片上，等片刻出现文字，某些版本浏览器不支持）
* 安装ie9 火狐 谷歌
** 路径介绍（特别重要）
* 完全路径
C:\Users\asus\Desktop\0302\day01\code\img\b.jpg
* 相对路径
一个文件相对于另一个文件的位置
1、 两个文件在一个目录下
** 直接写图片名称
2、图片在html的下级目录 (在html所在目录的下级目录)
C:\Users\asus\Desktop\0302\day01\code\ 03.html
* 03.html在code目录下
C:\Users\asus\Desktop\0302\day01\code\ img\a.jpg
* a.jpg在img目录下
* img目录在code目录下
* 在03.html中使用图片a.jpg
（1）找到html文件所在的目录 code
（2）找html文件和图片路径相同的部分
C:\Users\asus\Desktop\0302\day01\code\
（3）img/a.jpg
3、图片在html的上级目录 (在html所在目录的上级目录)
* 在C:\Users\asus\Desktop\0302\day01\ code\03.html
* C:\Users\asus\Desktop\0302\day01\ w01.png
（1）找到html文件所在的目录 code
（2）找html文件和图片路径相同的部分
C:\Users\asus\Desktop\0302\day01\
（3）w01.png在03.html所在目录code 的上层目录 day01
* 表示上层目录 ../
* ../w01.png
* 多级上层 ../../
* http://www.baidu.com/img/1.jpg
* /day10/img/1.jpg
** 案例一：使用列表标签实现商品列表
* 作业：完成列表标签实现商品列表的剩余部分
** 超链接标签
* 链接资源
<a href="要链接到的地址">显示在页面上的内容</a>
* 设置打开方式： target 值 _self:在当前页面打开（默认） _blank：在新窗口打开
* 定位资源（了解）
* 定义位置： <a name="定义一个位置 top"></a>
* 到这个位置： <a href="#top"></a>
* 引入一个标签 <pre></pre>: 原样输出
** 表格标签(*********)
* 对数据进行格式化，使数据显示更加整洁
** 技巧：首先数表格里面有多少行，然后数每行里面有多少个单元格
* <table></table>: 表示表格范围
- 属性
** border：表格线
** bordercolor: 表格线颜色
** width:设置表格宽
** height:设置表格的高
** cellspacing：设置单元格之间的距离
* <tr></tr>：表示行
** 设置对齐方式：align 值 left center right
* <td></td>：表示单元格
** 设置对齐方式： align 值 left center right
** 表示单元格 <th></th>: 居中和加粗
* 引入一个标签 <b></b> <center></center>
* <caption></caption>:设置表格的标题
* 合并单元格
rowspan:跨行
* <td rowspan="3">年龄</td>
clospan:跨列
* <td colspan="3">岳不群</td>
** 表单标签(最重要的标签**************)
* 什么是表单？
** 输入一些信息或者选择一些信息，把这些信息提交到服务器，由服务器保存
** 输入项：可以输入数据或者选择数据地方
* 表单
<form></form>: 表示表单的范围
** 设置要提交的服务器（地方），不设置默认提交到当前页面
* 使用属性 aciton：设置提交到的服务器
* 设置提交方式 常用 get post
** 默认情况下 get请求
** 使用method="post"
** 属性 enctype属性 ，一般情况下不需要设置，但是文件上传时候设置这个属性（讲到文件上传下载时候详细讲）
** 面试题目 get和post区别
1、get请求地址栏会携带提交的数据，post不会携带提交的数据（请求体里面 讲到http请求详细说）
2、get请求安全级别低，post安全级别相对较高
3、get请求数据大小会有限制，post不会有限制
** 输入项必须要写name属性
** 在单选输入项里面必须要有一个value属性
** 在复选框里面必须要有一个value属性
- love=lanqiu&love=yumaoqiu
** 在下拉选择输入项里面value属性
* 大部分的输入项使用一个标签进行封装 <input type="不同输入项的类型"/>
** 输入项的类型
1、普通输入项：<input type="text"/>
2、密码输入项：<input type="password"/>
3、单选输入项：<input type="radio" name="sex"/>:
* 必须要写name属性
* name属性值必须相同
* 默认选中状态 属性 checked="checked"
4、复选框：<input type="checkbox"/>
* 必须要写name属性
* name属性值必须相同
* 默认选中状态 属性 checked="checked"
5、下拉选择框（不是input标签里面封装的）
<select name="xueli">
<option value="1">大学</option>
<option value="2">中学</option>
</select>
* 必须有name属性
6、文本域（不是input标签里面封装的）
<textarea cols="列" rows="行"></textarea>
7、文件输入项
<input type="file"/>
8、提交按钮（把数据提交到服务器）
<input type="submit"/>
* 属性 value：设置按钮上显示的内容
* file:///C:/Users/asus/Desktop/0302/day01/code/09-表单标签一.html
?sex=on&love=on&love=on&
* 在输入项里面写了name属性之后
file:///C:/Users/asus/Desktop/0302/day01/code/09-表单标签一.html
?user=1111&pwd=123456&sex=on&love=on&love=on&xueli=%B2%A9%CA%BF&miaoshu=qqqqqq
* file:///C:/Users/asus/Desktop/0302/day01/code/09-表单标签一.html
?user=555&pwd=5555&sex=nv&love=lanqiu&love=yumaoqiu&love=pingpang&xueli=3&miaoshu=wwwwww
** 每个输入项提交的数据部分 使用&进行隔开
** 提交数据相当于一个key-value形式
9、提交操作，使用图片进行提交（把数据提交到服务器）
<input type="image" src="图片地址"/>
10、重置按钮：
<input type="reset"/>：回到表单的初始状态
11、普通按钮
<input type="button" value="普通按钮"/>:经常和js一起使用
12、隐藏项
<input type="hidden" name=""/>
* 比如系统，用户管理系统
存储用户信息
比如： id 用户名 性别 年龄
001 张三 男 20
002 李四 女 20
003 张三 男 20
需要在页面上显示用户信息
* 只需要显示 用户名 性别 年龄
<input type="hidden" name="id"/>
** 案例二：使用表单标签实现注册页面
** 作业：看着注册页面图，把代码写出来
** html中其他常用标签
b 加粗
u 下划线
i 斜体
s 删除线
p 段落标签
sub 下标
sup 上标
pre 原样输出
div 会自动换行
span 在一行显示
** html头标签（了解）
* html有两部分组成 head body
* 在head里面的标签是头标签
** title：设置标题
** base：设置超链接一些操作
** meta：可提供有关页面的基本信息
** link：引入一些外部的文件 经常和css、js一起使用
** 框架标签的使用（会用）
* 把页面分成独立的多个页面
** <FRAMESET>
- rows: 页面划分方式
- cols: 页面划分方式
** <FRAME>
***** 在使用框架标签时候，这个框架标签不能写在body里面，把body去掉
* <frameset rows="80,*"> //把页面分成上下两部分，上面部分值80，剩下的值是下面的部分
<frame name="top" src="a.html"> //封装页面 name值top
<frameset cols="150,*"> // 把下面的部分分成左右两部分，左边部分值150，剩下的值是右边的部分
<frame name="left" src="b.html"> //封装页面 name是left
<frame name="right" src="c.html"> //封装页面 name 是right
</frameset>
</frameset>
* 点击b.html里面的超链接，把链接到的页面显示在右边的部分
* 设置b.html里面的超链接的打开方式 target值是c.html的name值
** 扩展a标签(了解)
<a href="路径"></a>
* 比如说 <a href="www.baidu.com">百度</a>
* 百度是网络资源 ，如果访问网络资源 必须要加一个协议 http://
* 如果不写协议，到当前路径下去找百度
* 浏览器不支持的协议，
** thunder://qqqq
** ed2k://
** mailto:www@163.com
* 比如迅雷，电驴协议，公司自己开发的协议，到本地去找支持这个协议的应用程序
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 转载：java面试题(一)
- SDCC 2015讲师专访精彩集锦：程序员界“香饽饽”、大神级人物都在！
- 嵌入式软件工程师面试必须知道的问题(不定时更新）
- iOS面试3
- 黑马程序员--Java基础--集合和集合中的泛型
- iOS面试2
- 拒绝过劳死，码农们如何养生？
- 黑马程序员--反射
- SQL面试题记录
- 程序员必备——软件工程
- Sql经典面试题三
- Sql经典面试题二
- SQL经典面试题一
- <仅是自己做笔记。。。系列x>所有系列题目都来自v_JULY_v前辈的：精选微软等公司经典的算法面试100题
- 其他程序员的博客（持续更新）
- 黑马程序员-Java反射机制
- 疯狂Java程序员16堂课---第8课：异常捕捉的陷
- 黑马程序员——OC基础02—封装、继承、多态
- Java程序员到架构师的推荐阅读书籍
- 老程序员的10条告诫