Python HTML和CSS 2:表格、传统布局以及表单 介绍

简介: Python HTML和CSS 2:表格、传统布局以及表单 介绍

总体内容

1、html 表格

2、传统布局

3、html 表单


一、表格



  • 1.1、<table>标签:声明一个表格(默认是看不到的,我们需要设置它的属性、行以及具体的表格),它的常用属性如下:
  • border 属性 定义表格的边框,设置值是数值
  • cellpadding 属性 定义单元格内容与边框的距离,设置值是数值
  • cellspacing 属性 定义单元格与单元格之间的距离,设置值是数值
  • align 属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有:left | center | right
  • 1.2、<tr>标签:定义表格中的一行
  • 1.3、<td><th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格(默认有加黑的样式),它们的常用属性如下:
  • align 设置单元格中内容的水平对齐方式,设置值有:left | center | right
  • valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
  • colspan 设置单元格水平合并,设置值是数值
  • rowspan 设置单元格垂直合并,设置值是数值
  • 1.4、光说不练假把戏,我们用一个例子对表格制作练习,如下效果


image.png

  • <1>、定义一个表格,设置一些属性


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<h1>表格</h1>
<table border="1" width="600" height="500" align="center">
</table>
</body>
</html>
  • <2>、定义6行5列,行用 <tr>标签标示,行中的每个小格子用<td>标示


<table border="1" width="600" height="500" align="center">
  <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
  </tr>
</table>
  • <3>、合并第一行和最后一列


<table border="1" width="600" height="500" align="center">
<tr>
   <td colspan="5"></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td rowspan="5"></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
</tr>
</table>


image.png

<4>、设置宽度比例,以最多列为例

<tr>
   <td width="15%"></td>
   <td width="23%"></td>
   <td width="15%"></td>
   <td width="23%"></td>
   <td rowspan="5" width="24%"><img src="images/吉多.png" alt="图片" width="100%"></td>
</tr>


image.png


二、传统布局



  • 2.1、页面布局概述布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种:
  • <1>、table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片等元素放入单元格中,隐藏表格的边框,从而实现布局。这种布局方式也叫 传统布局,目前主要使用在EDM(广告邮件中的页面)中,主流的布局方式不用这种。
  • <2>、HTML+CSS布局(DIV+CSS):主要通过CSS样式设置来布局文字或图片等元素,需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局,它比传统布局要复杂,目前是主流的布局方式。
  • 2.2、table布局及实例


image.png


  • table来做整体页面的布局,布局的技巧归纳为如下几点:
  • <1>、按照设计图的尺寸设置表格的宽高以及单元格的宽高。
  • <2>、将表格border、cellpadding、cellspacing全部设置为0,表格的边框和间距就不占有页面空间,它只起到划分空间的作用。
  • <3>、针对局部复杂的布局,可以在单元格里面再嵌套表格,嵌套表格划分局部的空间。
  • <4>、单元格中的元素或者嵌套的表格用align和valign设置对齐方式
  • <5>、通过属性或者css样式设置单元格中元素的样式
  • 具体的代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>个人简历</title>
