py的HTML基础（2）第一周

最新推荐文章于 2023-05-11 23:50:43 发布
最新推荐文章于 2023-05-11 23:50:43 发布
阅读量84 收藏
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73633742/article/details/129729769
版权
本文介绍了HTML中表格的创建，包括基本语法、表头单元格、表格属性以及合并单元格的方法。接着讲解了列表的类型，如无序列表、有序列表和自定义列表的使用。最后，详细阐述了表单的组成，包括表单域、表单控件和提示信息，以及input、select和textarea等表单元素的属性和用法。
摘要由CSDN通过智能技术生成

1.表格标签

1.1表格的基本语法

<table>
  <tr>
    <td>姓名</td> <td>性别</td> <td>年龄</td>
  </tr>
  <tr>
    <td>刘德华</td> <td>男</td> <td>56</td>
  </tr>
  <tr>
    <td>张学友</td> <td>男</td> <td>58</td>
  </tr>
</table>

在这里插入图片描述

1.2表头单元格标签

<th>标签表示HTML表格的表头部分，里面的文字会加粗居中显示。

<table>
  <tr>
    <th>姓名</th> <th>性别</th> <th>电话</th>
  </tr>
  <tr>
    <td>刘德华</td> <td>男</td> <td>123456</td>
  </tr>
  <tr>
    <td>张学友</td> <td>男</td> <td>145678</td>
  </tr>
</table>

在这里插入图片描述

1.3表格属性

属性名属性值描述
alignleft,center,right规定表格相对周围元素的对齐方式
border1或""规定表格单元是否拥有边框，默认为"",表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认为1像素
cellspacing像素值规定单元格之间的空白，默认为2像素
width像素值或者百分比规定表格的宽度。

这些属性一定要写到<table>标签里面。

1.4表格结构标签

<thead>和<tbody>标签
1.<thead></thead>:用于定义表格的头部，<thead>内部必需拥有<tr>标签，一般位于第一行。
2.<tbody></tbody>:用于定义表格的主体，主要用于放数据本身。
3.以上标签都是放在<table></table>中。

1.5合并单元格

合并单元格的方式：

  • 跨行合并，最上侧单元格为目标单元格，写合并代码
  • 跨列合并，最左侧单元格为目标单元格，写合并代码

1.找到是跨行还是跨列。
2.找到目标单元格，写上合并方式=合并单元格的数量。比如：<td colspan="2"></td>``<td rowspan="2></td>
3.删除多余的单元格。
如：

<table>
  <tr>
    <td></td> <td colspan="2"></td>
  </tr>
  <tr>
    <td rowspan="2"></td> <td></td> <td></td>
  </tr>
  <tr>
     <td></td> <td></td>
  </tr>
</table>

2.列表标签

列表是用来布局的，整洁有序

2.1无序列表

基本语法格式如下：

<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul>

在这里插入图片描述

<ul></ul>中只可以嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li></li>相当于一个容器，可以容纳所有元素。无序列表会带有自己的样式属性，但在实际使用的时候，会用css来设置。

2.2有序列表

<ol>表示有序列表

<ol>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ol>

在这里插入图片描述

<ol></ol>中只可以嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li></li>相当于一个容器，可以容纳所有元素。有序列表会带有自己的样式属性，但在实际使用的时候，会用css来设置。

2.3自定义标签

<dl>用于定义描述列表，该标签会与<dt>(定义项目/名字)和<dd>(描述每个项目/名字)一起使用。
基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
</dl>

1.<dl></dl>里面只能包含<dt><dd>
2.<dt>和<dd>没有个数限制，经常是一个<dt>对应多个<dd>

2.4列表总结
标签名定义说明
<ul></ul>无序标签里面只能包li 没有顺序，使用较多。li里面可以包含任何标签
<ol></ol>有序标签里面只能包含li有顺序，使用相对较少，li里面可以包含任何标签
<dl></dl>自定义列表里面只能包含dt和dd,dt和dd里面可以放任何标签。

3.表单标签

3.1表单的组成

一个完整的表单通常有表单域，表单控件（也称表单元素）和提示信息三个部分构成。
1.表单域是一个包含表单元素的区域。在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会吧它范围内的表单信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
 各种表单元素控件
