壹苯图书馆--> 00-前端--> 00-02-HTML（二）

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">

效果

用户名
密码