Python Web（四）HTML介绍

最新推荐文章于 2024-03-10 10:17:22 发布
最新推荐文章于 2024-03-10 10:17:22 发布
阅读量89 收藏
点赞数
分类专栏： Python Web 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45187774/article/details/132236523
版权

HTML的定义

-HTML指的是超文本标记语言，标记就是标签，<标签名称></标签名称>，标签大多数都是成对出现的
-比如

<html></html>
<h1></h1>

-所谓超文本，有两层含义：
    因为网页中还可以有图片、视频、音频等内容（超越文本限制）
    它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接（超链接文本）

HTML的作用

-HTML是用来开发网页的，它是开发网页的语言

HTML的基本结构

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          <h1>hello world</h1>
    </body>
</html>

-<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
-<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到<html>结束,也就是html文档的开始和结束标签。
-<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
-<body>...</body>标签是编写网页上显示的内容。

第一个网页

<!--文档声明：html5的文档-->
<!DOCTYPE html>
<!--当前网页的语言是英文，lang默认不指定为中文，一般不用指定成en语言-->
<html lang="en">
<head>
<!--  指定网页的编码格式-->
    <meta charset="UTF-8">
<!--  在移动设备浏览网页时，网页不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--  在ie浏览器浏览网页时，使用ie的最高版本-->
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
<!--  网页标题-->
    <title>Title</title>
</head>
<body>
  <h1>hello world</h1>
</body>
</html>

常见的html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--双标签：成对出现的标签-->
<h1>我是第一级标题</h1>
<h2>我是第二级标题</h2>
<h3>我是第三级标题</h3>
<h4>我是第四级标题</h4>
<h5>我是第五级标题</h5>
<h6>我是第六级标题</h6>
<div>我是一个容器标签，我可以包裹其他标签内容</div>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<!--单标签：只有一个标签，没有标签内容-->
<hr>
<img src="image/logo.jpg" alt="图片加载失败会显示">
<br>
<img src="image/logo1.jpg" alt="图片加载失败会显示">
<!--带有属性的标签-->
<a href="https://www.baidu.com">百度</a>
<!--标签可以嵌套，不能交叉嵌套-->
<div>
  <p>我是一个段落标签</p>
  <p>我是一个段落标签</p>
</div>


</body>
</html>

-提示：
    标签不区分大小写，但是推荐使用小写。
    根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
        双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
        单标签是一个标签组成，没有标签内容， 比如: img标签

资源路径

-当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如：

<img src="images/logo.jpg">

-这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径
-相对路径
    从当前操作html的文档所在目录算起的路径叫做相对路径

<img src="images/logo.jpg">

-绝对路径
    从根目录算起的路径叫绝对路径，Windows的根目录是指定的盘符，mac OS和Linux是 /

<img src="D:/web/images/logo.jpg">

-资源路径一般会使用相对路径，更加通用和方便，据对路径把工程拷贝给别人以后可能会出现资源找不到的问题

列表标签

-无序列表标签（ul标签）

<ul>
<!--  li标签定义列表项目  -->
    <li>苹果</li>
    <li>梨子</li>
    <li>香蕉</li>
</ul>

-有序列表标签（ol标签）

<ol>
    <li><a href="#">苹果</a></li>
    <li><a href="#">梨子</a></li>
    <li><a href="#">香蕉</a></li>
</ol>

-强调显示的顺序使用有序列表标签，不强调顺序使用无须列表标签

表格标签

-<table>标签:表示一个表格
-<tr>标签：表示表格中的一行
-<td>标签：表示表格中的列
-<th>标签：表示表格中的表头

<!--border-collapse: collapse:表示表格的边线进行合并-->
<table style="border: 1px solid black; border-collapse: collapse">
    <tr>
        <th style="border: 1px solid black;">姓名</th>
        <th style="border: 1px solid black;">年龄</th>
    </tr>
    <tr>
        <td style="border: 1px solid black;">张三</td>
        <td style="border: 1px solid black;">20</td>
    </tr>
    <tr>
        <td style="border: 1px solid black;">李四</td>
        <td style="border: 1px solid black;">22</td>
    </tr>
</table>

表单标签

-表单用于搜集不同类型的用户输入(用户输入的数据)，然后就可以把用户数据提交到web服务器
-<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>
        <!--for 根据id名给指定id的标签设置光标-->
        <label for="name">用户名:</label>
        <input type="text" id="name">
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="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="重置">
        <input type="button" value="按钮">
    </p>

</form>

表单提交

-<form>标签 表示表单标签，定义整体的表单区域
    action属性 设置表单数据提交地址
    method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写
        get和post方式提交表单数据都是以http协议的方式提交数据给web服务器
-表单元素属性设置
    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>