</head>
<!--topmargin 顶格处理-->
<body topmargin="0">
    <table width="800" height="800" border="0" align="center" cellspacing="0" cellpadding="0">
        <tr>
           <td width="260" bgcolor="#f2f2f2" valign="top">
              <table width="200" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr height="100"></tr>
                  <tr>
                      <td align="right"><img src="images/吉多.png" width="200"></td>
                  </tr>
                  <tr>
                      <td align="right">小虎</td>
                  </tr>
                  <tr>
                      <td align="right">18500652881</td>
                  </tr>
                  <tr>
                      <td align="right">2318151015@qq.com</td>
                  </tr>
              </table>
          </td>
          <td width="30"></td>
          <td width="480" valign="top">
              <table width="480" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                     <td height="80"></td>
                  </tr>
                  <tr>
                     <td align="right"><img src="images/resume.png" width="238"></td>
                  </tr>
              </table>
              <br>
              <hr/>
              <br>
              <table width="480" height="200" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                     <td colspan="2"><b>个人基本情况</b></td>
                  </tr>
                  <tr>
                     <td><b>姓名:</b>小虎</td>
                     <td><b>籍贯:</b>河南商丘</td>
                  </tr>
                  <tr>
                     <td><b>性别:</b>男</td>
                     <td><b>身高:</b>175</td>
                  </tr>
                  <tr>
                     <td><b>民族:</b>汉</td>
                     <td><b>体重:</b>70kg</td>
                  </tr>
                  <tr>
                     <td><b>出生日期:</b>1992.02.02</td>
                     <td><b>电话:</b>18500652881</td>
                  </tr>
                  <tr>
                     <td><b>现居地址:</b>海淀区中关村</td>
                     <td><b>专业:</b>计算机技术</td>
                  </tr>
              </table>
              <br>
              <table>
                  <tr>
                     <td><b>教育背景及工作经历</b></td>
                  </tr>
                  <tr>
                     <td><b>2008.09-2011.06</b> 北京大学 计算机专业</td>
                  </tr>
                  <tr>
                     <td><b>2011.06-2013.09</b> 希艾欧管理技术有限公司 iOS开发工程师</td>
                  </tr>
              </table>
              <br>
              <table>
                 <tr>
                    <td><b>所获证书</b></td>
                 </tr>
                 <tr>
                    <td><b>2009:</b> 荣获高级计算机证书</td>
                 </tr>
                 <tr>
                    <td><b>2008:</b> 荣获优秀学生</td>
                 </tr>
              </table>
           </td>
           <td width="30"></td>
        </tr>
   </table>
</body>
</html>

提示:图片自己找个替换的,也可以找我要源码


三、html 表单



表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

  • 3.1、<form> 标签 定义整体的表单区域(表单内容都放到<form></from>里面就好)
    action属性 定义表单数据提交地址,空内容表示提交到本地
    method属性 定义表单提交的方式,一般有“get”方式和“post”方式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
   <h1>表单</h1>
   <from action="" method="post">
        表单内容
   </from>
</body>
</html>


  • 3.2、<label>标签 为表单元素定义文字标注(与下面的 3.3 配合使用)
  • 3.3、<input>标签 定义通用的表单元素
  • type 属性(name=""是在提交时候的一个字段名)
  • type="text" 定义单行文本输入框


image.png


<div>
    <label>用户名:</label>
    <input type="text" name="userName">
</div>


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


image.png

image.png



<div>
    <label>密&nbsp;&nbsp;&nbsp;码:</label>
    <input type="password" name="password">
</div>


  • type="radio" 定义单选框


image.png



<div>
    <label>性&nbsp;&nbsp;&nbsp;别:</label>
    <input type="radio" name="gender" value="0"> 男
    <input type="radio" name="gender" value="1"> 女
</div>


  • type="checkbox" 定义复选框(多选)


image.png


<div>
    <label>爱&nbsp;&nbsp;&nbsp;好:</label>
    <input type="checkbox" name="like" value="0"> 打游戏
    <input type="checkbox" name="like" value="1"> 打篮球
    <input type="checkbox" name="like" value="2"> 打网球
</div>


  • type="file" 定义上传文件


image.png

<div>
    <label>照&nbsp;&nbsp;&nbsp;片:</label>
    <input type="file" name="photo">
</div>
  • type="submit" 定义 提交 按钮


<div>
    <input type="submit" name="" value="提交">
</div>
  • type="reset" 定义 重置 按钮


<div>
    <input type="reset" name="" value="重置">
</div>
  • type="button" 定义一个普通按钮


<input type="button" name="" value="普通的按钮">
  • type="image" 定义图片作为提交按钮,用src属性定义图片地址


<input type="image" src="images/logo.png" name="">

