<!DOCTYPE html><!-- 告诉浏览器这是html文档-->
<html lang="en"><!-- lang=“en” 的作用是声明这个文档的内容所使用的语言是英文，如果想要改成中文简体，将en改成zh-Hans-->
<head> <!-- head里面的内容是文档使用的标题集，文档的样式-->
<meta charset="utf-8"><!--用来设置文档所使用的字符集为utf-8--><!--UTF-8是绝大部分编辑默认的字符集 -->
<title>ZzkTxdy</title><!--将文档在浏览器的标签栏的名字改为ZzkTxdy-->
</head>
<body>
欢迎观看：<a href="http://php.cn">PHP中文网</a><!--链接标签-->
<!--文本元素：段落<p>,标题<h1~h6>,格式化<pre>-->
<h1 style="color:red;">ZzkTql</h1><!--标题元素，其中style="color:red;"可以设置标题颜色-->
<h2>ZzkTql</h2>
<h3>ZzkTql</h3>
<h4>ZzkTql</h4>
<h5>ZzkTql</h5>
<h6>ZzkTql</h6>
<p>
HTML5<!--依然只在同一行显示-->
是下一代
HTML标准
</p><!--<p>是典型的块元素标签，独占一行显示-->
<p>
春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<!--将HTML文档中的内容原样输出特别适合代码等，需要格式化输出数据~~，用<pre标签实现>-->
<pre style="font-size: large;"><!--可以设置字体大小-->
春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</pre>
<!--下面这些是语义标签-->
<!--时间文本用<time>标签包装-->
<!--地点文本用<address>标签包装-->
<p>今天下午<time>4点到6点</time> <address>在小会议室开会</address>~~ </p>
<!--del元素给出删除线-->
<p>苹果MacBook pro笔记本原价：<del>13999元</del>，现价：9999元</p>
<!--ins元素给出下划线-->
<!--u元素也可以给出下划线-->
<!--<ins>和<u>标签内容展示效果相同，语义不同-->
<p>PHP中文网是一个<ins>永久免费</ins>的学习平台</p>
<p>PHP中文网是一个<u>永久免费</u>的学习平台</p>
<!--strong元素可以给出加粗效果和强调语义-->
<!--b元素也可以给出加粗效果，但是并没有特殊含义。推荐使用strong-->
<p>中国强烈<strong>反对韩国部署萨德</strong>反导系统</p>
<p>中国强烈<b>反对韩国部署萨德</b>反导系统</p>
<!--em也起强调作用，但是强调的内容将以斜体的内容显示-->
<!--i没有强调作用，但是会给标记的内容给出斜体效果-->
<p>中国强烈<em>反对韩国部署萨德</em>反导系统</p>
<p>中国强烈<i>反对韩国部署萨德</i>反导系统</p>
<!--mark会给出所标记的内容高亮显示-->
<p>我爱学习，<mark>学习使我快乐</mark></p>
<p>我爱学习，<mark style="color: blue;">学习使我快乐</mark></p><!--这个只会是字体变为蓝色-->
<!--code用来包装文档中的代码片段-->
<p>
#include<iostream>
#include<cstdio>
using namespace std;
int main()
{
printf("Hello Vscode");
return 0;
}
</p>
<code>
#include<iostream>
#include<cstdio>
using namespace std;
int main()
{
printf("Hello Vscode");
return 0;
}
</code>
<!--pre和code通常是成对出现的-->
<pre>
<code>
#include<iostream>
#include<cstdio>
using namespace std;
int main()
{
printf("Hello Vscode");
return 0;
}
</code>
</pre>
<!--表格元素<table>-->
<!--表头单元格用th表示，默认是加粗-->
<!--标题<caption>,头部<thead>,主体<tbody>,底部<tfoot>-->
<table border="1" cellspacing="0" cellpadding="5">
<!--border给单元格加上边框，cellspacing设置单元格之间的间距，cellpadding设置单元格的大小-->
<caption>江湖精英班成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>PHP</th>
<th>Python</th>
<th>Java</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">郭靖</td><!--既执行跨行操作又执行跨列操作-->
<!--<td>90</td>-->
<td>84</td>
<td>89</td>
</tr>
<tr>
<!--<td>洪七</td>-->
<!--<td>76</td>-->
<td>69</td>
<td>93</td>
</tr>
<tr>
<td style="color:red">杨康</td><!--设置字体颜色-->
<td>68</td>
<td>79</td>
<td>43</td>
</tr>
<tr>
<td>黄蓉</td>
<td>99</td>
<td>98</td>
<td>95</td>
</tr>
<tr>
<td>欧阳锋</td>
<td>87</td>
<td>74</td>
<td>96</td>
</tr>
</tbody>
<tfoot>
<td colspan="2">平均成绩</td><!--执行跨列操作-->
<!--<td>84</td>-->
<td>80</td>
<td>83</td>
</tfoot>
</table>
<!--如果想在网页上显示图片，应该使用<img>标签-->
<!--使用alt属性，可以给图像添加一些说明性的文字。注：alt属性必须设置，请给予足够重视-->
<img src="image/1.jpg" width="300" alt="Everything is possible!"><!--width和height设置其中一个即可，另一个会等比缩放的-->
<!--有序列表和无序列表-->
<!--ol中start可以设置起始序列号-->
<ol start="6">
<li>好好学习</li>
<li>天天向上</li>
<li>早睡早起</li>
<li>准时吃饭</li>
</ol>
<br />
<!--如果想将有序列表逆序排列的话在ol中加入reversed属性即可-->
<!--reversed和start不能同时使用-->
<!--value可以设置某个列表项的序号,这时它会按照设置顺序影响下面的列表项序号-->
<ol reversed >
<li>好好学习</li>
<li>天天向上</li>
<li value="4">早睡早起</li>
<li>准时吃饭</li>
</ol>
<!--无序列表-->
<ul>
<li>好好学习</li>
<li>天天向上</li>
<li>早睡早起</li>
<li>准时吃饭</li>
</ul>
<!--描述列表三对标签：<dl><dt><dd>-->
<h2>PHP中文网</h2>
<dl>
<dt>服务对象：</dt>
<dd>web开发新人，开发者以及爱好者。</dd>
<dt>服务宗旨：</dt>
<dd>打造国内领先的一站式永久免费学习的学习平台</dd>
</dl>
</body>
</html>
HTML代码-1