文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:有序无序列表,div盛放逻辑版块,table表格

代码小侠客

代码小侠客

2024-04-23 22:55

关注

  DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。DIV元素是用来为html(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

  列表根据有无前后顺序展示分为有序<ol><li>...</li></ol>和无序<ul>lil>...</li></ul>,在网页制作过程,我们可以把一些独立的逻辑部分(什么是逻辑部分?它是页面上相互关联的一组元素.如网页中的独立的栏目版块,就是一个典型的逻辑部分.)划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器.

  那么如何区分这些div容器了?办法和我们每一个人使用身份证差不多,可以为这些div添加clas类名或者id属性名,一般这样展示<divid="版块名称"class="类别名称">…</div>,然后通过css找到这个元素并添加样式.

  假如你想制作一个表格展示数据,使网页上的信息更加丰富,怎么办?建议使用<table>标签,代码展示如下:

  <!DOCTYPEHTML>

  <html>

  <head>

  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  <title>认识table表标签</title>

  <styletype="text/css">

  tabletrtd,th{

  border:1pxsolid#000;

  }

  </style>

  </head>

  <body>

  <tablesummary="本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量">

  <caption>“2012年到2013年库存记录”</caption>

  <tr>

  <th>产品名称</th>

  <th>品牌</th>

  <th>库存量(个)</th>

  <th>入库时间</th>

  </tr>

  ✰通过table标签(什么是表格,它是由一个个单元格cell构成,表格中列td的个数,取决于一行tr中数据单元格的个数),默认table表格在没有添加css样式<styletype="text/css">tabletrtd,th{border:1pxsolid#000;}之前,在浏览器中显示是没有表格线的,总结如下几点:

  1.<tr>…</tr>:表格的一行,所以有几对tr表格就有几行.

  2.<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列.

  3.<th>…</th>:表格的头部的一个单元格,表格表头,文本默认为粗体并且居中显示

  4.<tablesummary="表格简介文本">

  5.caption标签,为表格添加标题和摘要,标题用以描述表格内容,标题的显示位置:表格上方

  <div>标签定义HTML文档中的分隔(DIVision)或部分(section)。div属于web前端的学习内容,其中<div>标签常用于组合块级元素,以便通过样式表来对这些元素进行格式化。<div>可定义文档中的分区或节(division/section)。<div>标签可以把文档分割为独立的、不同的部分。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     676人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     305人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     262人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     366人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     174人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