整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
通过为<table></table>标签的cellspacing进行赋值可以调整单元格与单元格之间的空间距离。
示例代码如下：
<table border = "1" width = "100%" cellspacing = "50">页面效果如下：
下面我们删除cellspacing = "50"这段代码看看变化，如图：
通过对比，大家应该明白cellspacing这个属性的作用了吧。
通过为<table></table>标签的cellpadding进行赋值可以调整单元格边框与单元格内容之间的空间距离。
示例代码如下：
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">页面效果如下：
通过与上图对比，我们不难发现变化。
设置表格颜色
这里我们要介绍一个全局属性style，对，你没看错！就是freestyle的那个style！英文翻译过来是"样式"、"风格"的意思。我们通过这个属性可以为表格设置颜色。实际上，可以为任何html元素设置颜色、大小、排列等不同属性！
值得一提的是把style信息如果写到一个独立文件中，并保存为css文件，就是以后我们要学的CSS层叠样式列表了。
这里我们先来简单了解一下它作为html的一个全局属性的用法。
示例代码如下：
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">页面效果如图所示：
我们来分析一下这段代码，写法和其他属性大同小异。
首先也是才有"属性"="数值"的写法，具体是：style=""
是不是和其他属性写法一样？
但是到了双引号里面就不同了，比如width属性只需要为其赋值就可以，比如width="100%"。
而style是在双引号里面再指定属性。例如：style="background-color"。
然后我们再为background-color（背景颜色）属性赋值。
这时，赋值的写法就发生变化了，不是使用=号，而是使用：。
例如style="background-color ： #00ffff；"
大家注意的是为其赋值后，要用；结尾。这个；必须要添加，因为，通过style可以指定多个不同的样式属性，在指定多个样式属性时，我们使用；分割。
#00ffff这个符号是色彩的16进制表示方法，这个颜色是蓝色。
#000000这个符号的颜色是黑色。
#ffffff这个符号是白色。
这个颜色的算法我们会在下一期中详细讲解，感兴趣的小伙伴请关注！
大家想一想。如何为一列单元格指定背景颜色呢？
示例代码如下：我们为表格标题栏赋予绿色。
<tr style = "background-color: #00ff00;"><th>姓名</th><th>年龄</th></tr>页面效果如图所示：
下面我们为"一列一行"、"二列一行"赋予红色。
示例代码如下：
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>页面效果如下：
今天的内容到此结束了，一下是今天示例的全部代码：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
<caption>表格标题</caption>
<tr style = "background-color: #00ff00;">
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>明天将继续为大家讲解页面制作中16进制的颜色指定方式和另外一种表格颜色指定方式。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
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>标签实现文本内链接——零基础自学网页制作
tml字间距怎么设置？
大家好，这节课主要来讲解一下在html中如何设置字间距。通常使用CSS的letter-spacing属性，这个属性可以直接在html元素的style属性中设置，或者在一个独立的CSS文件中。下面是两种常见的设置方法。
·首先来看第一种方法：内栏样式。在p标签的后面加上style，等于下入设置为5个PX，保存运行。可以看到这里设置成了字间距为5个PX。
·当然还可以通过层叠样式表，也就是CSS样式表来实现在一个独立的CSS文件或html文档的head部分的style标签中设置字间距。例如现在新建了一个style点CSS这样的文件，可以设置它的letter-spacing，点10个PX，然后保存。
·并且在html文件中引入CSS样式表，保存运行。稍等一下，要把引号去掉运行。可以看到它有10个PX像素，在letter-spacing属性接受不同的单位，例如像素PX点PT EM等单位，可以根据需要选择合适的单位来设置字间距。
以上就是html如何设置字间距的方式和方法。
题目只能有30个字，不能写全，其实今天我们要学习的内容有三个，第一，下拉列表表单，第二，多行文字输入表单，第三，数据集表单。
开始学习吧！
前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践，今天我们来学习其他包含在<form></form>之间的元素。
带有下拉列表的表单
我们在一些网站填写注册信息时，经常会遇到选择"生活所在地"的操作，因为中国的地名是固定的，因此页面会为我们提供一个下拉列表选项，我们直接点选即可，就不需要输入文字了，这样操作的好处在于不会出现拼写错误。例如：
写这个功能我们需要介绍一组新标签<select></select>。"select"（选择）。在这个标签中再添加<option></option>。"option"（选项）。这样就可以写出带有下拉列表的表单了，示例代码如下：
<select><option></option></select>这段代码我们继续在昨天的"表单.html"文件中添加即可，在<input type = "image" src = "img/示例图片/submit.jpg"/><br>这段代码之前即可！与这个图片提交按钮共用一个<form></form>标签！
下面我们为多选表单添加名称，示例代码如下：
请选择省份<select><option></option></select>下面我们添加不同选项，示例代码如下：
请选择省份
<select >
<option >河北</option>
<option >山东</option>
<option >河南</option>
<option >海南</option>
<option >江苏</option>
<option >安徽</option>
</select>
<br><br>为了规范起见，我们为表单信息添加name和value属性，示例代码如下：
请选择省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山东</option>
<option value="Henan">河南</option>
<option value="Hainan">海南</option>
<option value="Jiangsu">江苏</option>
<option value="Anhui">安徽</option>
</select>
<br><br>大家要注意的是，在下拉列表表单中，name写在<select>中，value写在<option>中。
页面效果如下：
这里告诉大家一个规律，下拉列表表单默认显示第一个<option></option>中的文字内容。
如果您想改变这个默认显示，请在需要显示的<option>中添加selected属性，并赋值为"selected"。
示例代码如下：
请选择省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山东</option>
<option value="Henan" selected="selected">河南</option>
<!--选中这个选项--><option value="Hainan">海南</option><option value="Jiangsu">江苏</option><option value="Anhui">安徽</option></select><br><br>页面效果如图：
多行文字输入表单
我们在西瓜视频上发布视频时会被要求填写视频描述，页面中的输入框不是像下图这么短的单行输入框。
而是多行输入框，如图：
使用<textarea></textarea>标签即可添加这样的输入框，不过要设置row（列）和cols（行）属性的数值。示例代码如下：
<br>请简要描述您的剧本的情节<br><textarea row="3" cols="20"></textarea><br>这段代码添加到</select><br><br>之后，与其共同使用一个<form></form>标签。
下面我们为这个多行输入框添加一些提示和限制。
首先，添加提示文字，和type="text"的<input/>标签一样，都是使用placeholder属性。
第二，我们限制一下字数，使用maxlength（最大长度）属性。
第三，在页面加载完成后，直接让光标停留在输入框中，使用autofocus属性。
下面看看如何写吧，示例代码如下：（不要忘记写好name属性！）
<br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea><br>页面效果如图：
如果刷新页面不能正确显示，请尝试关闭后重新打开！
数据集表单
数据集表单实际上就是一个将不同选项或信息打包上传的设置。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。（W3school）
这个数据集有三个部分组成，首先是<fliedset></fliedset>,这个标签不会显示，只是告诉浏览器这里的数据要打包。
第二是<legend></legend>,"legend"(说明)，这里添加数据集名称。
第三就是我们之前学到的那些标签了。
示例代码如下：
<fliedset> <legend>信息打包</legend> </fliedset>下面我们使用这段代码把form2打包一下吧。示例代码如下：
<form>
<fieldset><!--开始-->
<legend>信息打包</legend><br>
<!--标题-->兴趣爱好：<br>
<input type = "checkbox" name = "hobby" value = "reading"/>读书
<input type = "checkbox" name = "hobby" value = "film"/>电影
<input type = "checkbox" name = "hobby" value = "painting"/>绘画
<input type = "checkbox" name = "hobby" value = "music"/>音乐
<br>
最高学历：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>硕士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
请选择省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山东</option>
<option value="Henan" selected="selected">河南</option><!--选中这个选项-->
<option value="Hainan">海南</option>
<option value="Jiangsu">江苏</option>
<option value="Anhui">安徽</option>
</select>
<br><br><br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea>
<br>
</fieldset><!--结尾-->
<input type = "image" src = "img/示例图片/submit.jpg"/><br>
<input type="reset" /><br>
<input type = "submit" value = "submit"/>
</form>页面效果如下：
今天的内容结束了！
如果您喜欢我的教程请关注我，点赞也能让我充满动力！
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>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
