html基本标签
1、文件标签:组成html文件的基本标签
<html><-根标签-><head><-引入外部资源、定义属性-><title>title</title><-标题标签-></head><body><-体标签-><font color=green>hello world</font><br/><font color=red>hello world</font></body>
</html>
2、文本标签:和文字有关的标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>你好<br><!--换成标签-->你好<br><!--标题标签h1到h6--><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h5>标题6</h5><!--段落标签p--><p>第一段</p><p>第二段</p><p>第三段</p><!--显示一条水平线hr--><hr><!--b标签,加粗-->啊啊啊啊啊<br><b>啊啊啊啊啊</b><br><!--斜体--><i>啊啊啊啊啊</i><br><!--字体标签,font,已经淘汰--><font color="#FF00FF" size="10" face="楷体">啊啊啊啊啊</font><br><!--文本剧中,已经淘汰--><center>啊啊啊啊啊啊啊</center>
</body>
</html>
简单网页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>啊啊啊啊啊</title>
</head>
<body><h1>aaaaaa</h1><hr color="#ff0000"><p><font color="blue">啊啊啊啊啊啊</font>啊啊啊啊啊啊啊<b><i>啊啊啊啊啊啊</i></b>啊啊啊</p><p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><hr color="#00ff00"><font color="#ffe4c4"><center>aaaaa aaa<br>bbbbbbbbbbb</center></font>
</body>
</html>
3、图片标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片标签</title>
</head>
<body><img src="image/8c33674415e050b1b1ad845d764f763.png" alt="火红">
</body>
</html>
4、列表标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签</title>
</head>
<body><!--列表标签,有序列表--><ol type="A"><li>第一步</li><li>第二步</li><li>第三步</li></ol><!--列表标签,无序列表--><ul><li>第一步</li><li>第二步</li><li>第三步</li></ul>
</body>
</html>
5、连接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>连接标签</title>
</head>
<body><!--连接标签,href指向要跳转的连接--><a href="https://www.baidu.com/" target="_self">点我</a><br><!--打开新窗口,跳转到新连接,target指定打开资源的方式_self在当前页面打开,_blank新打开窗口打开资源--><a href="https://www.baidu.com/" target="_blank">点我</a><br><a href="./列表标签.html" target="_blank">点我</a><br><a href="mailto:hmy123@qq.com" target="_blank">点我</a><br><a href="https://www.baidu.com" target="_blank"><img src="image/8c33674415e050b1b1ad845d764f763.png" alt="火红"></a>
</body>
</html>
6、块标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>块标签</title>
</head>
<body><!--文字在一行展示--><span>aaaaaaaa</span><span>bbbbbbbb</span><!--默认换行--><div>aaaaaaaa</div><div>bbbbbbbb</div>
</body>
</html>
7、语义化标签:提高程序可读性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>啊啊啊啊啊</title>
</head>
<body><!--定义头--><header><h1>aaaaaa</h1></header><hr color="#ff0000"><p><font color="blue">啊啊啊啊啊啊</font>啊啊啊啊啊啊啊<b><i>啊啊啊啊啊啊</i></b>啊啊啊</p><p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><hr color="#00ff00"><!--定义结尾,提高程序刻度性--><footer><font color="#ffe4c4"><center>aaaaa aaa<br>bbbbbbbbbbb</center></font></footer>
</body>
</html>
8、表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title>
</head>
<body><table border="1" width="500" bgcolor="#ffe4c4"><thead><!--定义头部分--><caption>成绩表</caption><!--定义表名字--><tr><!--定义行--><th>编号</th><th>姓名</th><th>成绩</th></tr></thead><tbody><!--定义身体部分--><tr><td>1</td><td>aa</td><td>11</td></tr><tr><td>2</td><td>bb</td><td>22</td></tr></tbody><!--定义末尾部分--><tfoot>aaaaaaa</tfoot></table><table border="1" width="500" bgcolor="#ffe4c4"><thead><!--定义头部分--><caption>成绩表</caption><!--定义表名字--><tr><!--定义行--><th rowspan="2">编号</th><!--合并列--><th>姓名</th><th>成绩</th></tr></thead><tbody><!--定义身体部分--><tr><td>1</td><td>aa</td></tr><tr><!--合并行--><td>2</td><td colspan="2">22</td></tr></tbody><!--定义末尾部分--><tfoot>aaaaaaa</tfoot></table>
</body>
</html>