第一个例子

  1. <!-- html顶层标签 -->
  2. <html> 
  3.     <!-- html 网页头部 -->
  4.     <head>
  5.         <!-- 设置编码 -->
  6.         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  7.         <!-- 设置标题 -->
  8.         <title>我是标题</title>
  9.     </head>
  10.     <!-- html 网页内容 -->
  11.     <body>
  12.         <!-- 测试账户 test test -->
  13.         我是网页内容123
  14.     </body>
  15. </html>

向导生成的代码

  1. <!-- 文档声明 -->
  2. <!DOCTYPE html>
  3. <!-- 网页语言 -->
  4. <html lang="en">
  5.   <!-- 网页头 -->
  6.   <head>
  7.     <!-- 设置网页编码 -->
  8.     <meta charset="UTF-8" />
  9.     <!-- 设置缩放，主要针对手机浏览器 -->
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  11.     <!-- 设置兼容性，主要针对ie -->
  12.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  13.     <!-- 设置网页标题 -->
  14.     <title>Document</title>
  15.     <!-- 设置网页js代码 -->
  16.     <script type="text/javascript">
  17.       // 写js代码
  18.     </script>
  19.   </head>
  20.   <!-- 网页内容 -->
  21.   <body></body>
  22. </html>

文本标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>文本标签</title>
  8. </head>
  9. <body>
  10.     <!-- h1~h6 标题标签 -->
  11.     <h1 align="center">标题1</h1>
  12.     <h2>标题2</h2>
  13.     <h3>标题3</h3>
  14.     <h4>标题4</h4>
  15.     <h5>标题5</h5>
  16.     <h6>标题6</h6>
  17.     <!-- 分割线 -->
  18.     <hr />
  19.     <!-- 换行 -->
  20.     <br />
  21.     <!-- p 段落标签 -->
  22.     <p>段落1</p>
  23.     <p>段落2</p>
  25.     斜体：<i>斜体</i>                   <br />
  26.     强调斜体：<em>强调斜体</em>          <br />
  27.     加粗字体：<b>加粗字体</b>            <br />
  28.     强调加粗：<strong>强调加粗</strong>  <br />
  29.     删除线：<del>删除线</del>            <br />
  31.     上标： 2的平方:2<sup>2</sup>        <br />
  32.     下标： 氧气 O<sub>2</sub>           <br />
  34.     <hr />
  35.     <!-- < &lt;  > &gt; ® &reg; ©  &copy;  ™ &trade; 空格 &nbsp;-->
  36.     特殊符号：&lt; &gt;  &reg; &copy; &trade; &nbsp;
  38. </body>
  39. </html>

列表标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>列表标签</title>
  8. </head>
  9. <body>
  10.     <h3>无序列表</h3>
  11.     <!-- type属性可以设置在ul中，也可以设置在li中，区别就是ul设置整体-->
  12.     <ul>
  13.         <li type="square">列表1</li>
  14.         <li type="circle">列表2</li>
  15.         <li type="disc">列表3</li>
  16.     </ul>
  17.     <h3>有序列表</h3>
  18.     <!-- type属性可以设置在ol中，也可以设置在li中，区别就是ol设置整体-->
  19.     <ol>
  20.         <li>列表1</li>
  21.         <li type="a">列表2</li>
  22.         <li type="A">列表3</li>
  23.         <li type="i">列表4</li>
  24.         <li type="I">列表5</li>
  25.     </ol>
  26.     <h3>定义列表</h3>
  27.     <dl>
  28.         <dt>第一部分</dt>
  29.         <dd>html</dd>
  30.         <dd>CSS</dd>
  31.         <dt>第二部分</dt>
  32.         <dd>web漏洞</dd>
  33.         <dd>代码审计</dd>
  34.     </dl>
  36. </body>
  37. </html>

图像

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>图像标签</title>
  8. </head>
  9. <body>
  10.     <h3>图片标签</h3>
  11.     <!-- src指定图片路径， alt指定描述文字，当图片失效时显示，srcset设定根据屏幕密度、宽度、高度加载不同的图片 -->
  12.     <!-- ./ 代表当前目录 -->
  13.     本地相对路径：<br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  14.     <!-- ../ 代表上一级目录 -->
  15.     本地相对路径：<br/><img src="../HTML代码/img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  16.     本地绝对路径：<br/><img src="E:/code/HTML代码/img/2.jpg" alt="" srcset=""><br/>
  17.     网络全路径：<br/><img src="http://wx1.sinaimg.cn/large/0076BSS5ly1g43c6oj9jtj30ci0i1abc.jpg" alt=""><br/>
  19. </body>
  20. </html>

