天为大家带来了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的部分知识~

篇文章推荐有想法学习前端，已经上路琢磨web前端的朋友们。

之前很多朋友跟我说，自学编程的时候，总是摸不清头脑，一大推问题需要解决，种种书籍需要去啃，字符、单词都需要去记。就感觉要费上很多时间，居然担忧青春饭是否能吃到？

实际上，是实战过少项目，或者没有自己做过。凡事都是从0到1的过程，从1到100就非常简单了

小编为各位想加入程序猿大军，加入前端的朋友们整理了30个实战项目列表，有非常详细的教程。选择几个进行学习，或者发挥自己的想象去完成自己的项目

还有属于小编收集精选的整套自学视频，获取方式在文末

欢迎大家装载+分享。给需要学习的朋友们

项目列表：

1.【HTML5 canvas龙卷风动画制作】

2.【CSS3 七夕表白页面特效】

3.【CSS 20行代码见证七色花动画】

4.【HTML5 敲出一个牛逼的雪景】

5.【CSS3特效拉窗帘】

6.【HTML5游戏项目】

7.【英雄联盟官网特效】

8.【web动画形成原理-滚动】

9.【天猫官网必用技术——懒加载】

10.【CSS3炫酷的轮播特效】

11.【css实现点击图片切换】

12.【CSS3大型企业官网】

13【WEB烟雾梦幻特效】

14.【解析渲染原理-解析渲染原理】

15.【实现3d炫酷相册】

16.【纯html css 打造女神轮播图】

17.【植物大战僵尸网页版】：

18.【阴阳师游戏角色动态展示卡】：

19.【绝地求生官网页面制作】：

20.【canvas喷泉效果】

21.【video音频效果】

22.【鬼畜奔跑吧小绵羊】

23.【网页精灵宠物】

24.【RequireJS来制图】

25.【网页制作贪吃蛇】

26.【vue动画】

27.【vue音乐播放器】

28.【React电影项目】

29.【H5实现一个微信小游戏】

30.【web安全技术】

文末

资料视频教程领取方式：

关注小编后私信【1】可以得到我整理的这些前端资料了（私信方法：点击我头像进我主页有个上面有个私信按钮）

转发+关注并私信小编“1”即可拿走哦！

网络上，有序列表可以使您的 HTML 页面更有组织、简洁且易于阅读。在本文中，我将向您展示如何在 HTML 中创建高质量、有趣的有序列表。您将学习如何在平凡的列表中带来鲜为人知的＂Wow＂效果。让我们开始吧！

一、HTML 中的 ordered list 基础

HTML 中的有序列表（ordered list）使用 <ol> 元素创建，并且对于每个列表项使用 <li> 元素。下面是一段有序列表的基本示例：

html

<ol>
<li>项目 1</li>
<li>项目 2</li>
</ol>

在上面的示例中，您可以看到列表由 <ol> 元素包围，每个列表项使用 <li> 元素表示。

二、美化有序列表

要让您的有序列表更具吸引力，您可以通过使用 CSS 进行累积 зі熄culation。以下是一些建议：

1. 自定义列表部分的风格： affair CAN I USE CSS 属性供您选择，例如颜色、背景图片、边框、边距和填充。此外，可以使用盒子阴影为列表添加浅显的三维效果。
2. 更新列表标记： 更先Progressive Enhancement，在文本内容之前使用数字列表标记，可以让列表更立体。您可以使用 CSS Counter 功能自动结合标记和内容。

css