目录
一、font标签二、特殊字符三、标题标签四、超链接五、列表标签六、img标签七、表格(table)标签八、其他标签(div、span、p)一、font标签
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>font标签</title></head><body><!--font标签是字体标签，它可以用来修改字体的属性（颜色、大小等）font标签 部分常用属性：color属性：修改颜色face属性：修改字体（类型）size属性：修改文本大小--><!-- 需求： 在网页上显示 我是字体标签 ， 并修改字体为 宋体， 颜色为红色。--><font color="red" face="黑体" size="7">font字体标签</font></body></html>
运行效果
二、特殊字符
HTML中某些字符是被预留的。
例如不能使用小于号（<）和大于号（>），浏览器会误认为它们是标签的一部分。
如果希望正确地显示预留字符，必须在 HTML 源码中使用字符实体。
有关html字符实体的更多详细内容可以参考：
/html/html_entities.asp
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>特殊字符</title></head><body><!--< <(小于号)> >(大于号) 空格--><!--需求： 把 <br> 换行标签 变成文本 转换成字符显示在页面上-->我是<br>特殊字符<br><!--通常情况下，HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。-->你好 我是特殊字符</body></html>
运行效果
三、标题标签
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>标题标签</title></head><body><!--标题标签h1-h6都是标题标签超过了7就是按原来的字符大小align属性是对齐属性left 左对齐（默认）center 居中fight 右对齐--><h1 align="left">h1</h1><h2 align="center">h2</h2><h3 align="right">h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><h7>这里是h7超过了h6所以标题没有变化</h7></body></html>
运行效果
四、超链接
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超链接</title></head><body><!--a标签是 超链接href属性设置链接的地址target属性设置那个目标进行跳转_self 表示当前页面进行跳转（默认）_blank 表示打开新页面进行跳转--><a href="/">百度</a><br/><a href="/" target="_self">百度_self</a><br/><a href="/" target="_blank">百度_blank</a><br/></body></html>
运行效果
1.当target="_self"时表示当前页面进行跳转（默认）
2.当target="_blank"时表示打开新页面进行跳转
五、列表标签
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>列表标签</title></head><body><!--使用无序列表，展示甲、乙、丙、丁--><!--ul 是无序列表type属性可以修改列表项前面的符号disc（默认）实心圆square正方形circle空心圆li 是列表项--><ul type="disc"><li>甲</li><li>乙</li><li>丙</li><li>丁</li></ul><!--使用有序列表，展示一、二、三、四--><!--ol是无序列表--><!--li是列表项--><ol><li>一</li><li>二</li><li>三</li><li>四</li></ol></body></html>
运行效果
六、img标签
img 标签可以在 html 页面上显示图片。
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>img标签</title></head><body><!--javaSE中路径分为相对路径和绝对路径相对路径：从工程名开始算绝对路径：盘符:/目录/文件名web中路径分为相对路径和绝对路径相对路径：. 表示当前文件所在目录..表示当前文件所在的上一级目录文件名 表示当前文件所在目录的文件，相当于 ./文件名(./ 可以省略)绝对路径：正确格式是：http://ip:port/工程名/资源路径错误格式是：盘符:/目录/文件名img标签的常用属性：src属性设置图片路径width属性设置图片宽度height属性设置图片高度border属性设置图片边框大小alt属性设置当前指定路径找不到图片时，用来代替显示的文本内容--><!--需求：使用img标签显示一张图片，并修改宽高和边框属性，若找不到对应图片则用文本来提示。--><img src="./about.png" width="100" height="150" border="5"/><img src="./青蛙.png" width="100" height="150" alt="找不到青蛙"/><img src="./狗.png" width="100" height="150" alt="找不到狗"/><img src="./兔.png" width="100" height="150" alt="找不到兔"/><img src="./鸡.png" width="100" height="150" alt="找不到鸡"/></body></html>
运行效果
下图文件路径：这里的html文件和图片文件都在同一个目录，所以使用./来表示当前文件目录，故./图片名.png为图片文件的路径。
alt属性效果：因为指定文件路径中无法找到 鸡.png，所以用指定文本"找不到鸡"来代替。
七、表格(table)标签
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格(table)标签</title></head><body><!--table标签 是表格标签border 设置表格标签width 设置表格宽度height 设置表格高度align 设置表格相对于页面的对齐方式cellspacing 设置单元格间距tr 是行标签th 是表头标签(一般形式都是粗体居中：单元格文本居中+字体加粗)td 是单元格标签align 设置单元格文本对齐方式b 是加粗标签--><!--需求 1： 做一个带表头的，三行，三列的表格，并显示边框。需求 2： 修改表格的宽度，高度，表格的对齐方式，单元格间距。--><table align="center" border="1" width="300" height="300" cellspacing="5"><tr><!--为了给设计表格表头部分的时候提供方便，可以使用th标签--><th>1.1</th><!--th表头标签的效果就是：单元格文本居中+字体加粗。和下面的1.2效果一样--><td align="center"><b>1.2</b></td><!--单元格文本居中+字体加粗--><td>1.3</td></tr><tr><th>2.1</th><td>2.2</td><td>2.3</td></tr><tr><th>3.1</th><td>3.2</td><td>3.3</td></tr></table></body></html>
运行效果
部分属性对应效果：
当border="0"或者没有设置border属性，即没有边框
效果如下：
八、其他标签(div、span、p)
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>其他标签</title></head><body><!--div标签 默认独占一行span标签 它的长度是封装数据的长度p段落标签 默认会在段落上方或下方各空出一行来（如果已有就不再空 ）--><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span><p>p标签1</p><p>p标签2</p></body></html>
运行效果
span标签1和span标签2之间有个空格是因为在跨行时中间的空格部分
又因为html会把多个空格看作成一个，所以中间会有一个空格的效果。
如下蓝色的部分：
02_HTML常用标签（font标签 标题标签 超链接 列表标签 img标签 表格(table)标签 div标签 span标签 p标签）
