整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
一段带有已删除部分和新插入部分的文本：
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
浏览器支持
所有主流浏览器都支持 <del> 标签。
标签定义及使用说明
<del> 标签定义文档中已删除的文本。
提示和注释
提示：您也可以看看 <ins> 标签如何标记先插入的文本。
提示：<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。
HTML 4.01 与 HTML5之间的差异
无。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| cite | URL | 规定一个解释了文本被删除的原因的文档的 URL。 |
| datetime | YYYY-MM-DDThh:mm:ssTZD | 规定文本被删除的日期和时间。 |
全局属性
<del> 标签支持 HTML 的全局属性。
事件属性
<del> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
这一节以及以后几节我们将对HTML中<body>标签中的各种元素进行一个概述，并对一些基本元素进行练习。
HTML元素：指的是从开始标签到结束标签的所有代码。
举个例子，在《第一个HTML页面如何写？——零基础自学网页制作》这一节中，我们写了这样一个页面"第一个页面.html"。后面的练习我们都在这个文件中进行。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h>第一个网页</h>
<p>千里之行始于足下</p>
</body>
</html>其中"<h>第一个网页</h>"整个代码就可以看做是一个html元素，<h></h>叫做标题标签，加上"第一个网页"这段文字共同构成一个HTML元素。
HTML元素非常多，因为我们可以在页面中显示各种各样的信息，不同的信息载体对应不同的元素。
下面我们就介绍几个常用的html元素。
HTML常用元素使用练习1
NO.1:<h></h>与<hr>
<h></h>这个用来添加标题的元素大家比较熟悉了，这里要介绍一个新的用法。示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1>
<h2>第一个网页</h2>
<h3>第一个网页</h3>
<h4>第一个网页</h4>
<h5>第一个网页</h5>
<h6>第一个网页</h6>
<p>千里之行始于足下</p>
</body>
</html>页面显示效果如图：
大家通过观察可以看出h后面的编号用来控制标题字号大小，仅仅是标题有这种预设，其他元素如果要调整字号的话我们放在以后CSS里讲。
下面看<hr>,示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>第一个网页</h2><hr>
<h3>第一个网页</h3><hr>
<h4>第一个网页</h4><hr>
<h5>第一个网页</h5><hr>
<h6>第一个网页</h6><hr>
<p>千里之行始于足下</p><hr>
</body>
</html>效果如下：
<hr>标签可以为它前面的元素添加分割线，大家注意的是分割线不是下划线，添加下划线的操作我们会在CSS样式表中详细讲解。
NO.2:<p></p>与<br>
<p></p>元素是添加段落的。示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<p>千里之行始于足下值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，
因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元素及属性的指定形成一
个整体认识，以后可以根据需求通过查询手册来自己学习其他元素及其属性的用法。</p><hr>
</body>
</html>效果如图所示：
通过观察发现，即使我们在代码中对段落的文字进行回车操作，但是出现在页面中是没有回车的效果的，文字按照顺序长长的排列在显示器上，非常不利于阅读，因此我们就要介绍常常和p标签连用的<br>换行标签。
示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<p>千里之行始于足下<br>
值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，<br>
因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元<br>
素及属性的指定形成一个整体认识，以后可以根据需求通过查询手册来自己学习其他<br>
元素及其属性的用法。</p><hr>
</body>
</html>效果如图所示：
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
过昨天的学习算是对HTML有了一点点了解，知道了什么是前端，什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。
有常见性就有特殊性，我们使用电脑时经常会用到空格键，在html文档上有时也会使用到空格键等等，那怎么在html上又是以什么形式展示给浏览器解析呢？
浏览器显示结果 | 特殊字符名称 | HTML编辑字符 |
空格 | & n b s p; | |
< | 小于号 | & l t ； |
> | 大于号 | & g t； |
& | 和 | & a m p； |
© | 版权 | & c o p y ； |
作用：在浏览器上清晰美观地显示、展示数据。
表格标签的语法
<table>
<tr>
<td></td>
</tr>
</table>
表格标签：<table></table>，一个table标签中可嵌套多个tr标签。
行标签：<tr></tr>，一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。
单元格标签：<td></td>，一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。
在html中表格不是由横线划分行和列，而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子，里面包含tr标签，这个是一个和table长度差不多的矩形盒子，table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子，td盒子就是单元格。
表格示例：
在html文档中编辑表格标签结构时，除了一个标签一个标签地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table标签中输入：“tr*5>td*3”然后敲回车，就将其表格结构迅速展现出来。
<h1>表格示例：</h1>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面示例：默认状态下表格是没有线条分界，表格对齐方式左对齐。
表头单元格标签
<th></th>：位于表格的第一行或第一列，可以使其内容加粗居中显示。
语法：
<table>
<th>
<td></td>
</th>
</table>
表头表格代码示例：
<h1>表头表格示例：</h1>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面示例：
表格结构标签
表格结构标签分为表格头部标签和表格主体标签。类似于head标签和body标签对于html标签之间的关系。
表格头部标签：<thead></thead>。定义表格头部，嵌套在<table></table>中，一般位于第一行。
表格主体标签：<tbody></tbody>。定义表格主体，嵌套在<table></table>中，主要用于显示数据。
代码示例：
<h1>表格结构标签</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三丰</td>
<td>男</td>
<td>36</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>30</td>
</tr>
</tbody>
</table>运行界面：
表格属性
虽然表格属性在实际开发过程中不常使用，一般都是通过CSS样式设置，但是还是需要记住这些属性关键词，在css中属性关键词也会用到。
注：这些属性都要写在table标签的开始标签中，多个属性之间需要使用空格分隔。
align：表格的对其方式。
align=“left”：在浏览器中居左显示。也是默认显示。
align=“center”：在浏览器中居中显示。
align=“right”：在浏览器中居右显示。
border：表格是否具有边框。
border=”1”：表格添加边框。
cellpadding：单元格内的元素和td边框的距离。
举个例子，如果表格是一件教室的话，桌子就是单元格，桌子上放的书本就是单元格内的元素，书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。
cellspacing：单元格和单元格之间的距离。默认是有空隙的，可设置为零，使其空隙清零，成为一条直线。
还是以教室为表格，桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。
width：表格的宽度，属性值可以是像素值也可以是百分比。
height：表格的高度，属性值可以是像素值也可以是百分比。
代码示例：
<h1>表头表格示例：</h1>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面：
合并单元格
合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后，要将没有写合并的单元格代码的其他合并单元格标签删除掉。
目标单元格：（合并代码存在位置）
跨行合并：最上侧单元格为目标单元格，写合并代码。
跨列合并：最左侧单元格为目标单元格，写合并代码。
合并单元格的方式：
跨行合并：将处于不同行的单元格进行合并
语法：rowspan=“合并单元格个数”
代码示例：
<h1>跨行合并表格：</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>运行界面：
跨列合并：将处于不同列的单元格进行合并
语法：colspan=“合并单元格个数”
代码示例：
<h1>跨列合并表格：</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>运行示例：
今天学习的表格内容就到这里了，明天开始学习列表。
*请认真填写需求信息，我们会在24小时内与您取得联系。
