html:(14):给div命名和table标签

给div命名,使逻辑更加清晰

在上一小节中,我们把一些标签放进<div>里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。

如下两图进行比较,如果设计师把两个图给你,哪个图你看上去能更快的理解呢?是不是右边的那幅图呢。

语法:

<div  id="版块名称">…</div>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div标签</title>
</head>
<body>
<div id="hotList"><h2>热门课程排行榜</h2><ol><li>前端开发面试心法 </li><li>零基础学习html</li><li>javascript全攻略</li></ol>
</div id="learn inglnstructed">
<div><h2>web前端开发导学课程</h2><ul><li>网页专业名词大扫盲 </li><li>网站职位定位指南</li><li>为您解密Yahoo网站制作流程</li></ul>
</div>
</body>
</html>

运行结果

table标签,认识网页上的表格

有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:

想在网页上展示上述表格效果可以使用以下代码:

创建表格的四个元素:

table、tbody、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

 

3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

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

5、<th>…</th>:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

上述代码在浏览器中显示的默认的样式为:

总结:

1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

2、表头,也就是th标签中的文本默认为粗体并且居中显示

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
</head>
<body>
<table><tbody><tr><th>班级</th><th>学生数</th><th>平均成绩</th></tr><tr><td>一班</td><td>30</td><td>89</td></tr><tr><td>二班</td><td>35</td><td>85</td></tr>
<tr><td>三班</td><td>32</td><td>80</td>
</tr></tbody>
</table>
</body>
</html>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/425733.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

缓存过期时间的设置

使用 slidingExpiration 时间时&#xff0c;如果再次命中&#xff0c;将延长缓存项目的生命期使用 expireTime 时&#xff0c;无论是否命中&#xff0c;时间到时&#xff0c;都将失效。 转载于:https://www.cnblogs.com/yyj/p/10373882.html

不要62-三种写法

杭州人称那些傻乎乎粘嗒嗒的人为62&#xff08;音&#xff1a;laoer&#xff09;。 杭州交通管理局经常会扩充一些的士车牌照&#xff0c;新近出来一个好消息&#xff0c;以后上牌照&#xff0c;不再含有不吉利的数字了&#xff0c;这样一来&#xff0c;就可以消除个别的士司机…

杜克大学计算机硕士要几年,2017杜克大学春季不招计算机专业的硕士?

原标题&#xff1a;2017杜克大学春季不招计算机专业的硕士&#xff1f;计算机科学&#xff0c;理工科中常申请的一个专业&#xff0c;每一年都会有大批的计算机同学奔赴战场&#xff0c;准备材料&#xff0c;刷托福GRE考高分&#xff0c;只为等待自己心中梦寐以求学校的那片橄榄…

[剑指offer][JAVA]面试题第[06]题[从尾到头打印链表][栈][递归]

【问题描述】[简单] 输入一个链表的头节点&#xff0c;从尾到头反过来返回每个节点的值&#xff08;用数组返回&#xff09;。示例 1&#xff1a;输入&#xff1a;head [1,3,2] 输出&#xff1a;[2,3,1]限制&#xff1a; 0 < 链表长度 < 10000【解答思路】 1. 常规思路…

jQuery使用(八):运动方法

show()、hide()、toggle()参数&#xff1a;null或(duration,easing,callblack)fadeIn()、fadeout()、fadeToggle()、fadeTo()参数&#xff1a;null或(duration,[opacity],easing,callblack)slideDown(),slideUp(),slideToggle()参数&#xff1a;null或(duration,easing,callbla…

服务器重装后怎么装系统,服务器如何安装系统,小编教你如何安装

相对于普通PC来说&#xff0c;服务器有很多优点&#xff0c;比如在工作上的效率会比PC高出许多&#xff0c;但也有一些缺点其中的服务器系统的安装有时候缺乏人性化就是原因之一了。第一次安装服务器系统&#xff0c;会遇到很多麻烦&#xff0c;下面&#xff0c;小编就给大家带…

html:(15):用css样式给表格添加边框和caption标签

用css样式&#xff0c;为表格加入边框 Table 表格在没有添加 css 样式之前&#xff0c;是没有边框的。这样不便于我们后期合并单元格知识点的讲解&#xff0c;所以在这一节中我们为表格添加一些样式&#xff0c;为它添加边框。 在右侧代码编辑器中添加如下代码&#xff1a; …

Java集合容器面试题

