JavaWeb自学之html学习笔记 Day-2

5、图像标签(**********************)
<img src="图片的路径" width="宽度" height="高度" alt="图片上显示的文字"/>
-src:图片的路径
-width:图片的宽度
-height:图片的高度

-alt:图片上显示的文字（兼容性差，有些浏览器不显示此属性，不重要）

6、路径的介绍(********************)
分类：两类
**绝对路径
-C:\Users\Administrator\Desktop\html学习笔记
-http://www.baidu.com/g.jpg

**相对路径
-一个文件相对于另外一个文件的位置
-三种写法：
*html文件和图片在同一个路径下，可以直接写文件名称
代码： <img src="1.jpg"/>

**图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg图片
--C:\Users\Administrator\Desktop\html学习笔记\title.html
--C:\Users\Administrator\Desktop\html学习笔记\img\a.jpg
其中title.html和img文件夹在相同目录下，因此在title.html中a.jpg的相对路径为img\a.jpg
代码： <img src="img\a.jpg"/>

***图片在html的上层目录
C:\Users\Administrator\Desktop\c.png
C:\Users\Administrator\Desktop\html学习笔记\title.html

../ 表示title.html所在目录的上层目录Desktop

代码：<img src="../c.png"/>

想要表示上层的上层用../../

7、超链接标签(*********************)

*链接资源
<a href="链接到资源的路径">显示在页面上的内容</a>
href:链接的资源地址
target:设置超链接打开的方式，默认是在当前页打开
—blank:在一个新窗口打来
_self:在当前页打开 默认
代码： <a href="hello.html" target="_blank">这是一个超链接1</a>
当超链接不需要链接到任何的地址，在href里面加#
<a href="#">这是一个超链接2</a>

*定位资源
**如果想要定位资源，首先要定义一个位置
<a href="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>
**引入一个标签 pre:原样输出

8、表格标签（*******************）

*可以对数据进行格式化，是数据显示更加清晰

*<table></table>:表示表格的范围
border:表格线粗细
bordercolor:表格线颜色
cellspacing:单元格之间的距离
width:表格的宽度
heigth:表格的高度

**在table里面<tr></tr>表示表格中的行，有几行就写几个<tr></tr>
设置某行的对齐方式 align: left(居左) center(居中) rigth(居右)

***在tr里面<td></td>表示一行中的一个单元格，有几个单元格就写几个<td></td>
设置单元格的对齐方式 align: left(居左) center(居中) rigth(居右)

***使用<th></th>也可以表示单元格
-表示可以实现居中和加粗

**表格的标题（了解）
<caption></caption>

操作技巧：先数有几行，然后数在每行有几个单元格

如创建一个四行三列的表格
代码： <table border="1" bordercolor="red" cellspacing="0" width="300" height="150">
<caption>人员信息</caption>
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>东方不败</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>岳不群</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<th>林平之</th>
<td>男</td>
<td>40</td>
</tr>
</table>

** 合并单元格
rowspan：跨行
代码： <td rowspan="3">20</td>
colspan：跨列
代码： <td colspan="3">人员信息</td>

9、表单标签(***********最重要**********************)
可以提交数据到网站的服务器，这个过程可以使用表单标签实现
<form></form>：定义一个表单的范围
-属性

**action：提交到的地址，默认提交到当前的页面

**method：表单提交方式
-常用的有两种 get和post，默认的是get请求

**面试题目：get和post区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面）
2、get请求安全级别较低，post较高
3、get请求有数据大小的限制，post没有限制

**enctype:一般请求下不需要这个属性，做文件上传时需要设置这个属性

代码： <form action="hello.html" method="post">

**输入项：可以输入内容或者选择内容的部分
-大部分的输入项 使用<input type="输入的类型"/>

**************在输入项里面需要设置一个name属性，才能提交到服务器

***普通输入项：<input type="text"/>

***密码输入项：<input type="password"/>

***单选输入项：<input type="radio"/>
-在里面需要属性 name
-name的属性值必须要相同
-必须要有一个value区分是“男”还是“女”
代码： 性别：<input type="radio" name="text" value="nv"/>女<input type="radio" name="text" value="nan">男

***复选输入项：<input type="checkbox"/>
-在里面需要属性 name
-name的属性值必须要相同
-必须要有一个value区分

***文件输入项(在后面文件上传的时候会用到)
<input type="file"/>

***下拉输入项(不是在input标签里面的)
<select name="birthday">
<option value="0">请选择</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>

***文本域
<textarea cols="10" rows="10"></textarea>

***隐藏项(不会显示在页面上，但是存在于html代码里面)
<input type="hidden"/>

***提交按钮
<input type="submit" value="注册"/>

file:///C:/Users/Administrator/Desktop/html学习笔                             记/title.html？phone=15677115671&pwd=22222&text=nv&love=y&love=p

&love=pp&birth=1992&tex=%C4E3%BA%C3&hid=

** ?输入项name的值=输入的值&

** 参数类似于key=value形式

***使用图片提交
<input type="image" src="图片路径"/>

***重置按钮
<input type="reset"/>

***普通按钮(和js一起使用)
        <input type="button" value="普通按钮"/>

10、html中其他常用标签的使用
b s u i pre sub sup div span
b：加粗
s：删除线
u：下划线
i：斜体

pre：原样输出

