web中html的简单应用

HTML

一、超链接

<body>
    <!--  a 标签是超链接
          herf属性设置哪个目标进行跳转
              _self     表示当前页面（默认值）
              _blank    表示打开新页面进行跳转
	-->
    <a href="https://www.baidu.com">百度</a><br/>
    <a href="https://www.baidu.com" target="_self">百度_self</a><br/>
    <a href="https://www.baidu.com" target="_blank">百度_blank</a><br/>
</body>

二、img标签

在web中路径分为相对路径和绝对路径

  • 相对路径：
    • . 表示当前文件所在的目录
    • .. 表示当前文件所在的上一级目录
    • 文件名 表示当前文件所在目录的文件，相当于./文件名（./可以省略）
  • 绝对路径：

src：图片路径
width：图片宽度
height：图片高度
border：图片边框大小
alt：当找不到图片时，代替显示的文本

<body>
    
    <img src="../img/1.jpg" width="400" height="500" border="1" alt="找不到图片">
    <img src="../img/2.jpg" width="400" height="500">
    <img src="../img/3.jpg" width="400" height="500">
    <img src="../img/4.jpg" width="400" height="500">
    <img src="../img/5.jpg" width="400" height="500">
</body>

🔴三、表单标签

<body>
    <form action="http://www.baidu.com" method="get">

        <input type="hidden" name="action" value="login">
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td>
                    <input type="text" value="默认值" name="username">
                </td>
            </tr>

            <tr>
                <td>用户密码：</td>
                <td>
                    <input type="password" placeholder="请输入密码" name="password">
                </td>
            </tr>

            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" checked="checked">男
                    <input type="radio" name="sex">女
                </td>
            </tr>

            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox" name="hobby">Java
                    <input type="checkbox" name="hobby">JavaScript
                    <input type="checkbox" name="hobby">C++
                </td>
            </tr>

            <tr>
                <td>国籍：</td>
                <td>
                    <select name="country">
                        <option>--请选择国籍--</option>
                        <option>中国</option>
                        <option>美国</option>
                        <option>日本</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>自我评价：</td>
                <td>
                    <textarea name="desc" rows="10" cols="20">默认值</textarea>
                </td>
            </tr>

            <tr>
                <td>
                    <input type="reset" value="点击重置">
                </td>
                <td>
                    <input type="submit" value="点击提交">
                </td>
            </tr>

            <tr>
                <td>
                    <input type="hidden">
                </td>
            </tr>

        </table>
    </form>
</body>

效果图：

image-20211108120729576

3-1表单中的属性

input type=text 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度

3-2传输表单信息

<form action="http://www.baidu.com" method="get">
  • action属性设置提交的服务器地址
  • method属性设置提交的方式----GET/POST

表单提交的时候，数据没有发送给服务器的三种情况

  1. 表单项没有name属性值
  2. 单选、复选、下拉列表中的option标签，都需要添加value属性，以便发给服务器
  3. 表单项不在提交的form标签中
https://www.baidu.com/
?
action=login&username=sfsdf&password=asd&sex=boy&hobby=java&hobby=js&country=CN&desc=sdf

GET请求的特点是：

  1. 浏览器地址栏中的地址是：action属性[+?+请求参数]

    请求参数的格式是：name=value&name=value

  2. 不安全

  3. 它有数据长度的限制：当超过100个字符，必须使用POST

POST请求的特点是：

  1. 浏览器地址栏中只有action属性值
  2. 相对于GET请求要安全
  3. 理论上没有数据长度的限制
posted @ 2021-11-20 13:40  叁玖贰拾柒  阅读(44)  评论(0)    收藏  举报