前端开发之HTML篇二
主要内容：
一、表格标签 -- table
二、表单标签 -- form
三、常用标签属性和分类
四、标签嵌套规则
1️⃣ 表格标签 -- table
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
主要标签如下图所示：
示例如下：
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head >
<body>
<div class="table">
<table>
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列，【注意】这里使用的是th-->
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<tr>
<!--表格列，注意这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>理综</td>
<td>文综</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>文综</td>
<td>语文</td>
<td>理综</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>数学</td>
<td>英语</td>
<td>文综</td>
<td>语文</td>
<td>理综</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>文综</td>
<td>语文</td>
<td>理综</td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td colspan="6">初一五班课表</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
表格美化（添加表格线，合并行或列）
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格美化</title>
</head>
<body>
<div class="table">
<table border="1" cellspacing="0">
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列，【注意】这里使用的是th-->
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<tr>
<td rowspan="2">上午</td>
<!--表格列，注意这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>理综</td>
<td>文综</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>文综</td>
<td>语文</td>
<td>理综</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>数学</td>
<td>英语</td>
<td>文综</td>
<td>语文</td>
<td>理综</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>文综</td>
<td>语文</td>
<td>理综</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">初一五班课表</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
2️⃣ 表单标签 -- form
1、表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（select）。
2、表单作用：
（1）对于用户而言是数据的录入和提交的界面；
（2）表单对于网站而言获取用户信息的途径。
3、语法：
<form>允许出现的表单控件</form>
4、属性如下图所示：
5、控件分类如下所示：
3️⃣ 常用标签属性与分类
一、标签属性
1、HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中。
例如：
<div id="i1">这是一个div标签</div>
<p class="这是p标签"></p>
<a href="http://www.baidu.com">这是一个链接</a>
<input type="button" onclick="addclick()">
2、为何能设置属性？
最终这些标签会通过css去美化，通过javascript来操作，那么这些标签我们可以看成是一个对象，对象就应该有它自己的属性和方法。那么你像上面说到input标签，type=‘button’就是它的属性，onclick=‘addclick()’就是它的方法。
3、标签属性的注意事项
（1）HTML标签除一些特定属性外都可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
（2）属性值要用引号包裹起来，通常使用双引号也可以使用单引号。
（3）属性和属性值不区分大小写。但是推荐小写。
二、标签分类
1、HTML中标签元素分为三种不同类型：块类元素、行内元素、行内块状元素。
常用块状元素：
<div></div>、<p></p>、 <h1>~<h6>、<ul></ul>、<ol></ol>
<li></li>
常用行内元素：
<a></a>、<span></span>、<br>、<b>、<i></i>、<s></s>、
<em></em>、<strong></strong>、<sup></sup>、<sub></sub>
常用行内块状元素
<input>、<img>
2、块状元素的特点 -- display：block
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行，即独占一行；
（2）元素的高度、宽度、行高以及顶和底边距都可设置；
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
3、行内元素的特点 -- display:inline
（1）和其他元素都在一行上；
（2）元素的高度、宽度及顶部和底部边距不可设置；
（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。
4、行内块状元素的特点 -- display:inline-block
（1）和其他元素都在一行上；
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
注意：我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。
4️⃣ 标签嵌套规则
1、块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素。
例如：
<div><div><p></p><h1></h1></div></div> ✔
<a href="https://www.baidu.com"><span></span></a> ✔
<span><div></div></span> ✖
2、块状元素不能放在p标签里面。
例如：
<p><ol><li></li></ol></p> ✖
<p><div></div></p> ✖
3、有几个特殊的块级元素只能内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1~h6、p