提示:一般会导致提交两次,不建议使用,建议使用 submit

  • type="hidden" 定义一个隐藏的表单域,用来存储值


<input type="hidden"  name="hidenValue" value="2">
  • value 属性 定义表单元素的值
  • name属性 定义表单元素的名称,此名称是提交数据时的键名


  • 3.4、<textarea> 标签 定义多行文本输入框


image.png


<div>
     <label>个人介绍:</label>
     <textarea></textarea>
</div>


  • 3.5、<option>标签 与<select>标签配合,定义下拉表单元素中的选项


image.png

<div>
     <label>籍&nbsp;&nbsp;&nbsp;贯:</label>
     <select>
         <option>北京</option>
         <option>上海</option>
         <option>杭州</option>
         <option>广州</option>
     </select>
</div>

补充:把label与其他标签关联起来,也就是,点击label与点击相关联的标签效果一样,如下:在点击 密码输入框 的效果一样

<div>
     <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>
     <input type="password" name="password" id="password">
</div>


提示:for 的内容与 id 的内容保持一直即可

目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
30天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
33 2
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
数据可视化 Java Python
python编程:tabula、pdfplumber、camelot进行表格数据识别
python编程:tabula、pdfplumber、camelot进行表格数据识别
905 0
python编程:tabula、pdfplumber、camelot进行表格数据识别
|
23天前
|
存储 缓存 Java
Python高性能编程:五种核心优化技术的原理与Python代码
Python在高性能应用场景中常因执行速度不及C、C++等编译型语言而受质疑,但通过合理利用标准库的优化特性,如`__slots__`机制、列表推导式、`@lru_cache`装饰器和生成器等,可以显著提升代码效率。本文详细介绍了这些实用的性能优化技术,帮助开发者在不牺牲代码质量的前提下提高程序性能。实验数据表明,这些优化方法能在内存使用和计算效率方面带来显著改进,适用于大规模数据处理、递归计算等场景。
58 5
Python高性能编程:五种核心优化技术的原理与Python代码
|
2月前
|
Python
[oeasy]python055_python编程_容易出现的问题_函数名的重新赋值_print_int
本文介绍了Python编程中容易出现的问题,特别是函数名、类名和模块名的重新赋值。通过具体示例展示了将内建函数(如`print`、`int`、`max`)或模块名(如`os`)重新赋值为其他类型后,会导致原有功能失效。例如,将`print`赋值为整数后,无法再用其输出内容;将`int`赋值为整数后,无法再进行类型转换。重新赋值后,这些名称失去了原有的功能,可能导致程序错误。总结指出,已有的函数名、类名和模块名不适合覆盖赋新值,否则会失去原有功能。如果需要使用类似的变量名,建议采用其他命名方式以避免冲突。
52 14
|
2月前
|
分布式计算 大数据 数据处理
技术评测:MaxCompute MaxFrame——阿里云自研分布式计算框架的Python编程接口
随着大数据和人工智能技术的发展,数据处理的需求日益增长。阿里云推出的MaxCompute MaxFrame(简称“MaxFrame”)是一个专为Python开发者设计的分布式计算框架,它不仅支持Python编程接口,还能直接利用MaxCompute的云原生大数据计算资源和服务。本文将通过一系列最佳实践测评,探讨MaxFrame在分布式Pandas处理以及大语言模型数据处理场景中的表现,并分析其在实际工作中的应用潜力。
116 2
|
2月前
|
Unix Linux 程序员
[oeasy]python053_学编程为什么从hello_world_开始
视频介绍了“Hello World”程序的由来及其在编程中的重要性。从贝尔实验室诞生的Unix系统和C语言说起,讲述了“Hello World”作为经典示例的起源和流传过程。文章还探讨了C语言对其他编程语言的影响,以及它在系统编程中的地位。最后总结了“Hello World”、print、小括号和双引号等编程概念的来源。
126 80

推荐镜像

更多