网页设计
网页，是采用html来进行编写的。
一、html基本介绍
html，它的全称叫超文本标记语言。通俗点说，就是用来编写网页的语言。它目前最新的版本是html5，简称h5。特点如下：
1）可以直接用记事本、gedit等文本软件进行编写，但文件名通常要求以.html结尾。
2）它的语法全部是由标记组成，标记之间可有嵌套包含关系。
3）编写好的html文件，俗称网页。但只有用浏览器打开后，通过流览器自动解释文件中的标记，才能查看效果。
1、网页的基本结构（由头部和主体构成）
<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>...</title>
</head>
<body>
...
</body>
</html>
head:用来存放当前页面的重要信息，一般不展示在html页面上
常见的子标签:<title></title>、<meat>
body:要展示的数据放在body中
2、标记
标记：带有特定含义的记号。
基本书写格式：<标记名>
标记是互联网国际组织w3c统一制定好的，浏览器根据这些标记，来对网页进行解释，从页达到呈现出不同的效果。标记主要分为两大类：双标记和单标记。
1）双标记的格式
<标记名>需要标记的内容</标记名>
含义：<标记名>表示标记的开始（即标记开始起作用），而</标记名>表示标记的结束（即标记停止起作用）
如：<title>我的个人主页</title>，就是一个双标记，用来指定整个网页的标题。
2）单标记的格式
<标记名/>
如：<hr/>就是一个单标记，表示在网页上画一条水平横线。
3、属性
可以在标记名的后面加上一个或多个属性，为该标记指定更个性化的特征。
格式：属性名="值"
注1：若指定标记的某个属性未明确指定，则该属性取其默认值。
例：<h1>你好，我叫龚德文。</h1>
在align属性上未明确指定，则等价于
<h1 align="left">你好，我叫龚德文。</h1>
注2：标记名与属性名之间、属性名与属性名之间用空格隔开，多个属性之间出现的先后顺序无关紧要。
注3：当为某个外面的父标记设置某个属性值时，若里面的子标记未明确设置该属性值，通常情况下，里面的子标记会自动继承外面父标记在该属性上设置的值。若里面的子标记也明确设置了该属性的值，则以子标记自己设置的值优先。
4、常用的标记
（1）注释标记
格式：<!-- 注释内容 -->
说明：注释仅仅是为了以后阅读或维护网页的方便，在网页中添加的一些解释性的文字。需要注意的是，注释标记中的所有内容，浏览器都不会解释执行，都会忽略。
（2）与文本相关的标记
1）标题标记
起强调、有层次的作用。
格式：
<h1>...</h1>：一级标题
<h2>...</h2>：二级标题
...
<h6>...</h6>：六级标题
说明：标题标记会自带一些格式，如字体变大、加粗。
2）普通段落标记
<p>...</p>
注1：在网页中，段落前的空格全部被忽略，段落中文字与文字之间的多个空格或回车，被处理为1个空格。
注2：要想在网页中要插入多个空格字符本身，需要用空格占位符表示，书写形式：
注3：要想在网页中插入空行，不能直接在代码中按回车键，通常用<br/>标记来插入空行。
3）文本格式标记
<b>...</b>：加粗文本
<i>...</i>：倾斜文本
<u>...</u>：文本加下划线
<s>...</s>：文本加删除线
4）文本“选中”标记
<span>...</span>
注1：默认情况下，此标记“选中”的文本在外观上没有任何变化，常设置style属性，来改变显示的外观。
注2：任何标记都有style属性，以用来对标记内容进行“化妆”，常用的设置示例如下：
style="color:red;"：设置文字颜色为红色
style="background-color:yellow;"：设置背景颜色为黄色
style="font-size:24px;"：设置字体大小为24像素
（3）插入图片标记
格式：<img />
常用属性：
1）src：指定图片的来源（即指定图片文件名及其所在的位置）
2）width、height：指定图片的宽度和高度，其值有2种设置形式：
a.设置一个具体的值，如"400px" (px代表像素）。这种设置方式图片显示的宽度和高度不受浏览器窗口大小改变的影响。
b.设置一个比例值，如"50%"，注意此比例值是指占浏览器窗口宽度的百分比，不是图片原始大小的百分比。这种设置方式图片显示的宽度和高度受浏览器窗口大小改变的影响。
注1：若只设置width或height其中一个属性的值，则另一个属性的值浏览器会自动计算，以保持原始图片的宽高比。
注2：若width和height均未明确设置，则浏览器自动按图片的原始大小显示。
3）alt：指定图片不能正常显示时，替代性的文字。此属性通常要求设置，其另一个用途是方便搜索引擎搜录此图片。
4）title：用来指定鼠标移到图片上时，稍作停留后，显示的提示性的文字。
（4）插入音频标记
格式：<audio>音频描述替代文本</audio>
常用属性：
1）src：指定音频文件的来源（即指定音频文件名及其所在的位置）
2）autoplay：出现该属性，则音频在网页加载后自动播放。该属性只有一个值，值也为autoplay。（h5约定，当属性名与属性值相同时，可以只写属性名，省略属性值）
3）controls：如果出现该属性，则向用户显示音频控制面板，面板上有播放、暂停、进度、声音等方面的控制。该属性只有一个值，值也为controls。
4）loop：如果出现该属性，则播放时会循环播放，该属性只有一个值，值也为loop。
5）muted：如果出现该属性，则播放时静音，该属性只有一个值，值也为muted。
6）preload：指定是否预加载音频，该属性常用取值有2个：auto（自动，即预加载）和none（无，即不进行预加载）；若不明确设置该属性，则默认为auto（即自动预加载）
注：audio是html5新增加的网页标记，audio标记之间的“音频描述替代文本” ，仅用于低版本浏览器不支持audio标记时，显示出的替代性或说明性的文字。
（5）插入视频标记
格式：<video>视频描述替代文本</video>
常用属性：
1）audio标记所有的属性都适用于video标记，作用和规定都相同。
2）poster：设置视频的封面图片，该属性值要求指定图片文件名及所在的位置。
3）width、height：用来规定视频播放器的宽度和高度。（其具体设置方法与img标记相同）
（6）超链接标记
超链接：在网页中，能够被点击，并且点击以后能够实现跳转的操作，称为“超链接”。
格式：<a>需要被点击的对象</a>
说明：被点击的对象通常是文字和图片
常用属性：
1）href属性：其值用来指定超链接单击以后跳转的目标。具体分为3种情形：
a.跳转到一个网站。网站的书写格式：http://网址
b.跳转到一个文件。文件可以是网页文件、图片文件、音视频文件或其它普通文件。书写格式：文件名及其所在的位置。
c.跳转到同一个网页指定的地方。具体实现分2步：
第1步：在网页中目标位置处做记号。具体通过a标记的name属性来做记号，格式为：
<a name="记号名"></a>
注：做记号仅供后面链接使用，在网页外观上不会有任何变化。
第2步：根据需要，设置超链接，链接（跳转）到上面定义记号的位置。
格式：<a href="#记号名">...</a>
注1：#不能省略，若省略#，则后面的记号名会被浏览器误当作文件名来处理。
注2：如果只是想回到顶部（或页首），可不用做记号（即省略第1步），仅需在第2步中，将href的值设为#即可（即href="#"）。
2）target属性：用来指定跳转后的目标将在哪个窗口显示。其常用取值有2个：_self（在当前窗口显示，会导致覆盖原网页，该值为target属性的默认值）和_blank（在一个新的空白窗口中显示）；也可以为target属性赋一个自定义的值，作为目标窗口名（这样会导致链接目标总是在同一个窗口中显示）
（7）表格标记
在网页中，表格被认为是由一行一行构成，每一行又由一个一个单元格构成。表格、行都是一个用来方便理解的“逻辑”上的概念，真正的数据实质都是放在单元格中。
格式：
<table>
<tr>
<td>数据</td>
<td>数据</td>
...
</tr>
...
</table>
其中table标记代表表格，tr标记代表表格中的行，td标记代行中的单元格。
常用属性：
1）border：设置表格边框线的粗细。默认值为0，即没有边框线。数字越大，边框越粗。
2）cellspacing：设置表格中单元格与单元格之间的间距，默认间距值为2，若设为0，则没有间距。
3）width、height：宽度和高度，通常设置为一个具体的数字，单位默认为像素px。经常作用于table标记上时，表示设置表格整体的宽和高；height还经常作用于tr标记上，表示设置某一行的高度；width还经常作用于td标记上，表示设置该单元格所在“列”的宽度。
4）align：对齐方式。取值有3个（left、center、right，分别代表左对齐、居中对齐、右对齐）。作用于table标记上时，表示设置整个表格对象在浏览器窗口中的对齐方式；作用于tr或td标记上时，表示设置某一行或某一单元格中文本的对齐方式。
5）colspan和rowspan：单元格合并跨列和单元格合并跨行。这2个属性要求必须设置在单元格标记td或th上，其值为一个数字，用来表示该置了该属性的单元格跨越了几列或几行。
其它说明：
1）表格中的单元格td标记，根据情况，可用th标记替换。区别在于：一方面，外观上th标记的内容会自动居中并加粗；另一方面，从语义上来说，th规定用来表示列标题或行标题单元格（如果只是单纯的居中并加粗，应使用align属性和b标记来实现）
2）可以通过<caption>...</caption>标记为表格添加标题。通常书写在表格第一行的前面。即<table>标记和第一个<tr>标记之间。caption标记添加的标题会固定在表格上方居中显示，不建议使用<h1>这样的标记来表示表格的标题（<h1>这样的标记通常用来表示文章的标题）
3）可以对表格的行<tr>...</tr>，根据语义，进行“逻辑”上的分组，一般可分为3组，即表头、表体、表尾。分别用以下标记表示：
<thead>...</thead>代表表头
<tbody>...</tbody>代表表体
<tfoot>...</tfoot>代表表尾
注1：表头、表体、表尾3组并不需要必须同时出现。如可以只有表头和表体、或只有表体和表尾。但表体是必须有的。
注2：分组的目的通常是为了方便统一设计某一部分的样式（即格式），分组不是必须的，但建议尽量分组。
（8）列表标记
分为有序列表标记和无序列表标记。
有序列表：适用于任何强调顺序的项目列表（即顺序不能随意交换），如比赛名次列表、提供完成某一任务的分步说明。
无序列表：与有序列表相反，适用于列表项的顺序不太重要的情况（即顺序可以根据需要进行交换）。
1）有序列表的格式：
<ol>
<li>列表项1></li>
<li>列表项2></li>
...
</ol>
2）无序列表的格式：
<ul>
<li>列表项1></li>
<li>列表项2></li>
...
</ul>
注1：ol、ul仅仅表示列表的类型，真正的列表项内容必须写在<li>..</li>标记中，不能直接写在<ol>...</ol>和<ul>...</ul>标记中。
注2：列表可以进行嵌套。即一个列表项li中，里面的内容又是一个ol有序列表或ul无序列表。
常用属性：
1）type：设置ol和ul，前面显示的符号类型。默认情况下，ol前面显示的是数字、ul前面显示的是实心圆。
a.对于ol有序列表，type可设为以下5种：
第一种：设为1，默认值，数字有序列表，表现形式为1、2、3、4 ；
第二种：设为a， 小写字母有序列表，表现形式为a、b、c、d ；
第三种：设为A， 大写字母有序列表，表现形式为A、B、C、D ；
第四种：设为i， 小写罗马字母有序列表，表现形式为i、ii、iii、iv ；
第五种：设为I， 大写罗马字母有序列表，表现形式为I、II、III、IV ；
b.对于ul无序列表，type可设为以下3种：
第一种：设为disc， 默认值，表现形式为实心圆 ；
第二种：设为circle， 表现形式为空心圆 ；
第三种：设为square， 表现形式为实心方块；
2）start：仅对ol有序列表有效，设置列表的起始编号。
3）reversed：仅对ol有序列表有效，设置列表倒着编号。该属性只有一个值，也为reversed 。
4）value：仅对ol有序列表中的li有效，即该属性应设置在ol有序列表的某个li标记上，用来人工指定该li列表项的编号。
（9）表单标记
表单主要提供一个供用户输入的界面，用来搜集用户输入的信息，常用于登录、注册等场合。
主要格式：
<form>
各类输入标记
</form>
说明：form是表单，是一个逻辑上的概念，具体的各项用户输入数据的搜集，由各类输入标记来实现。为了界面的美观，form标记中也可以嵌入其它非输入标记，如<p>段落标记、<table>表格标记等。
表单中的各类输入标记主要分为3大类：input输入标记、select选择列表输入标记、textarea多行文本输入标记。
1、input输入标记
格式：<input />
常用属性：type，即输入的类型，type属性的取值不同，输入界面的表现形式也不同，该属性常用取值如下：
1）"text"：表示普通文本输入框。
2）"password"：表示密码输入框。
注：当type属性取值为"text"或"password"时，可额外同时指定以下属性：
a. maxlength：该属性用来指定输入数据的最大长度。
b.placeholder：占位符。该属性用来说明输入框中没有输入信息时，在框中给用户的一些提示性的文字；一旦框中有数据输入，该提示性文字自动消失。
c.required：该属性指定框中必须输入信息，不能为空。（即所谓的“必填项”）。一般在“提交”表单时浏览器会自动检查，若设置了required属性的文本框未填入任何信息，则提交 信息失败，并同时给出提示。该属性只有一个值，也叫“required”。
3）"checkbox"：表现形式为打对勾或取消打对勾。
4）"radio"：表现形式为单选按钮。该类型值，通常要求同时指定该单选按钮所属的组别，组别相同的单选钮（即同一组中），只能选取其中一个。指定组别通过name属性来设置，name属性值相同的单选按钮，被归为同一组。（若某个按钮未指定name属性，则该按钮不属于任何组别，单独为一组，这样的单选按钮，通常没有意义）。
注：当type属性取值为"checkbox"或"radio"时，可额外同时指定以下属性：
a. checked：表示该复选框或单选钮初始状态为选中状态。该属性只有一个值，也叫“checked”。
b. required：必填项。如果是复选框，则该复选框在提交时必须选中（否则不能提交)；如果是一组单选钮，则在提交时必须选中其中一个（若都未选中，则无法提交）
5）"button"：普通按钮。该按钮通常还需要进一步同时设置value属性，来指定按钮上显示的文本。（因为对于按钮来说，文字是按钮本身的一部分）
6）"image"：图片按钮。该按钮通常还需要进一步同时设置src属性，来指定按钮上显示的图片。
2.select选择列表输入标记
格式：
<select>
<option>选项值1</option>
<option>选项值2</option>
。。。
</select>
含义：提供一个选项列表，供用户选择，需要注意，具体的选项值必须放在
<option>...</option>标记中。
3.textarea多行文本输入标记
格式：<textarea>...</textarea>
常用属性：rows(行数）和cols（列数）,这两个属性用来指定多行文本域的默认显示 大小（即默认显示几行几列，超过部分不显示，超过部分通常可以滚动条滚动来显示）
其他说明：
1）textarea多行文本域默认拖动右下角可改变大小，可通过设置样式来实现，具体写法为：style="resize:none;"
2）<textarea>...</textarea>标记中的...为多行文本域中默认“输入”的文本内容。
3）placeholder可用来指定当用户未输入任何信息时，给出的提示性文本。
网页，是采用html来进行编写的。
一、html基本介绍
html，它的全称叫超文本标记语言。通俗点说，就是用来编写网页的语言。它目前最新的版本是html5，简称h5。特点如下：
1）可以直接用记事本、gedit等文本软件进行编写，但文件名通常要求以.html结尾。
2）它的语法全部是由标记组成，标记之间可有嵌套包含关系。
3）编写好的html文件，俗称网页。但只有用浏览器打开后，通过流览器自动解释文件中的标记，才能查看效果。
1、网页的基本结构（由头部和主体构成）
<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>...</title>
</head>
<body>
...
</body>
</html>
head:用来存放当前页面的重要信息，一般不展示在html页面上
常见的子标签:<title></title>、<meat>
body:要展示的数据放在body中
2、标记
标记：带有特定含义的记号。
基本书写格式：<标记名>
标记是互联网国际组织w3c统一制定好的，浏览器根据这些标记，来对网页进行解释，从页达到呈现出不同的效果。标记主要分为两大类：双标记和单标记。
1）双标记的格式
<标记名>需要标记的内容</标记名>
含义：<标记名>表示标记的开始（即标记开始起作用），而</标记名>表示标记的结束（即标记停止起作用）
如：<title>我的个人主页</title>，就是一个双标记，用来指定整个网页的标题。
2）单标记的格式
<标记名/>
如：<hr/>就是一个单标记，表示在网页上画一条水平横线。
3、属性
可以在标记名的后面加上一个或多个属性，为该标记指定更个性化的特征。
格式：属性名="值"
注1：若指定标记的某个属性未明确指定，则该属性取其默认值。
例：<h1>你好，我叫龚德文。</h1>
在align属性上未明确指定，则等价于
<h1 align="left">你好，我叫龚德文。</h1>
注2：标记名与属性名之间、属性名与属性名之间用空格隔开，多个属性之间出现的先后顺序无关紧要。
注3：当为某个外面的父标记设置某个属性值时，若里面的子标记未明确设置该属性值，通常情况下，里面的子标记会自动继承外面父标记在该属性上设置的值。若里面的子标记也明确设置了该属性的值，则以子标记自己设置的值优先。
4、常用的标记
（1）注释标记
格式：<!-- 注释内容 -->
说明：注释仅仅是为了以后阅读或维护网页的方便，在网页中添加的一些解释性的文字。需要注意的是，注释标记中的所有内容，浏览器都不会解释执行，都会忽略。
（2）与文本相关的标记
1）标题标记
起强调、有层次的作用。
格式：
<h1>...</h1>：一级标题
<h2>...</h2>：二级标题
...
<h6>...</h6>：六级标题
说明：标题标记会自带一些格式，如字体变大、加粗。
2）普通段落标记
<p>...</p>
注1：在网页中，段落前的空格全部被忽略，段落中文字与文字之间的多个空格或回车，被处理为1个空格。
注2：要想在网页中要插入多个空格字符本身，需要用空格占位符表示，书写形式：
注3：要想在网页中插入空行，不能直接在代码中按回车键，通常用<br/>标记来插入空行。
3）文本格式标记
<b>...</b>：加粗文本
<i>...</i>：倾斜文本
<u>...</u>：文本加下划线
<s>...</s>：文本加删除线
4）文本“选中”标记
<span>...</span>
注1：默认情况下，此标记“选中”的文本在外观上没有任何变化，常设置style属性，来改变显示的外观。
注2：任何标记都有style属性，以用来对标记内容进行“化妆”，常用的设置示例如下：
style="color:red;"：设置文字颜色为红色
style="background-color:yellow;"：设置背景颜色为黄色
style="font-size:24px;"：设置字体大小为24像素
（3）插入图片标记
格式：<img />
常用属性：
1）src：指定图片的来源（即指定图片文件名及其所在的位置）
2）width、height：指定图片的宽度和高度，其值有2种设置形式：
a.设置一个具体的值，如"400px" (px代表像素）。这种设置方式图片显示的宽度和高度不受浏览器窗口大小改变的影响。
b.设置一个比例值，如"50%"，注意此比例值是指占浏览器窗口宽度的百分比，不是图片原始大小的百分比。这种设置方式图片显示的宽度和高度受浏览器窗口大小改变的影响。
注1：若只设置width或height其中一个属性的值，则另一个属性的值浏览器会自动计算，以保持原始图片的宽高比。
注2：若width和height均未明确设置，则浏览器自动按图片的原始大小显示。
3）alt：指定图片不能正常显示时，替代性的文字。此属性通常要求设置，其另一个用途是方便搜索引擎搜录此图片。
4）title：用来指定鼠标移到图片上时，稍作停留后，显示的提示性的文字。
（4）插入音频标记
格式：<audio>音频描述替代文本</audio>
常用属性：
1）src：指定音频文件的来源（即指定音频文件名及其所在的位置）
2）autoplay：出现该属性，则音频在网页加载后自动播放。该属性只有一个值，值也为autoplay。（h5约定，当属性名与属性值相同时，可以只写属性名，省略属性值）
3）controls：如果出现该属性，则向用户显示音频控制面板，面板上有播放、暂停、进度、声音等方面的控制。该属性只有一个值，值也为controls。
4）loop：如果出现该属性，则播放时会循环播放，该属性只有一个值，值也为loop。
5）muted：如果出现该属性，则播放时静音，该属性只有一个值，值也为muted。
6）preload：指定是否预加载音频，该属性常用取值有2个：auto（自动，即预加载）和none（无，即不进行预加载）；若不明确设置该属性，则默认为auto（即自动预加载）
注：audio是html5新增加的网页标记，audio标记之间的“音频描述替代文本” ，仅用于低版本浏览器不支持audio标记时，显示出的替代性或说明性的文字。
（5）插入视频标记
格式：<video>视频描述替代文本</video>
常用属性：
1）audio标记所有的属性都适用于video标记，作用和规定都相同。
2）poster：设置视频的封面图片，该属性值要求指定图片文件名及所在的位置。
3）width、height：用来规定视频播放器的宽度和高度。（其具体设置方法与img标记相同）
（6）超链接标记
超链接：在网页中，能够被点击，并且点击以后能够实现跳转的操作，称为“超链接”。
格式：<a>需要被点击的对象</a>
说明：被点击的对象通常是文字和图片
常用属性：
1）href属性：其值用来指定超链接单击以后跳转的目标。具体分为3种情形：
a.跳转到一个网站。网站的书写格式：http://网址
b.跳转到一个文件。文件可以是网页文件、图片文件、音视频文件或其它普通文件。书写格式：文件名及其所在的位置。
c.跳转到同一个网页指定的地方。具体实现分2步：
第1步：在网页中目标位置处做记号。具体通过a标记的name属性来做记号，格式为：
<a name="记号名"></a>
注：做记号仅供后面链接使用，在网页外观上不会有任何变化。
第2步：根据需要，设置超链接，链接（跳转）到上面定义记号的位置。
格式：<a href="#记号名">...</a>
注1：#不能省略，若省略#，则后面的记号名会被浏览器误当作文件名来处理。
注2：如果只是想回到顶部（或页首），可不用做记号（即省略第1步），仅需在第2步中，将href的值设为#即可（即href="#"）。
2）target属性：用来指定跳转后的目标将在哪个窗口显示。其常用取值有2个：_self（在当前窗口显示，会导致覆盖原网页，该值为target属性的默认值）和_blank（在一个新的空白窗口中显示）；也可以为target属性赋一个自定义的值，作为目标窗口名（这样会导致链接目标总是在同一个窗口中显示）
（7）表格标记
在网页中，表格被认为是由一行一行构成，每一行又由一个一个单元格构成。表格、行都是一个用来方便理解的“逻辑”上的概念，真正的数据实质都是放在单元格中。
格式：
<table>
<tr>
<td>数据</td>
<td>数据</td>
...
</tr>
...
</table>
其中table标记代表表格，tr标记代表表格中的行，td标记代行中的单元格。
常用属性：
1）border：设置表格边框线的粗细。默认值为0，即没有边框线。数字越大，边框越粗。
2）cellspacing：设置表格中单元格与单元格之间的间距，默认间距值为2，若设为0，则没有间距。
3）width、height：宽度和高度，通常设置为一个具体的数字，单位默认为像素px。经常作用于table标记上时，表示设置表格整体的宽和高；height还经常作用于tr标记上，表示设置某一行的高度；width还经常作用于td标记上，表示设置该单元格所在“列”的宽度。
4）align：对齐方式。取值有3个（left、center、right，分别代表左对齐、居中对齐、右对齐）。作用于table标记上时，表示设置整个表格对象在浏览器窗口中的对齐方式；作用于tr或td标记上时，表示设置某一行或某一单元格中文本的对齐方式。
5）colspan和rowspan：单元格合并跨列和单元格合并跨行。这2个属性要求必须设置在单元格标记td或th上，其值为一个数字，用来表示该置了该属性的单元格跨越了几列或几行。
其它说明：
1）表格中的单元格td标记，根据情况，可用th标记替换。区别在于：一方面，外观上th标记的内容会自动居中并加粗；另一方面，从语义上来说，th规定用来表示列标题或行标题单元格（如果只是单纯的居中并加粗，应使用align属性和b标记来实现）
2）可以通过<caption>...</caption>标记为表格添加标题。通常书写在表格第一行的前面。即<table>标记和第一个<tr>标记之间。caption标记添加的标题会固定在表格上方居中显示，不建议使用<h1>这样的标记来表示表格的标题（<h1>这样的标记通常用来表示文章的标题）
3）可以对表格的行<tr>...</tr>，根据语义，进行“逻辑”上的分组，一般可分为3组，即表头、表体、表尾。分别用以下标记表示：
<thead>...</thead>代表表头
<tbody>...</tbody>代表表体
<tfoot>...</tfoot>代表表尾
注1：表头、表体、表尾3组并不需要必须同时出现。如可以只有表头和表体、或只有表体和表尾。但表体是必须有的。
注2：分组的目的通常是为了方便统一设计某一部分的样式（即格式），分组不是必须的，但建议尽量分组。
（8）列表标记
分为有序列表标记和无序列表标记。
有序列表：适用于任何强调顺序的项目列表（即顺序不能随意交换），如比赛名次列表、提供完成某一任务的分步说明。
无序列表：与有序列表相反，适用于列表项的顺序不太重要的情况（即顺序可以根据需要进行交换）。
1）有序列表的格式：
<ol>
<li>列表项1></li>
<li>列表项2></li>
...
</ol>
2）无序列表的格式：
<ul>
<li>列表项1></li>
<li>列表项2></li>
...
</ul>
注1：ol、ul仅仅表示列表的类型，真正的列表项内容必须写在<li>..</li>标记中，不能直接写在<ol>...</ol>和<ul>...</ul>标记中。
注2：列表可以进行嵌套。即一个列表项li中，里面的内容又是一个ol有序列表或ul无序列表。
常用属性：
1）type：设置ol和ul，前面显示的符号类型。默认情况下，ol前面显示的是数字、ul前面显示的是实心圆。
a.对于ol有序列表，type可设为以下5种：
第一种：设为1，默认值，数字有序列表，表现形式为1、2、3、4 ；
第二种：设为a， 小写字母有序列表，表现形式为a、b、c、d ；
第三种：设为A， 大写字母有序列表，表现形式为A、B、C、D ；
第四种：设为i， 小写罗马字母有序列表，表现形式为i、ii、iii、iv ；
第五种：设为I， 大写罗马字母有序列表，表现形式为I、II、III、IV ；
b.对于ul无序列表，type可设为以下3种：
第一种：设为disc， 默认值，表现形式为实心圆 ；
第二种：设为circle， 表现形式为空心圆 ；
第三种：设为square， 表现形式为实心方块；
2）start：仅对ol有序列表有效，设置列表的起始编号。
3）reversed：仅对ol有序列表有效，设置列表倒着编号。该属性只有一个值，也为reversed 。
4）value：仅对ol有序列表中的li有效，即该属性应设置在ol有序列表的某个li标记上，用来人工指定该li列表项的编号。
（9）表单标记
表单主要提供一个供用户输入的界面，用来搜集用户输入的信息，常用于登录、注册等场合。
主要格式：
<form>
各类输入标记
</form>
说明：form是表单，是一个逻辑上的概念，具体的各项用户输入数据的搜集，由各类输入标记来实现。为了界面的美观，form标记中也可以嵌入其它非输入标记，如<p>段落标记、<table>表格标记等。
表单中的各类输入标记主要分为3大类：input输入标记、select选择列表输入标记、textarea多行文本输入标记。
1、input输入标记
格式：<input />
常用属性：type，即输入的类型，type属性的取值不同，输入界面的表现形式也不同，该属性常用取值如下：
1）"text"：表示普通文本输入框。
2）"password"：表示密码输入框。
注：当type属性取值为"text"或"password"时，可额外同时指定以下属性：
a. maxlength：该属性用来指定输入数据的最大长度。
b.placeholder：占位符。该属性用来说明输入框中没有输入信息时，在框中给用户的一些提示性的文字；一旦框中有数据输入，该提示性文字自动消失。
c.required：该属性指定框中必须输入信息，不能为空。（即所谓的“必填项”）。一般在“提交”表单时浏览器会自动检查，若设置了required属性的文本框未填入任何信息，则提交 信息失败，并同时给出提示。该属性只有一个值，也叫“required”。
3）"checkbox"：表现形式为打对勾或取消打对勾。
4）"radio"：表现形式为单选按钮。该类型值，通常要求同时指定该单选按钮所属的组别，组别相同的单选钮（即同一组中），只能选取其中一个。指定组别通过name属性来设置，name属性值相同的单选按钮，被归为同一组。（若某个按钮未指定name属性，则该按钮不属于任何组别，单独为一组，这样的单选按钮，通常没有意义）。
注：当type属性取值为"checkbox"或"radio"时，可额外同时指定以下属性：
a. checked：表示该复选框或单选钮初始状态为选中状态。该属性只有一个值，也叫“checked”。
b. required：必填项。如果是复选框，则该复选框在提交时必须选中（否则不能提交)；如果是一组单选钮，则在提交时必须选中其中一个（若都未选中，则无法提交）
5）"button"：普通按钮。该按钮通常还需要进一步同时设置value属性，来指定按钮上显示的文本。（因为对于按钮来说，文字是按钮本身的一部分）
6）"image"：图片按钮。该按钮通常还需要进一步同时设置src属性，来指定按钮上显示的图片。
2.select选择列表输入标记
格式：
<select>
<option>选项值1</option>
<option>选项值2</option>
。。。
</select>
含义：提供一个选项列表，供用户选择，需要注意，具体的选项值必须放在
<option>...</option>标记中。
3.textarea多行文本输入标记
格式：<textarea>...</textarea>
常用属性：rows(行数）和cols（列数）,这两个属性用来指定多行文本域的默认显示 大小（即默认显示几行几列，超过部分不显示，超过部分通常可以滚动条滚动来显示）
其他说明：
1）textarea多行文本域默认拖动右下角可改变大小，可通过设置样式来实现，具体写法为：style="resize:none;"
2）<textarea>...</textarea>标记中的...为多行文本域中默认“输入”的文本内容。
3）placeholder可用来指定当用户未输入任何信息时，给出的提示性文本。
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
