python全栈学习--day46(html---列表，标签，表格，表单，css引入与基本选择器)

主要内容：

• 列表标签

  、
  、

• 表格标签

  表单标签

  CSS引入方式与基本选择器

  一、列表标签

  列表标签分为三种：有序列表、无序列表、定义列表

  1、无序列表

  ，无序列表中的每一项是

  英文单词解释如下:

  • ul：unordered list，“无序列表”的意思。
  • li：list item，“列表项”的意思。

  实例：

  
    
  王浩程1
    
  王浩程2
    
  王浩程3
  
  

  　　输出格式如下:

  

  注意：

  • li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
  • 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

  属性：

  • type="属性值"。属性值可以选：disc(实心圆，默认)，square(实心放点)，circle(空心圆)。

      
  
         
  张三,默认
          
  李四,默认
          
  王武
      
  
      
  
          
  张三,实心方点
          
  李四,实心方点
          
  王武,实心方点
      
  
      
  
          
  张三,空心圆
          
  李四,空心圆
          
  王武,空心圆
      
  

  　　效果如下：

  

  列表之间是可以嵌套的，我们来举个例子：

  代码：

  
          
  北京
              
  
                  
  朝阳区
                  
  海淀区
                  
  东城区
              
          
  
          
  上海
               
  
                  
  浦东新区
                  
  徐汇区
                  
  杨浦区
              
          
      
  

  　　

   

  2、有序列表

  ，里面的每一项是

   英文单词：Ordered List。

  实例：

   

  
      
  嘿哈
      
  哼哈
      
  呵呵
  
  

  　　

  

  属性：

  • type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

   

   

   和无序列表一样，有序列表也是可以嵌套的

  ol和ul就是语义不一样，怎么使用都是一样的。
  ol里面只能有li，li必须被ol包裹。li是容器级。

  ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举例如下：

  
      
  1. 嘿哈
      
  2. 哼哈
      
  3. 呵呵
  

  3、定义列表

  定义列表的作用非常大。

  ：英文单词：definition title 列表的标题，这个标签是必须的

  • ：definition title 列表的标题，这个标签是必须的
  • ：definition description 列表的列表项，如果不需要它，可以不加

  备注：dt,dd只能在dl里面；dl里面只有dt,dd.

  代码：

   

  
      
  第一条规则
      
  不准睡觉
      
  不准看剧
      
  不准听音乐
  
      
  第二条规则
      
  睡觉不准打呼噜
      
  睡觉不准磨牙
      
  
  

  　　

  

   

   

  上图可以看出，定义列表表达的语义是两层：

  • （1）是一个列表，列出了几个dd项目
  • （2）每一个词都有自己的描述项。

   

   备注：dd是描述dt的。

  定义列表用法非常灵活，可以一个dt配很dd:

  
      
  北京
      
  国家首都,政治、文化中心
      
  空气不是很好，PM2.5阈值较高
  
  
  
      
  上海
      
  魔都，有外滩、东方明珠塔、黄浦江
  
  
  
      
  广州
      
  中国南大门，有珠江、小蛮腰
  
  

  

  京东案例（京东首页最下方）

  

  dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。

  　

  二、表格标签

  表格标签用

  表示。
  一个表格是由每行组成的，每行是由

  组成的。 所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。 在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。 例如，一行的单元格： 上面的表格中没有加文字，所以在生成的网页中什么都看不到。 例如，3行4列的单元格： 小马哥 18 男 山东 小岳岳 45 男 河南 邓紫棋 23 女 香港 　　 效果： 上图中的表格好像没看到边框呀，不急，接下来看看 标签的属性。 的属性： border：边框。像素为单位。 ：单元格的线和表格的边框线合并 width：宽度。像素为单位。 height：高度。像素为单位。 bordercolor：表格的边框颜色。 align：表格的水平对齐方式。属性值可以填：left right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签 ：行 一个表格就是一行一行组成的嘛。 属性： dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left） bgcolor：设置这一行的单元格的背景色。 注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。 height：一行的高度 align="center"：一行的内容水平居中显示，取值：left、center、right valign="center"：一行的内容垂直居中，取值：top、middle、bottom   标签、标签、标签 这三个标签有与没有的区别： 1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。 例子： 进行设置） cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。 注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。 cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0 bgcolor="#99cc66"：表格的背景颜色。 background="路径src/..."：背景图片。 背景图片的优先级大于背景颜色。  单元格带边框的效果： 　备注：表格中很细表格边线的制作： CSS的写法： ：单元格 属性： align：内容的横向对齐方式。属性值可以填：left right center。 如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。 valign：内容的纵向对齐方式。属性值可以填：top middle bottom width：绝对值或者相对值(%) height：单元格的高度 bgcolor：设置这个单元格的背景色。 background：设置这个单元格的背景图片。   单元格的合并 如果要将两个单元格合并，那肯定就要删掉一个单元格。 单元格的属性： colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向 效果：（横向合并） 效果举例：（纵向合并） ：加粗的单元格。相当于  +  属性同 标签   ：表格的标题。使用时和tr标签并列 效果：   表格的 人物介绍 小马哥 18 男 中国 小岳岳 45 男 邓紫棋 23 女 三、表单标签 表单标签用表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。 属性： name：表单的名称，用于JS来操作或控制表单时使用； id：表单的名称，用于JS来操作或控制表单时使用； action：指定表单数据的处理程序，一般是PHP，如：action=“login.php” method：表单数据的提交方式，一般取值：get(默认)和post 　 form标签里面的action属性和method属性，在后面课程给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。　  get和post提交的区别 GET方式： 将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。 特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。   POST方式： 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。 特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。 Enctype： 表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。 Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以 Multipart/form-data：上传附件时，必须使用这种编码方式。 ：输入标签（文本框） 用于接收用户输入。 属性： type="属性值"：文本类型。属性值可以是： text（默认） password：密码类型 radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。 checkbox：多选按钮，名字相同的按钮作为一组进行选择。 checked：将单选按钮或多选按钮默认处于选中状态。当标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。 hidden：隐藏框，在表单中包含不希望用户看见的信息 button：普通按钮，结合js代码进行使用。 submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。 reset：重置按钮，清空当前表单的内容，并设置为最初的默认值 image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 file：文件选择框。 提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。 value="内容"：文本框里的默认内容（已经被填好了的） size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。 readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。 disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。 例子： 姓名：逗比 昵称： 名字： 密码： 性别：男 女 爱好：吃饭 睡觉 打豆豆 效果： 四种按钮的举例： ：下拉列表标签 标签里面的每一项用表示。select就是“选择”，option“选项”。 select标签和ul、ol、dl一样，都是组标签。 标签的属性： multiple：可以对下拉列表中的选项进行多选。没有属性值。 size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。 标签的属性： selected：预选中。没有属性值。 例子： 小学 初中 高中 大学 研究生 小学 初中 高中 大学 研究生 小学 初中 高中 大学 研究生 　 效果: 标签：多行文本输入框 text就是“文本”，area就是“区域”。 属性： value：提交给服务器的值。 rows="4"：指定文本区域的行数。 cols="20"：指定文本区域的列数。 readonly：只读。 留言板 表单的语义化 比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。 账号信息 姓名：逗比 密码： 其他信息 性别：男 女 爱好：吃饭 睡觉 打豆豆 　　 效果： 标签 我们先来看下面一段代码： 男 女 对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。 本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。 解决方法如下： 男 女 上方代码中，input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。 当然了，复选框也有label：（任何表单元素都有label）   CSS的引入样式 行内样式 我是一个段落 内嵌样式 1 2 3 4 5 ""> 6 "> 7 8 9 10 17 "stylesheet" type="text/css" href="./main.css"> 18 19 20 21 26 27 28 31 32 33 34 'color: purple;'>我是一个段落 35 36 37 38 39 40 内嵌样式 外联样式 　　 　　 　 练习题： 模仿百度注册页 |注册百度账号 用户名  手机号  密   码  验证码         阅读并接受《百度用户协议》 及 《百度隐私权保护声明》          　 　   css html python list ci 容器 io ip 图片 写下你的评论吧 ! 吐个槽吧,看都看了 会员登录 | 用户注册 推荐阅读 服务器 C#导入、导出功能 导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细] 蜡笔小新   2023-12-12 14:34:29 服务器 基于layUI的图片上传前预览功能的2种实现方式 本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细] 蜡笔小新   2023-12-14 17:06:58 int CSS3选择器的使用方法详解，提高Web开发效率和精准度 本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细] 蜡笔小新   2023-12-14 14:37:52 int OC学习笔记之@property和@synthesize 本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细] 蜡笔小新   2023-12-14 12:05:06 int Hibernate基础映射 在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细] 蜡笔小新   2023-12-14 10:57:47 int java 线程死锁模拟 1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细] 蜡笔小新   2023-12-13 19:12:25 int 工程中添加Android Dependencies 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细] 蜡笔小新   2023-12-13 12:08:09 int 猜字母游戏 猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细] 蜡笔小新   2023-12-13 12:04:03 int 南邮ctf-web的writeup 本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细] 蜡笔小新   2023-12-13 10:58:55 int Html5-Canvas实现简易的抽奖转盘效果 本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细] 蜡笔小新   2023-12-13 06:02:20 select 深入理解CSS中的margin属性及其应用场景 本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细] 蜡笔小新   2023-12-12 18:01:10 testing 单击时动态创建 元素 - Dynamically create element on click Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细] 蜡笔小新   2023-12-12 15:59:36 int hdu4888 Redraw Beautiful Drawings 本文介绍了一道网络流题目hdu4888 Redraw Beautiful Drawings的解题思路。题目要求以行和列作为结点建图，并通过最大流算法判断是否有解以及是否唯一。文章详细介绍了建图和算法的过程，并强调在dfs过程中要进行回溯。 ... [详细] 蜡笔小新   2023-12-12 11:54:35 request 【译】发送表单数据 这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细] 蜡笔小新   2023-12-14 16:19:10 int Java实现大数乘法（分治算法） 本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细] 蜡笔小新   2023-12-14 15:43:50 飞扬的青春2046是我 这个家伙很懒，什么也没留下！ Tags | 热门标签 php8 heatmap datetime fetch audio vbscript ascii uri select tags hashset timestamp byte less command expression range int scala runtime python2 join httpclient stream express testing request chat merge node.js RankList | 热门文章 1以赛促学，飞桨助力大学生智能车竞赛升级！ 2【我所认知的BIOS】—> uEFI AHCI Driver(5) — 第一个protocol终于要开始安装了 3Node.js Stream 可写. write()方法 4EarlGreyExample Swift tests compile error on Xcode 9.0.1 5开发笔记:spring cloud stream 6docker的安装及基本命令 7POJ 1528 Mayor's posters 8java jigsaw_Java 9延迟：为什么Jigsaw尚未准备好 9请停止搬运部署，尤雨溪官申Vue 3官方文档地址 10java执行机制 11【APT报告】日本发布来自亚洲某国的APT样本分析 12IDS入侵检测工具 linux,系统运维|在CentOS上配置基于主机的入侵检测系统（IDS）... 13使用索引查找并与两个条件匹配 - Lookup using INDEX and MATCH with two criteria 14面向对象版Tab栏切换 15数据系统架构——Lambda architecture PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有