IT培训 / 新闻资讯 / Web开发教程 / web前端：有序无序列表,div盛放逻辑版块,table表格

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

作者：大灰牛博客来源： https://www.cnblogs.com/dhnblog/p/12383692.html点击数：1552发布时间： 2020-03-04 19:47:19

　　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>

　　</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>标签可以把文档分割为独立的、不同的部分。

踩(0)

分享到：

上一篇：web前端：Array.prototype.slice.call()

下一篇：web前端：移动端分辨率+小程序的自适应单位RPX