前端（二）上一篇讲解了html的组成，标签和属性的语法，html的结构，标签的分类，图片标签和超链接标签等，这一篇我们

一前言

上一篇讲解了html的组成，标签和属性的语法，html的结构，标签的分类，图片标签和超链接标签等，这一篇我们继续学习标签。

二列表标签

2.1无序列表

无序列表<ul>，无序列表中的每一项是<li> 英文单词解释如下： ul：unordered list，“无序列表”的意思。 li：list item，“列表项”的意思。如：

<ul>
	<li>默认1</li>
	<li>默认2</li>
	<li>默认3</li>
</ul>

tips：

li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
li又是一个块级容器标签，可以放任何标签，包括ul。

<ul>、<li>都有属性type。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。并且项目符号可以是图片，需要用css去设置（css中讲）

2.2有序列表

有序列表<ol>，里面的每一项是<li> 英文单词解释如下：Ordered List，有序列表的意思。 li：list item，“列表项”的意思。如

<ol >
	<li>呵呵哒1</li>
	<li>呵呵哒2</li>
	<li>呵呵哒3</li>
</ol>

tips：ol和ul就是语义不一样，怎么使用都是一样的。 ol里面只能有li，li必须被ol包裹。li是块级容器标签

属性：type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始

2.3定义列表

定义列表<dl>,里边的每一项是<dt><dd>。英文单词如下：definition list。没有属性。

<dt>：definition title 列表的标题，这个标签是必须的
<dd>：definition description 列表的列表项，如果不需要它，可以不加

tips：

dt、dd只能在dl里面；dl里面只能有dt、dd。
dt、dd都是块级容器标签，想放什么都可以。

三表格标签

表格标签用<table>表示。一个表格<table>是由每行<tr>组成的，每行是由每个单元格<td>组成的。所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。

	<table>
		<tr>
			<td>生命壹号</td>
			<td>23</td>
			<td>男</td>
			<td>黄冈</td>
		</tr>

		<tr>
			<td>许嵩</td>
			<td>29</td>
			<td>男</td>
			<td>安徽</td>
		</tr>

		<tr>
			<td>邓紫棋</td>
			<td>23</td>
			<td>女</td>
			<td>香港</td>
		</tr>

	</table>

<table>属性：

border：指的是表边线和每个单元格线宽度
style="border-collapse:collapse;"：相邻线之间合并为一条样式
width：整个表的宽度
height：整个表的高度，一般不设置，而是设置每一行的高度
bordercolor：指的是表边线和每个单元格线的颜色
align：整个表的对齐方式。属性值可以填：left right center。
bgcolor="#99cc66"：整个表的背景颜色
background="路径src/..."：背景图片。背景图片的优先级大于背景颜色。
dir：公有属性，单元格内容的排列方式(direction)。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

<tr>属性

dir：公有属性，同上
bgcolor：设置这一行的单元格的背景色。注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度
align="center"：一行单元格内容水平居中显示，取值：left、center、right。默认是left
valign="center"：一行单元格内容垂直居中，取值：top、middle、bottom。默认是middle

<td>属性

bgcolor：设置单元格的背景色。

align="center"：单元格内容水平居中显示，取值：left、center、right。默认是left
valign="center"：单元格内容垂直居中，取值：top、middle、bottom。默认是middle

background="路径src/..."：单元格背景图片。
widt：单元格宽度
height：单元格的高度
rowspan：当前单元格垂直方向占据两个位置
colspan：当前单元格在水平方向占据两个位置

其他标签：

<th>标签相当于<td> + <b>+align="center"

<caption>标签标题标签，和tr并列。属性：align相对于整个表的位置。

<thead>标签、<tbody>标签、<tfoot>标签。如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。

四框架标签(了解)

框架标签不能放在<body>标签里面，因为<body>标签代表的只是一个页面，而框架标签代表的是多个页面。于是：<frameset>和<body>只能二选一。

框架的集合用<frameset>表示，然后在<frameset>集合里放入一个一个的框架<frame>

<frameset>标签属性有

rows：水平分割，将框架分为上下部分。写法有两种： 1、绝对值写法：rows="200,*" 其中*代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。 2、相对值写法：rows="30%,*" 其中*代表剩余的。这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。注：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。
cols：垂直分割，将框架分为左右部分。写法有两种： 1、绝对值写法：cols="200,*" 其中*代表剩余的。这里其实包含了两个框架：左边的框架占200个像素，右边的框架占剩下的部分。 2、相对值写法：cols="30%,*" 其中*代表剩余的。这里其实包含了两个框架：左边的框架占30%，右边的框架占70%。注：如果你想将框架分成很多列，在属性值里用逗号隔开就行了。

<frame>标签显示每个页面，属性有：

scrolling="no"：是否需要滚动条。默认值是true。
noresize：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。

bordercolor="#00FF00"：给框架的边框定义颜色。这个属性在框架集合<frameset>中同样适用。颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。
frameborder="0"或frameborder="1"：隐藏或显示边框（框架线）。
name：给框架起一个名字。利用name这个属性，我们可以在框架里进行超链。

五内嵌标签

src="subframe/the_second.html"：内嵌的那个页面
width=800：宽度
height=“150：高度
scrolling="no"：是否需要滚动条。默认值是true。
name="mainFrame"：窗口名称。公有属性。
frameborder="0"或frameborder="1"：隐藏或显示边框（框架线）。

六表单标签

<form>用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。属性有：

name：表单的名称，用于JS来操作或控制表单时使用；
id：表单的名称，用于JS来操作或控制表单时使用；
action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
method：表单数据的提交方式，一般取值：get(默认)和post

action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

<input>标签

type="属性值"：文本类型。属性值可以是：

text（默认）
password：密码类型
radio：单选按钮，名字相同的按钮作为一组进行单选。
checkbox：多选按钮，名字相同的按钮作为一组进行选择。
checked：将单选按钮或多选按钮默认处于选中状态。属性值也是checked，可以省略。
hidden：隐藏框，在表单中包含不希望用户看见的信息
button：普通按钮，结合js代码进行使用。
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
file：文件选择框。提示：如果要限制上传文件的类型，需要配合JS来实现验证。

value="内容"：文本框里的默认内容。

readonly：文本框只读，不能编辑。没有属性值。

disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

<select>标签

下拉标签，<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。他们都是成套出现的

<select>标签的属性：

multiple：可以对下拉列表中的选项进行多选。没有属性值。
size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标签的属性：

selected：预选中。没有属性值。

<textare>标签多行文本输入，属性：

value：提交给服务器的值。
rows="4"：指定文本区域的行数。
cols="20"：指定文本区域的列数。
readonly：只读。

tips：textarea是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文本

<lable>标签

对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

tips：标签只负责语义，样式由css去控制。