sub：下标
sup：上标

p：段落标签，比br标签多一行

div：自动换行
span：在一行显示

11、html的头标签的使用
*html两部分组成 head和body
**在head里面的标签就是头标签

**title标签：表示在标签上显示的内容
**meta标签：设置页面的一些相关内容
代码： <meta http-equiv="refresh" content="5;url=hello.html"/>
http-equiv="refresh"表示页面刷新的请求
content="5;url=hello.html"表示5秒钟之后跳转到hello.html页面
**base标签：设置超链接的基本设置
可以统一设置超链接的打开方式
<base target="_blank"/>
**link标签：引入外部文件

12、框架标签(会用就可以了)
*<frameset>
-rows：按照行进行划分
**<frameset rows="80,*">
表示把页面划分为上下两行，第一行为80，剩余的为第二部分
-cols：
**<frameset cols="80,*">
表示把页面划分为左右两列，第一列为80，剩余的为第二部分

*<frame>
-具体显示的页面
**<frame name="页面名称" src="页面路径">

*使用框架标签的时候，不能写在body里面，如果使用框架标签，需要把body去掉
<frameset rows="300,*">//把页面划分成上下两部分
<frame name="bottom" src="title.html"></frame>//上面页面
<frameset cols="300,*">//把页面划分为左右两部分
<frame name="left_part" src="hello.html"></frame>//左边的页面
<frame name="right_part" src="hello.html"></frame>//右边的页面
</frameset>
</frameset>

*如果在左边的页面超链接，想让内容显示在右边的页面中
——设置超链接页面属性target值设置成名称
——<a href="https://www.hao123.com" target="right_part"></a>

html代码如下：

<html>

<body>

<hr/>
<img src="1.jpg" width="500" height="400" alt="我美吗？"/>
<hr size="5" color="blue"/>
<img src="img\a.jpg"/>
<hr/>
<img src="..\c.png"><br/>
<a href="hello.html" target="_blank">这是一个超链接1</a><br/>
<hr/>
<pre>
中新社北京12月14日电 （记者 高凯）12月14日，就亲人遭遇车祸一事，演员王宝强在微博发表声明。
他证实，自己的弟妹在车祸中被撞身亡，肇事者共有三人，其中一人已经投案，另外两人 举家逃逸。同时，
王宝强也对13日自己在微博上情绪失控“爆粗口”表示抱歉，希望自己的悲伤无助获得理解。
<a href="#top">回到顶部</a>
<hr/>
<table border="1" bordercolor="red" cellspacing="0" width="300" height="150">
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td align="right">东方不败</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>岳不群</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<th>林平之</th>
<th>男</th>
<th>40</th>
</tr>
</table>
<hr/>
<!--第一行：1，第二行到第四行都是3-->
<table border="1" bordercolor="blue" width="300">
<tr>
<td colspan="3">人员信息</td>
</tr>
<tr>
<td>东方不败</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>岳不群</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
<td>40</td>
</tr>
</table>
<hr/>
<!--三行，第一行3个单元格，第二行和第三行都是2-->
<table border="1" bordercolor="blue" cellspacing="0" width="300">
<tr>
<td>东方不败</td>
<td>男</td>
<td rowspan="3">20</td>
</tr>
<tr>
<td>岳不群</td>
<td>女</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
</tr>
</table>
<hr/>
<form action="商品列表\列表标签的案例.html">
手机号码：<input type="text" name="phone"/><br/>
创建密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="text" value="nv"/>女<input type="radio" name="text" value="nan">男<br/>
爱好：<input type="checkbox" name="love" value="y"/>羽毛球<input type="checkbox" name="love" value="p"/>乒乓球<input type="checkbox" name="love" value="pp"/>排球<br/>
文件：<input type="file"/><br/>
生日：<select name="birth">
<option value="0">请选择</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
<br/>
自我描述：<textarea cols="20" rows="10" name="tex"></textarea><br/>
隐藏项：<input type="hidden" name="hid"/><br/>
<input type="submit" value="注册"/>

<input type="reset" value="重置注册"/>
<input type="button" value="普通按钮"/>
<br/>
<input type="image" src="2.png"/>
<hr/ size="5" color="red">
</form>

<form action="商品列表\列表标签的案例.html" target="_blank" method="get">
<h2>注册广西大学账号</h2>
<table  width="100%">
<tr>
<td align="right">注册邮箱：</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>你可以使用<a href="#">账号</a>注册或者使用<a href="#">手机号</a>注册</td>
</tr>
<tr>
<td align="right">创建密码：</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td align="right">真实姓名：</td>
<td><input type="text" name="realname"/></td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input type="radio" name="sex" value="nv">女<input type="radio" name="sex" value="nan"/>男</td>
</tr>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
</select>年
<select name="month">
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="year">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>日
</td>
</tr>

<tr>
<td align="right">我现在：</td>
<td>
<select name="now">
<option value="study">我正在上学</option>
<option value="work">我已经工作</option>
</select>
</td>
</tr>

<tr>
<td>&nbsp;</td>
<td><img src="verycode.png"/><a href="#">看不清换一张?</a></td>
</tr>
<tr>
<td align="right">验证码：</td>
<td><input type="text" name="verycode"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="image" src="submit.png"/></td>
</tr>
<form/>
</body>
</html>