超连接

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>超链接</title>
  8. </head>
  9. <body>
  10.     <h3>超链接</h3>
  11.     <!-- href指定要访问的路径，可以是网址、具体文件路径， -->
  12.     <!-- target是打开方式，_blank是新开页面，_self是当前页面跳转 -->
  13.     <!-- title 指定 鼠标放在超链接是显示的文本 -->
  14.     <a href="http://www.15pb.com.cn" target="_blank" title="官网">十五派信息安全教育</a>
  15.     <a href="./img/3.jpg" target="_self">图片</a>
  17.     <br />
  19.     <!-- 页面内部跳转，使用锚点 -->
  20.     <!-- 指定锚点 top -->
  21.     <a href="#" name="top"></a>
  22.     <!-- 访问锚点 hack1 -->
  23.     <a href="#hack1">目录-黑客</a>
  24.     <!-- 访问锚点 hack2 -->
  25.     <a href="#hack2">目录-天使</a>
  27.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  28.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  29.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  30.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  31.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  32.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  33.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  34.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  35.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  37.     <!-- name 锚点名称 -->
  38.     <a href="#" name="hack1">黑客</a>
  39.     <br/><img src="./img/1.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  41.     <a href="#" name="hack2">天使</a>
  42.     <br/><img src="./img/5.jpg" alt="图片裂了，原本是黑客" srcset=""><br/>
  44.     <!-- 发邮件 -->
  45.     <a href="mailto:geekmade@qq.com" >反馈意见</a>
  47.     <!-- 访问锚点 top -->
  48.     <a href="#top">返回顶部</a>
  49. </body>
  50. </html>

表格

1

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  10.   <body align="center">
  11.       <!-- 表格 -->
  12.       <!-- border 设置边框宽度 cellpadding 设置表格内容与表格边框之间的填充大小-->
  13.       <!-- cellspacing 设置单元格之间的宽度 width设置表格的宽度, align设置排列位置-->
  14.       <table border="1" width="700px">
  15.           <!-- row col -->
  16.         <tr>
  17.            <td>星期</td>
  18.            <td>星期1</td>
  19.            <td>星期2</td>
  20.            <td>星期3</td>
  21.            <td>星期4</td>
  22.            <td>星期5</td>
  23.        </tr>
  24.        <tr>
  25.            <td>第1节</td>
  26.            <td>数</td>
  27.            <td>数</td>
  28.            <td>数</td>
  29.            <td>数</td>
  30.            <td>数</td>
  31.        </tr>
  32.        <tr>
  33.            <td>第2节</td>
  34.            <td>英</td>
  35.            <td>英</td>
  36.            <td>数</td>
  37.            <td>数</td>
  38.            <td>音</td>
  39.        </tr>
  40.        <tr>
  41.            <td>第3节</td>
  42.            <td>语</td>
  43.            <td>音</td>
  44.            <td>美</td>
  45.            <td>语</td>
  46.            <td>语</td>
  47.        </tr>
  48.        <tr>
  49.            <td>第4节</td>
  50.            <td>语</td>
  51.            <td>语</td>
  52.            <td>外</td>
  53.            <td>语</td>
  54.            <td>体</td>
  55.        </tr>
  56.        <tr>
  57.            <td>午休</td>
  58.            <td>午休</td>
  59.            <td>午休</td>
  60.            <td>午休</td>
  61.            <td>午休</td>
  62.            <td>午休</td>
  63.        </tr>
  64.        <tr>
  65.            <td>第5节</td>
  66.            <td>语</td>
  67.            <td>数</td>
  68.            <td>体</td>
  69.            <td>美</td>
  70.            <td>劳</td>
  71.        </tr>
  72.        <tr>
  73.            <td>第6节</td>
  74.            <td>自</td>
  75.            <td>自</td>
  76.            <td>自</td>
  77.            <td>自</td>
  78.            <td>自</td>
  79.        </tr>
  80.    </table>
  81.   </body>
  82. </html>

2.

