网站开发 | HTML知识汇总、总结整理

HTML5学堂（码匠）：本篇文章主要是从头到尾串讲了HTML的知识点，针对HTML4.0和CSS2.0知识进行了总结和整理。学习时，知识点固然重要，但是能将知识点串成线，织成网，形成自己的体系，则需要再下一番功夫。

另外，本篇文章献给我亲爱的学生们使用，希望能够在复习方面能够帮上你们的忙。

标签的基本分类

在原来CSS出现、普及之前，HTML标签有很多种，主要分为结构性、内容性与修饰性的标签。随着CSS的广泛使用，HTML代码当中很多标签都已经不再使用了，比如<i><font>

对于上面提到的标签，我们当前已经不再去这么分类了，仅仅是作为一个了解。而采用了另外一种分类方法——按照标签的显示类型。

根据标签的显示类型，我们可以将元素分为块状元素、行内元素以及其他类型元素。此处需要注意的有两点：

其一在于，并不能够将所有的标签简单的划分为块和行，对于<table>等元素，表现形式与块、行都有所区别，被称为表格系列元素。有关元素的具体分类，详见日志《HTML元素的显示类型》。

第二点需要注意的是，我们要弄清楚块状元素与行内元素，在默认的表现样式上有什么区别。详见《行内元素和块状元素的区别》

对于HTML标签，我们除了基本标签之外，还需要知道HTML注释应当如何书写

标签对SEO的影响

标签的基本嵌套以及标签属性的书写，对于网页的SEO是有一定的影响的。比如说，a标签需要添加title的属性，对于img标签需要添加alt和title的属性。对于标签的合理使用和嵌套，一方面能够有利于SEO，另一方面，能够避免掉在网页中出现布局等方面的问题。

有关标签的基本嵌套请查看《HTML标签嵌套规则》

有关SEO，应该说SEO是个大学问，对于前端来讲，只会涉及SEO中很少的一部分知识，请查看《解读SEO 黑帽白帽》

欢迎沟通交流~HTML5学堂

两组需要练习的标签

1、表单系列元素：我们需要熟悉form表单的一系列元素，然后能够清晰的说出基本属性。

2、表格系列元素：虽然我们使用了DIV+CSS的布局方式替代掉了table的布局方式，但并不意味着，在页面中不去使用table这个元素。通常情况下，table主要用于呈现网页中的一些数据表。

有关这两系列元素，我们来实操一下：

表单系列元素

1. <form action="">
2.     <legend>HTML5学堂</legend>
3.     <input type="text" name="" value="">
4.     <input type="password" name="" value="">
5.     <input type="radio" name="" value="">
6.     <input type="checkbox" name="" value="">
7.     <input type="button" name="" value="">
8.     <input type="submit" name="" value="">
9.     <select name="" id="">
10.         <option value="">梦幻雪冰</option>
11.         <option value="">独行冰海</option>
12.         <option value="">扶、公子</option>
13.     </select>
14.     <textarea name="" id="" cols="30" rows="10">HTML5学堂</textarea>
15. </form>

表格系列元素

1. <table border=1 bordercolor='#f00' cellspacing=1 cellpadding=50>
2.     <caption>标题部分</caption>
3.     <thead>
4.         <tr>
5.             <th colspan=5>你的简历</th>
6.         </tr>
7.     </thead>
8.     <tbody>
9.         <tr>
10.             <td>姓名</td>
11.             <td >你猜</td>
12.             <td >工作</td>
13.             <td colspan=5 rowspan=5><img src="/C:/Users/ibokan/Desktop/1.png"></td>
14.         </tr>
15.         <tr>
16.             <td colspan=2 >背景</td>
17.             <td >中国公民</td>
18.         </tr>
19.         <tr>
20.             <td colspan=2>年龄</td>
21.             <td>20世纪</td>
22.         </tr>
23.         <tr>
24.             <td colspan=2>住址</td>
25.             <td>中国</td>
26.         </tr>
27.         <tr>
28.             <td colspan=2>专业</td>
29.             <td>HTML5</td>
30.         </tr>
31.         <tr>
32.             <td colspan=3 >工作经历</td>
33.             <td>曾经干过很多项目</td>
34.         </tr>
35.         <tr>
36.             <td colspan=3 >自我评价</td>
37.             <td>为人热情诚恳，比较容易融入团队</td>
38.         </tr>
39.     </tbody>
40.     <tfoot>
41.         <tr>
42.             <td colspan=3 >版权信息</td>
43.         </tr>
44.     </tfoot>
45. </table>

1、合理使用thead、tbody、tfoot以及caption标签

2、对于cellspacing和cellpadding要能够区分开

3、熟练使用colspan和rowspan

欢迎沟通交流~HTML5学堂

还有什么？

除了上面的这些之外，还需要注意如下知识：

网页标签的书写规范

1、标签书写在尖括号标识符中

2、标签需成对的出现

3、在起始标记当中可以书写属性/可以定义标签属性

4、标签互相嵌套，形成文档结构

5、文档所有信息必须在html当中，元信息放置在head当中，传递的信息和网页显示内容应当放置在body当中

一些小细节

1、strong、em、i、b标签的区别

2、img的src属性以及src中文件位置关系(路径)的确定

3、为何使用h1标签去嵌套标题，而不使用p标签（虽然效果也能够实现）,为何用p标签去放置段落文本，而不是使用div

4、h1-h6标签当中，哪些是最常用的？为什么呢？

5、table当中，每个单元格的内容在垂直方向上是如何对齐的？

6、常见浏览器的调试工具包括哪些？

7、什么时候我们要去打开不同的浏览器查看兼容问题？

欢迎沟通交流~HTML5学堂