HTML超链接和简单登陆界面

小梁今天敲代码了吗

已于 2023-04-16 15:58:05 修改

阅读量926

点赞数 3

分类专栏： Python Web开发文章标签： html 前端 python

于 2023-04-12 16:18:24 首次发布

本文链接：https://blog.csdn.net/weixin_43780415/article/details/130097939

版权

Python Web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

超链接

<a href="http://www.baidu.com/">点击跳转</a>#跳转到其他网站
<a href="http://127.0.0.1:5000/get/news">查看更多</a>#跳转到自己网站的其他网址可以简化成下面形式
<a href="/get/news">查看更多</a>

我们在index.html中加入上面的两个超链接

在生成的网页中会出现这两个链接，’点击跳转‘会转到百度，‘查看新的网页’会跳转到我们新写的网址（新写的网址和上一篇的写法一样,跳转到get_news.html)

（百度界面这里就不展示了）

跳转到我们写的新网页

图片

<img src="图片地址"/>#格式
#直接显示别人的图片
<img src="https://picx.zhimg.com/v2-9d6273cd74b8d1fdd293b66b8be832ea_200x0.jpg?source=7e7ef6e2" alt="cover" width="190" height="105" class="css-1phd9a0" srcset="https://picx.zhimg.com/v2-9d6273cd74b8d1fdd293b66b8be832ea_qhd.jpg?source=7e7ef6e2 2x" loading="lazy">#别人图片的地址，别人网站的图片可能有防盗链

#显示自己的图片
<img src="/static/图片.jpg" style="height:200px; width:400px;"/>
<img src="/static/图片.jpg" style="height:10%; width:20%;"/>
#自己图片的地址/static/图片.jpg

#设置图片的宽度和高度
<img src="图片地址" style="height:200px; width:400px;"/>#如果只设置高度，会按比例缩放
<img src="图片地址" style="height:10%; width:20%;"/>

注意：显示自己的图片时：

在项目中创建：static目录，图片要放在static文件下

效果图演示：

列表

#无序列表
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>
#有序列表
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ol>

表格

    <table>
        <thead>
            <tr> <th>id</th> <th>城市</th>    <th>天气</th>        </tr>
        </thead>
        <tbody>
            <tr> <td>1</td> <td>北京</td>       <td>晴</td>        </tr>
            <tr> <td>2</td> <td>上海</td>       <td>多云</td>      </tr>
            <tr> <td>3</td> <td>广州</td>       <td>有雨</td>      </tr>
        </tbody>
    </table>

input系列

    <input type="text" >#文本框
    <input type="password">#密码框
    <input type="file">#文件框
    <input type="radio" name="n1">男#name需要一样 单选框
    <input type="radio" name="n1">女
    <input type="checkbox" >篮球#复选框
    <input type="checkbox" >足球
    <input type="checkbox" >乒乓球
    <input type="button" value="提交" >#普通的按钮
    <input type="submit" value="提交" >#提交表单

下拉框

    <h1>下拉框</h1>
    <select>#单选的下拉框
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <select multiple>#多选的下拉框
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>

多行文本

    <h1>多行文本</h1>
    <textarea rows="3"></textarea>#rows= "x"  多行文本有x行

根据上述知识可以做出简单登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div>
  用户名:<input type="text"/>
</div>
<div>
  密码:<input type="password"/>
</div>
<div>
  选择性别:<input type="redio">男<input type="redio">女
</div>
<div>
  爱好:<input type="checkbox">羽毛球
      <input type="checkbox">听音乐
      <input type="checkbox">打游戏
      <input type="checkbox">篮球


</div>
<div>
  城市：
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>南京</option>
  </select>
</div>
<div>
  擅长领域：
  <select multiple>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>刷抖音</option>
  </select>
</div>
<div>
  备注：<textarea rows="5"></textarea>
</div>
<div>
  <input type="button" value="button提交">
  <input type="submit" value="submit提交">
</div>
</body>
</html>