image.png```

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  10.   <body align="center">
  11.       <!-- 表格 -->
  12.       <!-- border 设置边框宽度 cellpadding 设置表格内容与表格边框之间的填充大小-->
  13.       <!-- cellspacing 设置单元格之间的宽度 width设置表格的宽度, align设置排列位置-->
  14.     <table
  15.       border="1" cellpadding="5" cellspacing="0" width="500" align="center"
  16.     >
  17.     <!-- caption 设置表格标题 -->
  18.       <caption>员工信息</caption>
  19.       <tr>
  20.         <!-- th 设置表格头部,即第0行单元格 -->
  21.         <th>姓名</th>
  22.         <th>性别</th>
  23.         <!-- colspan 设置单元格跨列数量 -->
  24.         <th colspan="2">电话号码</th>
  25.       </tr>
  26.       <tr>
  27.           <!-- td 设置第一行单元格 -->
  28.         <td>男</td>
  29.         <td>张三</td>
  30.         <td>13711111111</td>
  31.         <!-- rowspan 设置单元格跨行数量 -->
  32.         <td rowspan="3">地址1</td>
  33.       </tr>
  34.       <tr>
  35.         <!-- td 设置第二行单元格 -->
  36.         <td>女</td>
  37.         <td>李思</td>
  38.         <td>13888888888</td>
  39.       </tr>
  40.       <tr>
  41.         <!-- td 设置第三行单元格 -->
  42.         <td>男</td>
  43.         <td>王五</td>
  44.         <td>13888888881</td>
  45.       </tr>
  46.     </table>
  47.   </body>
  48. </html>

3.

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  10.   <body align="center">
  11.       <!-- 表格 -->
  12.       <!-- border 设置边框宽度 cellpadding 设置表格内容与表格边框之间的填充大小-->
  13.       <!-- cellspacing 设置单元格之间的宽度 width设置表格的宽度, align设置排列位置-->
  14.       <table border="1" width="700px">
  15.         <tr>
  16.             <td>星期</td>
  17.             <td>星期1</td>
  18.             <td>星期2</td>
  19.             <td>星期3</td>
  20.             <td>星期4</td>
  21.             <td>星期5</td>
  22.         </tr>
  23.         <tr>
  24.             <td>第1节</td>
  25.             <td>数</td>
  26.             <td>数</td>
  27.             <td colspan="2" rowspan="2" align="center" valign="middle">数</td>
  29.             <td>数</td>
  30.         </tr>
  31.         <tr>
  32.             <td>第2节</td>
  33.             <td>英</td>
  34.             <td>英</td>
  36.             <td>音</td>
  37.         </tr>
  39.             <td>第3节</td>
  40.             <td rowspan="2">语</td>
  41.             <td>音</td>
  42.             <td>美</td>
  43.             <td rowspan="2">语</td>
  44.             <td>语</td>
  45.         </tr>
  46.         <tr>
  47.             <td>第4节</td>
  49.             <td>语</td>
  50.             <td>外</td>
  52.             <td>体</td>
  53.         </tr>
  54.         <tr>
  55.             <td colspan="6">午休</td>
  57.         </tr>
  58.         <tr>
  59.             <td>第5节</td>
  60.             <td>语</td>
  61.             <td>数</td>
  62.             <td>体</td>
  63.             <td>美</td>
  64.             <td>劳</td>
  65.         </tr>
  66.         <tr>
  67.             <td>第6节</td>
  68.             <td>自</td>
  69.             <td>自</td>
  70.             <td>自</td>
  71.             <td>自</td>
  72.             <td>自</td>
  73.         </tr>
  74.     </table>
  75.   </body>
  76. </html>

4.

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <table border="1" width="700px" style="background-color: rgb(255,0,0);">
  11.         <tr>
  12.             <td>星期</td>
  13.             <td>星期1</td>
  14.             <td>星期2</td>
  15.             <td>星期3</td>
  16.             <td>星期4</td>
  17.             <td>星期5</td>
  18.         </tr>
  19.         <tr>
  20.             <td>第1节</td>
  21.             <td>数</td>
  22.             <td>数</td>
  23.             <td>数</td>
  24.             <td>数</td>
  25.             <td>数</td>
  26.         </tr>
  27.         <tr>
  28.             <td>第2节</td>
  29.             <td>英</td>
  30.             <td>英</td>
  31.             <td>数</td>
  32.             <td>数</td>
  33.             <td>音</td>
  34.         </tr>
  36.             <td>第3节</td>
  37.             <!-- 关于水平对齐方式align和垂直对齐方式valign的使用 -->
  38.             <td rowspan="2"  align="center" valign="bottom">语</td>
  39.             <td>音</td>
  40.             <td>美</td>
  41.             <td rowspan="2">语</td>
  42.             <td>语</td>
  43.         </tr>
  44.         <tr>
  45.             <td>第4节</td>
  47.             <td>语</td>
  48.             <td>外</td>
  50.             <td>体</td>
  51.         </tr>
  52.         <tr>
  53.             <td colspan="6">午休</td>
  55.         </tr>
  56.         <tr>
  57.             <td>第5节</td>
  58.             <td>语</td>
  59.             <td>数</td>
  60.             <td>体</td>
  61.             <td>美</td>
  62.             <td>劳</td>
  63.         </tr>
  64.         <tr>
  65.             <td>第6节</td>
  66.             <td>自</td>
  67.             <td>自</td>
  68.             <td>自</td>
  69.             <td>自</td>
  70.             <td>自</td>
  71.         </tr>
  72.     </table>
  73. </body>
  74. </html>

表单

1

image.png

2

image.png

3

image.png

4

image.png

5

image.png

提交

1.

image.png

2.

image.png

3.

image.png