Python中的HTML

文章目录

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

一. HTML

1. html的定义

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

所谓超文本，有两层含义:

因为网页中还可以图片、视频、音频等内容(超越文本限制)
它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

2. html的作用

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

3. 基本结构

<!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标签

<!-- 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. 列表标签

① 无序列表

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

② 有序列表

<!-- 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;

<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>标签配合，定义下拉列表中的选项

<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属性设置表单元素的值，该值是提交数据时参数名所对应的值

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