Python中的HTML - 技术栈

文章目录

[一. HTML](#一. HTML)
- [1. html的定义](#1. html的定义)
- [2. html的作用](#2. html的作用)
- [3. 基本结构](#3. 基本结构)
- [4. 常用的html标签](#4. 常用的html标签)
- [5. 列表标签](#5. 列表标签)
- - [① 无序列表](#① 无序列表)
  - [② 有序列表](#② 有序列表)
- [6. 表格标签](#6. 表格标签)
- [7. 表单标签](#7. 表单标签)
- [8. 表单提交](#8. 表单提交)
- - [① 表单属性设置](#① 表单属性设置)
  - [② 表单元素属性设置](#② 表单元素属性设置)

一. HTML

1. html的定义

HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等，标签大多数都是成对出现的。
所谓超文本，有两层含义:

因为网页中还可以图片、视频、音频等内容(超越文本限制)

它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

2. html的作用

html是用来开发网页的，它是开发网页的语言。

3. 基本结构

html 复制代码

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。

<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到</html>结束,也就是html文档的开始和结束标签。

<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。

<body>...</body>标签是编写网页上显示的内容。

4. 常用的html标签

标签不区分大小写，但是推荐使用小写。

根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
2.2 单标签是一个标签组成，没有标签内容，比如: img标签

html 复制代码

<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

5. 列表标签

① 无序列表

html 复制代码

<!-- ul标签定义无序列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

② 有序列表

html 复制代码

<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>

6. 表格标签

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

html 复制代码

<table width=100 border="1" border-collapse:collapse>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td> 
    </tr>
</table>

7. 表单标签

<form>标签表示表单标签，定义整体的表单区域

<label>标签表示表单元素的文字标注标签，定义文字标注

<input>标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

type属性

type="text" 定义单行文本输入框

type="password" 定义密码输入框

type="radio" 定义单选框

type="checkbox" 定义复选框

type="file" 定义上传文件

type="submit" 定义提交按钮

type="reset" 定义重置按钮

type="button" 定义一个普通按钮

<textarea>标签表示表单元素的多行文本输入框标签定义多行文本输入框

<select>标签表示表单元素的下拉列表标签定义下拉列表

<option>标签与<select>标签配合，定义下拉列表中的选项

html 复制代码

<form>
    <p>
        <label>姓名：</label><input type="text">
    </p>
    <p>
        <label>密码：</label><input type="password">
    </p>
    <p>
        <label>性别：</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file">
    </p>
    <p>
        <label>个人描述：</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

8. 表单提交

① 表单属性设置

`标签表示表单标签，定义整体的表单区域 - action属性设置表单数据提交地址 - method属性设置表单提交的方式，一般有"GET"方式和"POST"方式, 不区分大小写

② 表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名

value属性设置表单元素的值，该值是提交数据时参数名所对应的值

html 复制代码

 <form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密码：</label><input type="password" name="password" />
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>