HTML的表格与列表、块及类与ID
myzbx 2024-12-06 17:37 39 浏览
今天为大家带来了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表格与表单
相关推荐
- 谷歌大刀阔斧,安卓UI将迎海量细节变更
-
前段时间谷歌宣布,将于北京时间2025年5月14日1时(美国太平洋时间5月13日10时)举行一场特别直播节目,名为《TheAndroidShow:I/OEdition》。该活动由Android...
- Google Drive 通过新的分析功能改善视频播放器体验
-
GoogleDrive推出了一项新功能,可让您衡量上传到GoogleDrive的视频的参与度。Google在一篇博客文章中宣布,它已经更新了视频播放器的“详细信息”面板,新增了“分析”部分,...
- DeepSeek生成Word方案
-
以下是结合DeepSeek生成网页、转PDF再转Word的三步进阶方案,涵盖普通用户与开发者两种实现路径:一、原生方案:HTML→PDF→Word全流程(适合普通用户)生成标准HTML使用DeepSe...
- 如何使用谷歌地图和LightningChart创建地理空间地图图表?
-
LightningChartJS是一款高性能的JavaScript图表工具,专注于性能密集型、实时可视化图表解决方案。LightningChartJS官方最新版免费下载试用,历史版本下载,在...
- 用 mxgraph.js 打造超实用流程图:从入门到精通(附源码)
-
在技术快速发展的当下,流程图作为一种直观展示流程和逻辑关系的工具,在项目管理、软件开发、业务流程梳理等诸多领域发挥着重要作用。今天我就和大家分享一下如何使用mxgraph.js构建功能丰富的流程图...
- 评测:4款免费开源数据可视化JavaScript库
-
交互式数据可视化在很大程度上取决于JavaScript库的任务能力。在这篇文章中,我们将看看四个JavaScript库:D3,InfoVis,Processing.js,和Recline.js。所有这...
- DeepSeek自动生成漂亮的数据分析面板,会计天又塌了!老板超喜欢
-
如果你还在认为Deepseek分析能力强而做图弱时,只能说你根本不了解它。它其实可以自动生成高质量的数据分析面板。先来几个图吓吓你:如果不看标题,你是不是以为这是哪位数据分析高手做的图,嘿嘿,这的确是...
- 手绘风格的数据可视化 Sketchify,让你的图表也萌萌哒
-
作者|naughty来源|oschina.net/taogang/blog/3130390多少年以前,我在一家BI企业负责数据可视化产品的开发,作为产品创新的需要,一篇论文吸引了我的目光,《S...
- 告别单调,Django后台主页改造 - 使用AdminLTE组件
-
前言之前我做了个Django的项目,为了让管理后台更加美观,我对Django(应该说是SimpleUI的)默认的Admin后台主页进行改造,具体可以看这篇文章:项目完成-基于Django3.x版本...
- Mermaid (美人鱼) 一个JS 渲染的图表工具
-
Mermaid是一种基于JavaScript的图表和图表工具,它使用受Markdown启发的文本定义和渲染器来创建和修改复杂的图表。Mermaid的主要目的是帮助文档跟上开发。图表和文档编...
- 分享10+可视图表库, 助你轻松制作精美可视化大屏
-
前言在开发可视化项目的过程中往往涉及到可视化图表,我们看到的很多酷炫的报表,大屏,都用了非常多的图表,接下来我和大家分享一些比较流行的开源免费的图表库.来源:趣谈前端公众号github:h...
- JavaScript Charts更新至v3.15.2
-
JavaScriptCharts是兼容性好的JavaScript、HTML5图表开发工具,能满足大部分的开发需求,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑折线图,蜡烛图,ohl...
- JavaScript Charts更新至v3.17.0
-
JavaScriptCharts兼容性好的JavaScript、HTML5图表开发工具,能满足大部分的开发需求,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑折线图,蜡烛图,ohlc...
- 最实用的大数据可视化分析工具汇总
-
四十三、OpenHeatMapOpenHeatMap简单易用,用户可以用它上传数据、创建地图、交流信息。它可以把数据(如GoogleSpreadsheet的表单)转化为交互式的地图应用,并在网上分享...
- JavaScript Charts v3.17.3发布
-
JavaScriptCharts兼容性好的JavaScript、HTML5图表开发工具,能满足大部分的开发需求,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑折线图,蜡烛图,ohlc...
- 一周热门
- 最近发表
- 标签列表
-
- 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 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)