HTML的表格与列表、块及类与ID
myzbx 2024-12-06 17:37 30 浏览
今天为大家带来了HTML中的表格与列表、块及类与ID的基础知识，首先为大家介绍的是HTML中的表格与列表。
一、HTML中的表格与列表：
相信大家都知道在office、Excel等办公软件中如何制作表格，那大家知道如何在网页上制作表格呢？同时网页上面的注册和登陆表又是怎么制作出来的呢？今天将会为大家详细讲解。
1、表格：
① 了解<table>标签
在网页上的表格制作是用<table>标签来定义的。
② table中的<tr>和<td>标签
l 每个表格有若干行，即用<tr>标签来定义。
l 每行被分割为若干单元格，即用<td>标签来定义。
运行结果：
③ 在<table>元素中添加border属性就可以显示边框，示例：
运行结果：
④ 表单的表格用<th>标签表示，示例：
运行结果：
2、列表
列表分为无序列表、有序列表和定义列表
① 无序列表
l 无序列表是一个项目的列表，此列表项目使用粗体圆点进行标记。
l 无序列表始于<ul>标签，每个列表始于<li>，示例：
运行结果：
l 在<ul>标签中使用type属性可以改变列表前面的符号，示例：
运行结果：
② 有序列表
l 与无序列表不同的是，有序列表使用的是<ol>标签，示例：
运行结果：
在<ol>标签中添加type属性，可以改变列表前面的符号，示例：
运行结果：
③ 定义列表
l 定义列表就是自定义列表，是项目及其注释的组合。
l 自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始，示例：
运行结果：
二、HTML中的块：
1、大多数HTML元素被定义为块级元素或内联元素
① 块级元素在浏览器显示时，通常以新行来开始（和结束），例如：<h1>、<p>、<ul>、<table>等。
② 内联元素在显示时通常不会以新行开始，例如：<b>、<td>、<a>、<img>等。
2、HTML中的<div>元素
HTML<div>元素是块级元素，是可以组合其他HTML元素的容器，简单来说<div>元素一般被用在HTML布局上面，示例：
运行结果：
3、HTML中的<span>元素
HTML<span>元素是内联元素可用作文本的容器，当与css一同使用时，<span>元素可用于为部分文本设置样式属性，示例：
运行结果：
三、HTML中的CLASS和ID:
在上面的示例中我们有看到id标签，在学习过程中很多人搞不懂class类和id标签的区别，现在开始教大家如何区分class类和id标签。
CLASS:
1、Class就我们口中所说的类
2、在css中引用时以“.”开头，并且可以被多个元素调用，例如：
3、在使用中，可以先设置出一个样式，然后被多个元素引用。
ID:
1、id是一种标签
2、在css中引用时以“#”开头，只能定义一个元素，例如：
3、在使用时，只能先确定一个元素，然后才能设置其样式，无法被其它元素引用，是唯一的标签。
希望大家能够从这篇文章学习到HTML的部分知识~
- 上一篇：HTML表格制作
- 下一篇：大数据开发基础之HTML表格与表单
相关推荐
- 斐波那契时钟:据说智商太低的人看不懂，你敢来挑战吗?
-
如果你在一个公共场合，看到了桌上亮着的东西，你会以为它是什么？小夜灯？恭喜你，回答错误。它是Fibonacci钟，专为追求与众不同的“怪胎们”准备。它外表精美，甚至看不出这是一个钟，但它真的是个钟，只...
- 曾都区文峰学校二年级数学组开展钟表制作主题活动
-
为了使学生更加直观地认识钟表、感知钟表，曾都区文峰学校二年级数学组开展了“小钟面大创意”钟表制作主题活动。孩子们大胆设计、精心制作，每一个作品都充满了创意与童趣。 滴答滴答滴答，小小时钟在说话。它都...
- 不能更酷!游戏机改造的报时钟表（游戏机能改成正常机吗）
-
当家里的游戏机逐渐过时的时候，你会把它怎么办？无论是卖掉还是封存珍藏都是不错的办法，不过Rurue0111有更酷的主意：将PlayStation改造成时钟。初代PS正脸有一个圆圆的硕大光驱盒盖，别...
- 计量小知识来了!古代没有钟表，夜晚是如何计算时间的?
-
古人把一昼夜分为十二个时辰，用十二地支名加上“时”字表示。即子时、丑时、寅时、卯时、辰时、巳时、午时、未时、申时、酉时、戌时、亥时。每一时刻相当于今天的两个小时。这十二时辰与现今计时法的关系是：子时－...
- 「爱」的挂钟（爱的时钟）
-
鸳鸯和天鹅算是鸟类中最会秀恩爱的了吧，以它们为元素做设计也应该是件很优雅的事。台湾的好事（haoshi）工作室成立于2009年。设计师坚持纯洁与和平的设计理念，将生活中抽象的好事物以艺术化的形式呈...
- 亚洲最大欧米茄时钟亮相北京王府井百货 钟面直径约7.9米
-
亚洲最大欧米茄(OMEGA)时钟正式亮相北京地标性建筑王府井百货（专题阅读）大楼。作为迄今为止亚洲最大的欧米茄时钟，甫一亮相即吸引到众多游客的目光。至此，位于北京最繁华地带的王府井大街将被欧米茄时钟...
- 初一数学难点“线段与角”，老师手把手教你画图，保证学会
-
期中考试已过去，学生们的学习进了一个新的阶段，每个科目的老师又开始兢兢业业开始了他们的讲授之路。现以初一数学为例，具体说说现阶段的数学学习什么？如何去高效学习？在现阶段，学生们开始学习了一些简单的几何...
- 科技感十足的悬浮时钟（悬浮 时钟）
-
说起来磁悬浮已经不是什么新鲜事儿了，自从有了磁悬浮列车，好像所有的东西都可以跟磁悬浮扯上关系。一个来自瑞典的设计团队FLYTE设计了一款叫做STORY的时钟，利用磁悬浮技术，让时钟的指针飞了起来~▽设...
- 一上数学 第七单元 认识钟表 逐字稿
-
(bluehouse456全文整理）同学们大家好，老师，这里准备了一些图片，你知道是什么吗？是钟表。钟表在我们的生活中经常遇到，你知道钟表有什么作用吗？是的，钟表可以帮助人们计时安排一天的工作和学习...
- 人教版数学一年级上册第七单元《认识钟表》知识要点:
-
一、认识钟面1.钟面结构钟面上有12个数字，按顺时针方向排列，代表1到12时。分针：又细又长的指针，转动较快，指示分钟。时针：又粗又短的指针，转动较慢，指示小时。指针转动方向为顺时针（从左到右）。2...
- 浔阳小学一年级数学组举行钟表制作活动
-
九江新闻网讯（伍巧红）12月23日，浔阳小学一年级数学组组织学生进行制作钟表的活动。孩子们利用双休日与父母共同参与了这项活动。这次钟面设计手工制作活动，属于数学“设计与应用”领域。钟表与学生的生活息息...
- 时钟指针夹角计算公式（时钟夹角万能公式）
-
关于时钟指针夹角问题，小学应该有一定的认识，一些特殊情况下的夹角，学生能顺利求出。在初一数学《角》的教学中，我们对夹角问题会有更深入的了解。设定钟面时间为a时b分，此时，时针与分针夹角是多少呢？有没有...
- 雨城区四小教育集团汉碑校区一年级数学组开展“创意钟面”制作比赛
-
四川新闻网雅安5月6日讯为丰富学生的课余生活，培养创新思维和动手操作能力，复习巩固新学的《钟面的认识》，使学生进一步掌握“整时、几时半、大约几时”等知识点。近日，雨城区四小教育集团汉碑校区一年级数学...
- 一大波奇奇怪怪的钟表来袭，你见过几个?
-
别再问时间都去哪了，其实时间都去了设计师的脑洞里……No.1音乐时钟DINN意大利设计师AlessandroZambelli为钟表品牌Diamantini&Domeniconi设...
- 瑞士国铁钟表Mondaine:分秒不差的精准，穿越七十年的经典
-
在瑞士，时间不仅是数字，更是一种艺术。当你踏入瑞士任何一个火车站，目光一定会被站台上那简洁优雅的挂钟吸引——纯白的钟面、清晰的黑色刻度，再配上一根醒目的红色圆头秒针，仿佛在无声地诉说着瑞士人对精准与美...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)