00-02-HTML(一)
八、图片
- 示例代码
<!--
1. 设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放。
2. img标签就是图片标签
3. src属性是图片的路径
4. width设置宽度,height设置高度
5. title设置鼠标悬停时显示的信息
6. alt设置图片加载失败时显示的提示信息
-->
<img src="/oneBenLibrary/sources/img/00-01/00-01-08-01.png" width="100px" height="150px" title="雾雨魔理沙" alt="找不到图片">
- 效果
九、超链接或热链接
1. 超链接的特点
- 有下划线
- 鼠标停留在超链接上显示小手形状
- 点击超链接能够跳转页面
- 示例代码
<a href="https://jzy258.github.io">乐色之家</a>
<a href="https://jzy258.github.io/oneBenLibrary">壹苯图书馆</a>
<!--
href: hot references 热引用
href属性后面一定是一个资源的地址
href后面的路径可以是绝对路径或相对路径,可以是网络中某个资源的路径,也可以是本地资源的路径
-->
<a href="http://jzy258.github.io">
<img src="/oneBenLibrary/sources/img/00-01/00-01-09-01.png" style="width:40px;">
</a>
<!--
超链接有target属性:
可取值:
_blank 新窗口
_self 当前窗口
_top 顶级窗口
_parent 父级窗口
-->
<a href="https://jzy258.github.io">
<img src="/oneBenLibrary/sources/img/00-01/00-01-09-02.png" style="width:40px;">
</a>
- 效果
2. 超链接的作用
通过超链接可以从浏览器向服务器发送请求
浏览器向服务器发送数据(请求:request)
服务器向浏览器发送数据(响应:response)
B/S结构的系统,每一个请求都会对应一个响应
- B--请求->S
- S--响应->B
用户点击超链接和用户在浏览器地址栏上直接输入URL无本质区别,都是向服务器发送请求
从操作上来讲,超链接使用更方便
十、列表
1. 有序列表
- 示例代码
<ol>
<li>水果</li>
<ol type="I">
<!--
type属性用于改变有序列表前的序号样式:
可选值:
A 大写字母
a 小写字母
1 阿拉伯数字
I 大写罗马数字
i 小写罗马数字
-->
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
<li>蔬菜</li>
<li>青菜</li>
<li>甜点</li>
</ol>
- 效果
- 水果
- 苹果
- 西瓜
- 桃子
- 蔬菜
- 青菜
- 甜点
2. 无序列表
- 示例代码
<ul type="disc">
<!--
type属性用于改变无序列表前的项目符号:
可选值:
disc 实心圆点
circle 空心圆
square 实心方块
-->
<li>中国</li>
<ul>
<li>北京市</li>
<li>天津市</li>
<li>上海市</li>
<li>无锡市</li>
<ul>
<li>梁溪区</li>
<li>锡山区</li>
<li>惠山区</li>
<li>新吴区</li>
<li>滨湖区</li>
</ul>
</ul>
<li>美国</li>
<li>日本</li>
</ul>
- 效果
- 中国
- 北京市
- 天津市
- 上海市
- 无锡市
- 梁溪区
- 锡山区
- 惠山区
- 新吴区
- 滨湖区
- 美国
- 日本
十一、表单
1. 表单的作用
- 表单用于收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
2. 怎样创建一个表单?
- 使用form标签
3. 一个网页当中可以有多个表单?
- 无限制
4. action属性
- 最终需要提交数据给服务器,form标签有一个action属性,这个属性用来指定服务器地址
- action属性用来指定数据提交给哪个服务器
- action属性和超链接中的href一样,都可以向服务器发送请求(request)
- 示例代码
<form action="">
<!-- 画一个提交按钮,这个按钮可以提交表单 -->
<!-- 画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮,具有提交表单的能力 -->
<input type="submit" value="按钮上显示的文本">
<input type="button" value="按钮上显示的文本">
<input type="reset" value="按钮上显示的文本">
<input type="text" value="文本框内的文本">
<input type="password" value="密码框内的文本">
<input type="checkbox">
<input type="radio">
<!--
type属性:
submit 提交按钮-用于提交表单
button 普通按钮
reset 重置表单
text 文本框
password 密码框
checkbox 复选框
radio 单选按钮
-->
<!-- value属性用于设置按钮(文本框、密码框等)的显示文本 -->
</form>
<form action="https://jzy258.github.io">
<!-- 这个按钮和普通的超链接没什么区别(超链接和表单都可以向服务器发送请求,但表单可以携带数据) -->
<input type="submit" value="乐色之家">
</form>
<br>
- 效果
5. 表单是以什么格式提交数据给服务器的?
- action?name=value&name=value&name=value...
- HTTP协议规定必须以这种格式提交给服务器
- 表单项写了name属性的,一律会提交给服务器
<form action="localhost/ls/test.txt">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name=""></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="reset" value="清空">
</td>
</tr>
</table>
</form>
- 效果
6. 下拉菜单
- 示例代码
<select multiple="multiple" size="4">
<!--
multiple="multiple"属性设置该下拉菜单可多选
size属性设置最多显示的项数
-->
<option>河北省</option>
<option>河南省</option>
<option>湖北省</option>
<option>湖南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
- 效果
7. file控件
- 用于选择上传的文件
- 示例代码
<input type="file" name="file">
- 效果