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 的内容保持一直即可

目录
相关文章
|
17天前
|
存储 数据采集 JSON
你知道吗?html_table可以提取的不止是表格
`html_table` 是一种强大的工具,不仅用于HTML表格解析,还在现代爬虫技术中发挥重要作用。它可以提取、整合、分析和传输多种类型的关键数据。本文从四个方面探讨其功能:关键数据提取(如财经网站的股票信息)、零散信息整合(如电商网站的产品详情)、数据对比分析(如手机性能参数对比)和数据存储与传输(如转换为CSV/JSON格式)。通过Python代码示例,展示了如何利用代理IP、多线程和自定义请求头提高爬虫效率,实现对复杂网页数据的全面抓取和利用。
35 12
你知道吗?html_table可以提取的不止是表格
|
1月前
|
数据处理 索引 Python
用Python实现数据录入、追加、数据校验并生成表格
本示例展示了如何使用Python和Pandas库实现学生期末考试成绩的数据录入、追加和校验,并生成Excel表格。首先通过`pip install pandas openpyxl`安装所需库,然后定义列名、检查并读取现有数据、用户输入数据、数据校验及保存至Excel文件。程序支持成绩范围验证,确保数据准确性。
88 14
|
1月前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
利用 html_table 函数轻松获取网页中的表格数据
|
2月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
1月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
1月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
2月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
1月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。