</form>
属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务程序的url地址
methodget/post用于设置表单数据的提交方式，其取值为get或者post.
name名称用于指定表单的名字，以区分同一个页面的多个表单域。
3.2.表单控件（表单元素）

1.input输入表单元素
2.select下拉表单元素
3.textarea文本域元素

1.<input>表单元素
属性值描述
button定义可点击按钮（多数情况下，用于通过javaSscipt启动脚本）
check定义复选框
file定义输入字段和浏览按钮，供文件上传。
hidden定义隐藏的输入字段
image定义图像形式的按钮。
passWord定义密码字段，该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮，提交按钮会把表单数据发送到服务器。
text定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符。

除了type属性外，<input>标签还有其他很多属性，其常用属性如下：

属性属性值描述
name由用户自定义定义input元素的名称
value由用户自定义规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中。
maxlength正整数规定输入字段中字符的最大长度
<form>
  用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
  密码：<input type="password" name="pwd"> <br>
  性别：男<input type="radio" name="sex" value+"男">女<input type="radio" name="sex" value="女" checked="checked">人妖<input type="radio" name="sex" value="人妖"> 
  <br>
  爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby">
  <input type="submit" value="免费注册">
  <input type="reset" value="重新填写">
  <input type="button" value="获取短信验证码"><br>
  上传头像：<input type="file" >
</form>

1.name 和value是每个表单元素都有的属性，主要给后台人员使用。
2.name表单元素的名字，要求单选框和复选框要有相同的name值。
3.checked属性主要针对于单选按钮和复选框，主要作用一打开界面，就要可以默认选中某个表单元素。
4.<label>标签为input 元素定义标注。<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

<label for="text">用户名:</label><input type="text" id="text">
<input type="radio" id="nan" name="sex"><label for="nan">男</label>
2.<select>表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间空间时，我们可以使用<select>标签控件定义下拉列表。
语法：

籍贯：
<select>
  <option>山东</option>
  <option>上海</option>
  <option selected="selected">吉林</option>
</select>

<select>中里面至少包含一对<option>
在<option>中定义selected=“selected”,当前项即为默认选中项。

3.<textarer>表单元素

语法：

<form>
  今日反馈：
  <textarea cols="50" rows="5">
   这个反馈留言是用textarea来做的
  </textarea>
</form>

1.通过<textarea>标签可以轻松的创建多行文本输入框。
2.cols=“每行中字符的个数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用css来改变大小。
综合注册页面

<h4>青春不常在，抓紧谈恋爱<h4>
    <table width="600">
      <!--第一行--> 
      <tr>
          <td>性别：</td>
          <td>
              <input type="radio" name="sex" id="nan"><lable for="nan">男</lable>
              <input type="radio" name="sex" id="nv"><lable for="nv">女</lable>
          </td>
      </tr>
      <!--第二行-->
      <tr>
          <td>生日：</td>
          <td>
              <select>
                  <option>--请选择年份--</option>
                  <option>2001</option>
                  <option>2002</option>
                  <option>2003</option>
                  <option>2004</option>
              </select>
              <select>
                  <option>--请选择月份--</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                  <option>8</option>
                  <option>9</option>
                  <option>10</option>
                  <option>11</option>
                  <option>12</option>
              </select>
              <select>
                  <option>--请选择日期--</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                  <option>8</option>
                  <option>9</option>
                  <option>10</option>
                  <option>11</option>
                  <option>12</option>
                  <option>13</option>
                  <option>14</option>
                  <option>15</option>
                  <option>16</option>
                  <option>17</option>
                  <option>18</option>
                  <option>19</option>
                  <option>20</option>
                  <option>21</option>
                  <option>22</option>
                  <option>23</option>
                  <option>24</option>
                  <option>25</option>
                  <option>26</option>
                  <option>27</option>
                  <option>28</option>
                  <option>29</option>
                  <option>30</option>
                  <option>31</option>
              </select>
          </td>
      </tr>
      <!--第三行-->
      <tr>
        <td>所在地区</td>
        <td><input type="text" value="北京"></td>>
      </tr>
      <!--第四行-->
      <tr>
          <td>婚姻状况：</td>
          <td>
            <input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">离婚
          </td>
      </tr>
      <!--第五行-->
      <tr>
        <td>学历</td>
        <td><input type="text" value="高中"></td>
      </tr>
      <!--第六行-->
      <tr>
        <td>喜欢的类型：</td>
        <td>
          <input type="checkbox" name="love">妩媚的
          <input type="checkbox" name="love">可爱的
          <input type="checkbox" name="love">小鲜肉
          <input type="checkbox" name="love">大叔类型
        </td>
      </tr>
      <!--第七行-->
      <tr>
        <td>个人介绍</td>
        <td>
          <textarea>个人简介</textarea>
        </td>
      </tr>
      <!--第八行-->
      <tr>
        <td></td>
        <td>
          <input type="submit" value="免费注册">
        </td>
      </tr>
      <!--第九行-->
      <tr>
        <td></td>
        <td>
          <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
        </td>
      </tr>
      <!--第十行-->
      <tr>
        <td></td>
        <td>
          <a href="#">我是会员，立即登录</a>
        </td>
      </tr>
      <!--第十一行-->
      <tr>
        <td></td>
        <td>
          <h5>我承诺</h5>
          <ul>
            <li>年满18岁,单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚的寻找另一半</li>
          </ul>
        </td>
      </tr>
    </table>