文章目录集合容器概述什么是集合集合的特点集合和数组的区别使用集合框架的好处常用的集合类有哪些&#xff1f;List&#xff0c;Set&#xff0c;Map三者的区别&#xff1f;List、Set、Map 是否继承自 Collection 接口&#xff1f;List、Map、Set 三个接口存取元素时&#xff0…

Ubuntu Linux 解决 bash ./ 没有那个文件或目录 的方法

Ubuntu Linux 解决 bash ./ 没有那个文件或目录 的方法 遇到这个问题是为了sublime配置c/c 编译环境 当运行程序打开终端时 出现以上问题 先新建build system 用以下代码 {"shell_cmd": "g \"${file}\" -o \"${file_path}/${file_base_name}\&qu…

sql server 备份计划

SSMS 1.管理 2.维护计划 3.维护计划向导 或者 1. server 代理 2. 作业 3. 新建作业 备份计划时间尽量选在闲时&#xff0c; 例如午夜 转载于:https://www.cnblogs.com/dream-life/p/10380621.html

荒野行动服务器维护,荒野行动11月30日维护更新完毕服务器已开放 ! 更新优化内容说明...

荒野行动11月30日服务器维护完了&#xff0c;这里手机乐园寻隐者不遇小编给大家带来了具体的优化和更新的内容&#xff0c;咱们往下看&#xff01;亲爱的荒野精英们&#xff1a;欢迎加入《荒野行动》&#xff0c;享受畅快的射击竞技游戏。我们计划在北京时间11月30日凌晨6-8点&…

html:(16):a标签

使用<a>标签&#xff0c;链接到另一个页面 使用<a>标签可实现超链接&#xff0c;它在网页制作中可以说是无处不在&#xff0c;只要有链接的地方&#xff0c;就会有这个标签。 语法&#xff1a; <a href"目标网址" title"鼠标滑过显示的文本…

CodeForces - 660C Hard Process

题意就是 在这个数串中插入1构成一个最长的连续1的区间串 如何做&#xff1f;我们可以对长度进行二分 从1到n二分长度 然后在对这个长度拿到数串中查看是否能构成最终我们想要的最长匹配串 这里我们可以利用一个前缀和数组 统计从1到i的0的个数 由于必然是递增数组 就满足了二…

[Leedcode][JAVA][第198题][打家劫舍][动态规划]

【问题描述】[简单] 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。给定一个代表…

图像质量评价之数据库

视频质量专家组&#xff08;Video Quality Experts Group, VQEG&#xff09;发起的评价算法性能校准项目的主要思想是通过组织主观实验获取图像的主观质量&#xff0c;以主客观质量的一致性来判断客观评价算法的性能。目前常用的数据主要有以下8种&#xff1a; 1&#xff09;LI…

html:(17):img标签和表单标签

认识<img>标签&#xff0c;为网页插入图片 在网页的制作中为使网页炫丽美观&#xff0c;肯定是缺少不了图片&#xff0c;可以使用<img>标签来插入图片。 语法&#xff1a; <img src"图片地址" alt"下载失败时的替换文本" title "提…

技嘉服务器主板装系统,技嘉主板bios设置图解教程

BIOS(基本输入/输出系统)是被固化在计算机CMOS RAM芯片中的一组程序&#xff0c;为计算机提供最初的、最直接的硬件控制。正确设置BIOS可大大提高系统性能。技嘉主板bios设置方法是什么&#xff0c;很多人很多时候都需要进入bios设置&#xff0c;对于电脑高手来说&#xff0c;这…

[剑指offer][JAVA]面试题第[07]题[重建二叉树][递归]

【问题描述】[中等] 输入某二叉树的前序遍历和中序遍历的结果&#xff0c;请重建该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如&#xff0c;给出前序遍历 preorder [3,9,20,15,7] 中序遍历 inorder [9,3,15,20,7] 返回如下的二叉树&#xff1a;3/ …

html:(18):文本输入框,密码输入框,文本域

文本输入框、密码输入框 当用户要在表单中键入字母、数字等内容时&#xff0c;就会用到文本输入框。文本框也可以转化为密码输入框。 语法&#xff1a; <form><input type"text/password" name"名称" value"文本" /> </form&g…

ABAP:从例子学习ABAP

1、插入内表行: *插入内表行: DATA: BEGIN OF man, name(20) TYPE c, high TYPE p DECIMALS 2, weight TYPE p DECIMALS 2, END OF man. DATA: man1 LIKE TABLE OF man. man-name 张参. man-high 1.68. man-weight 120. INSERT man INTO TABLE man1. man-name 刘志. man-hi…