一、列表

1.1 什么是列表标签?

作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体

无序列表---unordered-list(最多):新闻列表、导航、商品列表

作用:给一堆数据添加列表语义里面所有数据没有优先之分只是列举出来

可以列举图片文字视频```

ul里面有属性 type=“circle/square/disc”  清除前面符号 list-style:none;

可以在li中嵌套ul-li

有序列表---ordered-list(最少)

作用:给一堆添加语义,并且有先后之分```

```  type=“1/A/a/I” start=“数字‘//css做

自定义列表definition-list(其次):做网站底部信息

作用 :和无序列表语义,给添加语义 。先通过dt标签定义列表中的所有标题,然后再通过dd标签给每个标题添加描述信息```

```dt用来定义标题

------无序列表注意点:

1)一定要记住ul标签是用来给一堆数据添加列表语义的而不是用来添加小圆点的

2)ul标签和li标签是一个整体,是一个组合所有一般情况下ul标签和li标签都是一起出现

3)ul里面不推荐包含其他标签

补充:br标签里面的属性width规定宽度

注意:虽然通过标签属性也能修改样式,但是在企业开发中千万不要这样干前面我们说过ul中最好只放li标签,但是在企业开发中。li标签中内容可能会很复杂,所以我们可以继续在li标签中添加其他标签来丰富我们的界面。

总结:

1.一定要记住ul标签只放li标签

但是li中可以放其他标签

eg

  • 标题

    段落

  • 标题1

  • 标题2

-----有序列表 :

-----定义列表注意:1) dl/dt/dd是整体出现一起出现 ,dl 只放dt/dd,

2)推荐使用一个dt对应一个dd

3)为了丰富界面,我们可以在dt/dd中添加其他标签

大学

但是v哈巴河v不会吧

二、表格使用

其实表格标签中的table代表整个表格,也就是一堆table标签就是一个标签tr为行td为列 表格标签有一个标签属性 这个属性决定边框宽度默认为0所以看不到边框

属性注意点:

1)宽度和高度属性:可以给table和td标签使用

1.1 表格宽度和高度默认是按照内容尺寸来调整的也可以通过

给table标签设置width/height属性的方式来手动指定表表格和宽度

td是当前单元格的宽度和高度不影响整个表格的宽度和高度

2)水平对齐和垂直对齐的属性

其中水平对齐table/tr/td都可以-------垂直对齐只能给tr/td使用

给table设置align=right/left/center控制表格在水平方向的对齐方式

tr设置align,控制行中所有单元格的水平对齐方式

td设置align,控制当前单元格中内容在说方向的对齐方式

注意:如果td中设置align属性,tr中也设置align,所有单元格按td来

tr设置valign属性,控制当前行所有单元格中内容垂直对齐

td当前单元格垂直对齐

注意:同时给tr和td设置vailgn以td为准

3)外边距和内边距属性

只能给table使用 外边距就是单元格与单元格之间的距离。内边距是单元格的边框和文字之间的间隙,我们称之为内边距默认为1

注意:企业用css修改样式

表格标题caption作用:标题自动相对于表格的宽度居中

标题单元格标签

在表格标签中提供了一个标签专门用了存储每一列的标题,这个标签叫做th标签,只要将当前列的标题存储在这个标签中就会自动居中加粗

注意:1.必须写在table中且紧跟table中

细线表格 在表格标签中想通过指定外边距为0来实现,其实它是将两条线合并一条线,看上去不舒服

1)给table标签设置bgcolor=“color”;

2)给tr标签设置bgcolor;

3)给table标签设置cellspacing=“1px”;---表格于表格之间距离

由于表格中存储的数据比较复杂,为了方便管理和提升语义,我们可以对表格中存储的数据进行分类

4类

1.表格标题

2.表格的表头信息

3.表格的主体信息

4.表格的页尾信息

每一列标题

//它是自定义比其他行的高度小

thead:指定表格的表头信息

tbody:指定表格主体信息

tfoot:指定表格的附加信息

注意:1.如果我们没有编写tbody,系统会给我们添加tbody

2.如果指定了thead、和tfoot。那么在修改整个表格的高度时 thead和tfoot有自己默认的高度,不会随表格的高度变换而变换。

单元格合并

水平方向上的单元格合并

可以给td标签添加一个rowspan属性,来制定把某一个单元格当做多个单元格来看待

colspan=“数字”行合并 rowspan=”“;列合并在td中写合并后还要删除后面的

//注释掉

//注释掉

//注释掉

注意:合并合并的时他的后面或者下面

html5列表标签代码,HTML5列表标签和表格标签(示例代码)相关推荐

  1. python3图片转代码_python3图片转换二进制存入mysql示例代码

    python3图片转换二进制存入mysql示例代码 发布于 2014-09-29 18:00:01 | 198 次阅读 | 评论: 0 | 来源: 网友投递 Python编程语言Python 是一种面 ...

  2. html5车牌效果,html中车牌号省份简称输入键盘的示例代码

    这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧原理是先写出一个按键的 ...

  3. html边框闪烁代码,纯css实现动态边框的示例代码

    背景 这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图: 动态边框 思路 看到这个效果,我首先想到的是设置元素的border属性,可惜border ...

  4. python简单代码编写-python读写Excel表格的实例代码(简单实用)

    安装两个库:pip install xlrd.pip install xlwt 1.python读excel――xlrd 2.python写excel――xlwt 1.读excel数据,包括日期等数据 ...

  5. 在哪里能收到python实例代码-python实现网站微信登录的示例代码

    最近微信登录开放公测,为了方便微信用户使用,我们的产品也决定加上微信登录功能,然后就有了这篇笔记. 根据需求选择相应的登录方式 python实现网站微信登录的示例代码 微信现在提供两种登录接入方式 移 ...

  6. 猴子偷桃php代码,C++实现猴子吃桃的示例代码

    题目详情 有一天,某只猴子摘了一些桃子,当时吃了一半,又不过瘾,于是就多吃了一个.以后每天如此,到第n天想吃时,发现就只剩下一个桃子.输入n,表示到第n天剩下1个桃子,请计算第一天猴子摘的桃子数.程序 ...

  7. android 3d魔方 代码,css实现3d立体魔方的示例代码

    今天来做一个简单的3d魔方 先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了 一.我们先准备好们的html代码 3d立体魔方 好了我们html代码就准备完成了,首先我们要有一个3d的思维,在 ...

  8. python人机猜拳游戏代码_python 实现人和电脑猜拳的示例代码

    完成人机猜拳互动游戏的开发,用户通过控制台输入实现出拳,电脑通过程序中的随机数实现出拳,每一局结束后都要输出结果.当用户输入n时停止游戏,并输出总结果. import random all = ['石 ...

  9. 人机猜拳代码python_python 实现人和电脑猜拳的示例代码

    完成人机猜拳互动游戏的开发,用户通过控制台输入实现出拳,电脑通过程序中的随机数实现出拳,每一局结束后都要输出结果.当用户输入n时停止游戏,并输出总结果. import random all = ['石 ...

  10. python 打卡记录代码_python实现自动打卡的示例代码

    自己也百度了一下,然后写的,分为了三个部分,见三段代码 代码:主程序代码 import timefrom selenium import webdriverfrom private_info impo ...

最新文章

  1. 清华理工男,跳了7年舞,来华为一年当了PL,这什么小哥哥
  2. 腾讯推出的这款高性能 RPC 开发框架,确定不了解下吗?
  3. 解决删除U盘时提示无法停止‘通用卷’设备的方法
  4. 上海day2--两年前最烧脑的环境变量
  5. 利用GitHub搭建博客自定义域名失效问题解决方法
  6. Java中通过substring和charAt截取字符串并获取指定字符
  7. boost::histogram::detail::accumulator_traits用法的测试程序
  8. resolveType - when is date type for DateFormat used when initialization
  9. sublime text3 package control 报错
  10. uniapp防抖操作
  11. 判断素数的java程序_Java代码实例 判断这个数是否是素数
  12. Android Studio 安装说明
  13. Python——Django-settings.py的内容
  14. arm linux 删除大量文件,ARM Linux根文件系统(Root Filesystem)的制作
  15. 传奇服务器修改变量,课程列表-传奇服务端制作修改教程-4.3变量-学传奇
  16. 微信,该文件已过期或已被清理
  17. 一对一直播源码是什么?一对一直播平台如何成功搭建?
  18. 微信公众平台开发——群发信息
  19. 力扣比赛 5454. 统计全 1 子矩形
  20. 英文文章:中国国家医疗联合体的演化路径和内部交互机制研究:基于复杂系统理论的分析

热门文章

  1. php 8 jit,深入理解PHP8 JIT
  2. python向mysql中添加数据_Django save()方法不向Mysql数据库插入数据
  3. 基于Python实现对各种数据文件的操作
  4. Scrapy框架的学习(4.scrapy中的logging模块记录日志文件以及普通的项目中使用)
  5. opencv 学习笔记6:通道的拆分与合并
  6. Dubbo 入门介绍
  7. opengl加载显示3D模型b3d类型文件
  8. JavaScript实现使用 BACKTRACKING 方法查找集合的幂集算法
  9. boost::mpi模块围绕环传递数据的通信器的测试
  10. boost::hana::test::TestRing用法的测试程序