搬不完的砖:)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Python-Web开发基础-HTML
零源的博客
12-25 991
CS模式：C/S 就是Client/Server 的缩写，是客户端和服务器架构 BS模式 ：B/S 就是Browser/Server的缩写，是浏览器和服务器架构 网页主要由三部分组成： 结构（Structure） ，表现（Presentation） 、行为（Behavior） 最简单的web应用程序 import socket sock=socket.socket() sock.bind(("127.0.0.1",8888)) sock.listen(5) while True: con
Python web实训报告.docx
12-06
通过以上四个实验，学生将掌握Python Web开发的基本流程，包括环境搭建、Django项目创建、数据展示、以及表单处理。这些知识是进行更复杂Web应用开发的基础。在实际工作中，开发者还需要学习数据库交互、用户认证、...
Python网站的搭建和html基础
yq823120的博客
03-10 1532
一般我们搭建小型的网站就用flask库就行了。
python web开发 HTML基础
Michael是个半路程序员
11-29 5465
文章目录1. 简介2. 标签元素属性3. 表格4. 列表ol 有序ul 无序自定义列表5. 表单输入域标记 ``选择域标记 `, `文字域标记 ``6. 综合练习 learning from 《python web开发从入门到精通》 1. 简介 HTML 是描述网页的一种标记语言，Hyper Text Markup Language <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
python Web -HTML
错位的梦寐的博客
07-05 348
1，web 什么是web web就是网页，是一种基于B/S的应用程序 B：Browser 浏览器 S ：Server 服务器 C：Client 客户端 web 组成 浏览器：代替用户向服务器发送请求 服务器：接收用户请求并响应 通信协议：规范数据在网络中是如何打包即传递的 http:HyperText transfer protocal 超文本传输协议 web服务器 1 .作用： 接收用户请求并...
python Web： HTML的学习
错位的梦寐的博客
07-04 377
前端概述 #BS模式 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8089)) sock.listen(5) while True: connection, address = ...
Python web开发（二）：HTML结构
chinaherolts2008的博客
08-31 260
HTML 初识 HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) 所谓超文本，有2层含义： 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制） 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。 <h1> 我是一个大标题 </h1&g...
python_pythonweb_
10-01
在Python Web开发中，"python_pythonweb_"这个标题可能指的是一个使用Python构建的Web服务器或者文件上传功能。从描述来看，“可以接收POST上传文件的python web”表明这是一个能够处理HTTP POST请求，特别是处理...
Python Web开发实战_python_ｗｅｂ_
09-29
书中会先介绍Python的基础语法，如变量、数据类型、控制结构（条件语句、循环）、函数、类与对象等，这些都是Web开发的基础。 2. **Web框架**：Python有许多优秀的Web框架，如Django、Flask、Tornado等。书中的项目...
web+python+manage+html
12-29
标题 "web+python+manage+html" 暗示了我们正在探讨的是使用Python进行Web开发和HTML管理的相关知识。Python是一种广泛使用的编程语言，尤其在Web开发领域，它提供了强大的框架如Django和Flask，可以高效地构建动态...
python web基础
最新发布
06-12
python web基础
pythonweb导入html_python Web之HTML
weixin_39926749的博客
12-20 142
#相当于搜索出来的快照信息 #同上Test#h1到h6都是标题的大小hi WorldHello world独占一行，空一行换行br换行加粗功能加粗功能中间加一条线斜体23上标23下标hello空格&nbsp&nbsp&nbsp&lt&gt空格&copy &regAcfun返回顶部1.11.21.31.11.21.3第一章第一节第二节第三...
Python-web开发学习笔记（1）--- HTML基础
尚拙的博客
05-06 2236
首先说明一点，HTML并不是正儿八经的编程语言，也可以说，它不在计算机编程语言的范畴里，它只是一些具有特定格式的符号标签，这些符号标签相互配合，如果一些文本、媒体等内容被这些符号标签以不同方式渲染后，就会产生不同的渲染效果，当然最重要最特殊的是，这些标签是能够被我们的浏览器识别的标签，这就是HTML标签。所以本质上讲，我们学HTML实质上是去记住它的常见的一些符号标签的写法以及用法，仅此而已。接下来我就介绍一个常见的HTML符号标签。
python web开发(二)：HTML标签语言
orangerfun的博客
05-11 1534
如下展示了一段简单的HTML模板，标签中主要包含一些基本配置，如编码方式，标题等，注意标题的作用如下图所示
【 Python 全栈开发 - WEB开发篇 - 24】html基础
SHUTIAN2010的博客
06-07 643
html基础
python基础：web =html+ python
热门推荐
eyeofeagle的博客
02-08 1万+
一般的web应用是js + java（serverlet/controller）,python也可以充当服务器后台，代码如下： 过程如下： form表单—&amp;amp;amp;gt;经过服务器解析的【目标文件】 -----&amp;amp;amp;gt;处理提交的数据： 响应页面-打印输入 form.html: 提交请求给web目录下的cgi-bin或 htbin的form.py &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;g
用 Python解析HTML页面
互联说
04-13 1516
本文介绍了 Python 中常用的三种 HTML 解析方式：XPath 解析、CSS 选择器解析和正则表达式解析。在具体的应用过程中，我们可以根据需要选择不同的解析方式。XPath 解析适用于对 HTML 页面的层次结构进行解析，能够比较方便地定位页面元素；CSS 选择器解析适用于对 HTML 页面的类名、id 等属性进行解析，可以快速定位元素；正则表达式解析适用于对 HTML 页面的标签和文本进行解析，可以灵活地处理页面元素。希望本文能够对大家进行 HTML 解析方面的学习和实践有所帮助。
python学习 | web开发（一）前端引入和HTML标签
驚蟄的博客
07-28 818
python 快速开发网站以及了解HTML标签
Python Web开发学习笔记
"Python Web学习与Django框架入门" 在Python Web学习的过程中，Django是一个非常重要的框架，它是一个高级的、快速的、可扩展的Web应用框架，旨在使开发过程尽可能简单而有效。Django遵循模型-视图-控制器（MVC）...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值