本文介绍了HTML中的注释语法，用于提高代码可读性；讲解了特殊字符的使用，特别是在显示数据时的替代方法；详细阐述了表格的结构，包括表格标签如5.HTML中的注释和特殊字符
5.1注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!--"开头，以”-->“结束。但是可以使用快捷键 ctrl+/来实现语句的快速注释。
注释是给程序员看的，不会出现在网页中。添加注释是为了更好的解释代码的功能，便于相关人员开发理解和阅读代码，程序是不会执行注释内容的。
5.2特殊字符
在HTML页面中，一些特殊字符的符号很难，或者不方便直接使用，此时我们就可以使用下面的字符来替代。
重点记住空格、小于号、大于号，其它用的相对较少。
HTML表格：
1.表格标签
表格是实际开发中非常实用的标签：
1.表格的主要作用
2.表格的基本语法
1.1表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
表格不是用来布局页面得，是用来展示数据的。
1.2表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
.....
</tr>
....
</table>1.table是用于定义表格的标签
2.tr标签用于定义表格中的行，必须嵌套在table标签中。
3.td用于定义表格中的单元格，必须嵌套在tr标签中。
4.字母td指表格数据(table data)，即单元格的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这些属性要写道表格标签table里面去 -->
<table align="center">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td>56</td>
</tr>
<tr>
<td>张学友</td>
<td>男</td>
<td>58</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td>51</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td>57</td>
</tr>
</table>
</body>
</html>
1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head 缩写）
<table>
<tr>
<th>姓名</th>
....
</tr>
.....
</table>
1.4表格属性
表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置
目的有两个：
1.记住这些英语单词，后面CSS会用
2.直观感受表格的外观形态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这些属性要写道表格标签table里面去 -->
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td>56</td>
</tr>
<tr>
<td>张学友</td>
<td>男</td>
<td>58</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td>51</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td>57</td>
</tr>
</table>
</body>
</html>结果：
表格案例，小说排行榜：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" width="500" height="250" border="1" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>7</td>
<td>鬼吹灯</td>
<td><img src="down.jpg" width="30"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>盗墓笔记</td>
<td><img src="down.jpg" width="30"></td>
<td>124</td>
<td>675432</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>西游记</td>
<td><img src="up.jpg" width="20"></td>
<td>212</td>
<td>7654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>东游记</td>
<td><img src="up.jpg" width="20"></td>
<td>23</td>
<td>75645</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="down.jpg" width="30"></td>
<td>121</td>
<td>7676</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>水浒传</td>
<td><img src="up.jpg" width="20"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>三国演义</td>
<td><img src="up.jpg" width="20"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</table>
</body>
</html>结果：
1.5表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：<thead>标签 表格头部区域、<tbody>标签 表格的主体区域，这样可以更好的分清表格结构。
1.<thead></thead>:用于定义表格头部.<thead>内部必须拥有<tr>标签。一般是位于第一行。
2.<tbody></tbody>：用于定义表格主体，主要用于放数据本体。
1.6合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，这里同学们会最简单的合并单元格即可。
1.合并单元格方式
2.目标单元格
3.合并单元格的步骤
合并单元格的方式：
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan=“合并单元格的个数”
目标单元格：（写合并代码）
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲：
1.先确定是跨行还是跨列合并
2.找到目标单元格。写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>.
3.删除多余的单元格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="500" height="250" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
1.7表格总结
表格学习整体可以分为三部分
1.表格的相关标签
table 标签 tr 行 标签 td 单元格 标签 th 表头单元格 标签 thead 表格头部区域标签
tbody 表格主题区域标签
2.表格的相关属性
3.合并单元格
2.列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序、他作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
2.1无序列表（重点）
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表使用<li>标签定义，无序列表的基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
....
<ul>1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
3.<li>与</li>之间相当于一个容器，可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
2.2有序列表（理解）
在有序列表即为有排序的列表，其各个列表会按一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，排列顺序以数字来显示，并且使用<li>标签来定义列表项。
有序列表的基本语法格式如下：
<ol>
<li>列表项1</td>
<li>列表项2</td>
<li>列表项3</td>
...
</ol>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>粉丝排行榜</h4>
<ol>
<li>蔡徐坤 25000000</li>
<li>王琳凯 10000000</li>
<li>王子异 888888</li>
</ol>
</body>
</html>结果：
1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
2.3自定义列表（重点）
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>1.<dl></dl>里面只能包含<dt>和<dd>。
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
2.4列表总结
注意：
1.学会什么时候用无序列表，什么时候自定义列表。
2.无序列表和自定义列表代码怎么写？
3.列表布局在学习完CSS后再来完成。
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