zz在这里插入图片描述

4.学会查阅文档

推荐的网址：

m0_73633742
关注
python软件界面-用Html来写Python桌面软件的UI界面-htmlPy
weixin_37988176的博客
11-01 1864
在写Python软件的时候，一般用命令行就行了，但是某些特殊情况下（主管要求），需要写一个还能看的界面提供给客户的情况下，那就必须要用到Python的UI包。试用了很多种：因为一直用的Python 2.7版本的，所以前几次开发都使用了PyQt4，但是真心感觉用起来比较累。所以在家无聊的时候就想着找一个好用一点的GUI开发工具，这样能给以后的工作或者瞎折腾提供高逼格的界面。然后，想着想着，就想到了H...
Python基础第一周--Python语言家族
weixin_44888486的博客
11-04 1万+
在这里插入图片描述 一、Python语言家族 1 Introduction 1.1 Python 简介 Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 简单来说，Python是一门编程语言，帮助我们更好的与计算机沟通，功能全面、易学易用、可拓展语言，所以说，人生苦短，我学Python。 Python 的设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的...
Py.Html:基本HTML语言分隔语言，零分隔语言
03-19
Py.Html文档 使用python技术创建Web项目的框架。 s Py.Html简介 普通版的演示应用程序请参见： ： Py.html是用python编写的用于Web项目创建的框架。 算法使HTML文件从头开始，其构想是组织结构，其中每个文档HTML，CSS或JS都具有良好的编写和功能。 开发小组： 全栈Web开发人员Python和Web -Python开发人员 第一部分：基本功能 如何使用Py.html 关于py.html 如何输入课程 工作流程Py.html 使用Python创建HTML代码 基本HTML程式码 不要编辑HTML代码花花公子！ 环境与道路 开始项目 编辑HTML代码 现在，使用Py.html编辑HTML代码 更少的代码，更多的功能 第二部分：高级模块 创建CSS并链接到HTML HTML fol标签的基本命令<链接> 创建手动配置CSS 支持CSS
python 生成html文档_Python使用pyh生成HTML文档的方法示例
weixin_39932300的博客
12-15 218
最近在项目中需要将结果导出到HTML中，在网上搜索的时候发现了这个库，通过官方的一些文档以及网上的博客发现它的使用还是很简单的，因此选择在项目中使用它。在使用的时候发现在Python3中有些问题，网上很多地方都没有提到，因此我在这将它的使用以及我遇到的问题和解决方案整理出来供大家参考本文主要参考 pyh中文文档下载的样本也是该文中提到的地址常规使用在使用时一般先导入模块:from phy impo...
.py文件和.html文件,.py是什么文件
weixin_39758048的博客
06-11 1085
.py文件是python的脚本文件，Python在执行时，会将.py文件中的源代码编译成Python的byte code，再由Python Virtual Machine来执行这些编译好的byte code。.py文件是python的脚本文件。Python在执行时，首先会将.py文件中的源代码编译成Python的byte code(字节码)，然后再由Python Virtual Machine(P...
python之标准库html
睡觉不打呼噜的博客
04-28 3809
python之标准库html python html库 内置标准库html
第一周python基础
weixin_43958585的博客
05-31 158
List 相关操作 team=['Ame','Bod','Shary']#一个list a=len(team)#获取长度 print(team,a,team[0],team[-1])#索引访问list位置元素 #此过程遇到错误invalid character in identifier 原因为存在中文字符 输入时谨记 team.append('Linda') #追加元素到末尾 team.ins...
Week-11:第9周-Django
05-25
第十一周的档案袋任务 修改现有代码，以便通过环境变量（例如settings.py中的Django SECRET_KEY变量）加载机密 settings.py已更新，将SECRET_KEY作为环境变量包含在os.environ中。 通过Bandit和Safety工具运行代码，...
第三周考试 (修改版) 1
08-08
- 必须在一个.py文件中实现所有功能。 8. 时间管理： - 考试时间为120分钟，考生需在规定时间内完成代码编写和提交。 9. 代码提交与检查： - 将代码组织在学号目录下的子目录中，压缩成.zip或.rar文件上传。 -...
html基础知识
A123ppleQueen的博客
06-12 2102
html,超文本标记语言,是一种用于创建网页的标椎标记语言。 html,是Hyper Text Markup Language的缩写。它运行在liula
python第一个html页面,用python来进行html页面解析
weixin_34122532的博客
06-03 244
老规矩，先来一段代码，然后对着代码来讲。class novelContentParser(sgmllib.SGMLParser):'''novelContentParser类，继承自sgmllib，用来解析出具体的小说章节内容'''def __init__(self, title):sgmllib.SGMLParser.reset(self)self.nc = novelContent()self...
py的HTML基础（1）第一周
m0_73633742的博客
03-25 109
HTML的基本标签语法
如何用python写html的插件,pyhtmlPreviewer: pyhtmlPreviewer 是针对 Vim 开发的 html 实时预览插件，采用 viml, python3, PySide2...
weixin_36296827的博客
06-20 314
pyhtmlPreviewer介绍pyhtmlPreviewer 是针对 Vim 写的 html 实时预览插件。要求python3PySide2 >= 5.14(因为 5.14 里的 QWebEnginePage 里新加入了一个 NavigationTypeRedirect 选项，用于控制页面自动跳转)gvim(vim 会因为 pyside2 不是主线程运行而报错)编写原因最近在翻译一个 h...
用htmlPy做混合应用
weixin_34293141的博客
06-14 546
为什么80%的码农都做不了架构师？>>> ...
python 数据分析之 HTML文件解析
weixin_42914706的博客
02-19 1万+
HTML：是 Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言；HTTP超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。HTML文件本质上是文本文件，而普通的文本文件只能显示字符。
Python HTML解析详解
最新发布
naer_chongya的博客
05-11 2018
HTML解析是任何网络爬虫应用的基础，Python中提供了多个解析HTML的库，包括BeautifulSoup、lxml、html5lib等。这里我们将使用BeautifulSoup来演示如何解析HTML。
python html模块调用_Python html 模块简介
weixin_29999895的博客
03-01 2196
1 html.entities HTML 实体name2codepoint 将 HTML 实体名称映射到 Unicode 代码点：html5 将 HTML5 命名字符引用映射到等效的 Unicode 字符elements = {k:v for k, v in html5.items()}比如：codepoint2name 将 Unicode 代码点映射到 HTML 实体名称将 HTML 实体名称映...
使用python生成本地html文件
热门推荐
医学影像学习笔记
06-16 6万+
一.静态HTML生成方法#coding:utf-8 _author_ = "LiaoPan" _time_ = "2016.6.16"f = open("demo_1.html",'w') message = """ <html> <head></head> <body> <p>Hello,World!</p> <p>demo</p> </body> </html>"""f.write(messa
Web2py中文手册：从基础到实践
模型-视图-控制器模式是 Web2py 框架的基础架构之一。它将应用程序分为三个部分：模型、视图、控制器。模型负责数据存储和处理，视图负责数据显示，控制器负责处理用户输入和逻辑处理。本手册将对模型-视图-控制器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值