Python学习笔记-前端-HTML(二):其它标签_python中的div标签-优快云博客

本文链接：https://blog.youkuaiyun.com/ITlearner007/article/details/124330630

其它标签

一、div标签和span标签

div标签

div标签用于占位，可以把它看成是一个水平容器，里面可以放任意块级标签和行内标签，也可以嵌套分区域。

<div style="height:200px;background-color:red;">一块区域</div>
    <div style="height:200px;background-color:green">一块区域
        <div style="height:100px;background-color:purple">
            区域里的区域
        </div>
    </div>

style用于写css代码进行美化，这里用于理解区分

span标签

span标签为行内标签，文本有多大其就有多大且需手动换行

<span>我是span</span>
<span>我是span2</span>

二、注意

块级标签&行内标签

I:块级标签
不管文本多大，它都会先独占一行
可以修改其宽度和高度
块级标签内部可以嵌套任意块级标签和行内标签
如h1~h6级标签，p标签，div标签，label标签，input标签等等
II:行内标签
文本有多大，标签所占位置就有多大
行内标签内只能嵌套行内标签
如i,u,s,b,span标签等

标签必备两个属性

id值
就好比每个人的身份证号码，各不一样，用于区分和后面写css、js代码时便于选择
class
继承某个类，不同标签可以是同一个class取值

三、a标签

a标签又称链接标签，有两个功能：

<a href="" target=""></a>

超链接
href中放一个完整的URL地址时，点击内容即可跳转到相应网站
```
<a href="https://www.baidu.com" target="">click me to baidu</a>
```
target默认为_self，即在当前页面跳转；当设置target=“_blank”时，新建一个空白页面跳转

锚点
设置href为某个标签的#+id值时，点击文本内容即可跳转到id所对应的位置

<div style="height:1000px;background-color:red;" id = 'd1'>一块区域</div>
<a href="#d1">click me to 一块区域</a>

四、img标签

<img src="" alt="" title="">

img标签用于在网站显示图片。src是图片路径，可以是url，也可以是本地路径；alt是图片加载不出来时的描述(如网不好时有些图片看不到，只显示alt的内容)；title是将鼠标放于图片上时的提示信息

<img src="yanhua.png" alt="烟花" title="yanhua">

五、表单标签

表单标签form能够获取用户数据（用户输入、用户选择、用户上传等），并把它发给服务器。
常见如某宝的登录界面：某宝登录界面

	<form action="">
        
    </form>

在pycharm中写form然后tab键可得如上代码，其中action表示数据提交的路径：

不填：表示向当前页面的url处提交
完整url如https://www.baidu.com，即向百度服务器提交
只写路径后缀如’/index/'，则自动识别电脑的ip和port结构加在前面

1、label

label标签即文本标签，用于显示不可修改的文本提示信息，怀里通常嵌套input标签等。
并且label标签里的for属性可以绑定input标签的id值，当点击label的文本信息时，鼠标就会自动跳到输入框中进行输入操作

	<form action="">
        <label for="a1">用户名
            <input type="text" id="a1">
        </label>
    </form>

“用户名”即为label标签的文本内容，for属性绑定了input标签的id后，点击“用户名”也会调到输入框。

2、input

input标签，顾名思义，即为用户输入标签。通过指定type的类型有不同的输入方式：

<input type="text" id="">

type=“text”（默认）
表示普通文本输入框，可以输入任意内容（汉字、英文、数字…）
type=“password”
密文，比如输入密码时自动用*或圆点.隐藏显示
type=“data”
日期，自动调用内置日历，选择即可
type=“submit”
提交按钮，发送数据给服务器，会刷新网页。默认显示的是“提交”，可通过设置value更改
type=“button”
就是一个普通按钮，但可通过绑定事件实现功能
type=“reset”
重置按钮，即清空所有已输入的内容，默认文本为“重置”

type=“radio”
单选框，必须有name属性才能实现单选，value属性绑定每个选项的变量由于分别。
checked（checked=checked）表示默认选中

	 <label>性别：
          <input type="radio" name="sex" value="male">男
          <input type="radio" name="sex" value="female" checked>女
          <input type="radio" name="sex" value="other">其它
     </label>

type=“checkbox”
多选框，表示可多选。checked表示默认选中
type=“file”
自动调取获取文件函数，也可获得多个文件

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html study 2</title>
</head>
<body>
    <form action="">
        <label for="a1">用户名
            <input type="text" id="a1">
        </label>
        <p><label for="a2">密码<input type="password" id="a2"></label></p>
        <p><label for="a3">日期<input type="date" id="a3"></label></p>
        <p>
            <label for="a4"><input type="submit" value="登录" id="a4"></label>
            <label><input type="button" value="按钮"></label>
            <label><input type="reset" value="取消"></label>
        </p>
        <p>
            <label>性别：
                <input type="radio" name="sex" value="male">男
                <input type="radio" name="sex" value="female" checked>女
                <input type="radio" name="sex" value="other">其它
                <!--必须有name值才能实现单选，checked(或checked='checked')表示提前默认选中-->
            </label>
        </p>
        <p>
            <label>hobby:
                <input type="checkbox" value="喝茶">drink tea
                <input type="checkbox" value="打游戏" checked>play games
                <input type="checkbox" value="看电视">watch tv
                <input type="checkbox" value="睡觉" checked>sleep
            </label>
        </p>
    </form>
</body>
</html>

结果展示

3、select

列表式选取标签，option内加多选内容，可加multiple表示多选，selected表示默认选中。

<select name="" id="" multiple>
      <option value="">1</option>
      <option value="" selected>2</option>
      <option value="">3</option>
</select>

4、textarea

大段文本标签，常用来写一些自我简介啊、经历啊什么的

<label for="">自我简介<textarea name="ddd" id="ppp" cols="30" rows="10"></textarea></label>

5、注意

A：form标签默认提交数据的方式是get请求，数据是直接放在url后面的
可以通过method="post"指定提交方式为post请求

<form action="" method="post"></form>

B：当利用type=“file”传文件时，form标签的提交方式必须是post，且应有enctype=“multipart/form-data”

    <form action="" method="post" enctype="multipart/form-data"></form>

C：能触发提交数据的方式：

1.<input type="submit" id="">
2.<button>提交</button>